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

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

@@ -4,26 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useEffect, useMemo} from 'react';
-import clsx from 'clsx';
-import {
-  isActiveSidebarItem,
-  usePrevious,
-  Collapsible,
-  useCollapsible,
-  findFirstCategoryLink,
-  ThemeClassNames,
-  useThemeConfig,
-  useDocSidebarItemsExpandedState,
-  isSamePath,
-} from '@docusaurus/theme-common';
-import Link from '@docusaurus/Link';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import {translate} from '@docusaurus/Translate';
-import IconExternalLink from '@theme/IconExternalLink';
-import DocSidebarItems from '@theme/DocSidebarItems';
-import styles from './styles.module.css';
-import useIsBrowser from '@docusaurus/useIsBrowser';
+import React from 'react';
+import DocSidebarItemCategory from '@theme/DocSidebarItem/Category';
+import DocSidebarItemLink from '@theme/DocSidebarItem/Link';
+import DocSidebarItemHtml from '@theme/DocSidebarItem/Html';
 export default function DocSidebarItem({item, ...props}) {
   switch (item.type) {
     case 'category':
@@ -36,229 +20,4 @@ export default function DocSidebarItem({item, ...props}) {
     default:
       return <DocSidebarItemLink item={item} {...props} />;
   }
-} // If we navigate to a category and it becomes active, it should automatically
-// expand itself
-
-function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
-  const wasActive = usePrevious(isActive);
-  useEffect(() => {
-    const justBecameActive = isActive && !wasActive;
-
-    if (justBecameActive && collapsed) {
-      setCollapsed(false);
-    }
-  }, [isActive, wasActive, collapsed, setCollapsed]);
-}
-/**
- * When a collapsible category has no link, we still link it to its first child
- * during SSR as a temporary fallback. This allows to be able to navigate inside
- * the category even when JS fails to load, is delayed or simply disabled
- * React hydration becomes an optional progressive enhancement
- * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
- * see https://github.com/facebook/docusaurus/issues/3030
- */
-
-function useCategoryHrefWithSSRFallback(item) {
-  const isBrowser = useIsBrowser();
-  return useMemo(() => {
-    if (item.href) {
-      return item.href;
-    } // In these cases, it's not necessary to render a fallback
-    // We skip the "findFirstCategoryLink" computation
-
-    if (isBrowser || !item.collapsible) {
-      return undefined;
-    }
-
-    return findFirstCategoryLink(item);
-  }, [item, isBrowser]);
-}
-
-function DocSidebarItemCategory({
-  item,
-  onItemClick,
-  activePath,
-  level,
-  index,
-  ...props
-}) {
-  const {items, label, collapsible, className, href} = item;
-  const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
-  const isActive = isActiveSidebarItem(item, activePath);
-  const isCurrentPage = isSamePath(href, activePath);
-  const {collapsed, setCollapsed} = useCollapsible({
-    // active categories are always initialized as expanded
-    // the default (item.collapsed) is only used for non-active categories
-    initialState: () => {
-      if (!collapsible) {
-        return false;
-      }
-
-      return isActive ? false : item.collapsed;
-    },
-  });
-  useAutoExpandActiveCategory({
-    isActive,
-    collapsed,
-    setCollapsed,
-  });
-  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
-
-  function updateCollapsed(toCollapsed = !collapsed) {
-    setExpandedItem(toCollapsed ? null : index);
-    setCollapsed(toCollapsed);
-  }
-
-  const {autoCollapseSidebarCategories} = useThemeConfig();
-  useEffect(() => {
-    if (
-      collapsible &&
-      expandedItem &&
-      expandedItem !== index &&
-      autoCollapseSidebarCategories
-    ) {
-      setCollapsed(true);
-    }
-  }, [
-    collapsible,
-    expandedItem,
-    index,
-    setCollapsed,
-    autoCollapseSidebarCategories,
-  ]);
-  return (
-    <li
-      className={clsx(
-        ThemeClassNames.docs.docSidebarItemCategory,
-        ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
-        'menu__list-item',
-        {
-          'menu__list-item--collapsed': collapsed,
-        },
-        className,
-      )}>
-      <div
-        className={clsx('menu__list-item-collapsible', {
-          'menu__list-item-collapsible--active': isCurrentPage,
-        })}>
-        <Link
-          className={clsx('menu__link', {
-            'menu__link--sublist': collapsible && !href,
-            'menu__link--active': isActive,
-          })}
-          onClick={
-            collapsible
-              ? (e) => {
-                  onItemClick?.(item);
-
-                  if (href) {
-                    updateCollapsed(false);
-                  } else {
-                    e.preventDefault();
-                    updateCollapsed();
-                  }
-                }
-              : () => {
-                  onItemClick?.(item);
-                }
-          }
-          aria-current={isCurrentPage ? 'page' : undefined}
-          href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
-          {...props}>
-          {label}
-        </Link>
-        {href && collapsible && (
-          <button
-            aria-label={translate(
-              {
-                id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
-                message: "Toggle the collapsible sidebar category '{label}'",
-                description:
-                  'The ARIA label to toggle the collapsible sidebar category',
-              },
-              {
-                label,
-              },
-            )}
-            type="button"
-            className="clean-btn menu__caret"
-            onClick={(e) => {
-              e.preventDefault();
-              updateCollapsed();
-            }}
-          />
-        )}
-      </div>
-
-      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
-        <DocSidebarItems
-          items={items}
-          tabIndex={collapsed ? -1 : 0}
-          onItemClick={onItemClick}
-          activePath={activePath}
-          level={level + 1}
-        />
-      </Collapsible>
-    </li>
-  );
-}
-
-function DocSidebarItemHtml({item, level, index}) {
-  const {value, defaultStyle, className} = item;
-  return (
-    <li
-      className={clsx(
-        ThemeClassNames.docs.docSidebarItemLink,
-        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
-        defaultStyle && `${styles.menuHtmlItem} menu__list-item`,
-        className,
-      )}
-      key={index} // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: value,
-      }}
-    />
-  );
-}
-
-function DocSidebarItemLink({
-  item,
-  onItemClick,
-  activePath,
-  level,
-  index,
-  ...props
-}) {
-  const {href, label, className} = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  return (
-    <li
-      className={clsx(
-        ThemeClassNames.docs.docSidebarItemLink,
-        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
-        'menu__list-item',
-        className,
-      )}
-      key={label}>
-      <Link
-        className={clsx('menu__link', {
-          'menu__link--active': isActive,
-        })}
-        aria-current={isActive ? 'page' : undefined}
-        to={href}
-        {...(isInternalUrl(href) && {
-          onClick: onItemClick ? () => onItemClick(item) : undefined,
-        })}
-        {...props}>
-        {isInternalUrl(href) ? (
-          label
-        ) : (
-          <span>
-            {label}
-            <IconExternalLink />
-          </span>
-        )}
-      </Link>
-    </li>
-  );
 }

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

