@docusaurus/theme-classic 0.0.0-5994 → 0.0.0-6000

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5994",
+  "version": "0.0.0-6000",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5994",
-    "@docusaurus/mdx-loader": "0.0.0-5994",
-    "@docusaurus/module-type-aliases": "0.0.0-5994",
-    "@docusaurus/plugin-content-blog": "0.0.0-5994",
-    "@docusaurus/plugin-content-docs": "0.0.0-5994",
-    "@docusaurus/plugin-content-pages": "0.0.0-5994",
-    "@docusaurus/theme-common": "0.0.0-5994",
-    "@docusaurus/theme-translations": "0.0.0-5994",
-    "@docusaurus/types": "0.0.0-5994",
-    "@docusaurus/utils": "0.0.0-5994",
-    "@docusaurus/utils-common": "0.0.0-5994",
-    "@docusaurus/utils-validation": "0.0.0-5994",
+    "@docusaurus/core": "0.0.0-6000",
+    "@docusaurus/mdx-loader": "0.0.0-6000",
+    "@docusaurus/module-type-aliases": "0.0.0-6000",
+    "@docusaurus/plugin-content-blog": "0.0.0-6000",
+    "@docusaurus/plugin-content-docs": "0.0.0-6000",
+    "@docusaurus/plugin-content-pages": "0.0.0-6000",
+    "@docusaurus/theme-common": "0.0.0-6000",
+    "@docusaurus/theme-translations": "0.0.0-6000",
+    "@docusaurus/types": "0.0.0-6000",
+    "@docusaurus/utils": "0.0.0-6000",
+    "@docusaurus/utils-common": "0.0.0-6000",
+    "@docusaurus/utils-validation": "0.0.0-6000",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "copy-text-to-clipboard": "^3.2.0",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "4905b76b4b39c2f102bbc78d018933f57ea39b78"
+  "gitHead": "10f44ae468ae6751fa53eb8af6441265f0e5075c"
 }

package/src/getSwizzleConfig.ts

@@ -289,6 +289,17 @@ export default function getSwizzleConfig(): SwizzleConfig {
         },
         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',

