@docusaurus/theme-classic 2.0.0-beta.8bda3b2db → 2.0.0-beta.9

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

@@ -5,50 +5,85 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Layout from '@theme/Layout';
+import Seo from '@theme/Seo';
+import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
-import BlogSidebar from '@theme/BlogSidebar';
-import TOC from '@theme/TOC';
 import {ThemeClassNames} from '@docusaurus/theme-common';
+import TOC from '@theme/TOC';
 
 function BlogPostPage(props) {
   const {content: BlogPostContents, sidebar} = props;
-  const {frontMatter, metadata} = BlogPostContents;
-  const {title, description, nextItem, prevItem} = metadata;
-  const {hide_table_of_contents: hideTableOfContents} = frontMatter;
+  const {
+    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
+    frontMatter,
+    assets,
+    metadata,
+  } = BlogPostContents;
+  const {title, description, nextItem, prevItem, date, tags, authors} =
+    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 (
-    <Layout
-      title={title}
-      description={description}
+    <BlogLayout
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogPostPage}>
-      {BlogPostContents && (
-        <div className="container margin-vert--lg">
-          <div className="row">
-            <aside className="col col--3">
-              <BlogSidebar sidebar={sidebar} />
-            </aside>
-            <main className="col col--7">
-              <BlogPostItem
-                frontMatter={frontMatter}
-                metadata={metadata}
-                isBlogPostPage>
-                <BlogPostContents />
-              </BlogPostItem>
-              {(nextItem || prevItem) && (
-                <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
-              )}
-            </main>
-            {!hideTableOfContents && BlogPostContents.toc && (
-              <div className="col col--2">
-                <TOC toc={BlogPostContents.toc} />
-              </div>
-            )}
-          </div>
-        </div>
+      pageClassName={ThemeClassNames.page.blogPostPage}
+      sidebar={sidebar}
+      toc={
+        !hideTableOfContents &&
+        BlogPostContents.toc &&
+        BlogPostContents.toc.length > 0 ? (
+          <TOC
+            toc={BlogPostContents.toc}
+            minHeadingLevel={tocMinHeadingLevel}
+            maxHeadingLevel={tocMaxHeadingLevel}
+          />
+        ) : 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 metas 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}
+        metadata={metadata}
+        isBlogPostPage>
+        <BlogPostContents />
+      </BlogPostItem>
+
+      {(nextItem || prevItem) && (
+        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
       )}
-    </Layout>
+    </BlogLayout>
   );
 }
 

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

@@ -34,10 +34,10 @@
   text-decoration: none;
 }
 .sidebarItemLinkActive {
-  color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary) !important;
 }
 
-@media only screen and (max-width: 996px) {
+@media (max-width: 996px) {
   .sidebar {
     display: none;
   }

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

@@ -5,70 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
-import BlogSidebar from '@theme/BlogSidebar';
-import {translate} from '@docusaurus/Translate';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-
-function getCategoryOfTag(tag) {
-  // tag's category should be customizable
-  return tag[0].toUpperCase();
-}
+import BlogLayout from '@theme/BlogLayout';
+import TagsListByLetter from '@theme/TagsListByLetter';
+import {
+  ThemeClassNames,
+  translateTagsPageTitle,
+} from '@docusaurus/theme-common';
 
 function BlogTagsListPage(props) {
   const {tags, sidebar} = props;
-  const title = translate({
-    id: 'theme.tags.tagsPageTitle',
-    message: 'Tags',
-    description: 'The title of the tag list page',
-  });
-  const tagCategories = {};
-  Object.keys(tags).forEach((tag) => {
-    const category = getCategoryOfTag(tag);
-    tagCategories[category] = tagCategories[category] || [];
-    tagCategories[category].push(tag);
-  });
-  const tagsList = Object.entries(tagCategories).sort(([a], [b]) =>
-    a.localeCompare(b),
-  );
-  const tagsSection = tagsList
-    .map(([category, tagsForCategory]) => (
-      <article key={category}>
-        <h2>{category}</h2>
-        {tagsForCategory.map((tag) => (
-          <Link
-            className="padding-right--md"
-            href={tags[tag].permalink}
-            key={tag}>
-            {tags[tag].name} ({tags[tag].count})
-          </Link>
-        ))}
-        <hr />
-      </article>
-    ))
-    .filter((item) => item != null);
+  const title = translateTagsPageTitle();
   return (
-    <Layout
+    <BlogLayout
       title={title}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogTagsListPage}
       searchMetadatas={{
         // assign unique search tag to exclude this page from search results!
         tag: 'blog_tags_list',
-      }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <BlogSidebar sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            <h1>{title}</h1>
-            <section className="margin-vert--lg">{tagsSection}</section>
-          </main>
-        </div>
-      </div>
-    </Layout>
+      }}
+      sidebar={sidebar}>
+      <h1>{title}</h1>
+      <TagsListByLetter tags={Object.values(tags)} />
+    </BlogLayout>
   );
 }
 

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

