@docusaurus/theme-classic 2.0.0-beta.8e9b829d9 → 2.0.0-beta.9

package/lib/theme/DocSidebar/index.js

@@ -13,8 +13,6 @@ var _themeCommon = require("@docusaurus/theme-common");
 
 var _useWindowSize = _interopRequireDefault(require("@theme/hooks/useWindowSize"));
 
-var _useScrollPosition = _interopRequireDefault(require("@theme/hooks/useScrollPosition"));
-
 var _Logo = _interopRequireDefault(require("@theme/Logo"));
 
 var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
@@ -39,17 +37,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function useShowAnnouncementBar() {
   const {
-    isClosed
+    isActive
   } = (0, _themeCommon.useAnnouncementBar)();
-  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(!isClosed);
-  (0, _useScrollPosition.default)(({
+  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(isActive);
+  (0, _themeCommon.useScrollPosition)(({
     scrollY
   }) => {
-    if (!isClosed) {
+    if (isActive) {
       setShowAnnouncementBar(scrollY === 0);
     }
-  });
-  return showAnnouncementBar;
+  }, [isActive]);
+  return isActive && showAnnouncementBar;
 }
 
 function HideableSidebarButton({
@@ -81,19 +79,16 @@ function DocSidebarDesktop({
     },
     hideableSidebar
   } = (0, _themeCommon.useThemeConfig)();
-  const {
-    isClosed: isAnnouncementBarClosed
-  } = (0, _themeCommon.useAnnouncementBar)();
   return <div className={(0, _clsx.default)(_stylesModule.default.sidebar, {
     [_stylesModule.default.sidebarWithHideableNavbar]: hideOnScroll,
     [_stylesModule.default.sidebarHidden]: isHidden
   })}>
       {hideOnScroll && <_Logo.default tabIndex={-1} className={_stylesModule.default.sidebarLogo} />}
       <nav className={(0, _clsx.default)('menu thin-scrollbar', _stylesModule.default.menu, {
-      [_stylesModule.default.menuWithAnnouncementBar]: !isAnnouncementBarClosed && showAnnouncementBar
+      [_stylesModule.default.menuWithAnnouncementBar]: showAnnouncementBar
     })}>
-        <ul className="menu__list">
-          <_DocSidebarItem.DocSidebarItems items={sidebar} activePath={path} />
+        <ul className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+          <_DocSidebarItem.DocSidebarItems items={sidebar} activePath={path} level={1} />
         </ul>
       </nav>
       {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
@@ -105,8 +100,8 @@ const DocSidebarMobileSecondaryMenu = ({
   sidebar,
   path
 }) => {
-  return <ul className="menu__list">
-      <_DocSidebarItem.DocSidebarItems items={sidebar} activePath={path} onItemClick={() => toggleSidebar()} />
+  return <ul className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+      <_DocSidebarItem.DocSidebarItems items={sidebar} activePath={path} onItemClick={() => toggleSidebar()} level={1} />
     </ul>;
 };
 

package/lib/theme/DocSidebarItem/index.js

@@ -89,19 +89,21 @@ function useAutoExpandActiveCategory({
     if (justBecameActive && collapsed) {
       setCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed]);
+  }, [isActive, wasActive, collapsed, setCollapsed]);
 }
 
 function DocSidebarItemCategory({
   item,
   onItemClick,
   activePath,
+  level,
   ...props
 }) {
   const {
     items,
     label,
-    collapsible
+    collapsible,
+    className
   } = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const {
@@ -124,9 +126,9 @@ function DocSidebarItemCategory({
     collapsed,
     setCollapsed
   });
-  return <li className={(0, _clsx.default)('menu__list-item', {
+  return <li className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarItemCategory, _themeCommon.ThemeClassNames.docs.docSidebarItemCategoryLevel(level), 'menu__list-item', {
     'menu__list-item--collapsed': collapsed
-  })}>
+  }, className)}>
       {
       /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
     }
@@ -142,7 +144,7 @@ function DocSidebarItemCategory({
       </a>
 
       <_themeCommon.Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
-        <DocSidebarItems items={items} tabIndex={collapsed ? -1 : 0} onItemClick={onItemClick} activePath={activePath} />
+        <DocSidebarItems items={items} tabIndex={collapsed ? -1 : 0} onItemClick={onItemClick} activePath={activePath} level={level + 1} />
       </_themeCommon.Collapsible>
     </li>;
 }
@@ -151,19 +153,19 @@ function DocSidebarItemLink({
   item,
   onItemClick,
   activePath,
+  level,
   ...props
 }) {
   const {
     href,
-    label
+    label,
+    className
   } = item;
   const isActive = isActiveSidebarItem(item, activePath);
-  return <li className="menu__list-item" key={label}>
+  return <li className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarItemLink, _themeCommon.ThemeClassNames.docs.docSidebarItemLinkLevel(level), 'menu__list-item', className)} key={label}>
       <_Link.default className={(0, _clsx.default)('menu__link', {
       'menu__link--active': isActive
-    })} to={href} {...(0, _isInternalUrl.default)(href) && {
-      isNavLink: true,
-      exact: true,
+    })} aria-current={isActive ? 'page' : undefined} to={href} {...(0, _isInternalUrl.default)(href) && {
       onClick: onItemClick
     }} {...props}>
         {(0, _isInternalUrl.default)(href) ? label : <span>

package/lib/theme/DocTagDocListPage/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocTagDocListPage;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = _interopRequireDefault(require("@theme/Layout"));
+
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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.
+ */
+// Very simple pluralization: probably good enough for now
+function useNDocsTaggedPlural() {
+  const {
+    selectMessage
+  } = (0, _themeCommon.usePluralForm)();
+  return count => selectMessage(count, (0, _Translate.translate)({
+    id: 'theme.docs.tagDocListPageTitle.nDocsTagged',
+    description: 'Pluralized label for "{count} docs tagged". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
+    message: 'One doc tagged|{count} docs tagged'
+  }, {
+    count
+  }));
+}
+
+function DocItem({
+  doc
+}) {
+  return <article className="margin-vert--lg">
+      <_Link.default to={doc.permalink}>
+        <h2>{doc.title}</h2>
+      </_Link.default>
+      {doc.description && <p>{doc.description}</p>}
+    </article>;
+}
+
+function DocTagDocListPage({
+  tag
+}) {
+  const nDocsTaggedPlural = useNDocsTaggedPlural();
+  const title = (0, _Translate.translate)({
+    id: 'theme.docs.tagDocListPageTitle',
+    description: 'The title of the page for a docs tag',
+    message: '{nDocsTagged} with "{tagName}"'
+  }, {
+    nDocsTagged: nDocsTaggedPlural(tag.docs.length),
+    tagName: tag.name
+  });
+  return <_Layout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docsPages} pageClassName={_themeCommon.ThemeClassNames.page.docsTagDocListPage} searchMetadatas={{
+    // assign unique search tag to exclude this page from search results!
+    tag: 'doc_tag_doc_list'
+  }}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <main className="col col--8 col--offset-2">
+            <header className="margin-bottom--xl">
+              <h1>{title}</h1>
+              <_Link.default href={tag.allTagsPath}>
+                <_Translate.default id="theme.tags.tagsPageLink" description="The label of the link targeting the tag list page">
+                  View All Tags
+                </_Translate.default>
+              </_Link.default>
+            </header>
+            <section className="margin-vert--lg">
+              {tag.docs.map(doc => <DocItem key={doc.id} doc={doc} />)}
+            </section>
+          </main>
+        </div>
+      </div>
+    </_Layout.default>;
+}

package/lib/theme/DocTagsListPage/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = _interopRequireDefault(require("@theme/Layout"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _TagsListByLetter = _interopRequireDefault(require("@theme/TagsListByLetter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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.
+ */
+function DocTagsListPage({
+  tags
+}) {
+  const title = (0, _themeCommon.translateTagsPageTitle)();
+  return <_Layout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docsPages} pageClassName={_themeCommon.ThemeClassNames.page.docsTagsListPage} searchMetadatas={{
+    // assign unique search tag to exclude this page from search results!
+    tag: 'doc_tags_list'
+  }}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <main className="col col--8 col--offset-2">
+            <h1>{title}</h1>
+            <_TagsListByLetter.default tags={tags} />
+          </main>
+        </div>
+      </div>
+    </_Layout.default>;
+}
+
+var _default = DocTagsListPage;
+exports.default = _default;

package/lib/theme/DocVersionBanner/index.js

@@ -17,6 +17,8 @@ var _useDocs = require("@theme/hooks/useDocs");
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -104,7 +106,7 @@ function DocVersionBannerEnabled({
   // fallback to main doc of latest version
 
   const latestVersionSuggestedDoc = latestDocSuggestion !== null && latestDocSuggestion !== void 0 ? latestDocSuggestion : getVersionMainDoc(latestVersionSuggestion);
-  return <div className="alert alert--warning margin-bottom--md" role="alert">
+  return <div className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docVersionBanner, 'alert alert--warning margin-bottom--md')} role="alert">
       <div>
         <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
       </div>
@@ -117,11 +119,11 @@ function DocVersionBannerEnabled({
 function DocVersionBanner({
   versionMetadata
 }) {
-  if (versionMetadata.banner === 'none') {
-    return <></>;
-  } else {
+  if (versionMetadata.banner) {
     return <DocVersionBannerEnabled versionMetadata={versionMetadata} />;
   }
+
+  return <></>;
 }
 
 var _default = DocVersionBanner;

package/lib/theme/EditThisPage/index.js

@@ -11,6 +11,8 @@ var _Translate = _interopRequireDefault(require("@docusaurus/Translate"));
 
 var _IconEdit = _interopRequireDefault(require("@theme/IconEdit"));
 
+var _themeCommon = require("@docusaurus/theme-common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -22,7 +24,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function EditThisPage({
   editUrl
 }) {
-  return <a href={editUrl} target="_blank" rel="noreferrer noopener">
+  return <a href={editUrl} target="_blank" rel="noreferrer noopener" className={_themeCommon.ThemeClassNames.common.editThisPage}>
       <_IconEdit.default />
       <_Translate.default id="theme.common.editThisPage" description="The link label to edit the current page">
         Edit this page

package/lib/theme/Footer/index.js

@@ -56,8 +56,10 @@ function FooterLink({
 
 const FooterLogo = ({
   sources,
-  alt
-}) => <_ThemedImage.default className="footer__logo" alt={alt} sources={sources} />;
+  alt,
+  width,
+  height
+}) => <_ThemedImage.default className="footer__logo" alt={alt} sources={sources} width={width} height={height} />;
 
 function Footer() {
   const {
@@ -98,7 +100,7 @@ function Footer() {
         {(logo || copyright) && <div className="footer__bottom text--center">
             {logo && (logo.src || logo.srcDark) && <div className="margin-bottom--sm">
                 {logo.href ? <_Link.default href={logo.href} className={_stylesModule.default.footerLogoLink}>
-                    <FooterLogo alt={logo.alt} sources={sources} />
+                    <FooterLogo alt={logo.alt} sources={sources} width={logo.width} height={logo.height} />
                   </_Link.default> : <FooterLogo alt={logo.alt} sources={sources} />}
               </div>}
             {copyright ? <div className="footer__copyright" // Developer provided the HTML, so assume it's safe.

package/lib/theme/Heading/index.js

@@ -25,13 +25,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
 const MainHeading = function MainHeading({ ...props
 }) {
   return <header>
       <h1 {...props} id={undefined} // h1 headings do not need an id because they don't appear in the TOC
-    className={_stylesModule.default.h1Heading}>
+    >
         {props.children}
       </h1>
     </header>;
@@ -53,17 +51,17 @@ const createAnchorHeading = Tag => function TargetComponent({
     return <Tag {...props} />;
   }
 
-  return <Tag {...props}>
-        <a aria-hidden="true" tabIndex={-1} className={(0, _clsx.default)('anchor', {
-      [_stylesModule.default.enhancedAnchor]: !hideOnScroll
-    })} id={id} />
+  return <Tag {...props} className={(0, _clsx.default)('anchor', {
+    [_stylesModule.default.anchorWithHideOnScrollNavbar]: hideOnScroll,
+    [_stylesModule.default.anchorWithStickyNavbar]: !hideOnScroll
+  })} id={id}>
         {props.children}
-        <a className="hash-link" href={`#${id}`} title={(0, _Translate.translate)({
+        <a aria-hidden="true" className="hash-link" href={`#${id}`} title={(0, _Translate.translate)({
       id: 'theme.common.headingLinkTitle',
       message: 'Direct link to heading',
       description: 'Title for link to heading'
     })}>
-          #
+          &#8203;
         </a>
       </Tag>;
 };

package/lib/theme/Heading/styles.css

@@ -5,18 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.anchor {
-  display: block;
-  position: relative;
-  top: -0.5rem;
-}
-
 .hash-link {
   opacity: 0;
   padding-left: 0.5rem;
   transition: opacity var(--ifm-transition-fast);
 }
 
+.hash-link:before {
+  content: '#';
+}
+
 .hash-link:focus,
 *:hover > .hash-link {
   opacity: 1;

package/lib/theme/Heading/styles.module.css

@@ -5,11 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.enhancedAnchor {
-  top: calc(var(--ifm-navbar-height) * -1 - 0.5rem);
+/*
+When the navbar is sticky, ensure that on anchor click,
+the browser does not scroll that anchor behind the navbar
+See https://twitter.com/JoshWComeau/status/1332015868725891076
+ */
+.anchorWithStickyNavbar {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
 }
 
-.h1Heading {
-  font-size: 3rem;
-  margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+.anchorWithHideOnScrollNavbar {
+  scroll-margin-top: 0.5rem;
 }

package/lib/theme/IconClose/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconClose;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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.
+ */
+function IconClose({
+  width = 21,
+  height = 21,
+  color = 'currentColor',
+  strokeWidth = 1.2,
+  className,
+  ...restProps
+}) {
+  return <svg viewBox="0 0 15 15" width={width} height={height} {...restProps}>
+      <g stroke={color} strokeWidth={strokeWidth}>
+        <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25" />
+      </g>
+    </svg>;
+}

package/lib/theme/LastUpdated/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Translate = _interopRequireDefault(require("@docusaurus/Translate"));
 
+var _themeCommon = require("@docusaurus/theme-common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -47,7 +49,7 @@ function LastUpdated({
   formattedLastUpdatedAt,
   lastUpdatedBy
 }) {
-  return <>
+  return <span className={_themeCommon.ThemeClassNames.common.lastUpdated}>
       <_Translate.default id="theme.lastUpdated.lastUpdatedAtBy" description="The sentence used to display when a page has been last updated, and by who" values={{
       atDate: lastUpdatedAt && formattedLastUpdatedAt ? <LastUpdatedAtDate lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} /> : '',
       byUser: lastUpdatedBy ? <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} /> : ''
@@ -57,5 +59,5 @@ function LastUpdated({
       {process.env.NODE_ENV === 'development' && <div>
           <small> (Simulated during dev for better perf)</small>
         </div>}
-    </>;
+    </span>;
 }

package/lib/theme/LayoutHead/index.js

@@ -86,17 +86,17 @@ function CanonicalUrlHeaders({
 function LayoutHead(props) {
   const {
     siteConfig: {
-      favicon,
-      themeConfig: {
-        metadatas,
-        image: defaultImage
-      }
+      favicon
     },
     i18n: {
       currentLocale,
       localeConfigs
     }
   } = (0, _useDocusaurusContext.default)();
+  const {
+    metadatas,
+    image: defaultImage
+  } = (0, _themeCommon.useThemeConfig)();
   const {
     title,
     description,
@@ -117,14 +117,16 @@ function LayoutHead(props) {
         {favicon && <link rel="shortcut icon" href={faviconUrl} />}
         <title>{pageTitle}</title>
         <meta property="og:title" content={pageTitle} />
-        {image || defaultImage && <meta name="twitter:card" content="summary_large_image" />}
+        <meta name="twitter:card" content="summary_large_image" />
       </_Head.default>
 
-      <_Seo.default {...{
-      description,
-      keywords,
-      image
-    }} />
+      {
+      /* image can override the default image */
+    }
+      {defaultImage && <_Seo.default image={defaultImage} />}
+      {image && <_Seo.default image={image} />}
+
+      <_Seo.default description={description} keywords={keywords} />
 
       <CanonicalUrlHeaders />
 

package/lib/theme/LayoutProviders/index.js

@@ -27,11 +27,13 @@ function LayoutProviders({
   return <_ThemeProvider.default>
       <_themeCommon.AnnouncementBarProvider>
         <_UserPreferencesProvider.default>
-          <_themeCommon.DocsPreferredVersionContextProvider>
-            <_themeCommon.MobileSecondaryMenuProvider>
-              {children}
-            </_themeCommon.MobileSecondaryMenuProvider>
-          </_themeCommon.DocsPreferredVersionContextProvider>
+          <_themeCommon.ScrollControllerProvider>
+            <_themeCommon.DocsPreferredVersionContextProvider>
+              <_themeCommon.MobileSecondaryMenuProvider>
+                {children}
+              </_themeCommon.MobileSecondaryMenuProvider>
+            </_themeCommon.DocsPreferredVersionContextProvider>
+          </_themeCommon.ScrollControllerProvider>
         </_UserPreferencesProvider.default>
       </_themeCommon.AnnouncementBarProvider>
     </_ThemeProvider.default>;

package/lib/theme/Logo/index.js

@@ -15,6 +15,8 @@ var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
 
 var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
 
+var _themeCommon = require("@docusaurus/theme-common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -26,18 +28,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Logo = props => {
   const {
     siteConfig: {
-      title,
-      themeConfig: {
-        navbar: {
-          title: navbarTitle,
-          logo = {
-            src: ''
-          }
-        }
-      }
-    },
-    isClient
+      title
+    }
   } = (0, _useDocusaurusContext.default)();
+  const {
+    navbar: {
+      title: navbarTitle,
+      logo = {
+        src: ''
+      }
+    }
+  } = (0, _themeCommon.useThemeConfig)();
   const {
     imageClassName,
     titleClassName,
@@ -48,10 +49,11 @@ const Logo = props => {
     light: (0, _useBaseUrl.default)(logo.src),
     dark: (0, _useBaseUrl.default)(logo.srcDark || logo.src)
   };
+  const themedImage = <_ThemedImage.default sources={sources} height={logo.height} width={logo.width} alt={logo.alt || navbarTitle || title} />;
   return <_Link.default to={logoLink} {...propsRest} {...logo.target && {
     target: logo.target
   }}>
-      {logo.src && <_ThemedImage.default key={isClient} className={imageClassName} sources={sources} alt={logo.alt || navbarTitle || title} />}
+      {logo.src && (imageClassName ? <div className={imageClassName}>{themedImage}</div> : <>{themedImage}</>)}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </_Link.default>;
 };

package/lib/theme/MDXComponents/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _Head = _interopRequireDefault(require("@docusaurus/Head"));
+
 var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
 var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
@@ -15,6 +17,8 @@ var _Heading = _interopRequireDefault(require("@theme/Heading"));
 
 var _Details = _interopRequireDefault(require("@theme/Details"));
 
+require("./styles.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,7 +31,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// MDX elements are wrapped through the MDX pragma
+// In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
+function unwrapMDXElement(element) {
+  var _element$props, _element$props2;
+
+  if (element !== null && element !== void 0 && (_element$props = element.props) !== null && _element$props !== void 0 && _element$props.mdxType && element !== null && element !== void 0 && (_element$props2 = element.props) !== null && _element$props2 !== void 0 && _element$props2.originalType) {
+    const {
+      mdxType,
+      originalType,
+      ...newProps
+    } = element.props;
+    return _react.default.createElement(element.props.originalType, newProps);
+  }
+
+  return element;
+}
+
 const MDXComponents = {
+  head: props => {
+    const unwrappedChildren = _react.default.Children.map(props.children, child => unwrapMDXElement(child));
+
+    return <_Head.default {...props}>{unwrappedChildren}</_Head.default>;
+  },
   code: props => {
     const {
       children
@@ -49,7 +75,7 @@ const MDXComponents = {
     } = props; // See comment for `code` above
 
     if ((0, _react.isValidElement)(children) && (0, _react.isValidElement)(children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children)) {
-      return children === null || children === void 0 ? void 0 : children.props.children;
+      return children.props.children;
     }
 
     return <_CodeBlock.default {...(0, _react.isValidElement)(children) ? children === null || children === void 0 ? void 0 : children.props : { ...props