@docusaurus/theme-classic 3.3.2 → 3.5.0

package/lib/getSwizzleConfig.js

@@ -6,6 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = getSwizzleConfig;
 /* eslint sort-keys: "error" */
 function getSwizzleConfig() {
     return {
@@ -116,6 +117,27 @@ function getSwizzleConfig() {
                 },
                 description: 'The object mapping admonition type to a React component.\nUse it to add custom admonition type components, or replace existing ones.\nCan be ejected or wrapped (only manually, see our documentation).',
             },
+            Blog: {
+                actions: {
+                    // Forbidden because it's a parent folder, makes the CLI crash atm
+                    eject: 'forbidden',
+                    wrap: 'forbidden',
+                },
+            },
+            'Blog/Components': {
+                actions: {
+                    // Forbidden because it's a parent folder, makes the CLI crash atm
+                    eject: 'forbidden',
+                    wrap: 'forbidden',
+                },
+            },
+            'Blog/Pages': {
+                actions: {
+                    // Forbidden because it's a parent folder, makes the CLI crash atm
+                    eject: 'forbidden',
+                    wrap: 'forbidden',
+                },
+            },
             CodeBlock: {
                 actions: {
                     eject: 'safe',
@@ -269,6 +291,16 @@ function getSwizzleConfig() {
                 },
                 description: 'The menu icon component',
             },
+            'Icon/Socials': {
+                actions: {
+                    // Forbidden because it's a parent folder, makes the CLI crash atm
+                    // TODO the CLI should rather support --eject
+                    // Subfolders can be swizzled
+                    eject: 'forbidden',
+                    wrap: 'forbidden',
+                },
+                description: 'The Icon/Socials folder is not directly swizzle-able, but you can swizzle its sub-components.',
+            },
             MDXComponents: {
                 actions: {
                     eject: 'safe',
@@ -372,4 +404,3 @@ function getSwizzleConfig() {
         },
     };
 }
-exports.default = getSwizzleConfig;

package/lib/index.d.ts

@@ -4,10 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../src/theme-classic.d.ts" />
 import type { LoadContext, Plugin } from '@docusaurus/types';
 import type { PluginOptions } from '@docusaurus/theme-classic';
-export declare const AnnouncementBarDismissStorageKey = "docusaurus.announcement.dismiss";
 export default function themeClassic(context: LoadContext, options: PluginOptions): Plugin<undefined>;
 export { default as getSwizzleConfig } from './getSwizzleConfig';
 export { validateThemeConfig, validateOptions } from './options';

package/lib/index.js

@@ -6,102 +6,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateOptions = exports.validateThemeConfig = exports.getSwizzleConfig = exports.AnnouncementBarDismissStorageKey = void 0;
+exports.validateOptions = exports.validateThemeConfig = exports.getSwizzleConfig = void 0;
+exports.default = themeClassic;
 const tslib_1 = require("tslib");
 const path_1 = tslib_1.__importDefault(require("path"));
 const module_1 = require("module");
 const rtlcss_1 = tslib_1.__importDefault(require("rtlcss"));
 const theme_translations_1 = require("@docusaurus/theme-translations");
 const translations_1 = require("./translations");
+const inlineScripts_1 = require("./inlineScripts");
 const requireFromDocusaurusCore = (0, module_1.createRequire)(require.resolve('@docusaurus/core/package.json'));
 const ContextReplacementPlugin = requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
-// Need to be inlined to prevent dark mode FOUC
-// Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
-const ThemeStorageKey = 'theme';
-// Support for ?docusaurus-theme=dark
-const ThemeQueryStringKey = 'docusaurus-theme';
-// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
-const DataQueryStringPrefixKey = 'docusaurus-data-';
-const noFlashColorMode = ({ defaultMode, respectPrefersColorScheme, }) => 
-/* language=js */
-`(function() {
-  var defaultMode = '${defaultMode}';
-  var respectPrefersColorScheme = ${respectPrefersColorScheme};
-
-  function setDataThemeAttribute(theme) {
-    document.documentElement.setAttribute('data-theme', theme);
-  }
-
-  function getQueryStringTheme() {
-    try {
-      return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
-    } catch(e) {}
-  }
-
-  function getStoredTheme() {
-    try {
-      return localStorage.getItem('${ThemeStorageKey}');
-    } catch (err) {}
-  }
-
-  var initialTheme = getQueryStringTheme() || getStoredTheme();
-  if (initialTheme !== null) {
-    setDataThemeAttribute(initialTheme);
-  } else {
-    if (
-      respectPrefersColorScheme &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
-      setDataThemeAttribute('dark');
-    } else if (
-      respectPrefersColorScheme &&
-      window.matchMedia('(prefers-color-scheme: light)').matches
-    ) {
-      setDataThemeAttribute('light');
-    } else {
-      setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
-    }
-  }
-})();`;
-/* language=js */
-const DataAttributeQueryStringInlineJavaScript = `
-(function() {
-  try {
-    const entries = new URLSearchParams(window.location.search).entries();
-    for (var [searchKey, value] of entries) {
-      if (searchKey.startsWith('${DataQueryStringPrefixKey}')) {
-        var key = searchKey.replace('${DataQueryStringPrefixKey}',"data-")
-        document.documentElement.setAttribute(key, value);
-      }
-    }
-  } catch(e) {}
-})();
-`;
-// Duplicated constant. Unfortunately we can't import it from theme-common, as
-// we need to support older nodejs versions without ESM support
-// TODO: import from theme-common once we only support Node.js with ESM support
-// + move all those announcementBar stuff there too
-exports.AnnouncementBarDismissStorageKey = 'docusaurus.announcement.dismiss';
-const AnnouncementBarDismissDataAttribute = 'data-announcement-bar-initially-dismissed';
-// We always render the announcement bar html on the server, to prevent layout
-// shifts on React hydration. The theme can use CSS + the data attribute to hide
-// the announcement bar asap (before React hydration)
-/* language=js */
-const AnnouncementBarInlineJavaScript = `
-(function() {
-  function isDismissed() {
-    try {
-      return localStorage.getItem('${exports.AnnouncementBarDismissStorageKey}') === 'true';
-    } catch (err) {}
-    return false;
-  }
-  document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
-})();`;
 function getInfimaCSSFile(direction) {
     return `infima/dist/css/default/default${direction === 'rtl' ? '-rtl' : ''}.css`;
 }
 function themeClassic(context, options) {
-    const { i18n: { currentLocale, localeConfigs }, } = context;
+    const { i18n: { currentLocale, localeConfigs }, siteStorage, } = context;
     const themeConfig = context.siteConfig.themeConfig;
     const { announcementBar, colorMode, prism: { additionalLanguages }, } = themeConfig;
     const { customCss } = options;
@@ -171,9 +91,9 @@ function themeClassic(context, options) {
                     {
                         tagName: 'script',
                         innerHTML: `
-${noFlashColorMode(colorMode)}
-${DataAttributeQueryStringInlineJavaScript}
-${announcementBar ? AnnouncementBarInlineJavaScript : ''}
+${(0, inlineScripts_1.getThemeInlineScript)({ colorMode, siteStorage })}
+${inlineScripts_1.DataAttributeQueryStringInlineJavaScript}
+${announcementBar ? (0, inlineScripts_1.getAnnouncementBarInlineScript)({ siteStorage }) : ''}
             `,
                     },
                 ],
@@ -181,7 +101,6 @@ ${announcementBar ? AnnouncementBarInlineJavaScript : ''}
         },
     };
 }
