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

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

@@ -0,0 +1,34 @@
+/**
+ * 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 BlogPostAuthor from '@theme/BlogPostAuthor';
+import styles from './styles.module.css'; // Component responsible for the authors layout
+
+export default function BlogPostAuthors({authors, assets}) {
+  const authorsCount = authors.length;
+
+  if (authorsCount === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className="row margin-top--md margin-bottom--sm">
+      {authors.map((author, idx) => (
+        <div className={clsx('col col--6', styles.authorCol)} key={idx}>
+          <BlogPostAuthor
+            author={{
+              ...author,
+              // Handle author images using relative paths
+              imageURL: assets.authorsImageUrls[idx] ?? author.imageURL,
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.authorCol {
+  max-width: inherit !important;
+  flex-grow: 1 !important;
+}

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

@@ -9,11 +9,13 @@ import clsx from 'clsx';
 import {MDXProvider} from '@mdx-js/react';
 import Translate, {translate} from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import {usePluralForm} from '@docusaurus/theme-common';
 import MDXComponents from '@theme/MDXComponents';
-import Seo from '@theme/Seo';
 import EditThisPage from '@theme/EditThisPage';
-import styles from './styles.module.css'; // Very simple pluralization: probably good enough for now
+import styles from './styles.module.css';
+import TagsListInline from '@theme/TagsListInline';
+import BlogPostAuthors from '@theme/BlogPostAuthors'; // Very simple pluralization: probably good enough for now
 
 function useReadingTimePlural() {
   const {selectMessage} = usePluralForm();
@@ -38,9 +40,11 @@ function useReadingTimePlural() {
 
 function BlogPostItem(props) {
   const readingTimePlural = useReadingTimePlural();
+  const {withBaseUrl} = useBaseUrlUtils();
   const {
     children,
     frontMatter,
+    assets,
     metadata,
     truncated,
     isBlogPostPage = false,
@@ -53,115 +57,104 @@ function BlogPostItem(props) {
     readingTime,
     title,
     editUrl,
+    authors,
   } = metadata;
-  const {author, image, keywords} = frontMatter;
-  const authorURL = frontMatter.author_url || frontMatter.authorURL;
-  const authorTitle = frontMatter.author_title || frontMatter.authorTitle;
-  const authorImageURL =
-    frontMatter.author_image_url || frontMatter.authorImageURL;
+  const image = assets.image ?? frontMatter.image;
+  const truncatedPost = !isBlogPostPage && truncated;
+  const tagsExists = tags.length > 0;
 
   const renderPostHeader = () => {
     const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
     return (
       <header>
-        <TitleHeading className={styles.blogPostTitle}>
-          {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
+        <TitleHeading className={styles.blogPostTitle} itemProp="headline">
+          {isBlogPostPage ? (
+            title
+          ) : (
+            <Link itemProp="url" to={permalink}>
+              {title}
+            </Link>
+          )}
         </TitleHeading>
         <div className={clsx(styles.blogPostData, 'margin-vert--md')}>
-          <time dateTime={date}>{formattedDate}</time>
+          <time dateTime={date} itemProp="datePublished">
+            {formattedDate}
+          </time>
 
-          {readingTime && (
+          {typeof readingTime !== 'undefined' && (
             <>
               {' · '}
               {readingTimePlural(readingTime)}
             </>
           )}
         </div>
-        <div className="avatar margin-vert--md">
-          {authorImageURL && (
-            <Link className="avatar__photo-link avatar__photo" href={authorURL}>
-              <img src={authorImageURL} alt={author} />
-            </Link>
-          )}
-          <div className="avatar__intro">
-            {author && (
-              <>
-                <div className="avatar__name">
-                  <Link href={authorURL}>{author}</Link>
-                </div>
-                <small className="avatar__subtitle">{authorTitle}</small>
-              </>
-            )}
-          </div>
-        </div>
+        <BlogPostAuthors authors={authors} assets={assets} />
       </header>
     );
   };
 
   return (
-    <>
-      <Seo
-        {...{
-          keywords,
-          image,
-        }}
-      />
+    <article
+      className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}
+      itemProp="blogPost"
+      itemScope
+      itemType="http://schema.org/BlogPosting">
+      {renderPostHeader()}
 
-      <article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}>
-        {renderPostHeader()}
-        <div className="markdown">
-          <MDXProvider components={MDXComponents}>{children}</MDXProvider>
-        </div>
-        {(tags.length > 0 || truncated) && (
-          <footer
-            className={clsx('row docusaurus-mt-lg', {
-              [styles.blogPostDetailsFull]: isBlogPostPage,
-            })}>
-            {tags.length > 0 && (
-              <div className="col">
+      {image && (
+        <meta
+          itemProp="image"
+          content={withBaseUrl(image, {
+            absolute: true,
+          })}
+        />
+      )}
+
+      <div className="markdown" itemProp="articleBody">
+        <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+      </div>
+
+      {(tagsExists || truncated) && (
+        <footer
+          className={clsx('row docusaurus-mt-lg', {
+            [styles.blogPostDetailsFull]: isBlogPostPage,
+          })}>
+          {tagsExists && (
+            <div
+              className={clsx('col', {
+                'col--9': truncatedPost,
+              })}>
+              <TagsListInline tags={tags} />
+            </div>
+          )}
+
+          {isBlogPostPage && editUrl && (
+            <div className="col margin-top--sm">
+              <EditThisPage editUrl={editUrl} />
+            </div>
+          )}
+
+          {truncatedPost && (
+            <div
+              className={clsx('col text--right', {
+                'col--3': tagsExists,
+              })}>
+              <Link
+                to={metadata.permalink}
+                aria-label={`Read more about ${title}`}>
                 <b>
                   <Translate
-                    id="theme.tags.tagsListLabel"
-                    description="The label alongside a tag list">
-                    Tags:
+                    id="theme.blog.post.readMore"
+                    description="The label used in blog post item excerpts to link to full blog posts">
+                    Read More
                   </Translate>
                 </b>
-                {tags.map(({label, permalink: tagPermalink}) => (
-                  <Link
-                    key={tagPermalink}
-                    className="margin-horiz--sm"
-                    to={tagPermalink}>
-                    {label}
-                  </Link>
-                ))}
-              </div>
-            )}
-
-            {isBlogPostPage && editUrl && (
-              <div className="col margin-top--sm">
-                <EditThisPage editUrl={editUrl} />
-              </div>
-            )}
-
-            {!isBlogPostPage && truncated && (
-              <div className="col text--right">
-                <Link
-                  to={metadata.permalink}
-                  aria-label={`Read more about ${title}`}>
-                  <b>
-                    <Translate
-                      id="theme.blog.post.readMore"
-                      description="The label used in blog post item excerpts to link to full blog posts">
-                      Read More
-                    </Translate>
-                  </b>
-                </Link>
-              </div>
-            )}
-          </footer>
-        )}
-      </article>
-    </>
+              </Link>
+            </div>
+          )}
+        </footer>
+      )}
+    </article>
   );
 }
 

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

@@ -5,34 +5,81 @@
  * 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 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 (
     <BlogLayout
-      title={title}
-      description={description}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogPostPage}
       sidebar={sidebar}
       toc={
-        !hideTableOfContents && BlogPostContents.toc
-          ? BlogPostContents.toc
-          : undefined
+        !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} />
       )}

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,48 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Link from '@docusaurus/Link';
 import BlogLayout from '@theme/BlogLayout';
-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 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 (
     <BlogLayout
       title={title}
@@ -58,7 +26,7 @@ function BlogTagsListPage(props) {
       }}
       sidebar={sidebar}>
       <h1>{title}</h1>
-      <section className="margin-vert--lg">{tagsSection}</section>
+      <TagsListByLetter tags={Object.values(tags)} />
     </BlogLayout>
   );
 }

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

@@ -30,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();
@@ -49,7 +49,7 @@ function BlogTagsPostPage(props) {
     <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',
@@ -71,6 +71,7 @@ function BlogTagsPostPage(props) {
         <BlogPostItem
           key={BlogPostContent.metadata.permalink}
           frontMatter={BlogPostContent.frontMatter}
+          assets={BlogPostContent.assets}
           metadata={BlogPostContent.metadata}
           truncated>
           <BlogPostContent />
@@ -79,5 +80,3 @@ function BlogTagsPostPage(props) {
     </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,16 +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
-    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;
@@ -189,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}
@@ -203,8 +206,8 @@ export default function CodeBlock({
               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({
@@ -227,6 +230,7 @@ export default function CodeBlock({
                           })}
                         />
                       ))}
+                      <br />
                     </span>
                   );
                 })}

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

@@ -52,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 {