@docusaurus/theme-classic 2.0.0-beta.16 → 2.0.0-beta.19

package/lib/translations.js

@@ -45,6 +45,10 @@ function getNavbarTranslationFile(navbar) {
 function translateNavbar(navbar, navbarTranslations) {
   var _navbarTranslations$t;
 
+  if (!navbarTranslations) {
+    return navbar;
+  }
+
   return { ...navbar,
     title: ((_navbarTranslations$t = navbarTranslations.title) === null || _navbarTranslations$t === void 0 ? void 0 : _navbarTranslations$t.message) ?? navbar.title,
     //  TODO handle properly all the navbar item types here!
@@ -93,6 +97,10 @@ function getFooterTranslationFile(footer) {
 function translateFooter(footer, footerTranslations) {
   var _footerTranslations$c;
 
+  if (!footerTranslations) {
+    return footer;
+  }
+
   const links = isMultiColumnFooterLinks(footer.links) ? footer.links.map(link => {
     var _footerTranslations$;
 
@@ -137,10 +145,12 @@ function translateThemeConfig({
   themeConfig,
   translationFiles
 }) {
+  var _translationFilesMap$, _translationFilesMap$2;
+
   const translationFilesMap = _lodash.default.keyBy(translationFiles, f => f.path);
 
   return { ...themeConfig,
-    navbar: translateNavbar(themeConfig.navbar, translationFilesMap.navbar.content),
-    footer: themeConfig.footer ? translateFooter(themeConfig.footer, translationFilesMap.footer.content) : undefined
+    navbar: translateNavbar(themeConfig.navbar, (_translationFilesMap$ = translationFilesMap.navbar) === null || _translationFilesMap$ === void 0 ? void 0 : _translationFilesMap$.content),
+    footer: themeConfig.footer ? translateFooter(themeConfig.footer, (_translationFilesMap$2 = translationFilesMap.footer) === null || _translationFilesMap$2 === void 0 ? void 0 : _translationFilesMap$2.content) : undefined
   };
 }

package/lib/validateThemeConfig.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.ThemeConfigSchema = exports.DEFAULT_CONFIG = void 0;
 exports.validateThemeConfig = validateThemeConfig;
 
+var _palenight = _interopRequireDefault(require("prism-react-renderer/themes/palenight"));
+
 var _utilsValidation = require("@docusaurus/utils-validation");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -15,37 +19,46 @@ var _utilsValidation = require("@docusaurus/utils-validation");
  * LICENSE file in the root directory of this source tree.
  */
 const DEFAULT_DOCS_CONFIG = {
-  versionPersistence: 'localStorage'
+  versionPersistence: 'localStorage',
+  sidebar: {
+    hideable: false,
+    autoCollapseCategories: false
+  }
 };
 
 const DocsSchema = _utilsValidation.Joi.object({
-  versionPersistence: _utilsValidation.Joi.string().equal('localStorage', 'none').default(DEFAULT_DOCS_CONFIG.versionPersistence)
+  versionPersistence: _utilsValidation.Joi.string().equal('localStorage', 'none').default(DEFAULT_DOCS_CONFIG.versionPersistence),
+  sidebar: _utilsValidation.Joi.object({
+    hideable: _utilsValidation.Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.hideable),
+    autoCollapseCategories: _utilsValidation.Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.autoCollapseCategories)
+  }).default(DEFAULT_DOCS_CONFIG.sidebar)
 }).default(DEFAULT_DOCS_CONFIG);
 
 const DEFAULT_COLOR_MODE_CONFIG = {
   defaultMode: 'light',
   disableSwitch: false,
-  respectPrefersColorScheme: false,
-  switchConfig: {
-    darkIcon: '🌜',
-    darkIconStyle: {},
-    lightIcon: '🌞',
-    lightIconStyle: {}
-  }
+  respectPrefersColorScheme: false
 };
 const DEFAULT_CONFIG = {
   colorMode: DEFAULT_COLOR_MODE_CONFIG,
   docs: DEFAULT_DOCS_CONFIG,
   metadata: [],
   prism: {
-    additionalLanguages: []
+    additionalLanguages: [],
+    theme: _palenight.default,
+    magicComments: [{
+      className: 'theme-code-block-highlighted-line',
+      line: 'highlight-next-line',
+      block: {
+        start: 'highlight-start',
+        end: 'highlight-end'
+      }
+    }]
   },
   navbar: {
     hideOnScroll: false,
     items: []
   },
-  hideableSidebar: false,
-  autoCollapseSidebarCategories: false,
   tableOfContents: {
     minHeadingLevel: 2,
     maxHeadingLevel: 3
@@ -57,8 +70,9 @@ const NavbarItemPosition = _utilsValidation.Joi.string().equal('left', 'right').
 
 const NavbarItemBaseSchema = _utilsValidation.Joi.object({
   label: _utilsValidation.Joi.string(),
+  html: _utilsValidation.Joi.string(),
   className: _utilsValidation.Joi.string()
-}) // We allow any unknown attributes on the links (users may need additional
+}).nand('html', 'label') // We allow any unknown attributes on the links (users may need additional
 // attributes like target, aria-role, data-customAttribute...)
 .unknown();
 
@@ -91,9 +105,24 @@ const DocSidebarItemSchema = NavbarItemBaseSchema.append({
   docsPluginId: _utilsValidation.Joi.string()
 });
 
+const HtmlNavbarItemSchema = _utilsValidation.Joi.object({
+  className: _utilsValidation.Joi.string(),
+  type: _utilsValidation.Joi.string().equal('html').required(),
+  value: _utilsValidation.Joi.string().required()
+}); // A temporary workaround to allow users to add custom navbar items
+// See https://github.com/facebook/docusaurus/issues/7227
+
+
+const CustomNavbarItemRegexp = /custom-.*/;
+
+const CustomNavbarItemSchema = _utilsValidation.Joi.object({
+  type: _utilsValidation.Joi.string().regex(CustomNavbarItemRegexp).required()
+}).unknown();
+
 const itemWithType = type => {
-  // because equal(undefined) is not supported :/
-  const typeSchema = type ? _utilsValidation.Joi.string().required().equal(type) : _utilsValidation.Joi.string().forbidden();
+  // Because equal(undefined) is not supported :/
+  const typeSchema = // eslint-disable-next-line no-nested-ternary
+  type instanceof RegExp ? _utilsValidation.Joi.string().required().regex(type) : type ? _utilsValidation.Joi.string().required().equal(type) : _utilsValidation.Joi.string().forbidden();
   return _utilsValidation.Joi.object({
     type: typeSchema
   }).unknown().required();
@@ -114,6 +143,12 @@ const DropdownSubitemSchema = _utilsValidation.Joi.object({
   }, {
     is: itemWithType(undefined),
     then: DefaultNavbarItemSchema
+  }, {
+    is: itemWithType('html'),
+    then: HtmlNavbarItemSchema
+  }, {
+    is: itemWithType(CustomNavbarItemRegexp),
+    then: CustomNavbarItemSchema
   }, {
     is: _utilsValidation.Joi.alternatives().try(itemWithType('dropdown'), itemWithType('docsVersionDropdown'), itemWithType('localeDropdown'), itemWithType('search')),
     then: _utilsValidation.Joi.forbidden().messages({
@@ -169,6 +204,12 @@ const NavbarItemSchema = _utilsValidation.Joi.object({
   }, {
     is: itemWithType('search'),
     then: SearchItemSchema
+  }, {
+    is: itemWithType('html'),
+    then: HtmlNavbarItemSchema
+  }, {
+    is: itemWithType(CustomNavbarItemRegexp),
+    then: CustomNavbarItemSchema
   }, {
     is: itemWithType(undefined),
     then: _utilsValidation.Joi.object().when('.', {
@@ -189,14 +230,10 @@ const ColorModeSchema = _utilsValidation.Joi.object({
   defaultMode: _utilsValidation.Joi.string().equal('dark', 'light').default(DEFAULT_COLOR_MODE_CONFIG.defaultMode),
   disableSwitch: _utilsValidation.Joi.bool().default(DEFAULT_COLOR_MODE_CONFIG.disableSwitch),
   respectPrefersColorScheme: _utilsValidation.Joi.bool().default(DEFAULT_COLOR_MODE_CONFIG.respectPrefersColorScheme),
-  switchConfig: _utilsValidation.Joi.object({
-    darkIcon: _utilsValidation.Joi.string().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIcon),
-    darkIconStyle: _utilsValidation.Joi.object().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIconStyle),
-    lightIcon: _utilsValidation.Joi.string().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIcon),
-    lightIconStyle: _utilsValidation.Joi.object().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIconStyle)
-  }).default(DEFAULT_COLOR_MODE_CONFIG.switchConfig)
-}).default(DEFAULT_COLOR_MODE_CONFIG); // schema can probably be improved
-
+  switchConfig: _utilsValidation.Joi.any().forbidden().messages({
+    'any.unknown': 'colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.'
+  })
+}).default(DEFAULT_COLOR_MODE_CONFIG);
 
 const HtmlMetadataSchema = _utilsValidation.Joi.object({
   id: _utilsValidation.Joi.string(),
@@ -266,7 +303,7 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
     style: _utilsValidation.Joi.string().equal('dark', 'light').default('light'),
     logo: _utilsValidation.Joi.object({
       alt: _utilsValidation.Joi.string().allow(''),
-      src: _utilsValidation.Joi.string(),
+      src: _utilsValidation.Joi.string().required(),
       srcDark: _utilsValidation.Joi.string(),
       // TODO infer this from reading the image
       width: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.string(), _utilsValidation.Joi.number()),
@@ -285,16 +322,28 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
     theme: _utilsValidation.Joi.object({
       plain: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required(),
       styles: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required()
-    }),
+    }).default(DEFAULT_CONFIG.prism.theme),
     darkTheme: _utilsValidation.Joi.object({
       plain: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required(),
       styles: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required()
     }),
     defaultLanguage: _utilsValidation.Joi.string(),
-    additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages)
+    additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages),
+    magicComments: _utilsValidation.Joi.array().items(_utilsValidation.Joi.object({
+      className: _utilsValidation.Joi.string().required(),
+      line: _utilsValidation.Joi.string(),
+      block: _utilsValidation.Joi.object({
+        start: _utilsValidation.Joi.string().required(),
+        end: _utilsValidation.Joi.string().required()
+      })
+    }).or('line', 'block')).default(DEFAULT_CONFIG.prism.magicComments)
   }).default(DEFAULT_CONFIG.prism).unknown(),
-  hideableSidebar: _utilsValidation.Joi.bool().default(DEFAULT_CONFIG.hideableSidebar),
-  autoCollapseSidebarCategories: _utilsValidation.Joi.bool().default(DEFAULT_CONFIG.autoCollapseSidebarCategories),
+  hideableSidebar: _utilsValidation.Joi.forbidden().messages({
+    'any.unknown': 'themeConfig.hideableSidebar has been moved to themeConfig.docs.sidebar.hideable.'
+  }),
+  autoCollapseSidebarCategories: _utilsValidation.Joi.forbidden().messages({
+    'any.unknown': 'themeConfig.autoCollapseSidebarCategories has been moved to themeConfig.docs.sidebar.autoCollapseCategories.'
+  }),
   sidebarCollapsible: _utilsValidation.Joi.forbidden().messages({
     'any.unknown': 'The themeConfig.sidebarCollapsible has been moved to docs plugin options. See: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs'
   }),

package/lib-next/theme/BackToTopButton/index.js

@@ -4,110 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useRef, useState} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
+import {ThemeClassNames, useBackToTopButton} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
-import {
-  ThemeClassNames,
-  useScrollPosition,
-  useLocationChange,
-} from '@docusaurus/theme-common';
-const threshold = 300; // Not all have support for smooth scrolling (particularly Safari mobile iOS)
-// TODO proper detection is currently unreliable!
-// see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
-
-const SupportsNativeSmoothScrolling = false; // const SupportsNativeSmoothScrolling =
-//   ExecutionEnvironment.canUseDOM &&
-//   'scrollBehavior' in document.documentElement.style;
-
-function smoothScrollTopNative() {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth',
-  });
-  return () => {
-    // Nothing to cancel, it's natively cancelled if user tries to scroll down
-  };
-}
-
-function smoothScrollTopPolyfill() {
-  let raf = null;
-
-  function rafRecursion() {
-    const currentScroll = document.documentElement.scrollTop;
-
-    if (currentScroll > 0) {
-      raf = requestAnimationFrame(rafRecursion);
-      window.scrollTo(0, Math.floor(currentScroll * 0.85));
-    }
-  }
-
-  rafRecursion(); // Break the recursion. Prevents the user from "fighting" against that
-  // recursion producing a weird UX
-
-  return () => raf && cancelAnimationFrame(raf);
-}
-
-function useSmoothScrollToTop() {
-  const lastCancelRef = useRef(null);
-
-  function smoothScrollTop() {
-    lastCancelRef.current = SupportsNativeSmoothScrolling
-      ? smoothScrollTopNative()
-      : smoothScrollTopPolyfill();
-  }
-
-  return {
-    smoothScrollTop,
-    cancelScrollToTop: () => lastCancelRef.current?.(),
-  };
-}
-
 export default function BackToTopButton() {
-  const [show, setShow] = useState(false);
-  const isFocusedAnchor = useRef(false);
-  const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
-  useScrollPosition(({scrollY: scrollTop}, lastPosition) => {
-    const lastScrollTop = lastPosition?.scrollY; // No lastScrollTop means component is just being mounted.
-    // Not really a scroll event from the user, so we ignore it
-
-    if (!lastScrollTop) {
-      return;
-    }
-
-    if (isFocusedAnchor.current) {
-      isFocusedAnchor.current = false;
-      return;
-    }
-
-    const isScrollingUp = scrollTop < lastScrollTop;
-
-    if (!isScrollingUp) {
-      cancelScrollToTop();
-    }
-
-    if (scrollTop < threshold) {
-      setShow(false);
-      return;
-    }
-
-    if (isScrollingUp) {
-      const documentHeight = document.documentElement.scrollHeight;
-      const windowHeight = window.innerHeight;
-
-      if (scrollTop + windowHeight < documentHeight) {
-        setShow(true);
-      }
-    } else {
-      setShow(false);
-    }
-  });
-  useLocationChange((locationChangeEvent) => {
-    if (locationChangeEvent.location.hash) {
-      isFocusedAnchor.current = true;
-      setShow(false);
-    }
+  const {shown, scrollToTop} = useBackToTopButton({
+    threshold: 300,
   });
   return (
     <button
@@ -120,12 +24,10 @@ export default function BackToTopButton() {
         'clean-btn',
         ThemeClassNames.common.backToTopButton,
         styles.backToTopButton,
-        {
-          [styles.backToTopButtonShow]: show,
-        },
+        shown && styles.backToTopButtonShow,
       )}
       type="button"
-      onClick={() => smoothScrollTop()}
+      onClick={scrollToTop}
     />
   );
 }

package/lib-next/theme/BlogArchivePage/index.js

@@ -8,6 +8,7 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
 
 function Year({year, posts}) {
   return (
@@ -45,7 +46,7 @@ function YearsSection({years}) {
 function listPostsByYears(blogPosts) {
   const postsByYear = blogPosts.reduceRight((posts, post) => {
     const year = post.metadata.date.split('-')[0];
-    const yearPosts = posts.get(year) || [];
+    const yearPosts = posts.get(year) ?? [];
     return posts.set(year, [post, ...yearPosts]);
   }, new Map());
   return Array.from(postsByYear, ([year, posts]) => ({
@@ -67,14 +68,17 @@ export default function BlogArchive({archive}) {
   });
   const years = listPostsByYears(archive.blogPosts);
   return (
-    <Layout title={title} description={description}>
-      <header className="hero hero--primary">
-        <div className="container">
-          <h1 className="hero__title">{title}</h1>
-          <p className="hero__subtitle">{description}</p>
-        </div>
-      </header>
-      <main>{years.length > 0 && <YearsSection years={years} />}</main>
-    </Layout>
+    <>
+      <PageMetadata title={title} description={description} />
+      <Layout>
+        <header className="hero hero--primary">
+          <div className="container">
+            <h1 className="hero__title">{title}</h1>
+            <p className="hero__subtitle">{description}</p>
+          </div>
+        </header>
+        <main>{years.length > 0 && <YearsSection years={years} />}</main>
+      </Layout>
+    </>
   );
 }

package/lib-next/theme/BlogLayout/index.js

@@ -15,11 +15,7 @@ export default function BlogLayout(props) {
     <Layout {...layoutProps}>
       <div className="container margin-vert--lg">
         <div className="row">
-          {hasSidebar && (
-            <aside className="col col--3">
-              <BlogSidebar sidebar={sidebar} />
-            </aside>
-          )}
+          <BlogSidebar sidebar={sidebar} />
           <main
             className={clsx('col', {
               'col--7': hasSidebar,

package/lib-next/theme/BlogListPage/index.js

@@ -9,9 +9,16 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-export default function BlogListPage(props) {
-  const {metadata, items, sidebar} = props;
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx';
+
+function BlogListPageMetadata(props) {
+  const {metadata} = props;
   const {
     siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
@@ -19,16 +26,17 @@ export default function BlogListPage(props) {
   const isBlogOnlyMode = permalink === '/';
   const title = isBlogOnlyMode ? siteTitle : blogTitle;
   return (
-    <BlogLayout
-      title={title}
-      description={blogDescription}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'blog_posts_list',
-      }}
-      sidebar={sidebar}>
+    <>
+      <PageMetadata title={title} description={blogDescription} />
+      <SearchMetadata tag="blog_posts_list" />
+    </>
+  );
+}
+
+function BlogListPageContent(props) {
+  const {metadata, items, sidebar} = props;
+  return (
+    <BlogLayout sidebar={sidebar}>
       {items.map(({content: BlogPostContent}) => (
         <BlogPostItem
           key={BlogPostContent.metadata.permalink}
@@ -43,3 +51,16 @@ export default function BlogListPage(props) {
     </BlogLayout>
   );
 }
+
+export default function BlogListPage(props) {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogListPage,
+      )}>
+      <BlogListPageMetadata {...props} />
+      <BlogListPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}

package/lib-next/theme/BlogListPaginator/index.js

@@ -18,34 +18,31 @@ export default function BlogListPaginator(props) {
         message: 'Blog list page navigation',
         description: 'The ARIA label for the blog pagination',
       })}>
-      <div className="pagination-nav__item">
-        {previousPage && (
-          <PaginatorNavLink
-            permalink={previousPage}
-            title={
-              <Translate
-                id="theme.blog.paginator.newerEntries"
-                description="The label used to navigate to the newer blog posts page (previous page)">
-                Newer Entries
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextPage && (
-          <PaginatorNavLink
-            permalink={nextPage}
-            title={
-              <Translate
-                id="theme.blog.paginator.olderEntries"
-                description="The label used to navigate to the older blog posts page (next page)">
-                Older Entries
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {previousPage && (
+        <PaginatorNavLink
+          permalink={previousPage}
+          title={
+            <Translate
+              id="theme.blog.paginator.newerEntries"
+              description="The label used to navigate to the newer blog posts page (previous page)">
+              Newer Entries
+            </Translate>
+          }
+        />
+      )}
+      {nextPage && (
+        <PaginatorNavLink
+          permalink={nextPage}
+          title={
+            <Translate
+              id="theme.blog.paginator.olderEntries"
+              description="The label used to navigate to the older blog posts page (next page)">
+              Older Entries
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

package/lib-next/theme/BlogPostAuthor/index.js

@@ -6,15 +6,24 @@
  */
 import React from 'react';
 import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
+
+function MaybeLink(props) {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+
+  return <>{props.children}</>;
+}
+
 export default function BlogPostAuthor({author}) {
-  const {name, title, url, imageURL} = author;
+  const {name, title, url, imageURL, email} = author;
+  const link = url || (email && `mailto:${email}`) || undefined;
   return (
     <div className="avatar margin-bottom--sm">
       {imageURL && (
-        <Link className="avatar__photo-link avatar__photo" href={url}>
-          <img className={styles.image} src={imageURL} alt={name} />
-        </Link>
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img className="avatar__photo" src={imageURL} alt={name} />
+        </MaybeLink>
       )}
 
       {name && (
@@ -24,9 +33,9 @@ export default function BlogPostAuthor({author}) {
           itemScope
           itemType="https://schema.org/Person">
           <div className="avatar__name">
-            <Link href={url} itemProp="url">
+            <MaybeLink href={link} itemProp="url">
               <span itemProp="name">{name}</span>
-            </Link>
+            </MaybeLink>
           </div>
           {title && (
             <small className="avatar__subtitle" itemProp="description">

package/lib-next/theme/BlogPostItem/index.js

@@ -6,13 +6,12 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {MDXProvider} from '@mdx-js/react';
 import Translate, {translate} from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import {usePluralForm} from '@docusaurus/theme-common';
 import {blogPostContainerID} from '@docusaurus/utils-common';
-import MDXComponents from '@theme/MDXComponents';
+import MDXContent from '@theme/MDXContent';
 import EditThisPage from '@theme/EditThisPage';
 import styles from './styles.module.css';
 import TagsListInline from '@theme/TagsListInline';
@@ -108,14 +107,15 @@ export default function BlogPostItem(props) {
         id={isBlogPostPage ? blogPostContainerID : undefined}
         className="markdown"
         itemProp="articleBody">
-        <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+        <MDXContent>{children}</MDXContent>
       </div>
 
       {(tagsExists || truncated) && (
         <footer
-          className={clsx('row docusaurus-mt-lg', {
-            [styles.blogPostDetailsFull]: isBlogPostPage,
-          })}>
+          className={clsx(
+            'row docusaurus-mt-lg',
+            isBlogPostPage && styles.blogPostDetailsFull,
+          )}>
           {tagsExists && (
             <div
               className={clsx('col', {

package/lib-next/theme/BlogPostItem/styles.module.css

@@ -9,6 +9,15 @@
   font-size: 3rem;
 }
 
+/**
+  Blog post title should be smaller on smaller devices
+**/
+@media (max-width: 576px) {
+  .blogPostTitle {
+    font-size: 2rem;
+  }
+}
+
 .blogPostData {
   font-size: 0.9rem;
 }