fix(v2): slugify tags

packages/docusaurus-plugin-content-blog/package.json

@@ -12,7 +12,8 @@
     "@docusaurus/utils": "^2.0.0-alpha.13",
     "fs-extra": "^7.0.1",
     "globby": "^9.1.0",
-    "loader-utils": "^1.2.3"
+    "loader-utils": "^1.2.3",
+    "lodash": "^4.17.11"
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0",

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

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const globby = require('globby');
-const path = require('path');
 const fs = require('fs-extra');
+const globby = require('globby');
+const _ = require('lodash');
+const path = require('path');
 const {parse, normalizeUrl, docuHash} = require('@docusaurus/utils');
 
 // TODO: Use a better slugify function that doesn't rely on a specific file extension.
@@ -137,11 +138,15 @@ class DocusaurusPluginContentBlog {
       }
 
       tags.forEach(tag => {
-        const normalizedTag = tag.toLowerCase();
+        const normalizedTag = _.kebabCase(tag);
         if (!blogTags[normalizedTag]) {
-          blogTags[normalizedTag] = [];
+          blogTags[normalizedTag] = {
+            name: tag.toLowerCase(), // Will only use the name of the first occurrence of the tag.
+            items: [],
+          };
         }
-        blogTags[normalizedTag].push(blogPost.id);
+
+        blogTags[normalizedTag].items.push(blogPost.id);
       });
     });
 
@@ -253,21 +258,18 @@ class DocusaurusPluginContentBlog {
     await Promise.all(
       Object.keys(blogTags).map(async tag => {
         const permalink = normalizeUrl([tagsPath, tag]);
-        const postIDs = blogTags[tag];
+        const {name, items} = blogTags[tag];
+
         tagsModule[tag] = {
-          count: postIDs.length,
+          slug: tag,
+          name,
+          count: items.length,
           permalink,
         };
 
         const tagsMetadataPath = await createData(
           `${docuHash(permalink)}.json`,
-          JSON.stringify(
+          JSON.stringify(tagsModule[tag], null, 2),
-            {
-              tag,
-            },
-            null,
-            2,
-          ),
         );
 
         addRoute({
@@ -275,7 +277,7 @@ class DocusaurusPluginContentBlog {
           component: blogTagsPostsComponent,
           exact: true,
           modules: {
-            items: postIDs.map(postID => {
+            items: items.map(postID => {
               const {metadata: postMetadata, metadataPath} = blogItemsToModules[
                 postID
               ];
@@ -296,6 +298,8 @@ class DocusaurusPluginContentBlog {
       }),
     );
 
+    // Only create /tags page if there are tags.
+    if (Object.keys(blogTags).length > 0) {
       const tagsListPath = await createData(
         `${docuHash(`${tagsPath}-tags`)}.json`,
         JSON.stringify(tagsModule, null, 2),
@@ -310,6 +314,7 @@ class DocusaurusPluginContentBlog {
         },
       });
     }
+  }
 
   getThemePath() {
     return path.resolve(__dirname, './theme');

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

@@ -43,7 +43,7 @@ function BlogTagsListPage(props) {
               className="padding-right--md"
               href={tags[tag].permalink}
               key="tag">
-              {tag} ({tags[tag].count})
+              {tags[tag].name} ({tags[tag].count})
             </Link>
           ))}
           <hr />

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

@@ -12,15 +12,17 @@ import BlogPostItem from '@theme/BlogPostItem';
 
 function BlogTagsPostPage(props) {
   const {metadata, items} = props;
-  const {tag} = metadata;
+  const {name: tagName, count} = metadata;
 
   return (
-    <Layout title={`Blog | Tagged ${tag}`} description={`Blog | Tagged ${tag}`}>
+    <Layout
+      title={`Blog | Tagged "${tagName}"`}
+      description={`Blog | Tagged "${tagName}"`}>
       <div className="container margin-vert--xl">
         <div className="row">
           <div className="col col--8 col--offset-2">
             <h1>
-              {items.length} post(s) tagged with &quot;{tag}&quot;
+              {count} post(s) tagged with &quot;{tagName}&quot;
             </h1>
             <div className="margin-vert--lg">
               {items.map(