feat(blog): author header social icons

packages/docusaurus-plugin-content-blog/src/authors.ts

@@ -17,6 +17,34 @@ import type {
 
 export type AuthorsMap = {[authorKey: string]: Author};
 
+interface Socials {
+  twitter: string;
+  github: string;
+}
+
+const normalizeSocials = (value: Socials) => {
+  const socialPlatforms = {
+    twitter: 'https://twitter.com/',
+    github: 'https://github.com/',
+    linkedin: 'https://www.linkedin.com/in/',
+    stackoverflow: 'https://stackoverflow.com/users/',
+  };
+
+  (Object.keys(socialPlatforms) as (keyof Socials)[]).forEach((platform) => {
+    if (
+      value[platform] &&
+      !value[platform]!.startsWith(socialPlatforms[platform])
+    ) {
+      value[platform] = normalizeUrl([
+        socialPlatforms[platform],
+        value[platform],
+      ]);
+    }
+  });
+
+  return value;
+};
+
 const AuthorsMapSchema = Joi.object<AuthorsMap>()
   .pattern(
     Joi.string(),
@@ -26,6 +54,12 @@ const AuthorsMapSchema = Joi.object<AuthorsMap>()
       imageURL: URISchema,
       title: Joi.string(),
       email: Joi.string(),
+      socials: Joi.object({
+        twitter: Joi.string(),
+        github: Joi.string(),
+        linkedin: Joi.string(),
+        stackoverflow: Joi.string(),
+      }).custom(normalizeSocials, 'Normalize social media URLs'),
     })
       .rename('image_url', 'imageURL')
       .or('name', 'imageURL')

packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts

@@ -71,6 +71,13 @@ yarn workspace v1.22.19image` is a collocated image path, this entry will be the
      * Unknown keys are allowed, so that we can pass custom fields to authors,
      * e.g., `twitter`.
      */
+    socials?: {
+      twitter: string;
+      linkedin: string;
+      github: string;
+      stackoverflow: string;
+      [key: string]: string;
+    };
     [key: string]: unknown;
   };
 

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -1501,6 +1501,38 @@ declare module '@theme/Icon/WordWrap' {
   export default function IconWordWrap(props: Props): JSX.Element;
 }
 
+declare module '@theme/Icon/Socials/Twitter' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Twitter(props: Props): JSX.Element;
+}
+
+declare module '@theme/Icon/Socials/Github' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Github(props: Props): JSX.Element;
+}
+
+declare module '@theme/Icon/Socials/LinkedIn' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function LinkedIn(props: Props): JSX.Element;
+}
+
+declare module '@theme/Icon/Socials/StackOverflow' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function StackOverflow(props: Props): JSX.Element;
+}
+
 declare module '@theme/TagsListByLetter' {
   import type {TagsListItem} from '@docusaurus/utils';
 

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx

@@ -10,6 +10,11 @@ import clsx from 'clsx';
 import Link, {type Props as LinkProps} from '@docusaurus/Link';
 
 import type {Props} from '@theme/BlogPostItem/Header/Author';
+import Twitter from '@theme/Icon/Socials/Twitter';
+import Github from '@theme/Icon/Socials/Github';
+import StackOverflow from '@theme/Icon/Socials/StackOverflow';
+import LinkedIn from '@theme/Icon/Socials/LinkedIn';
+import styles from './styles.module.css';
 
 function MaybeLink(props: LinkProps): JSX.Element {
   if (props.href) {
@@ -22,8 +27,36 @@ export default function BlogPostItemHeaderAuthor({
   author,
   className,
 }: Props): JSX.Element {
-  const {name, title, url, imageURL, email} = author;
+  const {name, title, url, socials, imageURL, email} = author;
+  const {github, twitter, stackoverflow, linkedin} = socials || {};
   const link = url || (email && `mailto:${email}`) || undefined;
+  const renderSocialMedia = () => (
+    <div className={clsx(styles.authorSocial, 'avatar__subtitle')}>
+      {twitter && (
+        <Link href={twitter}>
+          <Twitter className={clsx(styles.socialIcon)} />
+        </Link>
+      )}
+      {github && (
+        <Link href={github}>
+          <Github className={clsx(styles.socialIcon)} />
+        </Link>
+      )}
+      {linkedin && (
+        <Link href={linkedin}>
+          <LinkedIn className={clsx(styles.socialIcon)} />
+        </Link>
+      )}
+      {stackoverflow && (
+        <Link href={stackoverflow}>
+          <StackOverflow className={clsx(styles.socialIcon)} />
+        </Link>
+      )}
+    </div>
+  );
+
+  const hasSocialMedia = socials && Object.keys(socials).length > 0;
+
   return (
     <div className={clsx('avatar margin-bottom--sm', className)}>
       {imageURL && (
@@ -39,7 +72,11 @@ export default function BlogPostItemHeaderAuthor({
               <span>{name}</span>
             </MaybeLink>
           </div>
-          {title && <small className="avatar__subtitle">{title}</small>}
+          {hasSocialMedia ? (
+            renderSocialMedia()
+          ) : (
+            <small className="avatar__subtitle">{title}</small>
+          )}
         </div>
       )}
     </div>

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/styles.module.css

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+.authorSocial {
+  display: flex;
+  align-items: center;
+}
+
+.socialIcon {
+  width: 1.375em;
+  height: 1.375em;
+  margin-right: 0.5em;
+}

packages/docusaurus-theme-classic/src/theme/Icon/Socials/Github/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} from 'react';
+import {useColorMode} from '@docusaurus/theme-common';
+
+// SVG Source: https://svgl.app/
+function Github(props: SVGProps<SVGSVGElement>): JSX.Element {
+  const {colorMode} = useColorMode();
+  const fillColor = colorMode === 'dark' ? '#fff' : '#000';
+  return (
+    <svg
+      viewBox="0 0 256 250"
+      width="256"
+      height="250"
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      fill={fillColor}
+      preserveAspectRatio="xMidYMid">
+      <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
+    </svg>
+  );
+}
+export default Github;

packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/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} from 'react';
+
+// SVG Source: https://svgl.app/
+function LinkedIn(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 256"
+      {...props}>
+      <path
+        d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453"
+        fill="#0A66C2"
+      />
+    </svg>
+  );
+}
+export default LinkedIn;

packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/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} from 'react';
+
+// SVG Source: https://svgl.app/
+function StackOverflow(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 169.61 200"
+      width="1em"
+      height="1em"
+      {...props}>
+      <path
+        d="M140.44 178.38v-48.65h21.61V200H0v-70.27h21.61v48.65z"
+        fill="#bcbbbb"
+      />
+      <path
+        d="M124.24 140.54l4.32-16.22-86.97-17.83-3.78 17.83zM49.7 82.16L130.72 120l7.56-16.22-81.02-37.83zm22.68-40l68.06 57.3 11.35-13.51-68.6-57.3-11.35 13.51zM116.14 0l-14.59 10.81 53.48 71.89 14.58-10.81zM37.81 162.16h86.43v-16.21H37.81z"
+        fill="#f48024"
+      />
+    </svg>
+  );
+}
+export default StackOverflow;

packages/docusaurus-theme-classic/src/theme/Icon/Socials/Twitter/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} from 'react';
+
+// SVG Source: https://svgl.app/
+function Twitter(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      viewBox="0 0 256 209"
+      width="1em"
+      height="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+      {...props}>
+      <path
+        d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45"
+        fill="#55acee"
+      />
+    </svg>
+  );
+}
+export default Twitter;

project-words.txt

@@ -166,6 +166,7 @@ linkify
 Linkify
 Localizable
 lockb
+lorber
 Lorber
 Lorber's
 lqip
@@ -328,6 +329,7 @@ Solana
 spâce
 stackblitz
 stackblitzrc
+stackoverflow
 Stormkit
 Strikethrough
 strikethroughs

website/blog/authors.yml

@@ -19,8 +19,11 @@ slorber:
   title: Docusaurus maintainer, This Week In React editor
   url: https://thisweekinreact.com
   image_url: https://github.com/slorber.png
-  twitter: sebastienlorber
   email: [email protected]
+  socials:
+    github: slorber
+    twitter: sebastienlorber
+    stackoverflow: /82609/sebastien-lorber
 
 yangshun:
   name: Yangshun Tay