@docusaurus/theme-classic 2.0.0-beta.fc64c12e4 → 2.0.0

package/lib-next/admonitions.css

@@ -1,35 +0,0 @@
-/**
- * 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.
- */
-
-.admonition h5 {
-  margin-top: 0;
-  margin-bottom: 8px;
-  text-transform: uppercase;
-}
-
-.admonition-icon {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.4em;
-}
-
-.admonition-icon svg {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  stroke-width: 0;
-  fill: var(--ifm-alert-foreground-color);
-  stroke: var(--ifm-alert-foreground-color);
-}
-
-.admonition-content > :last-child {
-  margin-bottom: 0;
-}
-
-.admonition {
-  margin-bottom: 1em;
-}

package/lib-next/index.js

@@ -1,222 +0,0 @@
-/**
- * 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 {getTranslationFiles, translateThemeConfig} from './translations';
-import path from 'path';
-import Module from 'module';
-import rtlcss from 'rtlcss';
-import {readDefaultCodeTranslationMessages} from '@docusaurus/utils';
-const createRequire = Module.createRequire || Module.createRequireFromPath;
-const requireFromDocusaurusCore = createRequire(
-  require.resolve('@docusaurus/core/package.json'),
-);
-const ContextReplacementPlugin = requireFromDocusaurusCore(
-  'webpack/lib/ContextReplacementPlugin',
-); // Need to be inlined to prevent dark mode FOUC
-// Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
-
-const ThemeStorageKey = 'theme';
-
-const noFlashColorMode = ({defaultMode, respectPrefersColorScheme}) => {
-  return `(function() {
-  var defaultMode = '${defaultMode}';
-  var respectPrefersColorScheme = ${respectPrefersColorScheme};
-
-  function setDataThemeAttribute(theme) {
-    document.documentElement.setAttribute('data-theme', theme);
-  }
-
-  function getStoredTheme() {
-    var theme = null;
-    try {
-      theme = localStorage.getItem('${ThemeStorageKey}');
-    } catch (err) {}
-    return theme;
-  }
-
-  var storedTheme = getStoredTheme();
-  if (storedTheme !== null) {
-    setDataThemeAttribute(storedTheme);
-  } else {
-    if (
-      respectPrefersColorScheme &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
-      setDataThemeAttribute('dark');
-    } else if (
-      respectPrefersColorScheme &&
-      window.matchMedia('(prefers-color-scheme: light)').matches
-    ) {
-      setDataThemeAttribute('light');
-    } else {
-      setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
-    }
-  }
-})();`;
-}; // Duplicated constant. Unfortunately we can't import it from theme-common, as we need to support older nodejs versions without ESM support
-// TODO: import from theme-common once we only support Node.js with ESM support
-// + move all those announcementBar stuff there too
-
-export const AnnouncementBarDismissStorageKey =
-  'docusaurus.announcement.dismiss';
-const AnnouncementBarDismissDataAttribute =
-  'data-announcement-bar-initially-dismissed'; // We always render the announcement bar html on the server, to prevent layout shifts on React hydration
-// The theme can use CSS + the data attribute to hide the announcement bar asap (before React hydration)
-
-const AnnouncementBarInlineJavaScript = `
-(function() {
-  function isDismissed() {
-    try {
-      return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
-    } catch (err) {}
-    return false;
-  }
-  document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
-})();`;
-
-function getInfimaCSSFile(direction) {
-  return `infima/dist/css/default/default${
-    direction === 'rtl' ? '-rtl' : ''
-  }.css`;
-}
-
-export default function docusaurusThemeClassic(
-  context, // TODO: LoadContext is missing some of properties
-  options,
-) {
-  const {
-    siteConfig: {themeConfig: roughlyTypedThemeConfig},
-    i18n: {currentLocale, localeConfigs},
-  } = context;
-  const themeConfig = roughlyTypedThemeConfig || {};
-  const {
-    announcementBar,
-    colorMode,
-    prism: {additionalLanguages = []} = {},
-  } = themeConfig;
-  const {customCss} = options || {};
-  const {direction} = localeConfigs[currentLocale];
-  return {
-    name: 'docusaurus-theme-classic',
-
-    /*
-    Does not seem needed: webpack can already hot reload theme files
-    getPathsToWatch() {
-      return [
-        path.join(__dirname, '..', 'lib'),
-        path.join(__dirname, '..', 'lib-next'),
-      ];
-    },
-     */
-    getThemePath() {
-      return path.join(__dirname, '..', 'lib-next', 'theme');
-    },
-
-    getTypeScriptThemePath() {
-      return path.resolve(__dirname, '..', 'src', 'theme');
-    },
-
-    getTranslationFiles: async () =>
-      getTranslationFiles({
-        themeConfig,
-      }),
-    translateThemeConfig,
-    getDefaultCodeTranslationMessages: () => {
-      return readDefaultCodeTranslationMessages({
-        dirPath: path.resolve(__dirname, '..', 'codeTranslations'),
-        locale: currentLocale,
-      });
-    },
-
-    getClientModules() {
-      const modules = [
-        require.resolve(getInfimaCSSFile(direction)),
-        path.resolve(__dirname, './prism-include-languages'),
-        path.resolve(__dirname, './admonitions.css'),
-      ];
-
-      if (customCss) {
-        if (Array.isArray(customCss)) {
-          modules.push(...customCss);
-        } else {
-          modules.push(customCss);
-        }
-      }
-
-      return modules;
-    },
-
-    configureWebpack() {
-      const prismLanguages = additionalLanguages
-        .map((lang) => `prism-${lang}`)
-        .join('|');
-      return {
-        ignoreWarnings: [
-          // See https://github.com/facebook/docusaurus/pull/3382
-          (e) => e.message.includes("Can't resolve '@theme-init/hooks/useDocs"),
-        ],
-        plugins: [
-          new ContextReplacementPlugin(
-            /prismjs[\\/]components$/,
-            new RegExp(`^./(${prismLanguages})$`),
-          ),
-        ],
-      };
-    },
-
-    configurePostCss(postCssOptions) {
-      if (direction === 'rtl') {
-        const resolvedInfimaFile = require.resolve(getInfimaCSSFile(direction));
-
-        const plugin = {
-          postcssPlugin: 'RtlCssPlugin',
-          prepare: (result) => {
-            const file = result.root?.source?.input?.file; // Skip Infima as we are using the its RTL version.
-
-            if (file === resolvedInfimaFile) {
-              return {};
-            }
-
-            return rtlcss(result.root);
-          },
-        };
-        postCssOptions.plugins.push(plugin);
-      }
-
-      return postCssOptions;
-    },
-
-    injectHtmlTags() {
-      return {
-        preBodyTags: [
-          {
-            tagName: 'script',
-            innerHTML: `
-${noFlashColorMode(colorMode)}
-${announcementBar ? AnnouncementBarInlineJavaScript : ''}
-            `,
-          },
-        ],
-      };
-    },
-  };
-}
-const swizzleAllowedComponents = [
-  'CodeBlock',
-  'DocSidebar',
-  'Footer',
-  'NotFound',
-  'SearchBar',
-  'IconArrow',
-  'IconEdit',
-  'IconMenu',
-  'hooks/useTheme',
-  'prism-include-languages',
-];
-export function getSwizzleComponentList() {
-  return swizzleAllowedComponents;
-}
-export {validateThemeConfig} from './validateThemeConfig';

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