@@ -5,10 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Layout from '@theme/Layout';
-import BlogPostItem from '@theme/BlogPostItem';
 import Link from '@docusaurus/Link';
-import BlogSidebar from '@theme/BlogSidebar';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
 import Translate, {translate} from '@docusaurus/Translate';
 import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common'; // Very simple pluralization: probably good enough for now
 
@@ -31,7 +30,7 @@ function useBlogPostsPlural() {
     );
 }
 
-function BlogTagsPostPage(props) {
+export default function BlogTagsPostsPage(props) {
   const {metadata, items, sidebar} = props;
   const {allTagsPath, name: tagName, count} = metadata;
   const blogPostsPlural = useBlogPostsPlural();
@@ -47,46 +46,37 @@ function BlogTagsPostPage(props) {
     },
   );
   return (
-    <Layout
+    <BlogLayout
       title={title}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogTagsPostPage}
+      pageClassName={ThemeClassNames.page.blogTagPostListPage}
       searchMetadatas={{
         // assign unique search tag to exclude this page from search results!
         tag: 'blog_tags_posts',
-      }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <BlogSidebar sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            <header className="margin-bottom--xl">
-              <h1>{title}</h1>
+      }}
+      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={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}
-                metadata={BlogPostContent.metadata}
-                truncated>
-                <BlogPostContent />
-              </BlogPostItem>
-            ))}
-          </main>
-        </div>
-      </div>
-    </Layout>
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostItem
+          key={BlogPostContent.metadata.permalink}
+          frontMatter={BlogPostContent.frontMatter}
+          assets={BlogPostContent.assets}
+          metadata={BlogPostContent.metadata}
+          truncated>
+          <BlogPostContent />
+        </BlogPostItem>
+      ))}
+    </BlogLayout>
   );
 }
-
-export default BlogTagsPostPage;

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

