@docusaurus/theme-classic 3.4.0 → 3.5.0

package/lib/theme/NavbarItem/NavbarNavLink.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/NavbarItem/NavbarNavLink';
 export default function NavbarNavLink({ activeBasePath, activeBaseRegex, to, href, label, html, isDropdownLink, prependBaseUrlToHref, ...props }: Props): JSX.Element;

package/lib/theme/NavbarItem/SearchNavbarItem.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/NavbarItem/SearchNavbarItem';
 export default function SearchNavbarItem({ mobile, className, }: Props): JSX.Element | null;

package/lib/theme/NavbarItem/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/NavbarItem';
 export default function NavbarItem({ type, ...props }: Props): JSX.Element;

package/lib/theme/NotFound/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/NotFound/Content';
 export default function NotFoundContent({ className }: Props): JSX.Element;

package/lib/theme/NotFound/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 Index(): JSX.Element;

package/lib/theme/PaginatorNavLink/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/PaginatorNavLink';
 export default function PaginatorNavLink(props: Props): JSX.Element;

package/lib/theme/SearchBar.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="@docusaurus/module-type-aliases" />
 export { default } from '@docusaurus/Noop';

package/lib/theme/SearchMetadata/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/SearchMetadata';
 export default function SearchMetadata({ locale, version, tag, }: Props): JSX.Element;

package/lib/theme/SiteMetadata/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 SiteMetadata(): JSX.Element;

package/lib/theme/SkipToContent/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 SkipToContent(): JSX.Element;

package/lib/theme/TOC/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/TOC';
 export default function TOC({ className, ...props }: Props): JSX.Element;

package/lib/theme/TOCCollapsible/CollapseButton/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/TOCCollapsible/CollapseButton';
 export default function TOCCollapsibleCollapseButton({ collapsed, ...props }: Props): JSX.Element;

package/lib/theme/TOCCollapsible/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/TOCCollapsible';
 export default function TOCCollapsible({ toc, className, minHeadingLevel, maxHeadingLevel, }: Props): JSX.Element;

package/lib/theme/TOCInline/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/TOCInline';
 export default function TOCInline({ toc, minHeadingLevel, maxHeadingLevel, }: Props): JSX.Element;

package/lib/theme/TOCItems/Tree.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';
 import type { Props } from '@theme/TOCItems/Tree';
 declare function TOCItemTree({ toc, className, linkClassName, isChild, }: Props): JSX.Element | null;

package/lib/theme/TOCItems/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/TOCItems';
 export default function TOCItems({ toc, className, linkClassName, linkActiveClassName, minHeadingLevel: minHeadingLevelOption, maxHeadingLevel: maxHeadingLevelOption, ...props }: Props): JSX.Element | null;

package/lib/theme/TabItem/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/TabItem';
 export default function TabItem({ children, hidden, className, }: Props): JSX.Element;

package/lib/theme/Tabs/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/Tabs';
 export default function Tabs(props: Props): JSX.Element;

package/lib/theme/Tabs/index.js

@@ -91,7 +91,9 @@ function TabContent({lazy, children, selectedValue}) {
       // fail-safe or fail-fast? not sure what's best here
       return null;
     }
-    return cloneElement(selectedTabItem, {className: 'margin-top--md'});
+    return cloneElement(selectedTabItem, {
+      className: clsx('margin-top--md', selectedTabItem.props.className),
+    });
   }
   return (
     <div className="margin-top--md">

package/lib/theme/Tag/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/Tag';
 export default function Tag({ permalink, label, count, description, }: Props): JSX.Element;

package/lib/theme/TagsListByLetter/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/TagsListByLetter';
 export default function TagsListByLetter({ tags }: Props): JSX.Element;

package/lib/theme/TagsListInline/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/TagsListInline';
 export default function TagsListInline({ tags }: Props): JSX.Element;

package/lib/theme/ThemedImage/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/ThemedImage';
 export default function ThemedImage(props: Props): JSX.Element;

package/lib/translations.js

@@ -6,7 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translateThemeConfig = exports.getTranslationFiles = void 0;
+exports.getTranslationFiles = getTranslationFiles;
+exports.translateThemeConfig = translateThemeConfig;
 const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const utils_1 = require("@docusaurus/utils");
@@ -165,7 +166,6 @@ function getTranslationFiles({ themeConfig, }) {
     ];
     return translationFiles.filter(Boolean);
 }
-exports.getTranslationFiles = getTranslationFiles;
 function translateThemeConfig({ themeConfig, translationFiles, }) {
     const translationFilesMap = lodash_1.default.keyBy(translationFiles, (f) => f.path);
     return {
@@ -176,4 +176,3 @@ function translateThemeConfig({ themeConfig, translationFiles, }) {
             : undefined,
     };
 }
-exports.translateThemeConfig = translateThemeConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,22 +20,22 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.4.0",
-    "@docusaurus/mdx-loader": "3.4.0",
-    "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/plugin-content-blog": "3.4.0",
-    "@docusaurus/plugin-content-docs": "3.4.0",
-    "@docusaurus/plugin-content-pages": "3.4.0",
-    "@docusaurus/theme-common": "3.4.0",
-    "@docusaurus/theme-translations": "3.4.0",
-    "@docusaurus/types": "3.4.0",
-    "@docusaurus/utils": "3.4.0",
-    "@docusaurus/utils-common": "3.4.0",
-    "@docusaurus/utils-validation": "3.4.0",
+    "@docusaurus/core": "3.5.0",
+    "@docusaurus/mdx-loader": "3.5.0",
+    "@docusaurus/module-type-aliases": "3.5.0",
+    "@docusaurus/plugin-content-blog": "3.5.0",
+    "@docusaurus/plugin-content-docs": "3.5.0",
+    "@docusaurus/plugin-content-pages": "3.5.0",
+    "@docusaurus/theme-common": "3.5.0",
+    "@docusaurus/theme-translations": "3.5.0",
+    "@docusaurus/types": "3.5.0",
+    "@docusaurus/utils": "3.5.0",
+    "@docusaurus/utils-common": "3.5.0",
+    "@docusaurus/utils-validation": "3.5.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "copy-text-to-clipboard": "^3.2.0",
-    "infima": "0.2.0-alpha.43",
+    "infima": "0.2.0-alpha.44",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.26",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "49e9a2143274a8dd795659b417b470bc42abbd6e"
+  "gitHead": "cb5829f3c34b26d798b869e38ee25073488140bd"
 }

package/src/getSwizzleConfig.ts

@@ -127,6 +127,27 @@ export default function getSwizzleConfig(): SwizzleConfig {
         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',
@@ -289,6 +310,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/options.ts

@@ -15,6 +15,7 @@ import type {
 } from '@docusaurus/types';
 
 const defaultPrismTheme = themes.palenight;
+
 const DEFAULT_DOCS_CONFIG: ThemeConfig['docs'] = {
   versionPersistence: 'localStorage',
   sidebar: {
@@ -22,11 +23,12 @@ const DEFAULT_DOCS_CONFIG: ThemeConfig['docs'] = {
     autoCollapseCategories: false,
   },
 };
-const DocsSchema = Joi.object({
+
+const DocsSchema = Joi.object<ThemeConfig['docs']>({
   versionPersistence: Joi.string()
     .equal('localStorage', 'none')
     .default(DEFAULT_DOCS_CONFIG.versionPersistence),
-  sidebar: Joi.object({
+  sidebar: Joi.object<ThemeConfig['docs']['sidebar']>({
     hideable: Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.hideable),
     autoCollapseCategories: Joi.bool().default(
       DEFAULT_DOCS_CONFIG.sidebar.autoCollapseCategories,
@@ -34,6 +36,18 @@ const DocsSchema = Joi.object({
   }).default(DEFAULT_DOCS_CONFIG.sidebar),
 }).default(DEFAULT_DOCS_CONFIG);
 
+const DEFAULT_BLOG_CONFIG: ThemeConfig['blog'] = {
+  sidebar: {
+    groupByYear: true,
+  },
+};
+
+const BlogSchema = Joi.object<ThemeConfig['blog']>({
+  sidebar: Joi.object<ThemeConfig['blog']['sidebar']>({
+    groupByYear: Joi.bool().default(DEFAULT_BLOG_CONFIG.sidebar.groupByYear),
+  }).default(DEFAULT_BLOG_CONFIG.sidebar),
+}).default(DEFAULT_BLOG_CONFIG);
+
 const DEFAULT_COLOR_MODE_CONFIG: ThemeConfig['colorMode'] = {
   defaultMode: 'light',
   disableSwitch: false,
@@ -43,6 +57,7 @@ const DEFAULT_COLOR_MODE_CONFIG: ThemeConfig['colorMode'] = {
 export const DEFAULT_CONFIG: ThemeConfig = {
   colorMode: DEFAULT_COLOR_MODE_CONFIG,
   docs: DEFAULT_DOCS_CONFIG,
+  blog: DEFAULT_BLOG_CONFIG,
   metadata: [],
   prism: {
     additionalLanguages: [],
@@ -333,6 +348,7 @@ export const ThemeConfigSchema = Joi.object<ThemeConfig>({
   colorMode: ColorModeSchema,
   image: Joi.string(),
   docs: DocsSchema,
+  blog: BlogSchema,
   metadata: Joi.array()
     .items(HtmlMetadataSchema)
     .default(DEFAULT_CONFIG.metadata),

package/src/theme/Blog/Components/Author/Socials/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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/Blog/Components/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 BlogAuthorSocials({
+  author,
+}: {
+  author: Props['author'];
+}): JSX.Element {
+  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/src/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/src/theme/Blog/Components/Author/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * 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, {type Props as LinkProps} from '@docusaurus/Link';
+import AuthorSocials from '@theme/Blog/Components/Author/Socials';
+import type {Props} from '@theme/Blog/Components/Author';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+function MaybeLink(props: LinkProps): JSX.Element {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+  return <>{props.children}</>;
+}
+
+function AuthorTitle({title}: {title: string}) {
+  return (
+    <small className={styles.authorTitle} title={title}>
+      {title}
+    </small>
+  );
+}
+
+function AuthorName({name, as}: {name: string; as: Props['as']}) {
+  if (!as) {
+    return <span className={styles.authorName}>{name}</span>;
+  } else {
+    return (
+      <Heading as={as} className={styles.authorName}>
+        {name}
+      </Heading>
+    );
+  }
+}
+
+function AuthorBlogPostCount({count}: {count: number}) {
+  return <span className={clsx(styles.authorBlogPostCount)}>{count}</span>;
+}
+
+// Note: in the future we might want to have multiple "BlogAuthor" components
+// Creating different display modes with the "as" prop may not be the best idea
+// Explainer: https://kyleshevlin.com/prefer-multiple-compositions/
+// For now, we almost use the same design for all cases, so it's good enough
+export default function BlogAuthor({
+  as,
+  author,
+  className,
+  count,
+}: Props): JSX.Element {
+  const {name, title, url, imageURL, email, page} = author;
+  const link =
+    page?.permalink || url || (email && `mailto:${email}`) || undefined;
+
+  return (
+    <div
+      className={clsx(
+        'avatar margin-bottom--sm',
+        className,
+        styles[`author-as-${as}`],
+      )}>
+      {imageURL && (
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img
+            className={clsx('avatar__photo', styles.authorImage)}
+            src={imageURL}
+            alt={name}
+          />
+        </MaybeLink>
+      )}
+
+      {(name || title) && (
+        <div className={clsx('avatar__intro', styles.authorDetails)}>
+          <div className="avatar__name">
+            {name && (
+              <MaybeLink href={link}>
+                <AuthorName name={name} as={as} />
+              </MaybeLink>
+            )}
+            {count && <AuthorBlogPostCount count={count} />}
+          </div>
+          {!!title && <AuthorTitle title={title} />}
+
+          {/*
+            We always render AuthorSocials even if there's none
+            This keeps other things aligned with flexbox layout
+          */}
+          <AuthorSocials author={author} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/theme/Blog/Components/Author/styles.module.css

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ */
+
+.authorImage {
+  --ifm-avatar-photo-size: 3.6rem;
+}
+
+.author-as-h1 .authorImage {
+  --ifm-avatar-photo-size: 7rem;
+}
+
+.author-as-h2 .authorImage {
+  --ifm-avatar-photo-size: 5.4rem;
+}
+
+.authorDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-around;
+}
+
+.authorName {
+  font-size: 1.1rem;
+  line-height: 1.1rem;
+  display: flex;
+  flex-direction: row;
+}
+
+.author-as-h1 .authorName {
+  font-size: 2.4rem;
+  line-height: 2.4rem;
+  display: inline;
+}
+
+.author-as-h2 .authorName {
+  font-size: 1.4rem;
+  line-height: 1.4rem;
+  display: inline;
+}
+
+.authorTitle {
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+  display: -webkit-box;
+  overflow: hidden;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.author-as-h1 .authorTitle {
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+}
+
+.author-as-h2 .authorTitle {
+  font-size: 1rem;
+  line-height: 1rem;
+}
+
+.authorBlogPostCount {
+  background: var(--ifm-color-secondary);
+  color: var(--ifm-color-black);
+  font-size: 0.8rem;
+  line-height: 1.2;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.1rem 0.4rem;
+  margin-left: 0.3rem;
+}