fix(v2): slugify tags

facebook · May 14, 2019 · ba67242 · ba67242
1 parent fd270bd
commit ba67242
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 31 deletions.
diff --git a/packages/docusaurus-plugin-content-blog/package.json b/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",

diff --git a/packages/docusaurus-plugin-content-blog/src/index.js b/packages/docusaurus-plugin-content-blog/src/index.js
@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const fs = require('fs-extra');
 const globby = require('globby');
+const _ = require('lodash');
 const path = require('path');
-const fs = require('fs-extra');
 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,29 +258,26 @@ 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(
- {
- tag,
- },
- null,
- 2,
- ),
+ JSON.stringify(tagsModule[tag], null, 2),
  );
 
  addRoute({
  path: permalink,
  component: blogTagsPostsComponent,
  exact: true,
  modules: {
- items: postIDs.map(postID => {
+ items: items.map(postID => {
  const {metadata: postMetadata, metadataPath} = blogItemsToModules[
  postID
  ];
@@ -296,19 +298,22 @@ class DocusaurusPluginContentBlog {
  }),
  );
 
- const tagsListPath = await createData(
- `${docuHash(`${tagsPath}-tags`)}.json`,
- JSON.stringify(tagsModule, null, 2),
- );
+ // 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),
+ );
 
- addRoute({
- path: tagsPath,
- component: blogTagsListComponent,
- exact: true,
- modules: {
- tags: tagsListPath,
- },
- });
+ addRoute({
+ path: tagsPath,
+ component: blogTagsListComponent,
+ exact: true,
+ modules: {
+ tags: tagsListPath,
+ },
+ });
+ }
  }
 
  getThemePath() {

diff --git a/packages/docusaurus-plugin-content-blog/src/theme/BlogTagsListPage/index.js b/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 />

diff --git a/packages/docusaurus-plugin-content-blog/src/theme/BlogTagsPostsPage/index.js b/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(