From 330cef05959a82d32f9ef14f4ca8a0c2cadcd54b Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 26 Dec 2024 19:49:12 +0100 Subject: [PATCH] Refactor icons a bit + add Instagram --- .../src/__tests__/authorsSocials.test.ts | 4 +++ .../src/authorsSocials.ts | 2 ++ .../src/plugin-content-blog.d.ts | 2 +- .../src/theme-classic.d.ts | 8 ++++++ .../Blog/Components/Author/Socials/index.tsx | 2 ++ .../theme/Icon/Socials/Instagram/index.tsx | 28 +++++++++++++++++++ .../Icon/Socials/Instagram/styles.module.css | 14 ++++++++++ .../src/theme/Icon/Socials/Mastodon/index.tsx | 6 ++-- .../2024-07-03-multiple-authors.mdx | 2 ++ website/blog/authors.yml | 3 +- 10 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/Instagram/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/Instagram/styles.module.css diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts b/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts index 28db8aed0f7b..9a1a256587c9 100644 --- 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 index 674df7cef01f..80bb3c586407 100644 --- 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({ .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 user@other.server 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 index 2c1a400afc7e..afe7fe519b32 100644 --- 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 index 7d6c36296244..59906ef77a98 100644 --- 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 index 373bda8e7b5a..1ba60c5ae79a 100644 --- 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 = { 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 new file mode 100644 index 000000000000..a0cf834bba84 --- /dev/null +++ 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): ReactNode { + return ( + + + + ); +} + +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 new file mode 100644 index 000000000000..981e10a43418 --- /dev/null +++ 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 index 47f3790a8705..5afb5de361bc 100644 --- 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): ReactNode { + const gradientId = useId(); return ( ): ReactNode { height="1em" {...props}> ): ReactNode { /> 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: