feat(v2): list blog tags on posts (#1456)

* feat(v2): list blog tags on posts

* fix date handling on blog header

* fix console log error due to non unique key

packages/docusaurus-plugin-content-blog/src/index.js

@@ -135,29 +135,44 @@ class DocusaurusPluginContentBlog {
     }
 
     const blogTags = {};
+    const tagsPath = normalizeUrl([basePageUrl, 'tags']);
     blogPosts.forEach(blogPost => {
       const {tags} = blogPost.metadata;
       if (!tags || tags.length === 0) {
+        // TODO: Extract tags out into a separate plugin.
+        // eslint-disable-next-line no-param-reassign
+        blogPost.metadata.tags = [];
         return;
       }
 
-      tags.forEach(tag => {
+      // eslint-disable-next-line no-param-reassign
+      blogPost.metadata.tags = tags.map(tag => {
         const normalizedTag = _.kebabCase(tag);
+        const permalink = normalizeUrl([tagsPath, normalizedTag]);
         if (!blogTags[normalizedTag]) {
           blogTags[normalizedTag] = {
             name: tag.toLowerCase(), // Will only use the name of the first occurrence of the tag.
             items: [],
+            permalink,
           };
         }
 
         blogTags[normalizedTag].items.push(blogPost.id);
+
+        return {
+          label: tag,
+          permalink,
+        };
       });
     });
 
+    const blogTagsListPath = Object.keys(blogTags).length > 0 ? tagsPath : null;
+
     return {
       blogPosts,
       blogListPaginated,
       blogTags,
+      blogTagsListPath,
     };
   }
 
@@ -174,7 +189,12 @@ class DocusaurusPluginContentBlog {
     } = this.options;
 
     const {addRoute, createData} = actions;
-    const {blogPosts, blogListPaginated, blogTags} = blogContents;
+    const {
+      blogPosts,
+      blogListPaginated,
+      blogTags,
+      blogTagsListPath,
+    } = blogContents;
 
     const blogItemsToModules = {};
     // Create routes for blog entries.
@@ -254,21 +274,14 @@ class DocusaurusPluginContentBlog {
     );
 
     // Tags.
-    const {routeBasePath} = this.options;
-    const {
-      siteConfig: {baseUrl},
-    } = this.context;
-
-    const basePageUrl = normalizeUrl([baseUrl, routeBasePath]);
-    const tagsPath = normalizeUrl([basePageUrl, 'tags']);
     const tagsModule = {};
 
     await Promise.all(
       Object.keys(blogTags).map(async tag => {
-        const permalink = normalizeUrl([tagsPath, tag]);
-        const {name, items} = blogTags[tag];
+        const {name, items, permalink} = blogTags[tag];
 
         tagsModule[tag] = {
+          allTagsPath: blogTagsListPath,
           slug: tag,
           name,
           count: items.length,
@@ -309,12 +322,12 @@ class DocusaurusPluginContentBlog {
     // Only create /tags page if there are tags.
     if (Object.keys(blogTags).length > 0) {
       const tagsListPath = await createData(
-        `${docuHash(`${tagsPath}-tags`)}.json`,
+        `${docuHash(`${blogTagsListPath}-tags`)}.json`,
         JSON.stringify(tagsModule, null, 2),
       );
 
       addRoute({
-        path: tagsPath,
+        path: blogTagsListPath,
         component: blogTagsListComponent,
         exact: true,
         modules: {

packages/docusaurus-plugin-content-blog/src/theme/BlogPostItem/index.js

@@ -10,12 +10,12 @@ import Link from '@docusaurus/Link';
 
 function BlogPostItem(props) {
   const {children, frontMatter, metadata, truncated} = props;
+  const {date, permalink, tags} = metadata;
+  const {author, authorURL, authorTitle, authorFBID, title} = frontMatter;
 
   const renderPostHeader = () => {
-    const {author, authorURL, authorTitle, authorFBID, title} = frontMatter;
-    const {date, permalink} = metadata;
-
-    const blogPostDate = new Date(date);
+    const match = date.substring(0, 10).split('-');
+    const year = match[0];
     const month = [
       'January',
       'February',
@@ -29,7 +29,8 @@ function BlogPostItem(props) {
       'October',
       'November',
       'December',
-    ];
+    ][parseInt(match[1], 10) - 1];
+    const day = parseInt(match[2], 10);
 
     const authorImageURL = authorFBID
       ? `https://graph.facebook.com/${authorFBID}/picture/?height=200&width=200`
@@ -37,12 +38,13 @@ function BlogPostItem(props) {
 
     return (
       <header>
-        <h1>
+        <h1 className="margin-bottom--xs">
           <Link to={permalink}>{title}</Link>
         </h1>
         <div className="margin-bottom--sm">
-          {month[blogPostDate.getMonth()]} {blogPostDate.getDay()},{' '}
-          {blogPostDate.getFullYear()}
+          <small>
+            {month} {day}, {year}
+          </small>
         </div>
         <div className="avatar margin-bottom--md">
           {authorImageURL && (
@@ -79,11 +81,30 @@ function BlogPostItem(props) {
     <div>
       {renderPostHeader()}
       <article className="markdown">{children}</article>
-      {truncated && (
-        <div className="text--right margin-vert--md">
-          <Link to={metadata.permalink}>Read More</Link>
+      <div className="row margin-vert--lg">
+        <div className="col col-6">
+          {tags.length > 0 && (
+            <>
+              <strong>Tags:</strong>
+              {tags.map(({label, permalink: tagPermalink}) => (
+                <Link
+                  key={tagPermalink}
+                  className="margin-horiz--sm"
+                  to={tagPermalink}>
+                  {label}
+                </Link>
+              ))}
+            </>
+          )}
         </div>
-      )}
+        <div className="col col-6 text--right">
+          {truncated && (
+            <Link to={metadata.permalink}>
+              <strong>Read More</strong>
+            </Link>
+          )}
+        </div>
+      </div>
     </div>
   );
 }

packages/docusaurus-plugin-content-blog/src/theme/BlogPostPage/index.js

@@ -23,7 +23,7 @@ function BlogPostPage(props) {
               <BlogPostItem frontMatter={frontMatter} metadata={metadata}>
                 <BlogPostContents />
               </BlogPostItem>
-              <div className="margin-vert--lg">
+              <div className="margin-vert--xl">
                 <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
               </div>
             </div>

packages/docusaurus-plugin-content-blog/src/theme/BlogTagsPostsPage/index.js

@@ -9,10 +9,11 @@ import React from 'react';
 
 import Layout from '@theme/Layout'; // eslint-disable-line
 import BlogPostItem from '@theme/BlogPostItem';
+import Link from '@docusaurus/Link';
 
 function BlogTagsPostPage(props) {
   const {metadata, items} = props;
-  const {name: tagName, count} = metadata;
+  const {allTagsPath, name: tagName, count} = metadata;
 
   return (
     <Layout
@@ -24,7 +25,8 @@ function BlogTagsPostPage(props) {
             <h1>
               {count} post(s) tagged with &quot;{tagName}&quot;
             </h1>
-            <div className="margin-vert--lg">
+            <Link href={allTagsPath}>View All Tags</Link>
+            <div className="margin-vert--xl">
               {items.map(
                 ({content: BlogPostContent, metadata: blogPostMetadata}) => (
                   <div key={blogPostMetadata.permalink}>