@docusaurus/theme-classic 2.0.0-beta.2 → 2.0.0-beta.22

package/src/theme/Admonition/index.tsx

@@ -0,0 +1,209 @@
+/**
+ * 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, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import Translate from '@docusaurus/Translate';
+import type {Props} from '@theme/Admonition';
+
+import styles from './styles.module.css';
+
+function NoteIcon() {
+  return (
+    <svg viewBox="0 0 14 16">
+      <path
+        fillRule="evenodd"
+        d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
+      />
+    </svg>
+  );
+}
+
+function TipIcon() {
+  return (
+    <svg viewBox="0 0 12 16">
+      <path
+        fillRule="evenodd"
+        d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+      />
+    </svg>
+  );
+}
+
+function DangerIcon() {
+  return (
+    <svg viewBox="0 0 12 16">
+      <path
+        fillRule="evenodd"
+        d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"
+      />
+    </svg>
+  );
+}
+
+function InfoIcon() {
+  return (
+    <svg viewBox="0 0 14 16">
+      <path
+        fillRule="evenodd"
+        d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+      />
+    </svg>
+  );
+}
+
+function CautionIcon() {
+  return (
+    <svg viewBox="0 0 16 16">
+      <path
+        fillRule="evenodd"
+        d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
+      />
+    </svg>
+  );
+}
+
+type AdmonitionConfig = {
+  iconComponent: React.ComponentType;
+  infimaClassName: string;
+  label: ReactNode;
+};
+
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+const AdmonitionConfigs: Record<Props['type'], AdmonitionConfig> = {
+  note: {
+    infimaClassName: 'secondary',
+    iconComponent: NoteIcon,
+    label: (
+      <Translate
+        id="theme.admonition.note"
+        description="The default label used for the Note admonition (:::note)">
+        note
+      </Translate>
+    ),
+  },
+  tip: {
+    infimaClassName: 'success',
+    iconComponent: TipIcon,
+    label: (
+      <Translate
+        id="theme.admonition.tip"
+        description="The default label used for the Tip admonition (:::tip)">
+        tip
+      </Translate>
+    ),
+  },
+  danger: {
+    infimaClassName: 'danger',
+    iconComponent: DangerIcon,
+    label: (
+      <Translate
+        id="theme.admonition.danger"
+        description="The default label used for the Danger admonition (:::danger)">
+        danger
+      </Translate>
+    ),
+  },
+  info: {
+    infimaClassName: 'info',
+    iconComponent: InfoIcon,
+    label: (
+      <Translate
+        id="theme.admonition.info"
+        description="The default label used for the Info admonition (:::info)">
+        info
+      </Translate>
+    ),
+  },
+  caution: {
+    infimaClassName: 'warning',
+    iconComponent: CautionIcon,
+    label: (
+      <Translate
+        id="theme.admonition.caution"
+        description="The default label used for the Caution admonition (:::caution)">
+        caution
+      </Translate>
+    ),
+  },
+};
+
+// Legacy aliases, undocumented but kept for retro-compatibility
+const aliases = {
+  secondary: 'note',
+  important: 'info',
+  success: 'tip',
+  warning: 'danger',
+} as const;
+
+function getAdmonitionConfig(unsafeType: string): AdmonitionConfig {
+  const type =
+    (aliases as {[key: string]: Props['type']})[unsafeType] ?? unsafeType;
+  const config = (AdmonitionConfigs as {[key: string]: AdmonitionConfig})[type];
+  if (config) {
+    return config;
+  }
+  console.warn(
+    `No admonition config found for admonition type "${type}". Using Info as fallback.`,
+  );
+  return AdmonitionConfigs.info;
+}
+
+// Workaround because it's difficult in MDX v1 to provide a MDX title as props
+// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
+function extractMDXAdmonitionTitle(children: ReactNode): {
+  mdxAdmonitionTitle: ReactNode | undefined;
+  rest: ReactNode;
+} {
+  const items = React.Children.toArray(children);
+  const mdxAdmonitionTitle = items.find(
+    (item) =>
+      React.isValidElement(item) &&
+      (item.props as {mdxType: string} | null)?.mdxType ===
+        'mdxAdmonitionTitle',
+  );
+  const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
+  return {
+    mdxAdmonitionTitle,
+    rest,
+  };
+}
+
+function processAdmonitionProps(props: Props): Props {
+  const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
+  return {
+    ...props,
+    title: props.title ?? mdxAdmonitionTitle,
+    children: rest,
+  };
+}
+
+export default function Admonition(props: Props): JSX.Element {
+  const {children, type, title, icon: iconProp} = processAdmonitionProps(props);
+
+  const typeConfig = getAdmonitionConfig(type);
+  const titleLabel = title ?? typeConfig.label;
+  const {iconComponent: IconComponent} = typeConfig;
+  const icon = iconProp ?? <IconComponent />;
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.common.admonition,
+        ThemeClassNames.common.admonitionType(props.type),
+        'alert',
+        `alert--${typeConfig.infimaClassName}`,
+        styles.admonition,
+      )}>
+      <div className={styles.admonitionHeading}>
+        <span className={styles.admonitionIcon}>{icon}</span>
+        {titleLabel}
+      </div>
+      <div className={styles.admonitionContent}>{children}</div>
+    </div>
+  );
+}

package/src/theme/Admonition/styles.module.css

@@ -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.
+ */
+
+.admonition {
+  margin-bottom: 1em;
+}
+
+.admonitionHeading {
+  font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
+    var(--ifm-heading-line-height) var(--ifm-heading-font-family);
+  text-transform: uppercase;
+  margin-bottom: 0.3rem;
+}
+
+.admonitionHeading code {
+  text-transform: none;
+}
+
+.admonitionIcon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.4em;
+}
+
+.admonitionIcon svg {
+  display: inline-block;
+  height: 1.6em;
+  width: 1.6em;
+  fill: var(--ifm-alert-foreground-color);
+}
+
+.admonitionContent > :last-child {
+  margin-bottom: 0;
+}

