3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-23 14:06:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(content-blog): Allow pagination for BlogTagsPostsPage (#6221)

Browse source 
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Muhammad Redho Ayassa 2022-02-04 00:33:13 +07:00 • committed by GitHub
parent 01c6f15b15
commit 48f080ebca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 321 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

13
packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website-blog-with-tags/blog/another-simple-slug-with-tags.md generated Normal file
View file

@ -0,0 +1,13 @@
---
slug: /simple/slug/another
title: Another Simple Slug
date: 2020-08-15
author: Sébastien Lorber
author_title: Docusaurus maintainer
author_url: https://sebastienlorber.com
tags: [tag1]
---
simple url slug

9
packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website-blog-with-tags/blog/another-with-tags.md generated Normal file
View file

@ -0,0 +1,9 @@
---
slug: /another/tags
title: Another With Tag
date: 2020-08-15
tags: [tag1, tag2]
---
with tag

9
packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website-blog-with-tags/blog/another-with-tags2.md generated Normal file
View file

@ -0,0 +1,9 @@
---
slug: /another/tags2
title: Another With Tag
date: 2020-08-15
tags: [tag1, tag2]
---
with tag

77
packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/index.test.ts.snap Normal file
View file

@ -0,0 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`loadBlog test blog tags 1`] = `
Object {
"/blog/tags/tag-1": Object {
"items": Array [
"/simple/slug/another",
"/another/tags",
"/another/tags2",
],
"name": "tag1",
"pages": Array [
Object {
"items": Array [
"/simple/slug/another",
"/another/tags",
],
"metadata": Object {
"blogDescription": "Blog",
"blogTitle": "Blog",
"nextPage": "/blog/tags/tag-1/page/2",
"page": 1,
"permalink": "/blog/tags/tag-1",
"postsPerPage": 2,
"previousPage": null,
"totalCount": 3,
"totalPages": 2,
},
},
Object {
"items": Array [
"/another/tags2",
],
"metadata": Object {
"blogDescription": "Blog",
"blogTitle": "Blog",
"nextPage": null,
"page": 2,
"permalink": "/blog/tags/tag-1/page/2",
"postsPerPage": 2,
"previousPage": "/blog/tags/tag-1",
"totalCount": 3,
"totalPages": 2,
},
},
],
"permalink": "/blog/tags/tag-1",
},
"/blog/tags/tag-2": Object {
"items": Array [
"/another/tags",
"/another/tags2",
],
"name": "tag2",
"pages": Array [
Object {
"items": Array [
"/another/tags",
"/another/tags2",
],
"metadata": Object {
"blogDescription": "Blog",
"blogTitle": "Blog",
"nextPage": null,
"page": 1,
"permalink": "/blog/tags/tag-2",
"postsPerPage": 2,
"previousPage": null,
"totalCount": 2,
"totalPages": 1,
},
},
],
"permalink": "/blog/tags/tag-2",
},
}
`;

25
packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts
View file

