@docusaurus/theme-classic 2.0.0-beta.12faed89d → 2.0.0-beta.14

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

@@ -5,25 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.docItemContainer article > *:first-child,
 .docItemContainer header + * {
   margin-top: 0;
 }
 
-.lastUpdated {
-  margin-top: 0.2rem;
-  font-style: italic;
-  font-size: smaller;
-}
-
-@media only screen and (min-width: 997px) {
+@media (min-width: 997px) {
   .docItemCol {
     max-width: 75% !important;
   }
 
-  .lastUpdated {
-    text-align: right;
-  }
-
   /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
   .tocMobile {
     display: none;

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

@@ -0,0 +1,79 @@
+/**
+ * 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 LastUpdated from '@theme/LastUpdated';
+import EditThisPage from '@theme/EditThisPage';
+import TagsListInline from '@theme/TagsListInline';
+import styles from './styles.module.css';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+
+function TagsRow(props) {
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.docs.docFooterTagsRow,
+        'row margin-bottom--sm',
+      )}>
+      <div className="col">
+        <TagsListInline {...props} />
+      </div>
+    </div>
+  );
+}
+
+function EditMetaRow({
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+  formattedLastUpdatedAt,
+}) {
+  return (
+    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
+      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+
+      <div className={clsx('col', styles.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && (
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            formattedLastUpdatedAt={formattedLastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function DocItemFooter(props) {
+  const {content: DocContent} = props;
+  const {metadata} = DocContent;
+  const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
+    metadata;
+  const canDisplayTagsRow = tags.length > 0;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+
+  if (!canDisplayFooter) {
+    return null;
+  }
+
+  return (
+    <footer
+      className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+      {canDisplayTagsRow && <TagsRow tags={tags} />}
+      {canDisplayEditMetaRow && (
+        <EditMetaRow
+          editUrl={editUrl}
+          lastUpdatedAt={lastUpdatedAt}
+          lastUpdatedBy={lastUpdatedBy}
+          formattedLastUpdatedAt={formattedLastUpdatedAt}
+        />
+      )}
+    </footer>
+  );
+}

package/{lib/theme/DocSidebarItem → lib-next/theme/DocItemFooter}/styles.module.css

@@ -5,11 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
+}
+
 @media (min-width: 997px) {
-  .menuLinkText {
-    cursor: initial;
-  }
-  .menuLinkText:hover {
-    background: none;
+  .lastUpdated {
+    text-align: right;
   }
 }

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

@@ -6,26 +6,34 @@
  */
 import React, {useState, useCallback} from 'react';
 import {MDXProvider} from '@mdx-js/react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import renderRoutes from '@docusaurus/renderRoutes';
 import Layout from '@theme/Layout';
 import DocSidebar from '@theme/DocSidebar';
 import MDXComponents from '@theme/MDXComponents';
 import NotFound from '@theme/NotFound';
 import IconArrow from '@theme/IconArrow';
+import BackToTopButton from '@theme/BackToTopButton';
 import {matchPath} from '@docusaurus/router';
 import {translate} from '@docusaurus/Translate';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import {ThemeClassNames, docVersionSearchTag} from '@docusaurus/theme-common';
+import {
+  ThemeClassNames,
+  docVersionSearchTag,
+  DocsSidebarProvider,
+  useDocsSidebar,
+  DocsVersionProvider,
+} from '@docusaurus/theme-common';
+import Head from '@docusaurus/Head';
 
-function DocPageContent({currentDocRoute, versionMetadata, children}) {
-  const {siteConfig, isClient} = useDocusaurusContext();
+function DocPageContent({
+  currentDocRoute,
+  versionMetadata,
+  children,
+  sidebarName,
+}) {
+  const sidebar = useDocsSidebar();
   const {pluginId, version} = versionMetadata;
-  const sidebarName = currentDocRoute.sidebar;
-  const sidebar = sidebarName
-    ? versionMetadata.docsSidebars[sidebarName]
-    : undefined;
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   const [hiddenSidebar, setHiddenSidebar] = useState(false);
   const toggleSidebar = useCallback(() => {
@@ -33,18 +41,19 @@ function DocPageContent({currentDocRoute, versionMetadata, children}) {
       setHiddenSidebar(false);
     }
 
-    setHiddenSidebarContainer(!hiddenSidebarContainer);
+    setHiddenSidebarContainer((value) => !value);
   }, [hiddenSidebar]);
   return (
     <Layout
-      key={isClient}
-      wrapperClassName={ThemeClassNames.wrapper.docPages}
-      pageClassName={ThemeClassNames.page.docPage}
-      searchMetadatas={{
+      wrapperClassName={ThemeClassNames.wrapper.docsPages}
+      pageClassName={ThemeClassNames.page.docsDocPage}
+      searchMetadata={{
         version,
         tag: docVersionSearchTag(pluginId, version),
       }}>
       <div className={styles.docPage}>
+        <BackToTopButton />
+
         {sidebar && (
           <aside
             className={clsx(styles.docSidebarContainer, {
@@ -69,7 +78,6 @@ function DocPageContent({currentDocRoute, versionMetadata, children}) {
               }
               sidebar={sidebar}
               path={currentDocRoute.path}
-              sidebarCollapsible={siteConfig.themeConfig.sidebarCollapsible}
               onCollapse={toggleSidebar}
               isHidden={hiddenSidebar}
             />
@@ -130,17 +138,32 @@ function DocPage(props) {
   );
 
   if (!currentDocRoute) {
-    return <NotFound {...props} />;
-  }
+    return <NotFound />;
+  } // For now, the sidebarName is added as route config: not ideal!
 
+  const sidebarName = currentDocRoute.sidebar;
+  const sidebar = sidebarName
+    ? versionMetadata.docsSidebars[sidebarName]
+    : null;
   return (
-    <DocPageContent
-      currentDocRoute={currentDocRoute}
-      versionMetadata={versionMetadata}>
-      {renderRoutes(docRoutes, {
-        versionMetadata,
-      })}
-    </DocPageContent>
+    <>
+      <Head>
+        {/* TODO we should add a core addRoute({htmlClassName}) generic plugin option */}
+        <html className={versionMetadata.className} />
+      </Head>
+      <DocsVersionProvider version={versionMetadata}>
+        <DocsSidebarProvider sidebar={sidebar}>
+          <DocPageContent
+            currentDocRoute={currentDocRoute}
+            versionMetadata={versionMetadata}
+            sidebarName={sidebarName}>
+            {renderRoutes(docRoutes, {
+              versionMetadata,
+            })}
+          </DocPageContent>
+        </DocsSidebarProvider>
+      </DocsVersionProvider>
+    </>
   );
 }
 

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

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Link from '@docusaurus/Link';
-import Translate, {translate} from '@docusaurus/Translate';
+import {translate} from '@docusaurus/Translate';
+import DocPaginatorNavLink from '@theme/DocPaginatorNavLink';
 
 function DocPaginator(props) {
-  const {metadata} = props;
+  const {previous, next} = props;
   return (
     <nav
       className="pagination-nav docusaurus-mt-lg"
@@ -19,38 +19,10 @@ function DocPaginator(props) {
         description: 'The ARIA label for the docs pagination',
       })}>
       <div className="pagination-nav__item">
-        {metadata.previous && (
-          <Link
-            className="pagination-nav__link"
-            to={metadata.previous.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.previous"
-                description="The label used to navigate to the previous doc">
-                Previous
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">
-              &laquo; {metadata.previous.title}
-            </div>
-          </Link>
-        )}
+        {previous && <DocPaginatorNavLink navLink={previous} />}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
-        {metadata.next && (
-          <Link className="pagination-nav__link" to={metadata.next.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.next"
-                description="The label used to navigate to the next doc">
-                Next
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">
-              {metadata.next.title} &raquo;
-            </div>
-          </Link>
-        )}
+        {next && <DocPaginatorNavLink navLink={next} next />}
       </div>
     </nav>
   );

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

@@ -0,0 +1,36 @@
+/**
+ * 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 from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+
+function DocPaginatorNavLink(props) {
+  const {navLink, next} = props;
+  return (
+    <Link className={clsx('pagination-nav__link')} to={navLink.permalink}>
+      <div className="pagination-nav__sublabel">
+        {next ? (
+          <Translate
+            id="theme.docs.paginator.next"
+            description="The label used to navigate to the next doc">
+            Next
+          </Translate>
+        ) : (
+          <Translate
+            id="theme.docs.paginator.previous"
+            description="The label used to navigate to the previous doc">
+            Previous
+          </Translate>
+        )}
+      </div>
+      <div className="pagination-nav__label">{navLink.title}</div>
+    </Link>
+  );
+}
+
+export default DocPaginatorNavLink;

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

@@ -10,9 +10,10 @@ import {
   useThemeConfig,
   useAnnouncementBar,
   MobileSecondaryMenuFiller,
+  ThemeClassNames,
+  useScrollPosition,
 } from '@docusaurus/theme-common';
 import useWindowSize from '@theme/hooks/useWindowSize';
-import useScrollPosition from '@theme/hooks/useScrollPosition';
 import Logo from '@theme/Logo';
 import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
@@ -20,14 +21,17 @@ import {DocSidebarItems} from '@theme/DocSidebarItem';
 import styles from './styles.module.css';
 
 function useShowAnnouncementBar() {
-  const {isClosed} = useAnnouncementBar();
-  const [showAnnouncementBar, setShowAnnouncementBar] = useState(!isClosed);
-  useScrollPosition(({scrollY}) => {
-    if (!isClosed) {
-      setShowAnnouncementBar(scrollY === 0);
-    }
-  });
-  return showAnnouncementBar;
+  const {isActive} = useAnnouncementBar();
+  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
+  useScrollPosition(
+    ({scrollY}) => {
+      if (isActive) {
+        setShowAnnouncementBar(scrollY === 0);
+      }
+    },
+    [isActive],
+  );
+  return isActive && showAnnouncementBar;
 }
 
 function HideableSidebarButton({onClick}) {
@@ -54,19 +58,12 @@ function HideableSidebarButton({onClick}) {
   );
 }
 
-function DocSidebarDesktop({
-  path,
-  sidebar,
-  sidebarCollapsible,
-  onCollapse,
-  isHidden,
-}) {
+function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   const showAnnouncementBar = useShowAnnouncementBar();
   const {
     navbar: {hideOnScroll},
     hideableSidebar,
   } = useThemeConfig();
-  const {isClosed: isAnnouncementBarClosed} = useAnnouncementBar();
   return (
     <div
       className={clsx(styles.sidebar, {
@@ -76,39 +73,36 @@ function DocSidebarDesktop({
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <nav
         className={clsx('menu thin-scrollbar', styles.menu, {
-          [styles.menuWithAnnouncementBar]:
-            !isAnnouncementBarClosed && showAnnouncementBar,
+          [styles.menuWithAnnouncementBar]: showAnnouncementBar,
         })}>
-        <ul className="menu__list">
-          <DocSidebarItems
-            items={sidebar}
-            collapsible={sidebarCollapsible}
-            activePath={path}
-          />
+        <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+          <DocSidebarItems items={sidebar} activePath={path} level={1} />
         </ul>
       </nav>
       {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
     </div>
   );
-}
+} // eslint-disable-next-line react/function-component-definition
 
-const DocSidebarMobileSecondaryMenu = ({
-  toggleSidebar,
-  sidebar,
-  sidebarCollapsible,
-  path,
-}) => {
-  return (
-    <ul className="menu__list">
-      <DocSidebarItems
-        items={sidebar}
-        collapsible={sidebarCollapsible}
-        activePath={path}
-        onItemClick={() => toggleSidebar()}
-      />
-    </ul>
-  );
-};
+const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => (
+  <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+    <DocSidebarItems
+      items={sidebar}
+      activePath={path}
+      onItemClick={(item) => {
+        // Mobile sidebar should only be closed if the category has a link
+        if (item.type === 'category' && item.href) {
+          toggleSidebar();
+        }
+
+        if (item.type === 'link') {
+          toggleSidebar();
+        }
+      }}
+      level={1}
+    />
+  </ul>
+);
 
 function DocSidebarMobile(props) {
   return (