@docusaurus/theme-classic 2.0.0-beta.1ab8aa0af → 2.0.0-beta.2

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

@@ -5,24 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.docTitle {
-  font-size: 3rem;
-  margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+.docItemContainer header + * {
+  margin-top: 0;
 }
 
-.docItemContainer {
-  margin: 0 auto;
-  padding: 0 0.5rem;
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
 }
 
 @media only screen and (min-width: 997px) {
   .docItemCol {
     max-width: 75% !important;
   }
-}
 
-@media only screen and (max-width: 996px) {
-  .docItemContainer {
-    padding: 0 0.3rem;
+  .lastUpdated {
+    text-align: right;
   }
 }

package/lib/theme/DocPage/index.js

@@ -35,9 +35,9 @@ var _themeCommon = require("@docusaurus/theme-common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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; }
 
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -45,6 +45,33 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+function getSidebar({
+  versionMetadata,
+  currentDocRoute
+}) {
+  function addTrailingSlash(str) {
+    return str.endsWith('/') ? str : `${str}/`;
+  }
+
+  function removeTrailingSlash(str) {
+    return str.endsWith('/') ? str.slice(0, -1) : str;
+  }
+
+  const {
+    permalinkToSidebar,
+    docsSidebars
+  } = versionMetadata; // With/without trailingSlash, we should always be able to get the appropriate sidebar
+  // note: docs plugin permalinks currently never have trailing slashes
+  // trailingSlash is handled globally at the framework level, not plugin level
+
+  const sidebarName = permalinkToSidebar[currentDocRoute.path] || permalinkToSidebar[addTrailingSlash(currentDocRoute.path)] || permalinkToSidebar[removeTrailingSlash(currentDocRoute.path)];
+  const sidebar = docsSidebars[sidebarName];
+  return {
+    sidebar,
+    sidebarName
+  };
+}
+
 function DocPageContent({
   currentDocRoute,
   versionMetadata,
@@ -58,12 +85,15 @@ function DocPageContent({
   } = (0, _useDocusaurusContext.default)();
   const {
     pluginId,
-    permalinkToSidebar,
-    docsSidebars,
     version
   } = versionMetadata;
-  const sidebarName = permalinkToSidebar[currentDocRoute.path];
-  const sidebar = docsSidebars[sidebarName];
+  const {
+    sidebarName,
+    sidebar
+  } = getSidebar({
+    versionMetadata,
+    currentDocRoute
+  });
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = (0, _react.useState)(false);
   const [hiddenSidebar, setHiddenSidebar] = (0, _react.useState)(false);
   const toggleSidebar = (0, _react.useCallback)(() => {
@@ -78,7 +108,7 @@ function DocPageContent({
     tag: (0, _themeCommon.docVersionSearchTag)(pluginId, version)
   }}>
       <div className={_stylesModule.default.docPage}>
-        {sidebar && <div className={(0, _clsx.default)(_stylesModule.default.docSidebarContainer, {
+        {sidebar && <aside className={(0, _clsx.default)(_stylesModule.default.docSidebarContainer, {
         [_stylesModule.default.docSidebarContainerHidden]: hiddenSidebarContainer
       })} onTransitionEnd={e => {
         if (!e.currentTarget.classList.contains(_stylesModule.default.docSidebarContainer)) {
@@ -88,7 +118,7 @@ function DocPageContent({
         if (hiddenSidebarContainer) {
           setHiddenSidebar(true);
         }
-      }} role="complementary">
+      }}>
             <_DocSidebar.default key={// Reset sidebar state on sidebar changes
         // See https://github.com/facebook/docusaurus/issues/3414
         sidebarName} sidebar={sidebar} path={currentDocRoute.path} sidebarCollapsible={(_siteConfig$themeConf = (_siteConfig$themeConf2 = siteConfig.themeConfig) === null || _siteConfig$themeConf2 === void 0 ? void 0 : _siteConfig$themeConf2.sidebarCollapsible) !== null && _siteConfig$themeConf !== void 0 ? _siteConfig$themeConf : true} onCollapse={toggleSidebar} isHidden={hiddenSidebar} />
@@ -104,11 +134,11 @@ function DocPageContent({
         })} tabIndex={0} role="button" onKeyDown={toggleSidebar} onClick={toggleSidebar}>
                 <_IconArrow.default className={_stylesModule.default.expandSidebarButtonIcon} />
               </div>}
-          </div>}
+          </aside>}
         <main className={(0, _clsx.default)(_stylesModule.default.docMainContainer, {
         [_stylesModule.default.docMainContainerEnhanced]: hiddenSidebarContainer || !sidebar
       })}>
-          <div className={(0, _clsx.default)('container padding-vert--lg', _stylesModule.default.docItemWrapper, {
+          <div className={(0, _clsx.default)('container padding-top--md padding-bottom--lg', _stylesModule.default.docItemWrapper, {
           [_stylesModule.default.docItemWrapperEnhanced]: hiddenSidebarContainer
         })}>
             <_react2.MDXProvider components={_MDXComponents.default}>{children}</_react2.MDXProvider>
@@ -133,7 +163,9 @@ function DocPage(props) {
   }
 
   return <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
-      {(0, _renderRoutes.default)(docRoutes)}
+      {(0, _renderRoutes.default)(docRoutes, {
+      versionMetadata
+    })}
     </DocPageContent>;
 }
 

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

@@ -7,6 +7,7 @@
 
 :root {
   --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
 }
 
 :global(.docs-wrapper) {
@@ -26,7 +27,7 @@
   }
 
   .docMainContainerEnhanced {
-    max-width: none;
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
   }
 
   .docSidebarContainer {
@@ -39,7 +40,7 @@
   }
 
   .docSidebarContainerHidden {
-    width: 30px;
+    width: var(--doc-sidebar-hidden-width);
     cursor: pointer;
   }
 
@@ -72,27 +73,14 @@
   }
 
   .docItemWrapperEnhanced {
-    max-width: calc(var(--ifm-container-width) + var(--doc-sidebar-width)) !important;
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
   }
 }
 
 @media (max-width: 996px) {
   .docSidebarContainer {
-    margin-top: 0;
-  }
-}
-
-@media (min-width: 997px) and (max-width: 1320px) {
-  .docItemWrapper {
-    max-width: calc(
-      var(--ifm-container-width) - var(--doc-sidebar-width) -
-        var(--ifm-spacing-horizontal) * 2
-    );
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) - var(--ifm-spacing-horizontal) * 2
-    );
+    display: none;
   }
 }

package/lib/theme/DocPaginator/index.js

@@ -11,9 +11,9 @@ var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
 var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 }; }
 
@@ -27,7 +27,7 @@ function DocPaginator(props) {
   const {
     metadata
   } = props;
-  return <nav className="pagination-nav" aria-label={(0, _Translate.translate)({
+  return <nav className="pagination-nav docusaurus-mt-lg" aria-label={(0, _Translate.translate)({
     id: 'theme.docs.paginator.navAriaLabel',
     message: 'Docs pages navigation',
     description: 'The ARIA label for the docs pagination'

package/lib/theme/DocSidebar/index.js

@@ -11,8 +11,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
-var _useUserPreferencesContext = _interopRequireDefault(require("@theme/hooks/useUserPreferencesContext"));
-
 var _useLockBodyScroll = _interopRequireDefault(require("@theme/hooks/useLockBodyScroll"));
 
 var _useWindowSize = _interopRequireWildcard(require("@theme/hooks/useWindowSize"));
@@ -29,15 +27,17 @@ var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
 
 var _IconMenu = _interopRequireDefault(require("@theme/IconMenu"));
 
+var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
+
 var _Translate = require("@docusaurus/Translate");
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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; }
 
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -47,14 +47,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
  */
 const MOBILE_TOGGLE_SIZE = 24;
 
-function usePrevious(value) {
-  const ref = (0, _react.useRef)(value);
-  (0, _react.useEffect)(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
 const isActiveSidebarItem = (item, activePath) => {
   if (item.type === 'link') {
     return (0, _themeCommon.isSamePath)(item.href, activePath);
@@ -101,7 +93,7 @@ function DocSidebarItemCategory({
     label
   } = item;
   const isActive = isActiveSidebarItem(item, activePath);
-  const wasActive = usePrevious(isActive); // active categories are always initialized as expanded
+  const wasActive = (0, _themeCommon.usePrevious)(isActive); // active categories are always initialized as expanded
   // the default (item.collapsed) is only used for non-active categories
 
   const [collapsed, setCollapsed] = (0, _react.useState)(() => {
@@ -178,27 +170,29 @@ function DocSidebarItemLink({
   const isActive = isActiveSidebarItem(item, activePath);
   return <li className="menu__list-item" key={label}>
       <_Link.default className={(0, _clsx.default)('menu__link', {
-      'menu__link--active': isActive,
-      [_stylesModule.default.menuLinkExternal]: !(0, _isInternalUrl.default)(href)
+      'menu__link--active': isActive
     })} to={href} {...(0, _isInternalUrl.default)(href) && {
       isNavLink: true,
       exact: true,
       onClick: onItemClick
     }} {...props}>
-        {label}
+        {(0, _isInternalUrl.default)(href) ? label : <span>
+            {label}
+            <_IconExternalLink.default />
+          </span>}
       </_Link.default>
     </li>;
 }
 
 function useShowAnnouncementBar() {
   const {
-    isAnnouncementBarClosed
-  } = (0, _useUserPreferencesContext.default)();
-  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(!isAnnouncementBarClosed);
+    isClosed
+  } = (0, _themeCommon.useAnnouncementBar)();
+  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(!isClosed);
   (0, _useScrollPosition.default)(({
     scrollY
   }) => {
-    if (!isAnnouncementBarClosed) {
+    if (!isClosed) {
       setShowAnnouncementBar(scrollY === 0);
     }
   });
@@ -278,8 +272,8 @@ function DocSidebar({
     hideableSidebar
   } = (0, _themeCommon.useThemeConfig)();
   const {
-    isAnnouncementBarClosed
-  } = (0, _useUserPreferencesContext.default)();
+    isClosed: isAnnouncementBarClosed
+  } = (0, _themeCommon.useAnnouncementBar)();
   const {
     showResponsiveSidebar,
     closeResponsiveSidebar,
@@ -290,15 +284,20 @@ function DocSidebar({
     [_stylesModule.default.sidebarHidden]: isHidden
   })}>
       {hideOnScroll && <_Logo.default tabIndex={-1} className={_stylesModule.default.sidebarLogo} />}
-      <div className={(0, _clsx.default)('menu', 'menu--responsive', 'thin-scrollbar', _stylesModule.default.menu, {
+      <nav className={(0, _clsx.default)('menu', 'menu--responsive', 'thin-scrollbar', _stylesModule.default.menu, {
       'menu--show': showResponsiveSidebar,
       [_stylesModule.default.menuWithAnnouncementBar]: !isAnnouncementBarClosed && showAnnouncementBar
+    })} aria-label={(0, _Translate.translate)({
+      id: 'theme.docs.sidebar.navAriaLabel',
+      message: 'Sidebar navigation',
+      description: 'The ARIA label for documentation menu'
     })}>
         <ResponsiveSidebarButton responsiveSidebarOpened={showResponsiveSidebar} onClick={toggleResponsiveSidebar} />
+
         <ul className="menu__list">
           <DocSidebarItems items={sidebar} onItemClick={closeResponsiveSidebar} collapsible={sidebarCollapsible} activePath={path} />
         </ul>
-      </div>
+      </nav>
       {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
     </div>;
 }

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

@@ -122,17 +122,3 @@
 :global(.menu__list-item--collapsed) :global(.menu__list) {
   height: 0 !important;
 }
-
-.menuLinkExternal {
-  align-items: center;
-}
-.menuLinkExternal:after {
-  content: '';
-  height: 1.15rem;
-  width: 1.15rem;
-  min-width: 1.15rem;
-  margin: 0 0 0 3%;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'/%3E%3C/svg%3E")
-    no-repeat;
-  filter: var(--ifm-menu-link-sublist-icon-filter);
-}

package/lib/theme/DocVersionBanner/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
+
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
+var _Translate = _interopRequireDefault(require("@docusaurus/Translate"));
+
+var _useDocs = require("@theme/hooks/useDocs");
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+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 UnreleasedVersionLabel({
+  siteTitle,
+  versionMetadata
+}) {
+  return <_Translate.default id="theme.docs.versions.unreleasedVersionLabel" description="The label used to tell the user that he's browsing an unreleased doc version" values={{
+    siteTitle,
+    versionLabel: <b>{versionMetadata.label}</b>
+  }}>
+      {'This is unreleased documentation for {siteTitle} {versionLabel} version.'}
+    </_Translate.default>;
+}
+
+function UnmaintainedVersionLabel({
+  siteTitle,
+  versionMetadata
+}) {
+  return <_Translate.default id="theme.docs.versions.unmaintainedVersionLabel" description="The label used to tell the user that he's browsing an unmaintained doc version" values={{
+    siteTitle,
+    versionLabel: <b>{versionMetadata.label}</b>
+  }}>
+      {'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'}
+    </_Translate.default>;
+}
+
+const BannerLabelComponents = {
+  unreleased: UnreleasedVersionLabel,
+  unmaintained: UnmaintainedVersionLabel
+};
+
+function BannerLabel(props) {
+  const BannerLabelComponent = BannerLabelComponents[props.versionMetadata.banner];
+  return <BannerLabelComponent {...props} />;
+}
+
+function LatestVersionSuggestionLabel({
+  versionLabel,
+  to,
+  onClick
+}) {
+  return <_Translate.default id="theme.docs.versions.latestVersionSuggestionLabel" description="The label used to tell the user to check the latest version" values={{
+    versionLabel,
+    latestVersionLink: <b>
+            <_Link.default to={to} onClick={onClick}>
+              <_Translate.default id="theme.docs.versions.latestVersionLinkLabel" description="The label used for the latest version suggestion link label">
+                latest version
+              </_Translate.default>
+            </_Link.default>
+          </b>
+  }}>
+      {'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).'}
+    </_Translate.default>;
+}
+
+function DocVersionBannerEnabled({
+  versionMetadata
+}) {
+  const {
+    siteConfig: {
+      title: siteTitle
+    }
+  } = (0, _useDocusaurusContext.default)();
+  const {
+    pluginId
+  } = (0, _useDocs.useActivePlugin)({
+    failfast: true
+  });
+
+  const getVersionMainDoc = version => version.docs.find(doc => doc.id === version.mainDocId);
+
+  const {
+    savePreferredVersionName
+  } = (0, _themeCommon.useDocsPreferredVersion)(pluginId);
+  const {
+    latestDocSuggestion,
+    latestVersionSuggestion
+  } = (0, _useDocs.useDocVersionSuggestions)(pluginId); // try to link to same doc in latest version (not always possible)
+  // 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">
+      <div>
+        <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
+      </div>
+      <div className="margin-top--md">
+        <LatestVersionSuggestionLabel versionLabel={latestVersionSuggestion.label} to={latestVersionSuggestedDoc.path} onClick={() => savePreferredVersionName(latestVersionSuggestion.name)} />
+      </div>
+    </div>;
+}
+
+function DocVersionBanner({
+  versionMetadata
+}) {
+  if (versionMetadata.banner === 'none') {
+    return <></>;
+  } else {
+    return <DocVersionBannerEnabled versionMetadata={versionMetadata} />;
+  }
+}
+
+var _default = DocVersionBanner;
+exports.default = _default;

package/lib/theme/DocVersionSuggestions/index.js

@@ -31,7 +31,7 @@ function UnreleasedVersionLabel({
 }) {
   return <_Translate.default id="theme.docs.versions.unreleasedVersionLabel" description="The label used to tell the user that he's browsing an unreleased doc version" values={{
     siteTitle,
-    versionLabel: <strong>{versionLabel}</strong>
+    versionLabel: <b>{versionLabel}</b>
   }}>
       {'This is unreleased documentation for {siteTitle} {versionLabel} version.'}
     </_Translate.default>;
@@ -43,7 +43,7 @@ function UnmaintainedVersionLabel({
 }) {
   return <_Translate.default id="theme.docs.versions.unmaintainedVersionLabel" description="The label used to tell the user that he's browsing an unmaintained doc version" values={{
     siteTitle,
-    versionLabel: <strong>{versionLabel}</strong>
+    versionLabel: <b>{versionLabel}</b>
   }}>
       {'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'}
     </_Translate.default>;
@@ -56,13 +56,13 @@ function LatestVersionSuggestionLabel({
 }) {
   return <_Translate.default id="theme.docs.versions.latestVersionSuggestionLabel" description="The label userd to tell the user that he's browsing an unmaintained doc version" values={{
     versionLabel,
-    latestVersionLink: <strong>
+    latestVersionLink: <b>
             <_Link.default to={to} onClick={onClick}>
               <_Translate.default id="theme.docs.versions.latestVersionLinkLabel" description="The label used for the latest version suggestion link label">
                 latest version
               </_Translate.default>
             </_Link.default>
-          </strong>
+          </b>
   }}>
       {'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).'}
     </_Translate.default>;

package/lib/theme/Heading/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MainHeading = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -27,7 +27,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 
 /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
-const Heading = Tag => function TargetComponent({
+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>;
+};
+
+exports.MainHeading = MainHeading;
+
+const createAnchorHeading = Tag => function TargetComponent({
   id,
   ...props
 }) {
@@ -56,5 +68,9 @@ const Heading = Tag => function TargetComponent({
       </Tag>;
 };
 
+const Heading = headingType => {
+  return headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
+};
+
 var _default = Heading;
 exports.default = _default;

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

@@ -8,3 +8,8 @@
 .enhancedAnchor {
   top: calc(var(--ifm-navbar-height) * -1 - 0.5rem);
 }
+
+.h1Heading {
+  font-size: 3rem;
+  margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+}

package/lib/theme/IconArrow/index.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  */
 const IconArrow = props => {
-  return <svg width="20" height="20" role="img" {...props}>
+  return <svg width="20" height="20" aria-hidden="true" {...props}>
       <g fill="#7a7a7a">
         <path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0" />
         <path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0" />

package/lib/theme/IconEdit/index.js

@@ -23,7 +23,7 @@ const IconEdit = ({
   className,
   ...restProps
 }) => {
-  return <svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 40 40" className={(0, _clsx.default)(_stylesModule.default.iconEdit, className)} aria-label="Edit page" {...restProps}>
+  return <svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" className={(0, _clsx.default)(_stylesModule.default.iconEdit, className)} aria-hidden="true" {...restProps}>
       <g>
         <path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
       </g>

package/lib/theme/IconExternalLink/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+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.
+ */
+const IconExternalLink = ({
+  width = 13.5,
+  height = 13.5
+}) => {
+  return <svg width={width} height={height} aria-hidden="true" viewBox="0 0 24 24" className={_stylesModule.default.iconExternalLink}>
+      <path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" />
+    </svg>;
+};
+
+var _default = IconExternalLink;
+exports.default = _default;

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

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+
+.iconExternalLink {
+  margin-left: 0.3rem;
+  position: relative;
+  top: 1px;
+}

package/lib/theme/IconLanguage/index.js

@@ -20,7 +20,7 @@ const IconLanguage = ({
   height = 20,
   ...props
 }) => {
-  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width={width} height={height} {...props}>
+  return <svg viewBox="0 0 20 20" width={width} height={height} aria-hidden="true" {...props}>
       <path fill="currentColor" d="M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 011.229-.799l.082 4.277a2.773 2.773 0 01-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 00-.196-.145h-1.95a.194.194 0 00-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z" />
     </svg>;
 };