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

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

@@ -5,36 +5,62 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Seo from '@theme/Seo';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import TOC from '@theme/TOC';
-export default function BlogPostPage(props) {
+import clsx from 'clsx';
+
+function BlogPostPageMetadata(props) {
+  const {content: BlogPostContents} = props;
+  const {assets, metadata} = BlogPostContents;
+  const {title, description, date, tags, authors, frontMatter} = metadata;
+  const {keywords} = frontMatter;
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <PageMetadata
+      title={title}
+      description={description}
+      keywords={keywords}
+      image={image}>
+      <meta property="og:type" content="article" />
+      <meta property="article:published_time" content={date} />
+      {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
+      {authors.some((author) => author.url) && (
+        <meta
+          property="article:author"
+          content={authors
+            .map((author) => author.url)
+            .filter(Boolean)
+            .join(',')}
+        />
+      )}
+      {tags.length > 0 && (
+        <meta
+          property="article:tag"
+          content={tags.map((tag) => tag.label).join(',')}
+        />
+      )}
+    </PageMetadata>
+  );
+}
+
+function BlogPostPageContent(props) {
   const {content: BlogPostContents, sidebar} = props;
   const {assets, metadata} = BlogPostContents;
-  const {
-    title,
-    description,
-    nextItem,
-    prevItem,
-    date,
-    tags,
-    authors,
-    frontMatter,
-  } = metadata;
+  const {nextItem, prevItem, frontMatter} = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
-    keywords,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
-  const image = assets.image ?? frontMatter.image;
   return (
     <BlogLayout
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogPostPage}
       sidebar={sidebar}
       toc={
         !hideTableOfContents &&
@@ -47,34 +73,6 @@ export default function BlogPostPage(props) {
           />
         ) : undefined
       }>
-      <Seo // TODO refactor needed: it's a bit annoying but Seo MUST be inside
-        // BlogLayout, otherwise default image (set by BlogLayout) would shadow
-        // the custom blog post image
-        title={title}
-        description={description}
-        keywords={keywords}
-        image={image}>
-        <meta property="og:type" content="article" />
-        <meta property="article:published_time" content={date} />
-
-        {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
-        {authors.some((author) => author.url) && (
-          <meta
-            property="article:author"
-            content={authors
-              .map((author) => author.url)
-              .filter(Boolean)
-              .join(',')}
-          />
-        )}
-        {tags.length > 0 && (
-          <meta
-            property="article:tag"
-            content={tags.map((tag) => tag.label).join(',')}
-          />
-        )}
-      </Seo>
-
       <BlogPostItem
         frontMatter={frontMatter}
         assets={assets}
@@ -89,3 +87,16 @@ export default function BlogPostPage(props) {
     </BlogLayout>
   );
 }
+
+export default function BlogPostPage(props) {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogPostPage,
+      )}>
+      <BlogPostPageMetadata {...props} />
+      <BlogPostPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}

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

@@ -17,34 +17,31 @@ export default function BlogPostPaginator(props) {
         message: 'Blog post page navigation',
         description: 'The ARIA label for the blog posts pagination',
       })}>
