diff --git a/packages/docusaurus-plugin-content-blog/src/index.js b/packages/docusaurus-plugin-content-blog/src/index.js index 425069ab9c..bd2d814aec 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.js +++ b/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: { diff --git a/packages/docusaurus-plugin-content-blog/src/theme/BlogPostItem/index.js b/packages/docusaurus-plugin-content-blog/src/theme/BlogPostItem/index.js index bd0fd02573..6cc7b15d04 100644 --- a/packages/docusaurus-plugin-content-blog/src/theme/BlogPostItem/index.js +++ b/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 (
-

+

{title}

- {month[blogPostDate.getMonth()]} {blogPostDate.getDay()},{' '} - {blogPostDate.getFullYear()} + + {month} {day}, {year} +
{authorImageURL && ( @@ -79,11 +81,30 @@ function BlogPostItem(props) {
{renderPostHeader()}
{children}
- {truncated && ( -
- Read More +
+
+ {tags.length > 0 && ( + <> + Tags: + {tags.map(({label, permalink: tagPermalink}) => ( + + {label} + + ))} + + )}
- )} +
+ {truncated && ( + + Read More + + )} +
+
); } diff --git a/packages/docusaurus-plugin-content-blog/src/theme/BlogPostPage/index.js b/packages/docusaurus-plugin-content-blog/src/theme/BlogPostPage/index.js index ff2fc18689..84e8048dd0 100644 --- a/packages/docusaurus-plugin-content-blog/src/theme/BlogPostPage/index.js +++ b/packages/docusaurus-plugin-content-blog/src/theme/BlogPostPage/index.js @@ -23,7 +23,7 @@ function BlogPostPage(props) { -
+
diff --git a/packages/docusaurus-plugin-content-blog/src/theme/BlogTagsPostsPage/index.js b/packages/docusaurus-plugin-content-blog/src/theme/BlogTagsPostsPage/index.js index 399ceaed17..14fc41418b 100644 --- a/packages/docusaurus-plugin-content-blog/src/theme/BlogTagsPostsPage/index.js +++ b/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 ( {count} post(s) tagged with "{tagName}" -
+ View All Tags +
{items.map( ({content: BlogPostContent, metadata: blogPostMetadata}) => (
diff --git a/website-1.x/blog/2017-12-14-introducing-docusaurus.md b/website-1.x/blog/2017-12-14-introducing-docusaurus.md index d8231a159e..d60b78be7a 100644 --- a/website-1.x/blog/2017-12-14-introducing-docusaurus.md +++ b/website-1.x/blog/2017-12-14-introducing-docusaurus.md @@ -4,7 +4,6 @@ author: Joel Marcey authorURL: http://twitter.com/JoelMarcey authorFBID: 611217057 authorTwitter: JoelMarcey -tags: [birth] --- ![Introducing Slash](/img/slash-introducing.svg)