package/src/theme/BlogListPage/StructuredData/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Head from '@docusaurus/Head';
-import {useBlogListPageStructuredData} from '@docusaurus/theme-common';
+import {useBlogListPageStructuredData} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogListPage/StructuredData';
 
 export default function BlogListPageStructuredData(props: Props): JSX.Element {

package/src/theme/BlogPostItem/Content/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import {blogPostContainerID} from '@docusaurus/utils-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import MDXContent from '@theme/MDXContent';
 import type {Props} from '@theme/BlogPostItem/Content';
 

package/src/theme/BlogPostItem/Footer/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import EditMetaRow from '@theme/EditMetaRow';
 import TagsListInline from '@theme/TagsListInline';

package/src/theme/BlogPostItem/Header/Author/Socials/index.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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 {ComponentType} from 'react';
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogPostItem/Header/Author/Socials';
+
+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';
+
+type SocialIcon = ComponentType<{className: string}>;
+
+type SocialPlatformConfig = {Icon: SocialIcon; label: string};
+
+const SocialPlatformConfigs: Record<string, SocialPlatformConfig> = {
+  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: string): SocialPlatformConfig {
+  return (
+    SocialPlatformConfigs[platformKey] ?? {
+      Icon: DefaultSocialIcon,
+      label: platformKey,
+    }
+  );
+}
+
+function SocialLink({platform, link}: {platform: string; link: string}) {
+  const {Icon, label} = getSocialPlatformConfig(platform);
+  return (
+    <Link className={styles.authorSocialLink} href={link} title={label}>
+      <Icon className={clsx(styles.authorSocialLink)} />
+    </Link>
+  );
+}
+
+export default function AuthorSocials({author}: {author: Props['author']}) {
+  return (
+    <div className={styles.authorSocials}>
+      {Object.entries(author.socials ?? {}).map(([platform, linkUrl]) => {
+        return <SocialLink key={platform} platform={platform} link={linkUrl} />;
+      })}
+    </div>
+  );
+}

package/src/theme/BlogPostItem/Header/Author/Socials/styles.module.css

@@ -0,0 +1,34 @@
+/**
+ * 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 {
+  margin-top: 0.2rem;
+  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.3rem;
+}
+
+.authorSocialIcon {
+  width: var(--docusaurus-blog-social-icon-size);
+  height: var(--docusaurus-blog-social-icon-size);
+}

package/src/theme/BlogPostItem/Header/Author/index.tsx

@@ -8,8 +8,10 @@
 import React from 'react';
 import clsx from 'clsx';
 import Link, {type Props as LinkProps} from '@docusaurus/Link';
+import AuthorSocials from '@theme/BlogPostItem/Header/Author/Socials';
 
 import type {Props} from '@theme/BlogPostItem/Header/Author';
+import styles from './styles.module.css';
 
 function MaybeLink(props: LinkProps): JSX.Element {
   if (props.href) {
@@ -18,12 +20,24 @@ function MaybeLink(props: LinkProps): JSX.Element {
   return <>{props.children}</>;
 }
 
+function AuthorTitle({title}: {title: string}) {
+  return (
+    <small className={styles.authorTitle} title={title}>
+      {title}
+    </small>
+  );
+}
+
 export default function BlogPostItemHeaderAuthor({
+  // singleAuthor, // may be useful in the future, or for swizzle users
   author,
   className,
 }: Props): JSX.Element {
-  const {name, title, url, imageURL, email} = author;
+  const {name, title, url, socials, imageURL, email} = author;
   const link = url || (email && `mailto:${email}`) || undefined;
+
+  const hasSocials = socials && Object.keys(socials).length > 0;
+
   return (
     <div className={clsx('avatar margin-bottom--sm', className)}>
       {imageURL && (
@@ -32,14 +46,15 @@ export default function BlogPostItemHeaderAuthor({
         </MaybeLink>
       )}
 
-      {name && (
+      {(name || title) && (
         <div className="avatar__intro">
           <div className="avatar__name">
             <MaybeLink href={link}>
-              <span>{name}</span>
+              <span className={styles.authorName}>{name}</span>
             </MaybeLink>
           </div>
-          {title && <small className="avatar__subtitle">{title}</small>}
+          {!!title && <AuthorTitle title={title} />}
+          {hasSocials && <AuthorSocials author={author} />}
         </div>
       )}
     </div>

package/src/theme/BlogPostItem/Header/Author/styles.module.css

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+.authorName {
+  font-size: 1.1rem;
+}
+
+.authorTitle {
+  margin-top: 0.06rem;
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+  display: -webkit-box;
+  overflow: hidden;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}

package/src/theme/BlogPostItem/Header/Authors/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItemHeaderAuthor from '@theme/BlogPostItem/Header/Author';
 import type {Props} from '@theme/BlogPostItem/Header/Authors';
 import styles from './styles.module.css';
@@ -25,6 +25,7 @@ export default function BlogPostItemHeaderAuthors({
     return null;
   }
   const imageOnly = authors.every(({name}) => !name);
+  const singleAuthor = authors.length === 1;
   return (
     <div
       className={clsx(
@@ -35,11 +36,12 @@ export default function BlogPostItemHeaderAuthors({
       {authors.map((author, idx) => (
         <div
           className={clsx(
-            !imageOnly && 'col col--6',
+            !imageOnly && (singleAuthor ? 'col col--12' : 'col col--6'),
             imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
           )}
           key={idx}>
           <BlogPostItemHeaderAuthor
+            singleAuthor={singleAuthor}
             author={{
               ...author,
               // Handle author images using relative paths

package/src/theme/BlogPostItem/Header/Authors/styles.module.css

@@ -7,7 +7,6 @@
 
 .authorCol {
   max-width: inherit !important;
-  flex-grow: 1 !important;
 }
 
 .imageOnlyAuthorRow {

package/src/theme/BlogPostItem/Header/Info/index.tsx

@@ -9,10 +9,8 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {usePluralForm} from '@docusaurus/theme-common';
-import {
-  useBlogPost,
-  useDateTimeFormat,
-} from '@docusaurus/theme-common/internal';
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogPostItem/Header/Info';
 
 import styles from './styles.module.css';

package/src/theme/BlogPostItem/Header/Title/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogPostItem/Header/Title';
 
 import styles from './styles.module.css';

package/src/theme/BlogPostItem/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItemContainer from '@theme/BlogPostItem/Container';
 import BlogPostItemHeader from '@theme/BlogPostItem/Header';
 import BlogPostItemContent from '@theme/BlogPostItem/Content';

package/src/theme/BlogPostItems/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {BlogPostProvider} from '@docusaurus/theme-common/internal';
+import {BlogPostProvider} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogPostItems';
 

package/src/theme/BlogPostPage/Metadata/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import {PageMetadata} from '@docusaurus/theme-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 
 export default function BlogPostPageMetadata(): JSX.Element {
   const {assets, metadata} = useBlogPost();

package/src/theme/BlogPostPage/StructuredData/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Head from '@docusaurus/Head';
-import {useBlogPostStructuredData} from '@docusaurus/theme-common';
+import {useBlogPostStructuredData} from '@docusaurus/plugin-content-blog/client';
 
 export default function BlogPostStructuredData(): JSX.Element {
   const structuredData = useBlogPostStructuredData();

package/src/theme/BlogPostPage/index.tsx

@@ -8,7 +8,10 @@
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
-import {BlogPostProvider, useBlogPost} from '@docusaurus/theme-common/internal';
+import {
+  BlogPostProvider,
+  useBlogPost,
+} from '@docusaurus/plugin-content-blog/client';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';

package/src/theme/BlogSidebar/Content/index.tsx

@@ -6,7 +6,7 @@
  */
 import React, {memo, type ReactNode} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
-import {groupBlogSidebarItemsByYear} from '@docusaurus/theme-common/internal';
+import {groupBlogSidebarItemsByYear} from '@docusaurus/plugin-content-blog/client';
 import Heading from '@theme/Heading';
 import type {Props} from '@theme/BlogSidebar/Content';
 

package/src/theme/BlogSidebar/Desktop/index.tsx

@@ -11,7 +11,7 @@ import {translate} from '@docusaurus/Translate';
 import {
   useVisibleBlogSidebarItems,
   BlogSidebarItemList,
-} from '@docusaurus/theme-common/internal';
+} from '@docusaurus/plugin-content-blog/client';
 import BlogSidebarContent from '@theme/BlogSidebar/Content';
 import type {Props as BlogSidebarContentProps} from '@theme/BlogSidebar/Content';
 import type {Props} from '@theme/BlogSidebar/Desktop';