@@ -13,46 +13,45 @@ import usePrismTheme from '@theme/hooks/usePrismTheme';
 import Translate, {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
 import {useThemeConfig, parseCodeBlockTitle} from '@docusaurus/theme-common';
-const highlightLinesRangeRegex = /{([\d,-]+)}/;
-
-const getHighlightDirectiveRegex = (
-  languages = ['js', 'jsBlock', 'jsx', 'python', 'html'],
-) => {
-  // supported types of comments
-  const comments = {
-    js: {
-      start: '\\/\\/',
-      end: '',
-    },
-    jsBlock: {
-      start: '\\/\\*',
-      end: '\\*\\/',
-    },
-    jsx: {
-      start: '\\{\\s*\\/\\*',
-      end: '\\*\\/\\s*\\}',
-    },
-    python: {
-      start: '#',
-      end: '',
-    },
-    html: {
-      start: '<!--',
-      end: '-->',
-    },
-  }; // supported directives
-
-  const directives = [
-    'highlight-next-line',
-    'highlight-start',
-    'highlight-end',
-  ].join('|'); // to be more reliable, the opening and closing comment must match
-
+const HighlightLinesRangeRegex = /{([\d,-]+)}/;
+const HighlightLanguages = ['js', 'jsBlock', 'jsx', 'python', 'html'];
+// Supported types of highlight comments
+const HighlightComments = {
+  js: {
+    start: '\\/\\/',
+    end: '',
+  },
+  jsBlock: {
+    start: '\\/\\*',
+    end: '\\*\\/',
+  },
+  jsx: {
+    start: '\\{\\s*\\/\\*',
+    end: '\\*\\/\\s*\\}',
+  },
+  python: {
+    start: '#',
+    end: '',
+  },
+  html: {
+    start: '<!--',
+    end: '-->',
+  },
+}; // Supported highlight directives
+
+const HighlightDirectives = [
+  'highlight-next-line',
+  'highlight-start',
+  'highlight-end',
+];
+
+const getHighlightDirectiveRegex = (languages = HighlightLanguages) => {
+  // to be more reliable, the opening and closing comment must match
   const commentPattern = languages
-    .map(
-      (lang) =>
-        `(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].end})`,
-    )
+    .map((lang) => {
+      const {start, end} = HighlightComments[lang];
+      return `(?:${start}\\s*(${HighlightDirectives.join('|')})\\s*${end})`;
+    })
     .join('|'); // white space is allowed, but otherwise it should be on it's own line
 
   return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
@@ -85,7 +84,7 @@ const highlightDirectiveRegex = (lang) => {
 
 export default function CodeBlock({
   children,
-  className: languageClassName,
+  className: blockClassName,
   metastring,
   title,
 }) {
@@ -112,17 +111,16 @@ export default function CodeBlock({
 
   const content = Array.isArray(children) ? children.join('') : children;
 
-  if (metastring && highlightLinesRangeRegex.test(metastring)) {
+  if (metastring && HighlightLinesRangeRegex.test(metastring)) {
     // Tested above
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
+    const highlightLinesRange = metastring.match(HighlightLinesRangeRegex)[1];
     highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
   }
 
-  let language =
-    languageClassName && // Force Prism's language union type to `any` because it does not contain all available languages
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    languageClassName.replace(/language-/, '');
+  const languageClassName = blockClassName
+    ?.split(' ')
+    .find((str) => str.startsWith('language-'));
+  let language = languageClassName?.replace(/language-/, '');
 
   if (!language && prism.defaultLanguage) {
     language = prism.defaultLanguage;
@@ -190,7 +188,11 @@ export default function CodeBlock({
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockContainer}>
+        <div
+          className={clsx(
+            styles.codeBlockContainer,
+            blockClassName?.replace(/language-[^ ]+/, ''),
+          )}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
@@ -200,14 +202,12 @@ export default function CodeBlock({
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar', {
-                [styles.codeBlockWithTitle]: codeBlockTitle,
-              })}
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
               style={style}>
               <code className={styles.codeBlockLines}>
                 {tokens.map((line, i) => {
-                  if (line.length === 1 && line[0].content === '') {
-                    line[0].content = '\n'; // eslint-disable-line no-param-reassign
+                  if (line.length === 1 && line[0].content === '\n') {
+                    line[0].content = '';
                   }
 
                   const lineProps = getLineProps({
@@ -230,6 +230,7 @@ export default function CodeBlock({
                           })}
                         />
                       ))}
+                      <br />
                     </span>
                   );
                 })}

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

@@ -7,6 +7,9 @@
 
 .codeBlockContainer {
   margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
 }
 
 .codeBlockContent {
@@ -16,8 +19,6 @@
 }
 
 .codeBlockTitle {
-  border-top-left-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
   border-bottom: 1px solid var(--ifm-color-emphasis-300);
   font-size: var(--ifm-code-font-size);
   font-weight: 500;
@@ -25,12 +26,9 @@
 }
 
 .codeBlock {
+  margin: 0;
   padding: 0;
-}
-
-.codeBlockWithTitle {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-radius: 0;
 }
 
 .copyButton {
@@ -54,11 +52,10 @@
 
 .codeBlockLines {
   font: inherit;
+  /*rtl:ignore*/
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
-  display: flex;
-  flex-direction: column;
 }
 
 @media print {

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

@@ -0,0 +1,20 @@
+/**
+ * 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 {Details as DetailsGeneric} from '@docusaurus/theme-common';
+import styles from './styles.module.css'; // Should we have a custom details/summary comp in Infima instead of reusing alert classes?
+
+const InfimaClasses = 'alert alert--info';
+export default function Details({...props}) {
+  return (
+    <DetailsGeneric
+      {...props}
+      className={clsx(InfimaClasses, styles.details, props.className)}
+    />
+  );
+}

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

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+.details {
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 1px solid var(--ifm-alert-border-color);
+}