package/src/theme/AnnouncementBar/index.tsx

@@ -7,34 +7,31 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useThemeConfig, useAnnouncementBar} from '@docusaurus/theme-common';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
 
 import styles from './styles.module.css';
 
-function AnnouncementBar(): JSX.Element | null {
-  const {isClosed, close} = useAnnouncementBar();
+export default function AnnouncementBar(): JSX.Element | null {
+  const {isActive, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
 
-  if (!announcementBar) {
+  if (!isActive) {
     return null;
   }
 
-  const {content, backgroundColor, textColor, isCloseable} = announcementBar;
-
-  if (!content || (isCloseable && isClosed)) {
-    return null;
-  }
+  const {content, backgroundColor, textColor, isCloseable} = announcementBar!;
 
   return (
     <div
       className={styles.announcementBar}
       style={{backgroundColor, color: textColor}}
       role="banner">
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
       <div
-        className={clsx(styles.announcementBarContent, {
-          [styles.announcementBarCloseable]: isCloseable,
-        })}
+        className={styles.announcementBarContent}
         // Developer provided the HTML, so assume it's safe.
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{__html: content}}
@@ -42,18 +39,16 @@ function AnnouncementBar(): JSX.Element | null {
       {isCloseable ? (
         <button
           type="button"
-          className={clsx(styles.announcementBarClose, 'clean-btn')}
+          className={clsx('clean-btn close', styles.announcementBarClose)}
           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>
+          <IconClose width={14} height={14} strokeWidth={3.1} />
         </button>
       ) : null}
     </div>
   );
 }
-
-export default AnnouncementBar;

package/src/theme/AnnouncementBar/styles.module.css

@@ -10,8 +10,8 @@
 }
 
 .announcementBar {
-  position: relative;
-  width: 100%;
+  display: flex;
+  align-items: center;
   height: var(--docusaurus-announcement-bar-height);
   background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
@@ -22,47 +22,27 @@ 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;
-  }
+.announcementBarPlaceholder {
+  flex: 0 0 10px;
 }
 
 .announcementBarClose {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 55px;
-  font-size: 1.25rem;
-  height: 100%;
+  flex: 0 0 30px;
+  align-self: stretch;
+  padding: 0;
+  line-height: 0;
 }
 
 .announcementBarContent {
+  flex: 1 1 auto;
   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;
+@media print {
+  .announcementBar {
+    display: none;
   }
 }
 
@@ -70,3 +50,14 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
   color: inherit;
   text-decoration: underline;
 }
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: 30px;
+  }
+
+  .announcementBarPlaceholder,
+  .announcementBarClose {
+    flex-basis: 50px;
+  }
+}

package/src/theme/BackToTopButton/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 {translate} from '@docusaurus/Translate';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useBackToTopButton} from '@docusaurus/theme-common/internal';
+
+import styles from './styles.module.css';
+
+export default function BackToTopButton(): JSX.Element {
+  const {shown, scrollToTop} = useBackToTopButton({threshold: 300});
+  return (
+    <button
+      aria-label={translate({
+        id: 'theme.BackToTopButton.buttonAriaLabel',
+        message: 'Scroll back to top',
+        description: 'The ARIA label for the back to top button',
+      })}
+      className={clsx(
+        'clean-btn',
+        ThemeClassNames.common.backToTopButton,
+        styles.backToTopButton,
+        shown && styles.backToTopButtonShow,
+      )}
+      type="button"
+      onClick={scrollToTop}
+    />
+  );
+}

package/src/theme/BackToTopButton/styles.module.css

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+.backToTopButton {
+  position: fixed;
+  right: 1.3rem;
+  bottom: 1.3rem;
+  border-radius: 50%;
+  background-color: var(--ifm-color-emphasis-200);
+  width: 3rem;
+  height: 3rem;
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+  opacity: 0;
+  transform: scale(0);
+  visibility: hidden;
+}
+
+.backToTopButton::after {
+  content: ' ';
+  display: inline-block;
+  mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
+  background-color: var(--ifm-color-emphasis-1000);
+  width: 100%;
+  height: 100%;
+}
+
+@media (hover: hover) {
+  .backToTopButton:hover {
+    background-color: var(--ifm-color-emphasis-300);
+  }
+}
+
+.backToTopButtonShow {
+  opacity: 1;
+  transform: scale(1);
+  visibility: visible;
+}

