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

package/src/theme/BlogPostItem/index.tsx

@@ -10,13 +10,15 @@ 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 type {Props} from '@theme/BlogPostItem';
 
 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() {
@@ -40,9 +42,11 @@ function useReadingTimePlural() {
 
 function BlogPostItem(props: Props): JSX.Element {
   const readingTimePlural = useReadingTimePlural();
+  const {withBaseUrl} = useBaseUrlUtils();
   const {
     children,
     frontMatter,
+    assets,
     metadata,
     truncated,
     isBlogPostPage = false,
@@ -55,112 +59,98 @@ function BlogPostItem(props: Props): JSX.Element {
     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/src/theme/BlogPostPage/index.tsx

@@ -6,52 +6,89 @@
  */
 
 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 {ThemeClassNames} from '@docusaurus/theme-common';
+import TOC from '@theme/TOC';
 
 function BlogPostPage(props: Props): JSX.Element {
   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/src/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/src/theme/BlogTagsListPage/index.tsx

@@ -7,73 +7,30 @@
 
 import React from 'react';
 
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/BlogTagsListPage';
-import BlogSidebar from '@theme/BlogSidebar';
-import {translate} from '@docusaurus/Translate';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-
-function getCategoryOfTag(tag: string) {
-  // tag's category should be customizable
-  return tag[0].toUpperCase();
-}
+import {
+  ThemeClassNames,
+  translateTagsPageTitle,
+} from '@docusaurus/theme-common';
 
 function BlogTagsListPage(props: Props): JSX.Element {
   const {tags, sidebar} = props;
-  const title = translate({
-    id: 'theme.tags.tagsPageTitle',
-    message: 'Tags',
-    description: 'The title of the tag list page',
-  });
-
-  const tagCategories: {[category: string]: string[]} = {};
-  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/src/theme/BlogTagsPostsPage/index.tsx

@@ -7,11 +7,10 @@
 
 import React from 'react';
 
-import Layout from '@theme/Layout';
-import BlogPostItem from '@theme/BlogPostItem';
 import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogTagsPostsPage';
-import BlogSidebar from '@theme/BlogSidebar';
 import Translate, {translate} from '@docusaurus/Translate';
 import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common';
 
@@ -33,7 +32,7 @@ function useBlogPostsPlural() {
     );
 }
 
-function BlogTagsPostPage(props: Props): JSX.Element {
+export default function BlogTagsPostsPage(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   const {allTagsPath, name: tagName, count} = metadata;
   const blogPostsPlural = useBlogPostsPlural();
@@ -47,46 +46,37 @@ function BlogTagsPostPage(props: Props): JSX.Element {
   );
 
   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;