@@ -1,61 +0,0 @@
-/**
- * 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 {useThemeConfig, useAnnouncementBar} from '@docusaurus/theme-common';
-import {translate} from '@docusaurus/Translate';
-import styles from './styles.module.css';
-
-function AnnouncementBar() {
-  const {isClosed, close} = useAnnouncementBar();
-  const {announcementBar} = useThemeConfig();
-
-  if (!announcementBar) {
-    return null;
-  }
-
-  const {content, backgroundColor, textColor, isCloseable} = announcementBar;
-
-  if (!content || (isCloseable && isClosed)) {
-    return null;
-  }
-
-  return (
-    <div
-      className={styles.announcementBar}
-      style={{
-        backgroundColor,
-        color: textColor,
-      }}
-      role="banner">
-      <div
-        className={clsx(styles.announcementBarContent, {
-          [styles.announcementBarCloseable]: isCloseable,
-        })} // Developer provided the HTML, so assume it's safe.
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: content,
-        }}
-      />
-      {isCloseable ? (
-        <button
-          type="button"
-          className={clsx(styles.announcementBarClose, 'clean-btn')}
-          onClick={close}
-          aria-label={translate({
-            id: 'theme.AnnouncementBar.closeButtonAriaLabel',
-            message: 'Close',
-            description: 'The ARIA label for close button of announcement bar',
-          })}>
-          <span aria-hidden="true">×</span>
-        </button>
-      ) : null}
-    </div>
-  );
-}
-
-export default AnnouncementBar;

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

@@ -1,72 +0,0 @@
-/**
- * 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.
- */
-
-:root {
-  --docusaurus-announcement-bar-height: auto;
-}
-
-.announcementBar {
-  position: relative;
-  width: 100%;
-  height: var(--docusaurus-announcement-bar-height);
-  background-color: var(--ifm-color-white);
-  color: var(--ifm-color-black);
-  border-bottom: 1px solid var(--ifm-color-emphasis-100);
-}
-
-html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
-  display: none;
-}
-
-@media print {
-  .announcementBar {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  :root {
-    --docusaurus-announcement-bar-height: 30px;
-  }
-}
-
-.announcementBarClose {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 55px;
-  font-size: 1.25rem;
-  height: 100%;
-}
-
-.announcementBarContent {
-  font-size: 85%;
-  width: 100%;
-  text-align: center;
-  padding: 5px 0;
-}
-
-.announcementBarCloseable {
-  margin-right: 55px;
-}
-
-@media screen and (max-width: 576px) {
-  .announcementBarClose {
-    width: 35px;
-  }
-  .announcementBarContent {
-    width: auto;
-  }
-  .announcementBarCloseable {
-    margin-right: 35px;
-  }
-}
-
-.announcementBarContent a {
-  color: inherit;
-  text-decoration: underline;
-}

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

@@ -1,113 +0,0 @@
-/**
- * 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, {useRef, useState} from 'react';
-import clsx from 'clsx';
-import useScrollPosition from '@theme/hooks/useScrollPosition';
-import styles from './styles.module.css';
-const threshold = 300; // Not all have support for smooth scrolling (particularly Safari mobile iOS)
-// TODO proper detection is currently unreliable!
-// see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
-
-const SupportsNativeSmoothScrolling = false; // const SupportsNativeSmoothScrolling = ExecutionEnvironment.canUseDOM && 'scrollBehavior' in document.documentElement.style;
-
-function smoothScrollTopNative() {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth',
-  });
-  return () => {
-    // Nothing to cancel, it's natively cancelled if user tries to scroll down
-  };
-}
-
-function smoothScrollTopPolyfill() {
-  let raf = null;
-
-  function rafRecursion() {
-    const currentScroll = document.documentElement.scrollTop;
-
-    if (currentScroll > 0) {
-      raf = requestAnimationFrame(rafRecursion);
-      window.scrollTo(0, Math.floor(currentScroll * 0.85));
-    }
-  }
-
-  rafRecursion();
-  return () => {
-    // Break the recursion
-    // Prevents the user from "fighting" against that recursion producing a weird UX
-    raf && cancelAnimationFrame(raf);
-  };
-}
-
-function useSmoothScrollToTop() {
-  const lastCancelRef = useRef(null);
-
-  function smoothScrollTop() {
-    lastCancelRef.current = SupportsNativeSmoothScrolling
-      ? smoothScrollTopNative()
-      : smoothScrollTopPolyfill();
-  }
-
-  return {
-    smoothScrollTop,
-    cancelScrollToTop: () => lastCancelRef.current?.(),
-  };
-}
-
-function BackToTopButton() {
-  const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
-  const [show, setShow] = useState(false);
-  useScrollPosition(({scrollY: scrollTop}, lastPosition) => {
-    // No lastPosition means component is just being mounted.
-    // Not really a scroll event from the user, so we ignore it
-    if (!lastPosition) {
-      return;
-    }
-
-    const lastScrollTop = lastPosition.scrollY;
-    const isScrollingUp = scrollTop < lastScrollTop;
-
-    if (!isScrollingUp) {
-      cancelScrollToTop();
-    }
-
-    if (scrollTop < threshold) {
-      setShow(false);
-      return;
-    }
-
-    if (isScrollingUp) {
-      const documentHeight = document.documentElement.scrollHeight;
-      const windowHeight = window.innerHeight;
-
-      if (scrollTop + windowHeight < documentHeight) {
-        setShow(true);
-      }
-    } else {
-      setShow(false);
-    }
-  }, []);
-  return (
-    <button
-      className={clsx('clean-btn', styles.backToTopButton, {
-        [styles.backToTopButtonShow]: show,
-      })}
-      type="button"
-      title="Scroll to top"
-      onClick={() => smoothScrollTop()}>
-      <svg viewBox="0 0 24 24" width="28">
-        <path
-          d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-          fill="currentColor"
-        />
-      </svg>
-    </button>
-  );
-}
-
-export default BackToTopButton;

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

@@ -1,39 +0,0 @@
-/**
- * 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.
- */
-
-:root {
-  --docusaurus-btt-background: var(--ifm-color-primary);
-  --docusaurus-btt-color: #fff;
-}
-
-.backToTopButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  right: 1.3rem;
-  bottom: 1.3rem;
-  border-radius: 50%;
-  background: var(--docusaurus-btt-background);
-  color: var(--docusaurus-btt-color);
-  width: 3rem;
-  height: 3rem;
-  z-index: var(--ifm-z-index-fixed);
-  box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.3);
-  transition: all var(--ifm-transition-fast) ease-in-out;
-  opacity: 0;
-  transform: scale(0);
-}
-
-.backToTopButton:hover {
-  opacity: 0.8;
-}
-
-.backToTopButtonShow {
-  opacity: 1;
-  transform: scale(1);
-}

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

