feat(blog): author header social icons

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

@@ -5,11 +5,70 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {SVGProps} from 'react';
 import React from 'react';
 import clsx from 'clsx';
 import Link, {type Props as LinkProps} from '@docusaurus/Link';
 
 import type {Props} from '@theme/BlogPostItem/Header/Author';
+import styles from './styles.module.css';
+
+type SocialProps = SVGProps<SVGSVGElement> & {
+  user: string;
+};
+
+function getUrl(user: string, baseUrl: string) {
+  return user.startsWith('https') ? user : `${baseUrl}${user}`;
+}
+
+function Twitter(props: SocialProps) {
+  const twitterUrl = getUrl(props.user, 'https://x.com/');
+  return (
+    // eslint-disable-next-line @docusaurus/no-html-links
+    <a
+      href={twitterUrl}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={clsx(styles.socialIcon)}>
+      <svg
+        viewBox="0 0 256 209"
+        width="1.5em"
+        height="1.5em"
+        xmlns="http://www.w3.org/2000/svg"
+        className={clsx(styles.socialIcon)}
+        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>
+    </a>
+  );
+}
+
+function Github(props: SocialProps) {
+  const githubUrl = getUrl(props.user, 'https://github.com/');
+  return (
+    // eslint-disable-next-line @docusaurus/no-html-links
+    <a
+      href={githubUrl}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={clsx(styles.socialIcon)}>
+      <svg
+        className={clsx(styles.socialIcon)}
+        viewBox="0 0 256 250"
+        width="1.5em"
+        height="1.5em"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid"
+        {...props}>
+        <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>
+    </a>
+  );
+}
 
 function MaybeLink(props: LinkProps): JSX.Element {
   if (props.href) {
@@ -22,24 +81,36 @@ export default function BlogPostItemHeaderAuthor({
   author,
   className,
 }: Props): JSX.Element {
-  const {name, title, url, imageURL, email} = author;
+  const {name, title, twitter, github, url, imageURL, email} = author;
   const link = url || (email && `mailto:${email}`) || undefined;
+  const renderSocialMedia = () => (
+    <div className={clsx(styles.authorSocial)}>
+      {(twitter as string) && <Twitter user={twitter as string} />}
+      {(github as string) && <Github user={github as string} />}
+    </div>
+  );
+
+  const hasSocialMedia = twitter || github;
+
   return (
     <div className={clsx('avatar margin-bottom--sm', className)}>
       {imageURL && (
         <MaybeLink href={link} className="avatar__photo-link">
           <img className="avatar__photo" src={imageURL} alt={name} />
         </MaybeLink>
       )}
-
       {name && (
         <div className="avatar__intro">
           <div className="avatar__name">
             <MaybeLink href={link}>
               <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.5em;
+  height: 1.5em;
+  margin-right: 0.5em;
+}

website/blog/authors.yml

@@ -20,6 +20,7 @@ slorber:
   url: https://thisweekinreact.com
   image_url: https://github.com/slorber.png
   twitter: sebastienlorber
+  github: slorber
   email: [email protected]
 
 yangshun: