@docusaurus/theme-classic 2.0.0-beta.15d451942 → 2.0.0-beta.16

package/src/theme/BlogListPaginator/index.tsx

@@ -6,11 +6,11 @@
  */
 
 import React from 'react';
-import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogListPaginator';
 
-function BlogListPaginator(props: Props): JSX.Element {
+export default function BlogListPaginator(props: Props): JSX.Element {
   const {metadata} = props;
   const {previousPage, nextPage} = metadata;
 
@@ -24,34 +24,32 @@ function BlogListPaginator(props: Props): JSX.Element {
       })}>
       <div className="pagination-nav__item">
         {previousPage && (
-          <Link className="pagination-nav__link" to={previousPage}>
-            <div className="pagination-nav__label">
-              &laquo;{' '}
+          <PaginatorNavLink
+            permalink={previousPage}
+            title={
               <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">
+          <PaginatorNavLink
+            permalink={nextPage}
+            title={
               <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>
+              </Translate>
+            }
+          />
         )}
       </div>
     </nav>
   );
 }
-
-export default BlogListPaginator;

package/src/theme/BlogPostAuthor/index.tsx

@@ -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.
+ */
+
+import React from 'react';
+import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogPostAuthor';
+
+import styles from './styles.module.css';
+
+export default function BlogPostAuthor({author}: Props): JSX.Element {
+  const {name, title, url, imageURL} = author;
+  return (
+    <div className="avatar margin-bottom--sm">
+      {imageURL && (
+        <Link className="avatar__photo-link avatar__photo" href={url}>
+          <img className={styles.image} src={imageURL} alt={name} />
+        </Link>
+      )}
+
+      {name && (
+        <div
+          className="avatar__intro"
+          itemProp="author"
+          itemScope
+          itemType="https://schema.org/Person">
+          <div className="avatar__name">
+            <Link href={url} itemProp="url">
+              <span itemProp="name">{name}</span>
+            </Link>
+          </div>
+          {title && (
+            <small className="avatar__subtitle" itemProp="description">
+              {title}
+            </small>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/theme/{LastUpdated → BlogPostAuthor}/styles.module.css

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.lastUpdatedDate {
-  font-weight: bold;
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }

package/src/theme/BlogPostAuthors/index.tsx

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

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

@@ -0,0 +1,21 @@
+/**
+ * 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;
+}
+
+.imageOnlyAuthorRow {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.imageOnlyAuthorCol {
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
+}

package/src/theme/BlogPostItem/index.tsx

@@ -10,13 +10,16 @@ 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 {blogPostContainerID} from '@docusaurus/utils-common';
 import MDXComponents from '@theme/MDXComponents';
-import Seo from '@theme/Seo';
+import EditThisPage from '@theme/EditThisPage';
 import type {Props} from '@theme/BlogPostItem';
 
 import styles from './styles.module.css';
-
-import {usePluralForm} from '@docusaurus/theme-common';
+import TagsListInline from '@theme/TagsListInline';
+import BlogPostAuthors from '@theme/BlogPostAuthors';
 
 // Very simple pluralization: probably good enough for now
 function useReadingTimePlural() {
@@ -38,114 +41,121 @@ function useReadingTimePlural() {
   };
 }
 
-function BlogPostItem(props: Props): JSX.Element {
+export default function BlogPostItem(props: Props): JSX.Element {
   const readingTimePlural = useReadingTimePlural();
+  const {withBaseUrl} = useBaseUrlUtils();
   const {
     children,
     frontMatter,
+    assets,
     metadata,
     truncated,
     isBlogPostPage = false,
   } = props;
-  const {date, formattedDate, permalink, tags, readingTime} = metadata;
-  const {author, title, 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 {
+    date,
+    formattedDate,
+    permalink,
+    tags,
+    readingTime,
+    title,
+    editUrl,
+    authors,
+  } = metadata;
 
-  const renderPostHeader = () => {
-    const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
+  const image = assets.image ?? frontMatter.image;
+  const truncatedPost = !isBlogPostPage && truncated;
+  const tagsExists = tags.length > 0;
+  const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
 
-    return (
+  return (
+    <article
+      className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}
+      itemProp="blogPost"
+      itemScope
+      itemType="http://schema.org/BlogPosting">
       <header>
-        <TitleHeading
-          className={clsx('margin-bottom--sm', 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="margin-vert--md">
-          <time dateTime={date} className={styles.blogPostDate}>
+        <div className={clsx(styles.blogPostData, 'margin-vert--md')}>
+          <time dateTime={date} itemProp="datePublished">
             {formattedDate}
-            {readingTime && (
-              <>
-                {' · '}
-                {readingTimePlural(readingTime)}
-              </>
-            )}
           </time>
-        </div>
-        <div className="avatar margin-vert--md">
-          {authorImageURL && (
-            <Link className="avatar__photo-link avatar__photo" href={authorURL}>
-              <img src={authorImageURL} alt={author} />
-            </Link>
+
+          {typeof readingTime !== 'undefined' && (
+            <>
+              {' · '}
+              {readingTimePlural(readingTime)}
+            </>
           )}
-          <div className="avatar__intro">
-            {author && (
-              <>
-                <h4 className="avatar__name">
-                  <Link href={authorURL}>{author}</Link>
-                </h4>
-                <small className="avatar__subtitle">{authorTitle}</small>
-              </>
-            )}
-          </div>
         </div>
+        <BlogPostAuthors authors={authors} assets={assets} />
       </header>
-    );
-  };
 
-  return (
-    <>
-      <Seo {...{keywords, image}} />
+      {image && (
+        <meta itemProp="image" content={withBaseUrl(image, {absolute: true})} />
+      )}
 
-      <article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}>
-        {renderPostHeader()}
-        <div className="markdown">
-          <MDXProvider components={MDXComponents}>{children}</MDXProvider>
-        </div>
-        {(tags.length > 0 || truncated) && (
-          <footer className="row margin-vert--lg">
-            {tags.length > 0 && (
-              <div className="col">
-                <strong>
+      <div
+        // This ID is used for the feed generation to locate the main content
+        id={isBlogPostPage ? blogPostContainerID : undefined}
+        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={translate(
+                  {
+                    message: 'Read more about {title}',
+                    id: 'theme.blog.post.readMoreLabel',
+                    description:
+                      'The ARIA label for the link to full blog posts from excerpts',
+                  },
+                  {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>
-                </strong>
-                {tags.map(({label, permalink: tagPermalink}) => (
-                  <Link
-                    key={tagPermalink}
-                    className="margin-horiz--sm"
-                    to={tagPermalink}>
-                    {label}
-                  </Link>
-                ))}
-              </div>
-            )}
-            {truncated && (
-              <div className="col text--right">
-                <Link
-                  to={metadata.permalink}
-                  aria-label={`Read more about ${title}`}>
-                  <strong>
-                    <Translate
-                      id="theme.blog.post.readMore"
-                      description="The label used in blog post item excerpts to link to full blog posts">
-                      Read More
-                    </Translate>
-                  </strong>
-                </Link>
-              </div>
-            )}
-          </footer>
-        )}
-      </article>
-    </>
+                </b>
+              </Link>
+            </div>
+          )}
+        </footer>
+      )}
+    </article>
   );
 }
-
-export default BlogPostItem;

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

@@ -9,6 +9,10 @@
   font-size: 3rem;
 }
 
-.blogPostDate {
+.blogPostData {
   font-size: 0.9rem;
 }
+
+.blogPostDetailsFull {
+  flex-direction: column;
+}

package/src/theme/BlogPostPage/index.tsx

@@ -6,57 +6,92 @@
  */
 
 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 type {Props} from '@theme/BlogPostPage';
-import BlogSidebar from '@theme/BlogSidebar';
-import TOC from '@theme/TOC';
-import EditThisPage from '@theme/EditThisPage';
 import {ThemeClassNames} from '@docusaurus/theme-common';
+import TOC from '@theme/TOC';
 
-function BlogPostPage(props: Props): JSX.Element {
+export default function BlogPostPage(props: Props): JSX.Element {
   const {content: BlogPostContents, sidebar} = props;
-  const {frontMatter, metadata} = BlogPostContents;
-  const {title, description, nextItem, prevItem, editUrl} = metadata;
-  const {hide_table_of_contents: hideTableOfContents} = frontMatter;
+  const {assets, metadata} = BlogPostContents;
+  const {
+    title,
+    description,
+    nextItem,
+    prevItem,
+    date,
+    tags,
+    authors,
+    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 (
-    <Layout
-      title={title}
-      description={description}
+    <BlogLayout
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogPostPage}>
-      {BlogPostContents && (
-        <div className="container margin-vert--lg">
-          <div className="row">
-            <div className="col col--3">
-              <BlogSidebar sidebar={sidebar} />
-            </div>
-            <main className="col col--7">
-              <BlogPostItem
-                frontMatter={frontMatter}
-                metadata={metadata}
-                isBlogPostPage>
-                <BlogPostContents />
-              </BlogPostItem>
-              <div>{editUrl && <EditThisPage editUrl={editUrl} />}</div>
-              {(nextItem || prevItem) && (
-                <div className="margin-vert--xl">
-                  <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
-                </div>
-              )}
-            </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 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}
+        metadata={metadata}
+        isBlogPostPage>
+        <BlogPostContents />
+      </BlogPostItem>
+
+      {(nextItem || prevItem) && (
+        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
       )}
-    </Layout>
+    </BlogLayout>
   );
 }
-
-export default BlogPostPage;

package/src/theme/BlogPostPaginator/index.tsx

@@ -7,15 +7,15 @@
 
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
-import Link from '@docusaurus/Link';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogPostPaginator';
 
-function BlogPostPaginator(props: Props): JSX.Element {
+export default function BlogPostPaginator(props: Props): JSX.Element {
   const {nextItem, prevItem} = props;
 
   return (
     <nav
-      className="pagination-nav"
+      className="pagination-nav docusaurus-mt-lg"
       aria-label={translate({
         id: 'theme.blog.post.paginator.navAriaLabel',
         message: 'Blog post page navigation',
@@ -23,38 +23,32 @@ function BlogPostPaginator(props: Props): JSX.Element {
       })}>
       <div className="pagination-nav__item">
         {prevItem && (
-          <Link className="pagination-nav__link" to={prevItem.permalink}>
-            <div className="pagination-nav__sublabel">
+          <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__label">
-              &laquo; {prevItem.title}
-            </div>
-          </Link>
+            }
+          />
         )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
         {nextItem && (
-          <Link className="pagination-nav__link" to={nextItem.permalink}>
-            <div className="pagination-nav__sublabel">
+          <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>
-            <div className="pagination-nav__label">
-              {nextItem.title} &raquo;
-            </div>
-          </Link>
+            }
+          />
         )}
       </div>
     </nav>
   );
 }
-
-export default BlogPostPaginator;