@@ -1,43 +0,0 @@
-/**
- * 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 Layout from '@theme/Layout';
-import BlogSidebar from '@theme/BlogSidebar';
-import TOC from '@theme/TOC';
-
-function BlogLayout(props) {
-  const {sidebar, toc, children, ...layoutProps} = props;
-  const hasSidebar = sidebar && sidebar.items.length > 0;
-  return (
-    <Layout {...layoutProps}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          {hasSidebar && (
-            <aside className="col col--3">
-              <BlogSidebar sidebar={sidebar} />
-            </aside>
-          )}
-          <main
-            className={clsx('col', {
-              'col--7': hasSidebar,
-              'col--9 col--offset-1': !hasSidebar,
-            })}>
-            {children}
-          </main>
-          {toc && (
-            <div className="col col--2">
-              <TOC toc={toc} />
-            </div>
-          )}
-        </div>
-      </div>
-    </Layout>
-  );
-}
-
-export default BlogLayout;

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

@@ -1,47 +0,0 @@
-/**
- * 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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import BlogLayout from '@theme/BlogLayout';
-import BlogPostItem from '@theme/BlogPostItem';
-import BlogListPaginator from '@theme/BlogListPaginator';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-
-function BlogListPage(props) {
-  const {metadata, items, sidebar} = props;
-  const {
-    siteConfig: {title: siteTitle},
-  } = useDocusaurusContext();
-  const {blogDescription, blogTitle, permalink} = metadata;
-  const isBlogOnlyMode = permalink === '/';
-  const title = isBlogOnlyMode ? siteTitle : blogTitle;
-  return (
-    <BlogLayout
-      title={title}
-      description={blogDescription}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogListPage}
-      searchMetadatas={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'blog_posts_list',
-      }}
-      sidebar={sidebar}>
-      {items.map(({content: BlogPostContent}) => (
-        <BlogPostItem
-          key={BlogPostContent.metadata.permalink}
-          frontMatter={BlogPostContent.frontMatter}
-          metadata={BlogPostContent.metadata}
-          truncated={BlogPostContent.metadata.truncated}>
-          <BlogPostContent />
-        </BlogPostItem>
-      ))}
-      <BlogListPaginator metadata={metadata} />
-    </BlogLayout>
-  );
-}
-
-export default BlogListPage;

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

@@ -1,54 +0,0 @@
-/**
- * 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 Translate, {translate} from '@docusaurus/Translate';
-
-function BlogListPaginator(props) {
-  const {metadata} = props;
-  const {previousPage, nextPage} = metadata;
-  return (
-    <nav
-      className="pagination-nav"
-      aria-label={translate({
-        id: 'theme.blog.paginator.navAriaLabel',
-        message: 'Blog list page navigation',
-        description: 'The ARIA label for the blog pagination',
-      })}>
-      <div className="pagination-nav__item">
-        {previousPage && (
-          <Link className="pagination-nav__link" to={previousPage}>
-            <div className="pagination-nav__label">
-              &laquo;{' '}
-              <Translate
-                id="theme.blog.paginator.newerEntries"
-                description="The label used to navigate to the newer blog posts page (previous page)">
-                Newer Entries
-              </Translate>
-            </div>
-          </Link>
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextPage && (
-          <Link className="pagination-nav__link" to={nextPage}>
-            <div className="pagination-nav__label">
-              <Translate
-                id="theme.blog.paginator.olderEntries"
-                description="The label used to navigate to the older blog posts page (next page)">
-                Older Entries
-              </Translate>{' '}
-              &raquo;
-            </div>
-          </Link>
-        )}
-      </div>
-    </nav>
-  );
-}
-
-export default BlogListPaginator;