-exports.default = themeClassic;
 var getSwizzleConfig_1 = require("./getSwizzleConfig");
 Object.defineProperty(exports, "getSwizzleConfig", { enumerable: true, get: function () { return tslib_1.__importDefault(getSwizzleConfig_1).default; } });
 var options_1 = require("./options");

package/lib/inlineScripts.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { SiteStorage } from '@docusaurus/types';
+import type { ThemeConfig } from '@docusaurus/theme-common';
+export declare function getThemeInlineScript({ colorMode: { defaultMode, respectPrefersColorScheme }, siteStorage, }: {
+    colorMode: ThemeConfig['colorMode'];
+    siteStorage: SiteStorage;
+}): string;
+export declare const DataAttributeQueryStringInlineJavaScript = "\n(function() {\n  try {\n    const entries = new URLSearchParams(window.location.search).entries();\n    for (var [searchKey, value] of entries) {\n      if (searchKey.startsWith('docusaurus-data-')) {\n        var key = searchKey.replace('docusaurus-data-',\"data-\")\n        document.documentElement.setAttribute(key, value);\n      }\n    }\n  } catch(e) {}\n})();\n";
+export declare function getAnnouncementBarInlineScript({ siteStorage, }: {
+    siteStorage: SiteStorage;
+}): string;

package/lib/inlineScripts.js

@@ -0,0 +1,98 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataAttributeQueryStringInlineJavaScript = void 0;
+exports.getThemeInlineScript = getThemeInlineScript;
+exports.getAnnouncementBarInlineScript = getAnnouncementBarInlineScript;
+// Support for ?docusaurus-theme=dark
+const ThemeQueryStringKey = 'docusaurus-theme';
+// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
+const DataQueryStringPrefixKey = 'docusaurus-data-';
+function getThemeInlineScript({ colorMode: { defaultMode, respectPrefersColorScheme }, siteStorage, }) {
+    // Need to be inlined to prevent dark mode FOUC
+    // Make sure the key is the same as the one in the color mode React context
+    // Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
+    const themeStorageKey = `theme${siteStorage.namespace}`;
+    /* language=js */
+    return `(function() {
+    var defaultMode = '${defaultMode}';
+    var respectPrefersColorScheme = ${respectPrefersColorScheme};
+
+    function setDataThemeAttribute(theme) {
+      document.documentElement.setAttribute('data-theme', theme);
+    }
+
+    function getQueryStringTheme() {
+      try {
+        return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
+      } catch (e) {
+      }
+    }
+
+    function getStoredTheme() {
+      try {
+        return window['${siteStorage.type}'].getItem('${themeStorageKey}');
+      } catch (err) {
+      }
+    }
+
+    var initialTheme = getQueryStringTheme() || getStoredTheme();
+    if (initialTheme !== null) {
+      setDataThemeAttribute(initialTheme);
+    } else {
+      if (
+        respectPrefersColorScheme &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+      ) {
+        setDataThemeAttribute('dark');
+      } else if (
+        respectPrefersColorScheme &&
+        window.matchMedia('(prefers-color-scheme: light)').matches
+      ) {
+        setDataThemeAttribute('light');
+      } else {
+        setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
+      }
+    }
+  })();`;
+}
+/* language=js */
+exports.DataAttributeQueryStringInlineJavaScript = `
+(function() {
+  try {
+    const entries = new URLSearchParams(window.location.search).entries();
+    for (var [searchKey, value] of entries) {
+      if (searchKey.startsWith('${DataQueryStringPrefixKey}')) {
+        var key = searchKey.replace('${DataQueryStringPrefixKey}',"data-")
+        document.documentElement.setAttribute(key, value);
+      }
+    }
+  } catch(e) {}
+})();
+`;
+// We always render the announcement bar html on the server, to prevent layout
+// shifts on React hydration. The theme can use CSS + the data attribute to hide
+// the announcement bar asap (before React hydration)
+function getAnnouncementBarInlineScript({ siteStorage, }) {
+    // Duplicated constant. Unfortunately we can't import it from theme-common, as
+    // we need to support older nodejs versions without ESM support
+    // TODO: import from theme-common once we support Node.js with ESM support
+    // + move all those announcementBar stuff there too
+    const AnnouncementBarDismissStorageKey = `docusaurus.announcement.dismiss${siteStorage.namespace}`;
+    const AnnouncementBarDismissDataAttribute = 'data-announcement-bar-initially-dismissed';
+    /* language=js */
+    return `(function() {
+  function isDismissed() {
+    try {
+      return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
+    } catch (err) {}
+    return false;
+  }
+  document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
+})();`;
+}

package/lib/options.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../src/theme-classic.d.ts" />
 import { Joi } from '@docusaurus/utils-validation';
 import type { Options, PluginOptions } from '@docusaurus/theme-classic';
 import type { ThemeConfig } from '@docusaurus/theme-common';

package/lib/options.js