package/src/theme/BlogSidebar/Mobile/index.tsx

@@ -9,7 +9,7 @@ import React, {memo} from 'react';
 import {
   useVisibleBlogSidebarItems,
   BlogSidebarItemList,
-} from '@docusaurus/theme-common/internal';
+} from '@docusaurus/plugin-content-blog/client';
 import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
 import BlogSidebarContent from '@theme/BlogSidebar/Content';
 import type {Props} from '@theme/BlogSidebar/Mobile';

package/src/theme/Icon/Socials/Default/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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://tabler.io/
+function DefaultSocial(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
+      <path d="M3.6 9h16.8" />
+      <path d="M3.6 15h16.8" />
+      <path d="M11.5 3a17 17 0 0 0 0 18" />
+      <path d="M12.5 3a17 17 0 0 1 0 18" />
+    </svg>
+  );
+}
+export default DefaultSocial;

package/src/theme/Icon/Socials/GitHub/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 clsx from 'clsx';
+import styles from './styles.module.css';
+
+// SVG Source: https://svgl.app/
+function GitHub(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      viewBox="0 0 256 250"
+      width="1em"
+      height="1em"
+      {...props}
+      className={clsx(props.className, styles.githubSvg)}
+      xmlns="http://www.w3.org/2000/svg"
+      style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties}
+      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;

package/src/theme/Icon/Socials/GitHub/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'] .githubSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .githubSvg {
+  fill: var(--dark);
+}

package/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;

package/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;

package/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;

package/src/theme/Icon/Socials/X/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 clsx from 'clsx';
+import styles from './styles.module.css';
+
+// SVG Source: https://svgl.app/
+function X(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      fill="none"
+      viewBox="0 0 1200 1227"
+      {...props}
+      className={clsx(props.className, styles.xSvg)}
+      style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties}>
+      <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" />
+    </svg>
+  );
+}
+export default X;

package/src/theme/Icon/Socials/X/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'] .xSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .xSvg {
+  fill: var(--dark);
+}