@@ -14,12 +14,7 @@ function DocSidebarItems({items, ...props}) {
   return (
     <DocSidebarItemsExpandedStateProvider>
       {items.map((item, index) => (
-        <DocSidebarItem
-          key={index} // sidebar is static, the index does not change
-          item={item}
-          index={index}
-          {...props}
-        />
+        <DocSidebarItem key={index} item={item} index={index} {...props} />
       ))}
     </DocSidebarItemsExpandedStateProvider>
   );

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

@@ -7,10 +7,16 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
-import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  usePluralForm,
+} from '@docusaurus/theme-common';
 import Translate, {translate} from '@docusaurus/Translate';
+import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx'; // Very simple pluralization: probably good enough for now
 
-// Very simple pluralization: probably good enough for now
 function useNDocsTaggedPlural() {
   const {selectMessage} = usePluralForm();
   return (count) =>
@@ -50,40 +56,41 @@ export default function DocTagDocListPage({tag}) {
       message: '{nDocsTagged} with "{tagName}"',
     },
     {
-      nDocsTagged: nDocsTaggedPlural(tag.docs.length),
-      tagName: tag.name,
+      nDocsTagged: nDocsTaggedPlural(tag.count),
+      tagName: tag.label,
     },
   );
   return (
-    <Layout
-      title={title}
-      wrapperClassName={ThemeClassNames.wrapper.docsPages}
-      pageClassName={ThemeClassNames.page.docsTagDocListPage}
-      searchMetadata={{
-        // 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 href={tag.allTagsPath}>
-                <Translate
-                  id="theme.tags.tagsPageLink"
-                  description="The label of the link targeting the tag list page">
-                  View All Tags
-                </Translate>
-              </Link>
-            </header>
-            <section className="margin-vert--lg">
-              {tag.docs.map((doc) => (
-                <DocItem key={doc.id} doc={doc} />
-              ))}
-            </section>
-          </main>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.docsPages,
+        ThemeClassNames.page.docsTagDocListPage,
+      )}>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="doc_tag_doc_list" />
+      <Layout>
+        <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 href={tag.allTagsPath}>
+                  <Translate
+                    id="theme.tags.tagsPageLink"
+                    description="The label of the link targeting the tag list page">
+                    View All Tags
+                  </Translate>
+                </Link>
+              </header>
+              <section className="margin-vert--lg">
+                {tag.items.map((doc) => (
+                  <DocItem key={doc.id} doc={doc} />
+                ))}
+              </section>
+            </main>
+          </div>
         </div>
-      </div>
-    </Layout>
+      </Layout>
+    </HtmlClassNameProvider>
   );
 }

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

