Feature/new services (#63)

* add `Facebook` & `LinkedIn`

* add `Blogger` & `Pinterest` & `Reddit` & `Trello`

* update `CHANGELOG.md`

* Update CHANGELOG.md

---------

Co-authored-by: AmirHosein Rostami <[email protected]>

CHANGELOG.md

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Support `Reddit`
+- Support `Trello`
+- Support `Pinterest`
+- Support `Blogger`
+- Support `LinkedIn`
+- Support `Facebook`
+- Load `Share to` modal by link (Custom Share)
+### Changed
+- 404 page moved to `public` folder
 ## [0.4] - 2024-12-24
 ### Added
 - Support `Hacker News`

src/Data/services.data.ts

@@ -1,10 +1,16 @@
+import X from '@assets/icons/services/x.svg';
 import Email from '@assets/icons/services/email.svg';
 import Gmail from '@assets/icons/services/gmail.svg';
+import Yahoo from '@assets/icons/services/yahoo.svg';
+import Reddit from '@assets/icons/services/reddit.svg';
+import Trello from '@assets/icons/services/trello.svg';
+import Blogger from '@assets/icons/services/blogger.svg';
 import Telegram from '@assets/icons/services/telegram.svg';
 import Whatsapp from '@assets/icons/services/whatsapp.svg';
-import Yahoo from '@assets/icons/services/yahoo.svg';
+import Facebook from '@assets/icons/services/facebook.svg';
+import Linkedin from '@assets/icons/services/linkedin.svg';
+import Pinterest from '@assets/icons/services/pinterest.svg';
 import HackerNews from '@assets/icons/services/hacker-news.svg';
-import X from '@assets/icons/services/x.svg';
 
 export const services_url = (url: string, subject?: string): { [key: string]: string } => {
 	return {
@@ -15,6 +21,12 @@ export const services_url = (url: string, subject?: string): { [key: string]: st
 		WhatsApp: `https://api.whatsapp.com/send?text=${subject}%20${url}`,
 		'Yahoo Mail': `http://compose.mail.yahoo.com/?subject=${subject}&body=${url}`,
 		'Hacker News': `https://news.ycombinator.com/submitlink?u=${url}&t=${subject}`,
+		Facebook: `https://www.facebook.com/sharer/sharer.php?u=${url}&t=${subject}`,
+		LinkedIn: `https://www.linkedin.com/shareArticle?mini=true&url=${url}&text=${subject}`,
+		Reddit: `https://www.reddit.com/submit?url=${url}&title=${subject}`,
+		Pinterest: `https://www.pinterest.com/pin/create/button/?url=${url}&media=&description=${subject}`,
+		Blogger: `https://www.blogger.com/blog_this.pyra?u=${url}&n=${subject}&t&pli=1`,
+		Trello: `https://trello.com/add-card?name=${subject}&desc=${url}`,
 	};
 };
 
@@ -61,4 +73,40 @@ export const Services = [
 		iconUrl: 'https://github.com/openscilab/mybutton/raw/main/src/Assets/icons/services/hacker-news.svg',
 		bg: '#ff6600',
 	},
+	{
+		title: 'Facebook',
+		icon: Facebook,
+		iconUrl: 'https://github.com/openscilab/mybutton/raw/main/src/Assets/icons/services/facebook.svg',
+		bg: '#0866ff',
+	},
+	{
+		title: 'LinkedIn',
+		icon: Linkedin,
+		iconUrl: 'https://github.com/openscilab/mybutton/raw/main/src/Assets/icons/services/linkedin.svg',
+		bg: '#007bb5',
+	},
+	{
+		title: 'Reddit',
+		icon: Reddit,
+		iconUrl: 'https://github.com/openscilab/mybutton/raw/main/src/Assets/icons/services/reddit.svg',
+		bg: '#ff4500',
+	},
+	{
+		title: 'Pinterest',
+		icon: Pinterest,
+		iconUrl: 'https://github.com/openscilab/mybutton/raw/main/src/Assets/icons/services/pinterest.svg',
+		bg: '#e60023',
+	},
+	{
+		title: 'Blogger',
+		icon: Blogger,
+		iconUrl: 'https://github.com/openscilab/mybutton/raw/main/src/Assets/icons/services/blogger.svg',
+		bg: '#fda352',
+	},
+	{
+		title: 'Trello',
+		icon: Trello,
+		iconUrl: 'https://github.com/openscilab/mybutton/raw/main/src/Assets/icons/services/trello.svg',
+		bg: '#0079bf',
+	},
 ];

src/Views/Layout/ShareModal/index.scss

@@ -87,7 +87,7 @@
 			}
 
 			.services-list {
-				@apply w-full overflow-y-auto mt-8;
+				@apply w-full overflow-y-auto mt-6;
 
 				.rs-col {
 					@apply md:flex md:justify-center sm:mb-2;

src/Views/Pages/GetButton/index.scss

@@ -80,7 +80,7 @@
 		}
 
 		.buttons {
-			@apply flex flex-col items-center sm:flex-row sm:justify-center w-full mt-10;
+			@apply flex flex-col items-center sm:flex-row sm:justify-center w-full mt-8;
 
 			.rs-btn {
 				@apply w-40 text-white font-medium;