@ -24,6 +24,7 @@ function findByTitle(
): BlogPost | undefined {
return blogPosts.find((v) => v.metadata.title === title);
}
function getByTitle(blogPosts: BlogPost[], title: string): BlogPost {
const post = findByTitle(blogPosts, title);
if (!post) {
@ -99,6 +100,16 @@ describe('loadBlog', () => {
return blogPosts;
};
const getBlogTags = async (
siteDir: string,
pluginOptions: Partial<PluginOptions> = {},
i18n: I18n = DefaultI18N,
) => {
const plugin = await getPlugin(siteDir, pluginOptions, i18n);
const {blogTags} = (await plugin.loadContent!())!;
return blogTags;
};
test('getPathsToWatch', async () => {
const siteDir = path.join(__dirname, '__fixtures__', 'website');
const plugin = await getPlugin(siteDir);
@ -454,4 +465,18 @@ describe('loadBlog', () => {
reversedOrder.map((x) => x.metadata.date),
);
});
test('test blog tags', async () => {
const siteDir = path.join(
__dirname,
'__fixtures__',
'website-blog-with-tags',
);
const blogTags = await getBlogTags(siteDir, {
postsPerPage: 2,
});
expect(Object.keys(blogTags).length).toEqual(2);
expect(blogTags).toMatchSnapshot();
});
});

76
packages/docusaurus-plugin-content-blog/src/blogUtils.ts
View file

@ -14,6 +14,7 @@ import type {
BlogContentPaths,
BlogMarkdownLoaderOptions,
BlogTags,
BlogPaginated,
} from './types';
import {
parseMarkdownString,
@ -50,16 +51,79 @@ export function getSourceToPermalink(
);
}
export function getBlogTags(blogPosts: BlogPost[]): BlogTags {
export function paginateBlogPosts({
blogPosts,
basePageUrl,
blogTitle,
blogDescription,
postsPerPageOption,
}: {
blogPosts: BlogPost[];
basePageUrl: string;
blogTitle: string;
blogDescription: string;
postsPerPageOption: number | 'ALL';
}): BlogPaginated[] {
const totalCount = blogPosts.length;
const postsPerPage =
postsPerPageOption === 'ALL' ? totalCount : postsPerPageOption;
const numberOfPages = Math.ceil(totalCount / postsPerPage);
const pages: BlogPaginated[] = [];
function permalink(page: number) {
return page > 0 ? `${basePageUrl}/page/${page + 1}` : basePageUrl;
}
for (let page = 0; page < numberOfPages; page += 1) {
pages.push({
items: blogPosts
.slice(page * postsPerPage, (page + 1) * postsPerPage)
.map((item) => item.id),
metadata: {
permalink: permalink(page),
page: page + 1,
postsPerPage,
totalPages: numberOfPages,
totalCount,
previousPage: page !== 0 ? permalink(page - 1) : null,
nextPage: page < numberOfPages - 1 ? permalink(page + 1) : null,
blogDescription,
blogTitle,
},
});
}
return pages;
}
export function getBlogTags({
blogPosts,
...params
}: {
blogPosts: BlogPost[];
blogTitle: string;
blogDescription: string;
postsPerPageOption: number | 'ALL';
}): BlogTags {
const groups = groupTaggedItems(
blogPosts,
(blogPost) => blogPost.metadata.tags,
);
return mapValues(groups, (group) => ({
name: group.tag.label,
items: group.items.map((item) => item.id),
permalink: group.tag.permalink,
}));
return mapValues(groups, (group) => {
const {tag, items: tagBlogPosts} = group;
return {
name: tag.label,
items: tagBlogPosts.map((item) => item.id),
permalink: tag.permalink,
pages: paginateBlogPosts({
blogPosts: tagBlogPosts,
basePageUrl: group.tag.permalink,
...params,
}),
};
});
}
const DATE_FILENAME_REGEX =

142
packages/docusaurus-plugin-content-blog/src/index.ts
View file

@ -23,6 +23,7 @@ import {
import {translateContent, getTranslationFiles} from './translations';
import type {
BlogTag,
BlogTags,
BlogContent,
BlogItemsToMetadata,
@ -31,6 +32,7 @@ import type {
BlogContentPaths,
BlogMarkdownLoaderOptions,
MetaData,
TagModule,
} from './types';
import {PluginOptionSchema} from './pluginOptionSchema';
import type {
@ -46,6 +48,7 @@ import {
generateBlogPosts,
getSourceToPermalink,
getBlogTags,
paginateBlogPosts,
} from './blogUtils';
import {createBlogFeedFiles} from './feed';
import type {
@ -134,6 +137,7 @@ export default async function pluginContentBlog(
blogListPaginated: [],
blogTags: {},
blogTagsListPath: null,
blogTagsPaginated: [],
};
}
@ -157,45 +161,22 @@ export default async function pluginContentBlog(
}
});
// Blog pagination routes.
// Example: `/blog`, `/blog/page/1`, `/blog/page/2`
const totalCount = blogPosts.length;
const postsPerPage =
postsPerPageOption === 'ALL' ? totalCount : postsPerPageOption;
const numberOfPages = Math.ceil(totalCount / postsPerPage);
const baseBlogUrl = normalizeUrl([baseUrl, routeBasePath]);
const blogListPaginated: BlogPaginated[] = [];
const blogListPaginated: BlogPaginated[] = paginateBlogPosts({
blogPosts,
blogTitle,
blogDescription,
postsPerPageOption,
basePageUrl: baseBlogUrl,
});
function blogPaginationPermalink(page: number) {
return page > 0
? normalizeUrl([baseBlogUrl, `page/${page + 1}`])
: baseBlogUrl;
}
for (let page = 0; page < numberOfPages; page += 1) {
blogListPaginated.push({
metadata: {
permalink: blogPaginationPermalink(page),
page: page + 1,
postsPerPage,
totalPages: numberOfPages,
totalCount,
previousPage: page !== 0 ? blogPaginationPermalink(page - 1) : null,
nextPage:
page < numberOfPages - 1
? blogPaginationPermalink(page + 1)
: null,
blogDescription,
blogTitle,
},
items: blogPosts
.slice(page * postsPerPage, (page + 1) * postsPerPage)
.map((item) => item.id),
});
}
const blogTags: BlogTags = getBlogTags(blogPosts);
const blogTags: BlogTags = getBlogTags({
blogPosts,
postsPerPageOption,
blogDescription,
blogTitle,
});
const tagsPath = normalizeUrl([baseBlogUrl, tagsBasePath]);
@ -345,50 +326,61 @@ export default async function pluginContentBlog(
return;
}
const tagsModule: TagsModule = {};
await Promise.all(
Object.keys(blogTags).map(async (tag) => {
const {name, items, permalink} = blogTags[tag];
// Refactor all this, see docs implementation
tagsModule[tag] = {
const tagsModule: TagsModule = Object.fromEntries(
Object.entries(blogTags).map(([tagKey, tag]) => {
const tagModule: TagModule = {
allTagsPath: blogTagsListPath,
slug: tag,
name,
count: items.length,
permalink,
slug: tagKey,
name: tag.name,
count: tag.items.length,
permalink: tag.permalink,
};
const tagsMetadataPath = await createData(
`${docuHash(permalink)}.json`,
JSON.stringify(tagsModule[tag], null, 2),
);
addRoute({
path: permalink,
component: blogTagsPostsComponent,
exact: true,
modules: {
sidebar: aliasedSource(sidebarProp),
items: items.map((postID) => {
const metadata = blogItemsToMetadata[postID];
return {
content: {
__import: true,
path: metadata.source,
query: {
truncated: true,
},
},
};
}),
metadata: aliasedSource(tagsMetadataPath),
},
});
return [tag.name, tagModule];
}),
);
async function createTagRoutes(tag: BlogTag): Promise<void> {
await Promise.all(
tag.pages.map(async (blogPaginated) => {
const {metadata, items} = blogPaginated;
const tagsMetadataPath = await createData(
`${docuHash(metadata.permalink)}.json`,
JSON.stringify(tagsModule[tag.name], null, 2),
);
const listMetadataPath = await createData(
`${docuHash(metadata.permalink)}-list.json`,
JSON.stringify(metadata, null, 2),
);
addRoute({
path: metadata.permalink,
component: blogTagsPostsComponent,
exact: true,
modules: {
sidebar: aliasedSource(sidebarProp),
items: items.map((postID) => {
const blogPostMetadata = blogItemsToMetadata[postID];
return {
content: {
__import: true,
path: blogPostMetadata.source,
query: {
truncated: true,
},
},
};
}),
metadata: aliasedSource(tagsMetadataPath),
listMetadata: aliasedSource(listMetadataPath),
},
});
}),
);
}
await Promise.all(Object.values(blogTags).map(createTagRoutes));
// Only create /tags page if there are tags.
if (Object.keys(blogTags).length > 0) {
const tagsListPath = await createData(

2
packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts vendored
View file

@ -259,10 +259,12 @@ declare module '@theme/BlogTagsPostsPage' {
import type {BlogSidebar} from '@theme/BlogSidebar';
import type {Tag} from '@theme/BlogTagsListPage';
import type {Content} from '@theme/BlogPostPage';
import type {Metadata} from '@theme/BlogListPage';
export interface Props {
readonly sidebar: BlogSidebar;
readonly metadata: Tag;
readonly listMetadata: Metadata;
readonly items: readonly {readonly content: Content}[];
}

10
packages/docusaurus-plugin-content-blog/src/types.ts
View file

@ -26,13 +26,17 @@ export interface BlogContent {
}
export interface BlogTags {
[key: string]: BlogTag;
// TODO, the key is the tag slug/permalink
// This is due to legacy frontmatter: tags: [{label: "xyz", permalink: "/1"}, {label: "xyz", permalink: "/2"}
// Soon we should forbid declaring permalink through frontmatter
[tagKey: string]: BlogTag;
}
export interface BlogTag {
name: string;
items: string[];
items: string[]; // blog post permalinks
permalink: string;
pages: BlogPaginated[];
}
export interface BlogPost {
@ -55,7 +59,7 @@ export interface BlogPaginatedMetadata {
export interface BlogPaginated {
metadata: BlogPaginatedMetadata;
items: string[];
items: string[]; // blog post permalinks
}
export interface MetaData {