Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
May 15, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d51b6a0
feat(v2): list blog tags on posts
yangshun May 14, 2019
ddde45b
Merge branch 'master' into tags-pages
endiliey May 15, 2019
c214c5d
fix date handling on blog header
endiliey May 15, 2019
fb462be
fix console log error due to non unique key
endiliey May 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 26 additions & 13 deletions packages/docusaurus-plugin-content-blog/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this mean ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tags code is very intertwined with the rest of the blogging code now. I think tags should be a transformer-like plugin that manipulates blog data instead of having it within the core blog plugin. The code is currently quite ugly and very hard to read now/

// 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,
};
}

Expand All @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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: {
Expand Down
45 changes: 33 additions & 12 deletions packages/docusaurus-plugin-content-blog/src/theme/BlogPostItem/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -29,20 +29,22 @@ 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`
: frontMatter.authorImageURL;

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 && (
Expand Down Expand Up @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/docusaurus-plugin-content-blog/src/theme/BlogPostPage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions packages/docusaurus-plugin-content-blog/src/theme/BlogTagsPostsPage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}>
Expand Down
1 change: 0 additions & 1 deletion website-1.x/blog/2017-12-14-introducing-docusaurus.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ author: Joel Marcey
authorURL: http://twitter.com/JoelMarcey
authorFBID: 611217057
authorTwitter: JoelMarcey
tags: [birth]
---

![Introducing Slash](/img/slash-introducing.svg)
Expand Down