From 5a4bf80b7a0c7b4f90324bbbf38489012193c958 Mon Sep 17 00:00:00 2001 From: Zed Spencer-Milnes Date: Sat, 14 Dec 2024 20:04:44 +0000 Subject: [PATCH 1/9] feat(content-blog,theme-classic) Add additional social media sites Add Icon and Handle support for: - Bluesky - Mastodon - Threads - Twitch - YouTube Includes Dogfooding page for testing --- .../src/__tests__/authorsSocials.test.ts | 17 ++++++++ .../src/authorsSocials.ts | 10 +++++ .../src/plugin-content-blog.d.ts | 8 +++- .../src/theme-classic.d.ts | 40 +++++++++++++++++ .../Blog/Components/Author/Socials/index.tsx | 10 +++++ .../src/theme/Icon/Socials/Bluesky/index.tsx | 27 ++++++++++++ .../src/theme/Icon/Socials/Mastodon/index.tsx | 43 +++++++++++++++++++ .../src/theme/Icon/Socials/Threads/index.tsx | 30 +++++++++++++ .../Icon/Socials/Threads/styles.module.css | 14 ++++++ .../src/theme/Icon/Socials/Twitch/index.tsx | 39 +++++++++++++++++ .../src/theme/Icon/Socials/YouTube/index.tsx | 26 +++++++++++ project-words.txt | 7 +++ .../_blog tests/2024-12-14-all-thesocials.mdx | 21 +++++++++ 13 files changed, 291 insertions(+), 1 deletion(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/Mastodon/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/styles.module.css create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitch/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/index.tsx create mode 100644 website/_dogfooding/_blog tests/2024-12-14-all-thesocials.mdx 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 af408e3dedb0..28db8aed0f7b 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts @@ -15,14 +15,25 @@ describe('normalizeSocials', () => { linkedin: 'ozakione', github: 'ozakione', stackoverflow: 'ozakione', + threads: 'gingergeekuk', + bluesky: 'gingergeek.co.uk', + twitch: 'gingergeek', + youtube: 'gingergeekuk', + mastodon: 'Mastodon', }; + // eslint-disable-next-line jest/no-large-snapshots expect(normalizeSocials(socials)).toMatchInlineSnapshot(` { + "bluesky": "https://bsky.app/profile/gingergeek.co.uk", "github": "https://github.com/ozakione", "linkedin": "https://www.linkedin.com/in/ozakione/", + "mastodon": "https://mastodon.social/@Mastodon", "stackoverflow": "https://stackoverflow.com/users/ozakione", + "threads": "https://www.threads.net/@gingergeekuk", + "twitch": "https://twitch.tv/gingergeek", "twitter": "https://twitter.com/ozakione", + "youtube": "https://youtube.com/@gingergeekuk", } `); }); @@ -33,13 +44,17 @@ describe('normalizeSocials', () => { linkedIn: 'ozakione', gitHub: 'ozakione', STACKoverflow: 'ozakione', + BLUESKY: 'gingergeek.co.uk', + tHrEaDs: 'gingergeekuk', }; expect(normalizeSocials(socials)).toMatchInlineSnapshot(` { + "bluesky": "https://bsky.app/profile/gingergeek.co.uk", "github": "https://github.com/ozakione", "linkedin": "https://www.linkedin.com/in/ozakione/", "stackoverflow": "https://stackoverflow.com/users/ozakione", + "threads": "https://www.threads.net/@gingergeekuk", "twitter": "https://twitter.com/ozakione", } `); @@ -62,12 +77,14 @@ describe('normalizeSocials', () => { linkedin: 'ozakione', github: 'https://github.com/ozakione', stackoverflow: 'https://stackoverflow.com/ozakione', + mastodon: 'https://hachyderm.io/@hachyderm', }; expect(normalizeSocials(socials)).toMatchInlineSnapshot(` { "github": "https://github.com/ozakione", "linkedin": "https://www.linkedin.com/in/ozakione/", + "mastodon": "https://hachyderm.io/@hachyderm", "stackoverflow": "https://stackoverflow.com/ozakione", "twitter": "https://twitter.com/ozakione", } diff --git a/packages/docusaurus-plugin-content-blog/src/authorsSocials.ts b/packages/docusaurus-plugin-content-blog/src/authorsSocials.ts index b190e3e09dc2..674df7cef01f 100644 --- a/packages/docusaurus-plugin-content-blog/src/authorsSocials.ts +++ b/packages/docusaurus-plugin-content-blog/src/authorsSocials.ts @@ -21,6 +21,11 @@ export const AuthorSocialsSchema = Joi.object({ .try(Joi.number(), Joi.string()) .custom((val) => String(val)), x: Joi.string(), + bluesky: Joi.string(), + threads: Joi.string(), + mastodon: Joi.string(), + twitch: Joi.string(), + youtube: Joi.string(), }).unknown(); type PredefinedPlatformNormalizer = (value: string) => string; @@ -35,6 +40,11 @@ const PredefinedPlatformNormalizers: Record< linkedin: (handle: string) => `https://www.linkedin.com/in/${handle}/`, stackoverflow: (userId: string) => `https://stackoverflow.com/users/${userId}`, + bluesky: (handle: string) => `https://bsky.app/profile/${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}`, + youtube: (handle: string) => `https://youtube.com/@${handle}`, // https://support.google.com/youtube/answer/6180214?hl=en }; type SocialEntry = [string, string]; 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 f13f42ec1df2..2c1a400afc7e 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 @@ -46,7 +46,13 @@ declare module '@docusaurus/plugin-content-blog' { | 'github' | 'linkedin' | 'stackoverflow' - | 'x'; + | 'x' + | 'bluesky' + | 'threads' + | 'mastodon' + | 'bluesky' + | 'youtube' + | 'twitch'; /** * Social platforms of the author. diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index 6b5c40d73047..7d6c36296244 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -1708,6 +1708,46 @@ declare module '@theme/Icon/Socials/StackOverflow' { export default function StackOverflow(props: Props): ReactNode; } +declare module '@theme/Icon/Socials/Bluesky' { + import type {ComponentProps, ReactNode} from 'react'; + + export interface Props extends ComponentProps<'svg'> {} + + export default function Bluesky(props: Props): ReactNode; +} + +declare module '@theme/Icon/Socials/Threads' { + import type {ComponentProps, ReactNode} from 'react'; + + export interface Props extends ComponentProps<'svg'> {} + + export default function Threads(props: Props): ReactNode; +} + +declare module '@theme/Icon/Socials/YouTube' { + import type {ComponentProps, ReactNode} from 'react'; + + export interface Props extends ComponentProps<'svg'> {} + + export default function YouTube(props: Props): ReactNode; +} + +declare module '@theme/Icon/Socials/Twitch' { + import type {ComponentProps, ReactNode} from 'react'; + + export interface Props extends ComponentProps<'svg'> {} + + export default function Twitch(props: Props): ReactNode; +} + +declare module '@theme/Icon/Socials/Mastodon' { + import type {ComponentProps, ReactNode} from 'react'; + + export interface Props extends ComponentProps<'svg'> {} + + export default function Mastodon(props: Props): ReactNode; +} + declare module '@theme/TagsListByLetter' { import type {ReactNode} from 'react'; import type {TagsListItem} from '@docusaurus/utils'; 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 a632bd62addd..373bda8e7b5a 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 @@ -17,6 +17,11 @@ import X from '@theme/Icon/Socials/X'; 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 Threads from '@theme/Icon/Socials/Threads'; +import Youtube from '@theme/Icon/Socials/YouTube'; +import Mastodon from '@theme/Icon/Socials/Mastodon'; +import Twitch from '@theme/Icon/Socials/Twitch'; import styles from './styles.module.css'; @@ -30,6 +35,11 @@ const SocialPlatformConfigs: Record = { stackoverflow: {Icon: StackOverflow, label: 'Stack Overflow'}, linkedin: {Icon: LinkedIn, label: 'LinkedIn'}, x: {Icon: X, label: 'X'}, + bluesky: {Icon: Bluesky, label: 'Bluesky'}, + threads: {Icon: Threads, label: 'Threads'}, + mastodon: {Icon: Mastodon, label: 'Mastodon'}, + youtube: {Icon: Youtube, label: 'YouTube'}, + twitch: {Icon: Twitch, label: 'Twitch'}, }; function getSocialPlatformConfig(platformKey: string): SocialPlatformConfig { diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx new file mode 100644 index 000000000000..0f0c400bb42b --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx @@ -0,0 +1,27 @@ +/** + * 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} from 'react'; + +// SVG Source: https://svgl.app/ +function Bluesky(props: SVGProps): ReactNode { + return ( + + + + ); +} +export default Bluesky; 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 new file mode 100644 index 000000000000..47f3790a8705 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Mastodon/index.tsx @@ -0,0 +1,43 @@ +/** + * 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} from 'react'; + +// SVG Source: https://svgl.app/ +function Mastodon(props: SVGProps): ReactNode { + return ( + + + + + + + + + + + ); +} +export default Mastodon; diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/index.tsx new file mode 100644 index 000000000000..76e33d036eae --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/index.tsx @@ -0,0 +1,30 @@ +/** + * 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} from 'react'; + +import clsx from 'clsx'; +import styles from './styles.module.css'; + +// SVG Source: https://svgl.app/ +function Threads(props: SVGProps): ReactNode { + return ( + + + + ); +} +export default Threads; diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/styles.module.css new file mode 100644 index 000000000000..a8031d376c96 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/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'] .threadsSvg { + fill: var(--light); +} + +[data-theme='light'] .threadsSvg { + fill: var(--dark); +} diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitch/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitch/index.tsx new file mode 100644 index 000000000000..4ec52c0ae335 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitch/index.tsx @@ -0,0 +1,39 @@ +/** + * 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} from 'react'; + +// SVG Source: https://svgl.app/ +function Twitch(props: SVGProps): ReactNode { + return ( + + + + + + + + ); +} +export default Twitch; diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/index.tsx new file mode 100644 index 000000000000..41688dd1d6f8 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/index.tsx @@ -0,0 +1,26 @@ +/** + * 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} from 'react'; + +function YouTube(props: SVGProps): ReactNode { + return ( + + + + + ); +} +export default YouTube; diff --git a/project-words.txt b/project-words.txt index 9cef579226d0..5b119f470b43 100644 --- a/project-words.txt +++ b/project-words.txt @@ -25,6 +25,9 @@ beforeinstallprompt Bhatt blockquotes Blockquotes +bluesky +Bluesky +BLUESKY Bokmål bunx caabernathy @@ -95,6 +98,8 @@ funboxteam gabrielcsapo getcanary Gifs +gingergeek +gingergeekuk Goss Goyal gtag @@ -175,6 +180,7 @@ metrica Metrika microdata Microdata +Milnes mindmap Mindmap mkdn @@ -367,6 +373,7 @@ Yacop yangshun Yangshun yangshunz +zedspencermilnes Zhou zoomable zpao diff --git a/website/_dogfooding/_blog tests/2024-12-14-all-thesocials.mdx b/website/_dogfooding/_blog tests/2024-12-14-all-thesocials.mdx new file mode 100644 index 000000000000..2522b03b1dfb --- /dev/null +++ b/website/_dogfooding/_blog tests/2024-12-14-all-thesocials.mdx @@ -0,0 +1,21 @@ +--- +title: Social media test +authors: + - name: Zed Spencer-Milnes + title: All the socials test + urL: https://gingergeek.co.uk + image_url: https://github.com/GingerGeek.png + page: false + socials: + x: GingerGeek + github: gingergeek + linkedin: zedspencermilnes + youtube: gingergeekuk + bluesky: gingergeek.co.uk + stackoverflow: 2064409 + twitch: gingergeek + threads: gingergeekuk + mastodon: https://hachyderm.io/@zed +--- + +Well, that's a lot of social media profiles. From 8cebd91e58686b5447dcbcaceaaf2d3629b9ccd9 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 26 Dec 2024 19:08:32 +0100 Subject: [PATCH 2/9] add missing YouTube source comment --- .../src/theme/Icon/Socials/YouTube/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/index.tsx index 41688dd1d6f8..2cf6c187eba9 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/YouTube/index.tsx @@ -6,6 +6,7 @@ */ import type {SVGProps, ReactNode} from 'react'; +// SVG Source: https://svgl.app/ function YouTube(props: SVGProps): ReactNode { return ( Date: Thu, 26 Dec 2024 19:18:04 +0100 Subject: [PATCH 3/9] minor social fixes --- .../src/theme/Icon/Socials/GitHub/index.tsx | 12 ++++++------ .../src/theme/Icon/Socials/LinkedIn/index.tsx | 2 +- .../src/theme/Icon/Socials/Threads/index.tsx | 6 +++--- .../src/theme/Icon/Socials/Twitch/index.tsx | 4 +--- .../src/theme/Icon/Socials/Twitter/index.tsx | 2 +- .../src/theme/Icon/Socials/X/index.tsx | 6 +++--- 6 files changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/GitHub/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/GitHub/index.tsx index 2fee4037a012..34ed3c4f9f2d 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/GitHub/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/GitHub/index.tsx @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import type {ReactNode, SVGProps} from 'react'; +import type {ReactNode, SVGProps, CSSProperties} from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; @@ -14,14 +14,14 @@ import styles from './styles.module.css'; function GitHub(props: SVGProps): ReactNode { return ( + className={clsx(props.className, styles.githubSvg)}> ); diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx index 7cb8b2aa4514..1970a5bcd1c7 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx @@ -11,9 +11,9 @@ import type {ReactNode, SVGProps} from 'react'; function LinkedIn(props: SVGProps): ReactNode { return ( diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/index.tsx index 76e33d036eae..dbaa2f21bd44 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Threads/index.tsx @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import type {SVGProps, ReactNode} from 'react'; +import type {SVGProps, ReactNode, CSSProperties} from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; @@ -20,9 +20,9 @@ function Threads(props: SVGProps): ReactNode { width="1em" fill="none" height="1em" + style={{'--dark': '#000', '--light': '#fff'} as CSSProperties} {...props} - className={clsx(props.className, styles.threadsSvg)} - style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties}> + className={clsx(props.className, styles.threadsSvg)}> ); diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitch/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitch/index.tsx index 4ec52c0ae335..a9208b8e3d7d 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitch/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitch/index.tsx @@ -11,8 +11,6 @@ function Twitch(props: SVGProps): ReactNode { return ( ): ReactNode { d="m2200 1300-400 400h-400l-350 350v-350H600V200h1600z" fill="#fff" /> - + ): ReactNode { return ( ): ReactNode { height="1em" fill="none" viewBox="0 0 1200 1227" + style={{'--dark': '#000', '--light': '#fff'} as CSSProperties} {...props} - className={clsx(props.className, styles.xSvg)} - style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties}> + className={clsx(props.className, styles.xSvg)}> ); From 50f9573718b5d2b814622c949472e90157881433 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 26 Dec 2024 19:21:53 +0100 Subject: [PATCH 4/9] remove useless dogfood blog post --- .../2024-07-03-multiple-authors.mdx | 15 +++++++++++++ .../_blog tests/2024-12-14-all-thesocials.mdx | 21 ------------------- 2 files changed, 15 insertions(+), 21 deletions(-) delete mode 100644 website/_dogfooding/_blog tests/2024-12-14-all-thesocials.mdx diff --git a/website/_dogfooding/_blog tests/2024-07-03-multiple-authors.mdx b/website/_dogfooding/_blog tests/2024-07-03-multiple-authors.mdx index eaf0b91ec48f..0946bd9d3ae7 100644 --- a/website/_dogfooding/_blog tests/2024-07-03-multiple-authors.mdx +++ b/website/_dogfooding/_blog tests/2024-07-03-multiple-authors.mdx @@ -14,6 +14,21 @@ authors: imageURL: https://github.com/slorber.png socials: x: https://x.com/sebastienlorber + - name: Zed Spencer-Milnes + title: All the socials test + urL: https://gingergeek.co.uk + image_url: https://github.com/GingerGeek.png + page: false + socials: + x: GingerGeek + github: gingergeek + linkedin: zedspencermilnes + youtube: gingergeekuk + bluesky: gingergeek.co.uk + stackoverflow: 2064409 + twitch: gingergeek + threads: gingergeekuk + mastodon: https://hachyderm.io/@zed - name: Sébastien Lorber imageURL: https://github.com/slorber.png title: Docusaurus Maintainer and This Week In React editor diff --git a/website/_dogfooding/_blog tests/2024-12-14-all-thesocials.mdx b/website/_dogfooding/_blog tests/2024-12-14-all-thesocials.mdx deleted file mode 100644 index 2522b03b1dfb..000000000000 --- a/website/_dogfooding/_blog tests/2024-12-14-all-thesocials.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Social media test -authors: - - name: Zed Spencer-Milnes - title: All the socials test - urL: https://gingergeek.co.uk - image_url: https://github.com/GingerGeek.png - page: false - socials: - x: GingerGeek - github: gingergeek - linkedin: zedspencermilnes - youtube: gingergeekuk - bluesky: gingergeek.co.uk - stackoverflow: 2064409 - twitch: gingergeek - threads: gingergeekuk - mastodon: https://hachyderm.io/@zed ---- - -Well, that's a lot of social media profiles. From 330cef05959a82d32f9ef14f4ca8a0c2cadcd54b Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 26 Dec 2024 19:49:12 +0100 Subject: [PATCH 5/9] 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: From 12bac650d2ff584dbe49d73d9464791da3f99953 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 26 Dec 2024 19:50:43 +0100 Subject: [PATCH 6/9] docs --- website/docs/api/plugins/plugin-content-blog.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/docs/api/plugins/plugin-content-blog.mdx b/website/docs/api/plugins/plugin-content-blog.mdx index a3d7a3f7421f..4445f49a1e49 100644 --- a/website/docs/api/plugins/plugin-content-blog.mdx +++ b/website/docs/api/plugins/plugin-content-blog.mdx @@ -278,7 +278,8 @@ type AuthorKey = string; // Social platform name -> Social platform link // Example: {MyPlatform: 'https://myplatform.com/myusername'} -// Pre-defined platforms ("x", "github", "twitter", "linkedin", "stackoverflow") accept handles: +// Pre-defined platforms +// ("x", "github", "twitter", "linkedin", "stackoverflow", "instagram", "bluesky", "mastodon", "threads", "twitch", "youtube") accept handles: // Example: {github: 'slorber'} type AuthorSocials = Record; From c02273f04fe5d11ed680bee21bbff74e49be7077 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 26 Dec 2024 19:57:46 +0100 Subject: [PATCH 7/9] empty From 9a755d0dd43ea15b3f9e8da23b59c778d2b6fcf2 Mon Sep 17 00:00:00 2001 From: sebastien Date: Fri, 27 Dec 2024 12:06:55 +0100 Subject: [PATCH 8/9] add missing word --- project-words.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/project-words.txt b/project-words.txt index 5b119f470b43..09f3471f03a6 100644 --- a/project-words.txt +++ b/project-words.txt @@ -330,6 +330,7 @@ Tagkey Teik Therox toplevel +thisweekinreact Transifex transpiles treeified From 81e7e0b584152a213dfb64495e48b0a0b52df628 Mon Sep 17 00:00:00 2001 From: sebastien Date: Fri, 27 Dec 2024 12:24:12 +0100 Subject: [PATCH 9/9] fix prettier issue --- .prettierignore | 1 + website/blog/authors.yml | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/.prettierignore b/.prettierignore index fe032054f7ef..19af204b9c6a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,6 +4,7 @@ node_modules build coverage .docusaurus +.idea .svg *.svg diff --git a/website/blog/authors.yml b/website/blog/authors.yml index 1b37dc9964a3..0b063d6de86b 100644 --- a/website/blog/authors.yml +++ b/website/blog/authors.yml @@ -24,9 +24,7 @@ slorber: url: https://thisweekinreact.com image_url: https://github.com/slorber.png page: true - 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. - + 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