-      <div className="pagination-nav__item">
-        {prevItem && (
-          <PaginatorNavLink
-            {...prevItem}
-            subLabel={
-              <Translate
-                id="theme.blog.post.paginator.newerPost"
-                description="The blog post button label to navigate to the newer/previous post">
-                Newer Post
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextItem && (
-          <PaginatorNavLink
-            {...nextItem}
-            subLabel={
-              <Translate
-                id="theme.blog.post.paginator.olderPost"
-                description="The blog post button label to navigate to the older/next post">
-                Older Post
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {prevItem && (
+        <PaginatorNavLink
+          {...prevItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.newerPost"
+              description="The blog post button label to navigate to the newer/previous post">
+              Newer Post
+            </Translate>
+          }
+        />
+      )}
+      {nextItem && (
+        <PaginatorNavLink
+          {...nextItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.olderPost"
+              description="The blog post button label to navigate to the older/next post">
+              Older Post
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

package/lib-next/theme/BlogSidebar/Desktop/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 clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+export default function BlogSidebarDesktop({sidebar}) {
+  return (
+    <aside className="col col--3">
+      <nav
+        className={clsx(styles.sidebar, 'thin-scrollbar')}
+        aria-label={translate({
+          id: 'theme.blog.sidebar.navAriaLabel',
+          message: 'Blog recent posts navigation',
+          description: 'The ARIA label for recent posts in the blog sidebar',
+        })}>
+        <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
+          {sidebar.title}
+        </div>
+        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
+          {sidebar.items.map((item) => (
+            <li key={item.permalink} className={styles.sidebarItem}>
+              <Link
+                isNavLink
+                to={item.permalink}
+                className={styles.sidebarItemLink}
+                activeClassName={styles.sidebarItemLinkActive}>
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}

package/lib-next/theme/BlogSidebar/{styles.module.css → Desktop/styles.module.css}

@@ -18,9 +18,7 @@
 }
 
 .sidebarItemList {
-  list-style: none;
   font-size: 0.9rem;
-  padding-left: 0;
 }
 
 .sidebarItem {
@@ -29,6 +27,7 @@
 
 .sidebarItemLink {
   color: var(--ifm-font-color-base);
+  display: block;
 }
 
 .sidebarItemLink:hover {

package/lib-next/theme/BlogSidebar/Mobile/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 Link from '@docusaurus/Link';
+import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+
+function BlogSidebarMobileSecondaryMenu({sidebar}) {
+  return (
+    <ul className="menu__list">
+      {sidebar.items.map((item) => (
+        <li key={item.permalink} className="menu__list-item">
+          <Link
+            isNavLink
+            to={item.permalink}
+            className="menu__link"
+            activeClassName="menu__link--active">
+            {item.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default function BlogSidebarMobile(props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={BlogSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}

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

@@ -5,39 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
-import {translate} from '@docusaurus/Translate';
+import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
+import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
+import {useWindowSize} from '@docusaurus/theme-common';
 export default function BlogSidebar({sidebar}) {
-  if (sidebar.items.length === 0) {
+  const windowSize = useWindowSize();
+
+  if (!sidebar?.items.length) {
     return null;
+  } // Mobile sidebar doesn't need to be server-rendered
+
+  if (windowSize === 'mobile') {
+    return <BlogSidebarMobile sidebar={sidebar} />;
   }
 
-  return (
-    <nav
-      className={clsx(styles.sidebar, 'thin-scrollbar')}
-      aria-label={translate({
-        id: 'theme.blog.sidebar.navAriaLabel',
-        message: 'Blog recent posts navigation',
-        description: 'The ARIA label for recent posts in the blog sidebar',
-      })}>
-      <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
-        {sidebar.title}
-      </div>
-      <ul className={styles.sidebarItemList}>
-        {sidebar.items.map((item) => (
-          <li key={item.permalink} className={styles.sidebarItem}>
-            <Link
-              isNavLink
-              to={item.permalink}
-              className={styles.sidebarItemLink}
-              activeClassName={styles.sidebarItemLinkActive}>
-              {item.title}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  );
+  return <BlogSidebarDesktop sidebar={sidebar} />;
 }

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

@@ -8,24 +8,27 @@ import React from 'react';
 import BlogLayout from '@theme/BlogLayout';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import {
+  PageMetadata,
+  HtmlClassNameProvider,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
-export default function BlogTagsListPage(props) {
-  const {tags, sidebar} = props;
+import SearchMetadata from '../SearchMetadata';
+import clsx from 'clsx';
+export default function BlogTagsListPage({tags, sidebar}) {
   const title = translateTagsPageTitle();
   return (
-    <BlogLayout
-      title={title}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogTagsListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'blog_tags_list',
-      }}
-      sidebar={sidebar}>
-      <h1>{title}</h1>
-      <TagsListByLetter tags={Object.values(tags)} />
-    </BlogLayout>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagsListPage,
+      )}>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_tags_list" />
+      <BlogLayout sidebar={sidebar}>
+        <h1>{title}</h1>
+        <TagsListByLetter tags={tags} />
+      </BlogLayout>
+    </HtmlClassNameProvider>
   );
 }

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

@@ -9,8 +9,15 @@ import Link from '@docusaurus/Link';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import Translate, {translate} from '@docusaurus/Translate';
-import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common';
-import BlogListPaginator from '@theme/BlogListPaginator'; // Very simple pluralization: probably good enough for now
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  usePluralForm,
+} from '@docusaurus/theme-common';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx'; // Very simple pluralization: probably good enough for now
 
 function useBlogPostsPlural() {
   const {selectMessage} = usePluralForm();
@@ -31,9 +38,7 @@ function useBlogPostsPlural() {
     );
 }
 
-export default function BlogTagsPostsPage(props) {
-  const {metadata, items, sidebar, listMetadata} = props;
-  const {allTagsPath, name: tagName, count} = metadata;
+export default function BlogTagsPostsPage({tag, items, sidebar, listMetadata}) {
   const blogPostsPlural = useBlogPostsPlural();
   const title = translate(
     {
@@ -42,43 +47,43 @@ export default function BlogTagsPostsPage(props) {
       message: '{nPosts} tagged with "{tagName}"',
     },
     {
-      nPosts: blogPostsPlural(count),
-      tagName,
+      nPosts: blogPostsPlural(tag.count),
+      tagName: tag.label,
     },
   );
   return (
-    <BlogLayout
-      title={title}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogTagPostListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'blog_tags_posts',
-      }}
-      sidebar={sidebar}>
-      <header className="margin-bottom--xl">
-        <h1>{title}</h1>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagPostListPage,
+      )}>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_tags_posts" />
+      <BlogLayout sidebar={sidebar}>
+        <header className="margin-bottom--xl">
+          <h1>{title}</h1>
 
-        <Link href={allTagsPath}>
-          <Translate
-            id="theme.tags.tagsPageLink"
-            description="The label of the link targeting the tag list page">
-            View All Tags
-          </Translate>
-        </Link>
-      </header>
+          <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>
 
-      {items.map(({content: BlogPostContent}) => (
-        <BlogPostItem
-          key={BlogPostContent.metadata.permalink}
-          frontMatter={BlogPostContent.frontMatter}
-          assets={BlogPostContent.assets}
-          metadata={BlogPostContent.metadata}
-          truncated>
-          <BlogPostContent />
-        </BlogPostItem>
-      ))}
-      <BlogListPaginator metadata={listMetadata} />
-    </BlogLayout>
+        {items.map(({content: BlogPostContent}) => (
+          <BlogPostItem
+            key={BlogPostContent.metadata.permalink}
+            frontMatter={BlogPostContent.frontMatter}
+            assets={BlogPostContent.assets}
+            metadata={BlogPostContent.metadata}
+            truncated>
+            <BlogPostContent />
+          </BlogPostItem>
+        ))}
+        <BlogListPaginator metadata={listMetadata} />
+      </BlogLayout>
+    </HtmlClassNameProvider>
   );
 }

package/lib-next/theme/CodeBlock/Container/index.js

@@ -0,0 +1,29 @@
+/**
+ * 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 {
+  usePrismTheme,
+  getPrismCssVariables,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function CodeBlockContainer({as: As, ...props}) {
+  const prismTheme = usePrismTheme();
+  const prismCssVariables = getPrismCssVariables(prismTheme);
+  return (
+    <As // Polymorphic components are hard to type, without `oneOf` generics
+      {...props}
+      style={prismCssVariables}
+      className={clsx(
+        props.className,
+        styles.codeBlockContainer,
+        ThemeClassNames.common.codeBlock,
+      )}
+    />
+  );
+}

package/lib-next/theme/CodeBlock/Container/styles.module.css

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+.codeBlockContainer {
+  background: var(--prism-background-color);
+  color: var(--prism-color);
+  margin-bottom: var(--ifm-leading);
+  box-shadow: var(--ifm-global-shadow-lw);
+  border-radius: var(--ifm-code-border-radius);
+}

package/lib-next/theme/CodeBlock/Content/Element.js

@@ -0,0 +1,23 @@
+/**
+ * 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 Container from '@theme/CodeBlock/Container';
+import clsx from 'clsx';
+import styles from './styles.module.css'; // <pre> tags in markdown map to CodeBlocks. They may contain JSX children. When
+// the children is not a simple string, we just return a styled block without
+// actually highlighting.
+
+export default function CodeBlockJSX({children, className}) {
+  return (
+    <Container
+      as="pre"
+      tabIndex={0}
+      className={clsx(styles.codeBlockStandalone, 'thin-scrollbar', className)}>
+      <code className={styles.codeBlockLines}>{children}</code>
+    </Container>
+  );
+}

package/lib-next/theme/CodeBlock/Content/String.js

@@ -0,0 +1,104 @@
+/**
+ * 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 {
+  useThemeConfig,
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+  containsLineNumbers,
+  usePrismTheme,
+  useCodeWordWrap,
+} from '@docusaurus/theme-common';
+import clsx from 'clsx';
+import Highlight, {defaultProps} from 'prism-react-renderer';
+import Line from '@theme/CodeBlock/Line';
+import CopyButton from '@theme/CodeBlock/CopyButton';
+import WordWrapButton from '@theme/CodeBlock/WordWrapButton';
+import Container from '@theme/CodeBlock/Container';
+import styles from './styles.module.css';
+export default function CodeBlockString({
+  children,
+  className: blockClassName = '',
+  metastring,
+  title: titleProp,
+  showLineNumbers: showLineNumbersProp,
+  language: languageProp,
+}) {
+  const {
+    prism: {defaultLanguage, magicComments},
+  } = useThemeConfig();
+  const language =
+    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
+  const prismTheme = usePrismTheme();
+  const wordWrap = useCodeWordWrap(); // We still parse the metastring in case we want to support more syntax in the
+  // future. Note that MDX doesn't strip quotes when parsing metastring:
+  // "title=\"xyz\"" => title: "\"xyz\""
+
+  const title = parseCodeBlockTitle(metastring) || titleProp;
+  const {lineClassNames, code} = parseLines(children, {
+    metastring,
+    language,
+    magicComments,
+  });
+  const showLineNumbers =
+    showLineNumbersProp || containsLineNumbers(metastring);
+  return (
+    <Container
+      as="div"
+      className={clsx(
+        blockClassName,
+        language &&
+          !blockClassName.includes(`language-${language}`) &&
+          `language-${language}`,
+      )}>
+      {title && <div className={styles.codeBlockTitle}>{title}</div>}
+      <div className={styles.codeBlockContent}>
+        <Highlight
+          {...defaultProps}
+          theme={prismTheme}
+          code={code}
+          language={language ?? 'text'}>
+          {({className, tokens, getLineProps, getTokenProps}) => (
+            <pre
+              /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+              tabIndex={0}
+              ref={wordWrap.codeBlockRef}
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              <code
+                className={clsx(
+                  styles.codeBlockLines,
+                  showLineNumbers && styles.codeBlockLinesWithNumbering,
+                )}>
+                {tokens.map((line, i) => (
+                  <Line
+                    key={i}
+                    line={line}
+                    getLineProps={getLineProps}
+                    getTokenProps={getTokenProps}
+                    classNames={lineClassNames[i]}
+                    showLineNumbers={showLineNumbers}
+                  />
+                ))}
+              </code>
+            </pre>
+          )}
+        </Highlight>
+        <div className={styles.buttonGroup}>
+          {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+            <WordWrapButton
+              className={styles.codeButton}
+              onClick={() => wordWrap.toggle()}
+              isEnabled={wordWrap.isEnabled}
+            />
+          )}
+          <CopyButton className={styles.codeButton} code={code} />
+        </div>
+      </div>
+    </Container>
+  );
+}