package/src/theme/BlogArchivePage/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import type {ArchiveBlogPost, Props} from '@theme/BlogArchivePage';
+
+type YearProp = {
+  year: string;
+  posts: ArchiveBlogPost[];
+};
+
+function Year({year, posts}: YearProp) {
+  return (
+    <>
+      <h3>{year}</h3>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.metadata.date}>
+            <Link to={post.metadata.permalink}>
+              {post.metadata.formattedDate} - {post.metadata.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+function YearsSection({years}: {years: YearProp[]}) {
+  return (
+    <section className="margin-vert--lg">
+      <div className="container">
+        <div className="row">
+          {years.map((_props, idx) => (
+            <div key={idx} className="col col--4 margin-vert--lg">
+              <Year {..._props} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function listPostsByYears(blogPosts: readonly ArchiveBlogPost[]): YearProp[] {
+  const postsByYear = blogPosts.reduceRight((posts, post) => {
+    const year = post.metadata.date.split('-')[0]!;
+    const yearPosts = posts.get(year) ?? [];
+    return posts.set(year, [post, ...yearPosts]);
+  }, new Map<string, ArchiveBlogPost[]>());
+
+  return Array.from(postsByYear, ([year, posts]) => ({
+    year,
+    posts,
+  }));
+}
+
+export default function BlogArchive({archive}: Props): JSX.Element {
+  const title = translate({
+    id: 'theme.blog.archive.title',
+    message: 'Archive',
+    description: 'The page & hero title of the blog archive page',
+  });
+  const description = translate({
+    id: 'theme.blog.archive.description',
+    message: 'Archive',
+    description: 'The page & hero description of the blog archive page',
+  });
+  const years = listPostsByYears(archive.blogPosts);
+  return (
+    <>
+      <PageMetadata title={title} description={description} />
+      <Layout>
+        <header className="hero hero--primary">
+          <div className="container">
+            <h1 className="hero__title">{title}</h1>
+            <p className="hero__subtitle">{description}</p>
+          </div>
+        </header>
+        <main>{years.length > 0 && <YearsSection years={years} />}</main>
+      </Layout>
+    </>
+  );
+}

package/src/theme/BlogLayout/index.tsx

@@ -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 clsx from 'clsx';
+import Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+
+import type {Props} from '@theme/BlogLayout';
+
+export default function BlogLayout(props: Props): JSX.Element {
+  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">
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            className={clsx('col', {
+              'col--7': hasSidebar,
+              'col--9 col--offset-1': !hasSidebar,
+            })}
+            itemScope
+            itemType="http://schema.org/Blog">
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  );
+}

package/src/theme/BlogListPage/index.tsx

@@ -6,17 +6,22 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import BlogPostItem from '@theme/BlogPostItem';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import BlogLayout from '@theme/BlogLayout';
 import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/BlogListPage';
-import BlogSidebar from '@theme/BlogSidebar';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import BlogPostItems from '@theme/BlogPostItems';
 
-function BlogListPage(props: Props): JSX.Element {
-  const {metadata, items, sidebar} = props;
+function BlogListPageMetadata(props: Props): JSX.Element {
+  const {metadata} = props;
   const {
     siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
@@ -24,36 +29,32 @@ function BlogListPage(props: Props): JSX.Element {
   const isBlogOnlyMode = permalink === '/';
   const title = isBlogOnlyMode ? siteTitle : blogTitle;
   return (
-    <Layout
-      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',
-      }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <BlogSidebar sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            {items.map(({content: BlogPostContent}) => (
-              <BlogPostItem
-                key={BlogPostContent.metadata.permalink}
-                frontMatter={BlogPostContent.frontMatter}
-                metadata={BlogPostContent.metadata}
-                truncated={BlogPostContent.metadata.truncated}>
-                <BlogPostContent />
-              </BlogPostItem>
-            ))}
-            <BlogListPaginator metadata={metadata} />
-          </main>
-        </div>
-      </div>
-    </Layout>
+    <>
+      <PageMetadata title={title} description={blogDescription} />
+      <SearchMetadata tag="blog_posts_list" />
+    </>
   );
 }
 
-export default BlogListPage;
+function BlogListPageContent(props: Props): JSX.Element {
+  const {metadata, items, sidebar} = props;
+  return (
+    <BlogLayout sidebar={sidebar}>
+      <BlogPostItems items={items} />
+      <BlogListPaginator metadata={metadata} />
+    </BlogLayout>
+  );
+}
+
+export default function BlogListPage(props: Props): JSX.Element {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogListPage,
+      )}>
+      <BlogListPageMetadata {...props} />
+      <BlogListPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}