@@ -7,29 +7,34 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 import {
+  PageMetadata,
+  HtmlClassNameProvider,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
 import TagsListByLetter from '@theme/TagsListByLetter';
+import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx';
 export default function DocTagsListPage({tags}) {
   const title = translateTagsPageTitle();
   return (
-    <Layout
-      title={title}
-      wrapperClassName={ThemeClassNames.wrapper.docsPages}
-      pageClassName={ThemeClassNames.page.docsTagsListPage}
-      searchMetadata={{
-        // 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 tags={tags} />
-          </main>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.docsPages,
+        ThemeClassNames.page.docsTagsListPage,
+      )}>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="doc_tags_list" />
+      <Layout>
+        <div className="container margin-vert--lg">
+          <div className="row">
+            <main className="col col--8 col--offset-2">
+              <h1>{title}</h1>
+              <TagsListByLetter tags={tags} />
+            </main>
+          </div>
         </div>
-      </div>
-    </Layout>
+      </Layout>
+    </HtmlClassNameProvider>
   );
 }

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

@@ -101,8 +101,8 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
 
   const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
   const {latestDocSuggestion, latestVersionSuggestion} =
-    useDocVersionSuggestions(pluginId); // try to link to same doc in latest version (not always possible)
-  // fallback to main doc of latest version
+    useDocVersionSuggestions(pluginId); // Try to link to same doc in latest version (not always possible), falling
+  // back to main doc of latest version
 
   const latestVersionSuggestedDoc =
     latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);

package/lib-next/theme/Footer/Copyright/index.js

@@ -0,0 +1,18 @@
+/**
+ * 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';
+export default function FooterCopyright({copyright}) {
+  return (
+    <div
+      className="footer__copyright" // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: copyright,
+      }}
+    />
+  );
+}

package/lib-next/theme/Footer/Layout/index.js

@@ -0,0 +1,26 @@
+/**
+ * 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';
+export default function FooterLayout({style, links, logo, copyright}) {
+  return (
+    <footer
+      className={clsx('footer', {
+        'footer--dark': style === 'dark',
+      })}>
+      <div className="container container-fluid">
+        {links}
+        {(logo || copyright) && (
+          <div className="footer__bottom text--center">
+            {logo && <div className="margin-bottom--sm">{logo}</div>}
+            {copyright}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}

package/lib-next/theme/Footer/LinkItem/index.js

@@ -0,0 +1,33 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/IconExternalLink';
+export default function FooterLinkItem({item}) {
+  const {to, href, label, prependBaseUrlToHref, ...props} = item;
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, {
+    forcePrependBaseUrl: true,
+  });
+  return (
+    <Link
+      className="footer__link-item"
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}>
+      {label}
+      {href && !isInternalUrl(href) && <IconExternalLink />}
+    </Link>
+  );
+}

package/lib-next/theme/Footer/Links/MultiColumn/index.js

@@ -0,0 +1,47 @@
+/**
+ * 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 LinkItem from '@theme/Footer/LinkItem';
+
+function ColumnLinkItem({item}) {
+  return item.html ? (
+    <li
+      className="footer__item" // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: item.html,
+      }}
+    />
+  ) : (
+    <li key={item.href || item.to} className="footer__item">
+      <LinkItem item={item} />
+    </li>
+  );
+}
+
+function Column({column}) {
+  return (
+    <div className="col footer__col">
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items clean-list">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function FooterLinksMultiColumn({columns}) {
+  return (
+    <div className="row footer__links">
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

package/lib-next/theme/Footer/Links/Simple/index.js

@@ -0,0 +1,41 @@
+/**
+ * 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 LinkItem from '@theme/Footer/LinkItem';
+
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+
+function SimpleLinkItem({item}) {
+  return item.html ? (
+    <span
+      className="footer__link-item" // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: item.html,
+      }}
+    />
+  ) : (
+    <LinkItem item={item} />
+  );
+}
+
+export default function FooterLinksSimple({links}) {
+  return (
+    <div className="footer__links text--center">
+      <div className="footer__links">
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {links.length !== i + 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

package/lib-next/theme/Footer/Links/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+export default function FooterLinks({links}) {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}

package/lib-next/theme/Footer/Logo/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
+
+function LogoImage({logo}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  return (
+    <ThemedImage
+      className="footer__logo"
+      alt={logo.alt}
+      sources={sources}
+      width={logo.width}
+      height={logo.height}
+    />
+  );
+}
+
+export default function FooterLogo({logo}) {
+  return logo.href ? (
+    <Link href={logo.href} className={styles.footerLogoLink}>
+      <LogoImage logo={logo} />
+    </Link>
+  ) : (
+    <LogoImage logo={logo} />
+  );
+}