feat(service): Add YouTube service (#60)

Also, added a Threads story.
5ouma · Nov 22, 2024 · 9825af8 · 9825af8
1 parent d06d6df
commit 9825af8
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 1 deletion.
diff --git a/.github/README.md b/.github/README.md
@@ -96,8 +96,9 @@
 > - Mastodon
 > - Misskey
 > - Posts
+> - Threads
 > - Twitter
-> - Mail
+> - YouTube
 
 <br /><br />
 

diff --git a/src/components/SNS/SNS.stories.ts b/src/components/SNS/SNS.stories.ts
@@ -13,4 +13,6 @@ export const Instagram = { args: stories.Instagram };
 export const Mastodon = { args: stories.Mastodon };
 export const Misskey = { args: stories.Misskey };
 export const Posts = { args: stories.Posts };
+export const Threads = { args: stories.Threads };
 export const Twitter = { args: stories.Twitter };
+export const YouTube = { args: stories.YouTube };
diff --git a/src/components/SNS/__snapshots__/SNS.test.ts.snap b/src/components/SNS/__snapshots__/SNS.test.ts.snap
@@ -14,4 +14,8 @@ exports[`SNS > Valid service and ID > Misskey 1`] = `"<a href="https://misskey.i
 
 exports[`SNS > Valid service and ID > Posts 1`] = `"<a href="https://posts.cv/support" target="_blank" rel="noopener noreferrer" aria-label="Go to support's profile on Posts" data-astro-cid-ilwnnabb style="--accent-color: #111111;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="simple-icons:readdotcv">   <symbol id="ai:simple-icons:readdotcv" viewBox="0 0 24 24"><path fill="currentColor" d="M20.832 3.367L8.668.108a3.15 3.15 0 0 0-3.856 2.226L.943 16.777a3.15 3.15 0 0 0 2.226 3.856l12.163 3.259a3.15 3.15 0 0 0 3.855-2.226l3.87-14.443a3.15 3.15 0 0 0-2.226-3.856M6.332 2.741A1.574 1.574 0 0 1 8.26 1.628l12.163 3.26a1.574 1.574 0 0 1 1.113 1.927l-3.87 14.444a1.574 1.574 0 0 1-1.928 1.113l-12.163-3.26a1.574 1.574 0 0 1-1.113-1.927zm2.634 2.336a.787.787 0 1 0-.407 1.52l9.122 2.444a.787.787 0 1 0 .407-1.52zM6.985 9.434a.787.787 0 0 1 .963-.557l9.123 2.445a.787.787 0 0 1-.408 1.52l-9.122-2.444a.787.787 0 0 1-.556-.964m-.055 3.244a.787.787 0 0 0-.407 1.52l5.32 1.427a.787.787 0 0 0 .408-1.52z"/></symbol><use href="#ai:simple-icons:readdotcv"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #111111;">support</span> </a> "`;
 
+exports[`SNS > Valid service and ID > Threads 1`] = `"<a href="https://threads.net/@threads" target="_blank" rel="noopener noreferrer" aria-label="Go to @threads's profile on Threads" data-astro-cid-ilwnnabb style="--accent-color: #000000;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="mingcute:threads-line">   <symbol id="ai:mingcute:threads-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M5.45 4.623C6.997 2.974 9.24 2 12.017 2c4.565 0 7.592 2.631 8.55 6.277a1 1 0 0 1-1.935.508C17.905 6.022 15.676 4 12.016 4c-2.286 0-3.98.789-5.106 1.99c-1.136 1.212-1.769 2.923-1.769 4.885v2.25c0 1.962.633 3.673 1.769 4.884C8.036 19.212 9.73 20 12.016 20c1.655 0 2.968-.384 3.976-1.005c1.015-.625 1.62-1.454 1.79-2.405c.195-1.096-.045-1.848-.458-2.391a3.2 3.2 0 0 0-.814-.741c-.135.749-.376 1.456-.74 2.01c-1.342 2.039-3.908 2.214-5.6 1.539c-.916-.365-1.701-1.364-1.945-2.435a3 3 0 0 1 .141-1.843c.265-.636.756-1.178 1.455-1.59c.692-.409 1.72-.597 2.739-.625c.614-.017 1.28.024 1.95.133c-.14-.65-.377-1.135-.644-1.384c-.484-.45-1.286-.767-2.09-.762c-.777.006-1.436.305-1.83.935a1 1 0 1 1-1.696-1.06c.837-1.338 2.216-1.865 3.513-1.875c1.27-.009 2.578.472 3.466 1.298c.898.836 1.284 2.207 1.384 3.454c.874.381 1.7.94 2.305 1.737c.781 1.03 1.117 2.358.833 3.951c-.29 1.624-1.315 2.898-2.71 3.757C15.673 21.54 13.985 22 12.016 22c-2.776 0-5.02-.974-6.565-2.623c-1.536-1.638-2.31-3.864-2.31-6.252v-2.25c0-2.388.774-4.614 2.31-6.252ZM14.6 12.7a8.4 8.4 0 0 0-1.986-.186c-.891.024-1.516.193-1.777.347c-.384.227-.55.458-.624.637a1.02 1.02 0 0 0-.038.63c.122.536.525.938.736 1.021c1.126.45 2.535.212 3.188-.78c.235-.358.422-.96.5-1.669Z"/></g></symbol><use href="#ai:mingcute:threads-line"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #000000;">@threads</span> </a> "`;
+
 exports[`SNS > Valid service and ID > Twitter 1`] = `"<a href="https://twitter.com/twitter" target="_blank" rel="noopener noreferrer" aria-label="Go to twitter's profile on Twitter" data-astro-cid-ilwnnabb style="--accent-color: #1D9BF0;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="mingcute:twitter-line">   <symbol id="ai:mingcute:twitter-line" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M17.817 6.989c-.353-.508-1.297-1.222-2.826-.914c-.892.179-1.425.62-1.764 1.202c-.361.62-.536 1.463-.536 2.444a1 1 0 0 1-1 1c-2.366 0-4.618-.703-6.513-2.604a10.5 10.5 0 0 0-.168 2.34c.053 1.086.312 2.175.927 3.108c.605.917 1.6 1.757 3.264 2.285a1 1 0 0 1 .41 1.655a8.5 8.5 0 0 1-1.796 1.405c1.06.11 2.082.118 3.03.032c1.92-.174 3.449-.723 4.405-1.5c2.013-1.632 3.09-4.066 2.89-8.144c-.034-.67.613-1.393.925-1.942c-.471.088-.943.072-1.248-.367M4.594 4.984a1 1 0 0 1 .941.429C7.011 7.572 8.783 8.47 10.75 8.674c.096-.841.323-1.672.75-2.404c.626-1.074 1.644-1.864 3.098-2.156c2.01-.404 3.54.324 4.427 1.215l1.792-.335a1 1 0 0 1 1.053 1.478l-1.72 3.022c.157 4.361-1.055 7.405-3.639 9.502c-1.37 1.112-3.332 1.743-5.485 1.938c-2.17.196-4.623-.041-7.061-.753a1 1 0 0 1 .007-1.922c1.226-.349 2.16-.65 3.003-1.177c-1.199-.636-2.082-1.468-2.707-2.416c-.868-1.318-1.19-2.788-1.254-4.113S3.141 8 3.343 7.115c.115-.505.249-1.011.434-1.495a1 1 0 0 1 .818-.636Z"/></g></symbol><use href="#ai:mingcute:twitter-line"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #1D9BF0;">twitter</span> </a> "`;
+
+exports[`SNS > Valid service and ID > YouTube 1`] = `"<a href="https://youtube.com/youtube" target="_blank" rel="noopener noreferrer" aria-label="Go to youtube's profile on YouTube" data-astro-cid-ilwnnabb style="--accent-color: #FF0000;"> <svg width="1em" height="1em" data-astro-cid-ilwnnabb data-icon="mingcute:youtube-line">   <symbol id="ai:mingcute:youtube-line" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m0 2c-.825 0-1.674.022-2.5.056l-.978.047l-.939.055l-.882.06l-.808.063a1.8 1.8 0 0 0-1.666 1.623C4.11 9.113 4 10.618 4 12s.11 2.887.227 4.096c.085.872.777 1.55 1.666 1.623l.808.062l.882.06l.939.056l.978.047c.826.034 1.675.056 2.5.056s1.674-.022 2.5-.056l.978-.047l.939-.055l.882-.06l.808-.063a1.8 1.8 0 0 0 1.666-1.623C19.89 14.887 20 13.382 20 12s-.11-2.887-.227-4.096a1.8 1.8 0 0 0-1.666-1.623l-.808-.062l-.882-.06l-.939-.056l-.978-.047A61 61 0 0 0 12 6m-2 3.575a.6.6 0 0 1 .819-.559l.081.04l4.2 2.424a.6.6 0 0 1 .085.98l-.085.06l-4.2 2.425a.6.6 0 0 1-.894-.43l-.006-.09z"/></g></symbol><use href="#ai:mingcute:youtube-line"></use>  </svg> <span data-astro-cid-ilwnnabb style="--accent-color: #FF0000;">youtube</span> </a> "`;
diff --git a/src/components/SNS/stories.ts b/src/components/SNS/stories.ts
@@ -35,7 +35,17 @@ export const Posts: Props = {
   id: "support",
 };
 
+export const Threads: Props = {
+  service: "Threads",
+  id: "@threads",
+};
+
 export const Twitter: Props = {
   service: "Twitter",
   id: "twitter",
 };
+
+export const YouTube: Props = {
+  service: "YouTube",
+  id: "youtube",
+};
diff --git a/src/types/services.ts b/src/types/services.ts
@@ -50,6 +50,11 @@ export const services = {
     icon: "mingcute:twitter-line",
     color: "#1D9BF0",
   },
+  YouTube: {
+    url: "youtube.com",
+    icon: "mingcute:youtube-line",
+    color: "#FF0000",
+  },
 } as const satisfies Record<string, info>;
 
 export type serviceName = keyof typeof services;