@@ -6,7 +6,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateOptions = exports.validateThemeConfig = exports.ThemeConfigSchema = exports.DEFAULT_CONFIG = void 0;
+exports.ThemeConfigSchema = exports.DEFAULT_CONFIG = void 0;
+exports.validateThemeConfig = validateThemeConfig;
+exports.validateOptions = validateOptions;
 const prism_react_renderer_1 = require("prism-react-renderer");
 const utils_validation_1 = require("@docusaurus/utils-validation");
 const defaultPrismTheme = prism_react_renderer_1.themes.palenight;
@@ -26,6 +28,16 @@ const DocsSchema = utils_validation_1.Joi.object({
         autoCollapseCategories: utils_validation_1.Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.autoCollapseCategories),
     }).default(DEFAULT_DOCS_CONFIG.sidebar),
 }).default(DEFAULT_DOCS_CONFIG);
+const DEFAULT_BLOG_CONFIG = {
+    sidebar: {
+        groupByYear: true,
+    },
+};
+const BlogSchema = utils_validation_1.Joi.object({
+    sidebar: utils_validation_1.Joi.object({
+        groupByYear: utils_validation_1.Joi.bool().default(DEFAULT_BLOG_CONFIG.sidebar.groupByYear),
+    }).default(DEFAULT_BLOG_CONFIG.sidebar),
+}).default(DEFAULT_BLOG_CONFIG);
 const DEFAULT_COLOR_MODE_CONFIG = {
     defaultMode: 'light',
     disableSwitch: false,
@@ -34,6 +46,7 @@ const DEFAULT_COLOR_MODE_CONFIG = {
 exports.DEFAULT_CONFIG = {
     colorMode: DEFAULT_COLOR_MODE_CONFIG,
     docs: DEFAULT_DOCS_CONFIG,
+    blog: DEFAULT_BLOG_CONFIG,
     metadata: [],
     prism: {
         additionalLanguages: [],
@@ -293,6 +306,7 @@ exports.ThemeConfigSchema = utils_validation_1.Joi.object({
     colorMode: ColorModeSchema,
     image: utils_validation_1.Joi.string(),
     docs: DocsSchema,
+    blog: BlogSchema,
     metadata: utils_validation_1.Joi.array()
         .items(HtmlMetadataSchema)
         .default(exports.DEFAULT_CONFIG.metadata),
@@ -392,7 +406,6 @@ exports.ThemeConfigSchema = utils_validation_1.Joi.object({
 function validateThemeConfig({ validate, themeConfig, }) {
     return validate(exports.ThemeConfigSchema, themeConfig);
 }
-exports.validateThemeConfig = validateThemeConfig;
 const DEFAULT_OPTIONS = {
     customCss: [],
 };
@@ -410,4 +423,3 @@ function validateOptions({ validate, options, }) {
     const validatedOptions = validate(PluginOptionSchema, options);
     return validatedOptions;
 }
-exports.validateOptions = validateOptions;

package/lib/theme/Admonition/Icon/Danger.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Icon/Danger';
 export default function AdmonitionIconDanger(props: Props): JSX.Element;

package/lib/theme/Admonition/Icon/Info.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Icon/Info';
 export default function AdmonitionIconInfo(props: Props): JSX.Element;

package/lib/theme/Admonition/Icon/Note.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Icon/Note';
 export default function AdmonitionIconNote(props: Props): JSX.Element;

package/lib/theme/Admonition/Icon/Tip.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Icon/Tip';
 export default function AdmonitionIconTip(props: Props): JSX.Element;

package/lib/theme/Admonition/Icon/Warning.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Icon/Warning';
 export default function AdmonitionIconCaution(props: Props): JSX.Element;

package/lib/theme/Admonition/Layout/index.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Layout';
 export default function AdmonitionLayout(props: Props): JSX.Element;

package/lib/theme/Admonition/Type/Caution.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Type/Caution';
 export default function AdmonitionTypeCaution(props: Props): JSX.Element;

package/lib/theme/Admonition/Type/Danger.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Type/Danger';
 export default function AdmonitionTypeDanger(props: Props): JSX.Element;

package/lib/theme/Admonition/Type/Info.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Type/Info';
 export default function AdmonitionTypeInfo(props: Props): JSX.Element;

package/lib/theme/Admonition/Type/Note.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Type/Note';
 export default function AdmonitionTypeNote(props: Props): JSX.Element;

package/lib/theme/Admonition/Type/Tip.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Type/Tip';
 export default function AdmonitionTypeTip(props: Props): JSX.Element;

package/lib/theme/Admonition/Type/Warning.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition/Type/Warning';
 export default function AdmonitionTypeWarning(props: Props): JSX.Element;

package/lib/theme/Admonition/Types.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../src/theme-classic.d.ts" />
 import React from 'react';
 declare const _default: {
     [x: string]: React.ComponentType<import("@theme/Admonition").Props>;

package/lib/theme/Admonition/index.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/Admonition';
 export default function Admonition(unprocessedProps: Props): JSX.Element;

package/lib/theme/AnnouncementBar/CloseButton/index.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/AnnouncementBar/CloseButton';
 export default function AnnouncementBarCloseButton(props: Props): JSX.Element | null;

package/lib/theme/AnnouncementBar/Content/index.d.ts

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference path="../../../../src/theme-classic.d.ts" />
-/// <reference types="react" />
 import type { Props } from '@theme/AnnouncementBar/Content';
 export default function AnnouncementBarContent(props: Props): JSX.Element | null;

package/lib/theme/AnnouncementBar/index.d.ts

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 export default function AnnouncementBar(): JSX.Element | null;

package/lib/theme/BackToTopButton/index.d.ts

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 export default function BackToTopButton(): JSX.Element;

package/lib/theme/Blog/Components/Author/Socials/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { Props } from '@theme/Blog/Components/Author/Socials';
+export default function BlogAuthorSocials({ author, }: {
+    author: Props['author'];
+}): JSX.Element;

package/lib/theme/Blog/Components/Author/Socials/index.js

@@ -0,0 +1,49 @@
+/**
+ * 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 React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import Twitter from '@theme/Icon/Socials/Twitter';
+import GitHub from '@theme/Icon/Socials/GitHub';
+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 styles from './styles.module.css';
+const SocialPlatformConfigs = {
+  twitter: {Icon: Twitter, label: 'Twitter'},
+  github: {Icon: GitHub, label: 'GitHub'},
+  stackoverflow: {Icon: StackOverflow, label: 'Stack Overflow'},
+  linkedin: {Icon: LinkedIn, label: 'LinkedIn'},
+  x: {Icon: X, label: 'X'},
+};
+function getSocialPlatformConfig(platformKey) {
+  return (
+    SocialPlatformConfigs[platformKey] ?? {
+      Icon: DefaultSocialIcon,
+      label: platformKey,
+    }
+  );
+}
+function SocialLink({platform, link}) {
+  const {Icon, label} = getSocialPlatformConfig(platform);
+  return (
+    <Link className={styles.authorSocialLink} href={link} title={label}>
+      <Icon className={clsx(styles.authorSocialLink)} />
+    </Link>
+  );
+}
+export default function BlogAuthorSocials({author}) {
+  const entries = Object.entries(author.socials ?? {});
+  return (
+    <div className={styles.authorSocials}>
+      {entries.map(([platform, linkUrl]) => {
+        return <SocialLink key={platform} platform={platform} link={linkUrl} />;
+      })}
+    </div>
+  );
+}

package/lib/theme/Blog/Components/Author/Socials/styles.module.css

@@ -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.
+ */
+
+:root {
+  --docusaurus-blog-social-icon-size: 1rem;
+}
+
+.authorSocials {
+  /*
+  This ensures that container takes height even if there's no social link
+  This keeps author names aligned even if only some have socials
+   */
+  height: var(--docusaurus-blog-social-icon-size);
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: 0;
+  overflow: hidden;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.authorSocialLink {
+  height: var(--docusaurus-blog-social-icon-size);
+  width: var(--docusaurus-blog-social-icon-size);
+  line-height: 0;
+  margin-right: 0.4rem;
+}
+
+.authorSocialIcon {
+  width: var(--docusaurus-blog-social-icon-size);
+  height: var(--docusaurus-blog-social-icon-size);
+}

package/lib/theme/Blog/Components/Author/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 { Props } from '@theme/Blog/Components/Author';
+export default function BlogAuthor({ as, author, className, count, }: Props): JSX.Element;