Refactor icons a bit + add Instagram

facebook · Dec 26, 2024 · 330cef0 · 330cef0
1 parent 50f9573
commit 330cef0
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 4 deletions.
diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts b/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts
@@ -17,6 +17,7 @@ describe('normalizeSocials', () => {
       stackoverflow: 'ozakione',
       threads: 'gingergeekuk',
       bluesky: 'gingergeek.co.uk',
+      instagram: 'thisweekinreact',
       twitch: 'gingergeek',
       youtube: 'gingergeekuk',
       mastodon: 'Mastodon',
@@ -27,6 +28,7 @@ describe('normalizeSocials', () => {
       {
         "bluesky": "https://bsky.app/profile/gingergeek.co.uk",
         "github": "https://github.com/ozakione",
+        "instagram": "https://www.instagram.com/thisweekinreact",
         "linkedin": "https://www.linkedin.com/in/ozakione/",
         "mastodon": "https://mastodon.social/@Mastodon",
         "stackoverflow": "https://stackoverflow.com/users/ozakione",
@@ -44,6 +46,7 @@ describe('normalizeSocials', () => {
       linkedIn: 'ozakione',
       gitHub: 'ozakione',
       STACKoverflow: 'ozakione',
+      instaGRam: 'thisweekinreact',
       BLUESKY: 'gingergeek.co.uk',
       tHrEaDs: 'gingergeekuk',
     };
@@ -52,6 +55,7 @@ describe('normalizeSocials', () => {
       {
         "bluesky": "https://bsky.app/profile/gingergeek.co.uk",
         "github": "https://github.com/ozakione",
+        "instagram": "https://www.instagram.com/thisweekinreact",
         "linkedin": "https://www.linkedin.com/in/ozakione/",
         "stackoverflow": "https://stackoverflow.com/users/ozakione",
         "threads": "https://www.threads.net/@gingergeekuk",

diff --git a/packages/docusaurus-plugin-content-blog/src/authorsSocials.ts b/packages/docusaurus-plugin-content-blog/src/authorsSocials.ts
@@ -22,6 +22,7 @@ export const AuthorSocialsSchema = Joi.object<AuthorSocials>({
     .custom((val) => String(val)),
   x: Joi.string(),
   bluesky: Joi.string(),
+  instagram: Joi.string(),
   threads: Joi.string(),
   mastodon: Joi.string(),
   twitch: Joi.string(),
@@ -41,6 +42,7 @@ const PredefinedPlatformNormalizers: Record<
   stackoverflow: (userId: string) =>
     `https://stackoverflow.com/users/${userId}`,
   bluesky: (handle: string) => `https://bsky.app/profile/${handle}`,
+  instagram: (handle: string) => `https://www.instagram.com/${handle}`,
   threads: (handle: string) => `https://www.threads.net/@${handle}`,
   mastodon: (handle: string) => `https://mastodon.social/@${handle}`, // can be in format [email protected] and it will redirect if needed
   twitch: (handle: string) => `https://twitch.tv/${handle}`,

diff --git a/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts b/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts
@@ -48,9 +48,9 @@ declare module '@docusaurus/plugin-content-blog' {
     | 'stackoverflow'
     | 'x'
     | 'bluesky'
+    | 'instagram'
     | 'threads'
     | 'mastodon'
-    | 'bluesky'
     | 'youtube'
     | 'twitch';
 

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -1716,6 +1716,14 @@ declare module '@theme/Icon/Socials/Bluesky' {
   export default function Bluesky(props: Props): ReactNode;
 }
 
+declare module '@theme/Icon/Socials/Instagram' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Instagram(props: Props): ReactNode;
+}
+
 declare module '@theme/Icon/Socials/Threads' {
   import type {ComponentProps, ReactNode} from 'react';
 

diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/Socials/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/Socials/index.tsx
@@ -18,6 +18,7 @@ import StackOverflow from '@theme/Icon/Socials/StackOverflow';
 import LinkedIn from '@theme/Icon/Socials/LinkedIn';
 import DefaultSocialIcon from '@theme/Icon/Socials/Default';
 import Bluesky from '@theme/Icon/Socials/Bluesky';
+import Instagram from '@theme/Icon/Socials/Instagram';
 import Threads from '@theme/Icon/Socials/Threads';
 import Youtube from '@theme/Icon/Socials/YouTube';
 import Mastodon from '@theme/Icon/Socials/Mastodon';
@@ -36,6 +37,7 @@ const SocialPlatformConfigs: Record<string, SocialPlatformConfig> = {
   linkedin: {Icon: LinkedIn, label: 'LinkedIn'},
   x: {Icon: X, label: 'X'},
   bluesky: {Icon: Bluesky, label: 'Bluesky'},
+  instagram: {Icon: Instagram, label: 'Instagram'},
   threads: {Icon: Threads, label: 'Threads'},
   mastodon: {Icon: Mastodon, label: 'Mastodon'},
   youtube: {Icon: Youtube, label: 'YouTube'},

diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Instagram/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Instagram/index.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type {SVGProps, ReactNode, CSSProperties} from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+// SVG Source: https://svgl.app/
+function Instagram(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 256"
+      style={{'--dark': '#000', '--light': '#fff'} as CSSProperties}
+      {...props}
+      className={clsx(props.className, styles.instagramSvg)}>
+      <path d="M128 23.064c34.177 0 38.225.13 51.722.745 12.48.57 19.258 2.655 23.769 4.408 5.974 2.322 10.238 5.096 14.717 9.575 4.48 4.479 7.253 8.743 9.575 14.717 1.753 4.511 3.838 11.289 4.408 23.768.615 13.498.745 17.546.745 51.723 0 34.178-.13 38.226-.745 51.723-.57 12.48-2.655 19.257-4.408 23.768-2.322 5.974-5.096 10.239-9.575 14.718-4.479 4.479-8.743 7.253-14.717 9.574-4.511 1.753-11.289 3.839-23.769 4.408-13.495.616-17.543.746-51.722.746-34.18 0-38.228-.13-51.723-.746-12.48-.57-19.257-2.655-23.768-4.408-5.974-2.321-10.239-5.095-14.718-9.574-4.479-4.48-7.253-8.744-9.574-14.718-1.753-4.51-3.839-11.288-4.408-23.768-.616-13.497-.746-17.545-.746-51.723 0-34.177.13-38.225.746-51.722.57-12.48 2.655-19.258 4.408-23.769 2.321-5.974 5.095-10.238 9.574-14.717 4.48-4.48 8.744-7.253 14.718-9.575 4.51-1.753 11.288-3.838 23.768-4.408 13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95-8.418 3.271-15.556 7.648-22.672 14.764C14.367 28.6 9.991 35.738 6.72 44.155 3.555 52.297 1.392 61.602.77 75.226.147 88.878 0 93.237 0 128c0 34.763.147 39.122.77 52.774.622 13.625 2.785 22.93 5.95 31.071 3.27 8.417 7.647 15.556 14.763 22.672 7.116 7.116 14.254 11.492 22.672 14.763 8.142 3.165 17.446 5.328 31.07 5.95 13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95 8.418-3.27 15.556-7.647 22.672-14.763 7.116-7.116 11.493-14.254 14.764-22.672 3.164-8.142 5.328-17.446 5.95-31.07.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07-3.271-8.418-7.648-15.556-14.764-22.672C227.4 14.368 220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0Zm0 62.27C91.698 62.27 62.27 91.7 62.27 128c0 36.302 29.428 65.73 65.73 65.73 36.301 0 65.73-29.428 65.73-65.73 0-36.301-29.429-65.73-65.73-65.73Zm0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667-19.103 42.667-42.667 42.667Zm83.686-110.994c0 8.484-6.876 15.36-15.36 15.36-8.483 0-15.36-6.876-15.36-15.36 0-8.483 6.877-15.36 15.36-15.36 8.484 0 15.36 6.877 15.36 15.36Z" />
+    </svg>
+  );
+}
+
+export default Instagram;
diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Instagram/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Instagram/styles.module.css
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+[data-theme='dark'] .instagramSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .instagramSvg {
+  fill: var(--dark);
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Mastodon/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Mastodon/index.tsx
@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {useId} from 'react';
 import type {SVGProps, ReactNode} from 'react';
 
 // SVG Source: https://svgl.app/
 function Mastodon(props: SVGProps<SVGSVGElement>): ReactNode {
+  const gradientId = useId();
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -18,7 +20,7 @@ function Mastodon(props: SVGProps<SVGSVGElement>): ReactNode {
       height="1em"
       {...props}>
       <path
-        fill="url(#a)"
+        fill={`url(#${gradientId})`}
         d="M60.754 14.39C59.814 7.406 53.727 1.903 46.512.836 45.294.656 40.682 0 29.997 0h-.08C19.23 0 16.938.656 15.72.836 8.705 1.873 2.299 6.82.745 13.886c-.748 3.48-.828 7.338-.689 10.877.198 5.075.237 10.142.697 15.197a71.482 71.482 0 0 0 1.664 9.968c1.477 6.056 7.458 11.096 13.317 13.152a35.718 35.718 0 0 0 19.484 1.028 28.365 28.365 0 0 0 2.107-.576c1.572-.5 3.413-1.057 4.766-2.038a.154.154 0 0 0 .062-.118v-4.899a.146.146 0 0 0-.055-.111.145.145 0 0 0-.122-.028 54 54 0 0 1-12.644 1.478c-7.328 0-9.298-3.478-9.863-4.925a15.258 15.258 0 0 1-.857-3.882.142.142 0 0 1 .178-.145 52.976 52.976 0 0 0 12.437 1.477c1.007 0 2.012 0 3.02-.026 4.213-.119 8.654-.334 12.8-1.144.103-.02.206-.038.295-.065 6.539-1.255 12.762-5.196 13.394-15.176.024-.393.083-4.115.083-4.523.003-1.386.446-9.829-.065-15.017Z"
       />
       <path
@@ -27,7 +29,7 @@ function Mastodon(props: SVGProps<SVGSVGElement>): ReactNode {
       />
       <defs>
         <linearGradient
-          id="a"
+          id={gradientId}
           x1={30.5}
           x2={30.5}
           y1={0}

diff --git a/website/_dogfooding/_blog tests/2024-07-03-multiple-authors.mdx b/website/_dogfooding/_blog tests/2024-07-03-multiple-authors.mdx
@@ -9,11 +9,13 @@ authors:
       github: https://github.com/slorber
       stackoverflow: https://stackoverflow.com/users/82609/sebastien-lorber
       linkedin: https://www.linkedin.com/in/sebastienlorber/
+      instagram: https://www.instagram.com/thisweekinreact/
       newsletter: https://thisweekinreact.com/newsletter
   - name: Sébastien Lorber
     imageURL: https://github.com/slorber.png
     socials:
       x: https://x.com/sebastienlorber
+      instagram: thisweekinreact
   - name: Zed Spencer-Milnes
     title: All the socials test
     urL: https://gingergeek.co.uk

diff --git a/website/blog/authors.yml b/website/blog/authors.yml
@@ -27,11 +27,12 @@ slorber:
   description: >
     A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.
 
-
   socials:
+    bluesky: sebastienlorber.com
     x: sebastienlorber
     linkedin: sebastienlorber
     github: slorber
+    instagram: thisweekinreact
     newsletter: https://thisweekinreact.com
 
 yangshun: