3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 10:17:55 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(content-{blog,docs}): unify handling of tags (#7117)

Browse source
This commit is contained in:
Joshua Chen 2022-04-07 21:58:21 +08:00 • committed by GitHub
parent ca718ccac0
commit 1156be3f20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 170 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@ exports[`blog plugin works on blog tags without pagination 1`] = `
"/another/tags",
"/another/tags2",
],
"name": "tag1",
"label": "tag1",
"pages": [
{
"items": [
@ -36,7 +36,7 @@ exports[`blog plugin works on blog tags without pagination 1`] = `
"/another/tags",
"/another/tags2",
],
"name": "tag2",
"label": "tag2",
"pages": [
{
"items": [
@ -69,7 +69,7 @@ exports[`blog plugin works with blog tags 1`] = `
"/another/tags",
"/another/tags2",
],
"name": "tag1",
"label": "tag1",
"pages": [
{
"items": [
@ -112,7 +112,7 @@ exports[`blog plugin works with blog tags 1`] = `
"/another/tags",
"/another/tags2",
],
"name": "tag2",
"label": "tag2",
"pages": [
{
"items": [

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

@ -114,7 +114,7 @@ export function getBlogTags({
);
return _.mapValues(groups, ({tag, items: tagBlogPosts}) => ({
name: tag.label,
label: tag.label,
items: tagBlogPosts.map((item) => item.id),
permalink: tag.permalink,
pages: paginateBlogPosts({

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

@ -30,7 +30,13 @@ import type {
BlogContentPaths,
BlogMarkdownLoaderOptions,
} from './types';
import type {LoadContext, Plugin, HtmlTags} from '@docusaurus/types';
import type {
LoadContext,
Plugin,
HtmlTags,
TagsListItem,
TagModule,
} from '@docusaurus/types';
import {
generateBlogPosts,
getSourceToPermalink,
@ -43,7 +49,6 @@ import type {
BlogPostFrontMatter,
BlogPostMetadata,
Assets,
TagModule,
} from '@docusaurus/plugin-content-blog';
export default async function pluginContentBlog(
@ -117,6 +122,8 @@ export default async function pluginContentBlog(
blogSidebarTitle,
} = options;
const baseBlogUrl = normalizeUrl([baseUrl, routeBasePath]);
const blogTagsListPath = normalizeUrl([baseBlogUrl, tagsBasePath]);
const blogPosts = await generateBlogPosts(contentPaths, context, options);
if (!blogPosts.length) {
@ -125,7 +132,7 @@ export default async function pluginContentBlog(
blogPosts: [],
blogListPaginated: [],
blogTags: {},
blogTagsListPath: null,
blogTagsListPath,
blogTagsPaginated: [],
};
}
@ -150,8 +157,6 @@ export default async function pluginContentBlog(
}
});
const baseBlogUrl = normalizeUrl([baseUrl, routeBasePath]);
const blogListPaginated: BlogPaginated[] = paginateBlogPosts({
blogPosts,
blogTitle,
@ -167,11 +172,6 @@ export default async function pluginContentBlog(
blogTitle,
});
const tagsPath = normalizeUrl([baseBlogUrl, tagsBasePath]);
const blogTagsListPath =
Object.keys(blogTags).length > 0 ? tagsPath : null;
return {
blogSidebarTitle,
blogPosts,
@ -307,30 +307,47 @@ export default async function pluginContentBlog(
}),
);
// Tags.
if (blogTagsListPath === null) {
// Tags. This is the last part so we early-return if there are no tags.
if (Object.keys(blogTags).length === 0) {
return;
}
const tagsModule: {[tagName: string]: TagModule} = Object.fromEntries(
Object.entries(blogTags).map(([, tag]) => {
const tagModule: TagModule = {
allTagsPath: blogTagsListPath,
name: tag.name,
count: tag.items.length,
permalink: tag.permalink,
};
return [tag.name, tagModule];
}),
);
async function createTagsListPage() {
const tagsProp: TagsListItem[] = Object.values(blogTags).map((tag) => ({
label: tag.label,
permalink: tag.permalink,
count: tag.items.length,
}));
async function createTagRoutes(tag: BlogTag): Promise<void> {
const tagsPropPath = await createData(
`${docuHash(`${blogTagsListPath}-tags`)}.json`,
JSON.stringify(tagsProp, null, 2),
);
addRoute({
path: blogTagsListPath,
component: blogTagsListComponent,
exact: true,
modules: {
sidebar: aliasedSource(sidebarProp),
tags: aliasedSource(tagsPropPath),
},
});
}
async function createTagPostsListPage(tag: BlogTag): Promise<void> {
await Promise.all(
tag.pages.map(async (blogPaginated) => {
const {metadata, items} = blogPaginated;
const tagsMetadataPath = await createData(
const tagProp: TagModule = {
label: tag.label,
permalink: tag.permalink,
allTagsPath: blogTagsListPath,
count: tag.items.length,
};
const tagPropPath = await createData(
`${docuHash(metadata.permalink)}.json`,
JSON.stringify(tagsModule[tag.name], null, 2),
JSON.stringify(tagProp, null, 2),
);
const listMetadataPath = await createData(
@ -356,7 +373,7 @@ export default async function pluginContentBlog(
},
};
}),
metadata: aliasedSource(tagsMetadataPath),
tag: aliasedSource(tagPropPath),
listMetadata: aliasedSource(listMetadataPath),
},
});
@ -364,25 +381,8 @@ export default async function pluginContentBlog(
);
}
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(
`${docuHash(`${blogTagsListPath}-tags`)}.json`,
JSON.stringify(tagsModule, null, 2),
);
addRoute({
path: blogTagsListPath,
component: blogTagsListComponent,
exact: true,
modules: {
sidebar: aliasedSource(sidebarProp),
tags: aliasedSource(tagsListPath),
},
});
}
await createTagsListPage();
await Promise.all(Object.values(blogTags).map(createTagPostsListPage));
},
translateContent({content, translationFiles}) {

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

@ -7,8 +7,9 @@
declare module '@docusaurus/plugin-content-blog' {
import type {MDXOptions} from '@docusaurus/mdx-loader';
import type {FrontMatterTag, Tag} from '@docusaurus/utils';
import type {FrontMatterTag} from '@docusaurus/utils';
import type {Overwrite} from 'utility-types';
import type {Tag} from '@docusaurus/types';
export type Assets = {
/**
@ -406,17 +407,6 @@ declare module '@docusaurus/plugin-content-blog' {
}
>;
export type TagModule = {
/** Permalink of the tag's own page. */
permalink: string;
/** Name of the tag. */
name: string;
/** Number of posts with this tag. */
count: number;
/** The tags list page. */
allTagsPath: string;
};
export type BlogSidebar = {
title: string;
items: {title: string; permalink: string}[];
@ -511,28 +501,30 @@ declare module '@theme/BlogListPage' {
}
declare module '@theme/BlogTagsListPage' {
import type {BlogSidebar, TagModule} from '@docusaurus/plugin-content-blog';
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
import type {TagsListItem} from '@docusaurus/types';
export interface Props {
/** Blog sidebar. */
readonly sidebar: BlogSidebar;
/** A map from tag names to the full tag module. */
readonly tags: Readonly<{[tagName: string]: TagModule}>;
/** All tags declared in this blog. */
readonly tags: TagsListItem[];
}
export default function BlogTagsListPage(props: Props): JSX.Element;
}
declare module '@theme/BlogTagsPostsPage' {
import type {BlogSidebar, TagModule} from '@docusaurus/plugin-content-blog';
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
import type {Content} from '@theme/BlogPostPage';
import type {Metadata} from '@theme/BlogListPage';
import type {TagModule} from '@docusaurus/types';
export interface Props {
/** Blog sidebar. */
readonly sidebar: BlogSidebar;
/** Metadata of this tag. */
readonly metadata: TagModule;
readonly tag: TagModule;
/** Looks exactly the same as the posts list page */
readonly listMetadata: Metadata;
/**

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

@ -6,6 +6,7 @@
*/
import type {BrokenMarkdownLink, ContentPaths} from '@docusaurus/utils';
import type {Tag} from '@docusaurus/types';
import type {BlogPostMetadata} from '@docusaurus/plugin-content-blog';
import type {Metadata as BlogPaginatedMetadata} from '@theme/BlogListPage';
@ -16,22 +17,16 @@ export type BlogContent = {
blogPosts: BlogPost[];
blogListPaginated: BlogPaginated[];
blogTags: BlogTags;
blogTagsListPath: string | null;
blogTagsListPath: string;
};
export type BlogTags = {
// 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;
[permalink: string]: BlogTag;
};
export type BlogTag = {
name: string;
export type BlogTag = Tag & {
/** Blog post permalinks. */
items: string[];
permalink: string;
pages: BlogPaginated[];
};

66
packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap
View file

@ -714,9 +714,11 @@ exports[`simple website content: data 1`] = `
}
}",
"tag-docs-tags-tag-1-b3f.json": "{
\\"name\\": \\"tag 1\\",
\\"label\\": \\"tag 1\\",
\\"permalink\\": \\"/docs/tags/tag-1\\",
\\"docs\\": [
\\"allTagsPath\\": \\"/docs/tags\\",
\\"count\\": 2,
\\"items\\": [
{
\\"id\\": \\"foo/baz\\",
\\"title\\": \\"baz\\",
@ -729,48 +731,49 @@ exports[`simple website content: data 1`] = `
\\"description\\": \\"Hi, Endilie here :)\\",
\\"permalink\\": \\"/docs/\\"
}
],
\\"allTagsPath\\": \\"/docs/tags\\"
]
}",
"tag-docs-tags-tag-2-custom-permalink-825.json": "{
\\"name\\": \\"tag 2\\",
\\"label\\": \\"tag 2\\",
\\"permalink\\": \\"/docs/tags/tag2-custom-permalink\\",
\\"docs\\": [
\\"allTagsPath\\": \\"/docs/tags\\",
\\"count\\": 1,
\\"items\\": [
{
\\"id\\": \\"foo/baz\\",
\\"title\\": \\"baz\\",
\\"description\\": \\"Images\\",
\\"permalink\\": \\"/docs/foo/bazSlug.html\\"
}
],
\\"allTagsPath\\": \\"/docs/tags\\"
]
}",
"tag-docs-tags-tag-3-ab5.json": "{
\\"name\\": \\"tag 3\\",
\\"label\\": \\"tag 3\\",
\\"permalink\\": \\"/docs/tags/tag-3\\",
\\"docs\\": [
\\"allTagsPath\\": \\"/docs/tags\\",
\\"count\\": 1,
\\"items\\": [
{
\\"id\\": \\"hello\\",
\\"title\\": \\"Hello, World !\\",
\\"description\\": \\"Hi, Endilie here :)\\",
\\"permalink\\": \\"/docs/\\"
}
],
\\"allTagsPath\\": \\"/docs/tags\\"
]
}",
"tags-list-current-prop-15a.json": "[
{
\\"name\\": \\"tag 1\\",
\\"label\\": \\"tag 1\\",
\\"permalink\\": \\"/docs/tags/tag-1\\",
\\"count\\": 2
},
{
\\"name\\": \\"tag 2\\",
\\"label\\": \\"tag 2\\",
\\"permalink\\": \\"/docs/tags/tag2-custom-permalink\\",
\\"count\\": 1
},
{
\\"name\\": \\"tag 3\\",
\\"label\\": \\"tag 3\\",
\\"permalink\\": \\"/docs/tags/tag-3\\",
\\"count\\": 1
}
@ -3172,57 +3175,60 @@ exports[`versioned website content: data 1`] = `
}
}",
"tag-docs-next-tags-bar-tag-1-a8f.json": "{
\\"name\\": \\"barTag 1\\",
\\"label\\": \\"barTag 1\\",
\\"permalink\\": \\"/docs/next/tags/bar-tag-1\\",
\\"docs\\": [
\\"allTagsPath\\": \\"/docs/next/tags\\",
\\"count\\": 1,
\\"items\\": [
{
\\"id\\": \\"foo/bar\\",
\\"title\\": \\"bar\\",
\\"description\\": \\"This is next version of bar.\\",
\\"permalink\\": \\"/docs/next/foo/barSlug\\"
}
],
\\"allTagsPath\\": \\"/docs/next/tags\\"
]
}",
"tag-docs-next-tags-bar-tag-2-216.json": "{
\\"name\\": \\"barTag-2\\",
\\"label\\": \\"barTag-2\\",
\\"permalink\\": \\"/docs/next/tags/bar-tag-2\\",
\\"docs\\": [
\\"allTagsPath\\": \\"/docs/next/tags\\",
\\"count\\": 1,
\\"items\\": [
{
\\"id\\": \\"foo/bar\\",
\\"title\\": \\"bar\\",
\\"description\\": \\"This is next version of bar.\\",
\\"permalink\\": \\"/docs/next/foo/barSlug\\"
}
],
\\"allTagsPath\\": \\"/docs/next/tags\\"
]
}",
"tag-docs-next-tags-bar-tag-3-permalink-94a.json": "{
\\"name\\": \\"barTag 3\\",
\\"label\\": \\"barTag 3\\",
\\"permalink\\": \\"/docs/next/tags/barTag-3-permalink\\",
\\"docs\\": [
\\"allTagsPath\\": \\"/docs/next/tags\\",
\\"count\\": 1,
\\"items\\": [
{
\\"id\\": \\"foo/bar\\",
\\"title\\": \\"bar\\",
\\"description\\": \\"This is next version of bar.\\",
\\"permalink\\": \\"/docs/next/foo/barSlug\\"
}
],
\\"allTagsPath\\": \\"/docs/next/tags\\"
]
}",
"tags-list-current-prop-15a.json": "[
{
\\"name\\": \\"barTag 1\\",
\\"label\\": \\"barTag 1\\",
\\"permalink\\": \\"/docs/next/tags/bar-tag-1\\",
\\"count\\": 1
},
{
\\"name\\": \\"barTag-2\\",
\\"label\\": \\"barTag-2\\",
\\"permalink\\": \\"/docs/next/tags/bar-tag-2\\",
\\"count\\": 1
},
{
\\"name\\": \\"barTag 3\\",
\\"label\\": \\"barTag 3\\",
\\"permalink\\": \\"/docs/next/tags/barTag-3-permalink\\",
\\"count\\": 1
}

5
packages/docusaurus-plugin-content-docs/src/__tests__/props.test.ts
View file

@ -54,9 +54,10 @@ describe('toTagDocListProp', () => {
expect(result).toEqual({
allTagsPath,
name: tag.label,
count: 2,
label: tag.label,
permalink: tag.permalink,
docs: [doc3, doc1], // docs sorted by title, ignore "id5" absence
items: [doc3, doc1], // docs sorted by title, ignore "id5" absence
});
});
});

4
packages/docusaurus-plugin-content-docs/src/index.ts
View file

@ -228,13 +228,13 @@ export default async function pluginContentDocs(
const tagsProp: PropTagsListPage['tags'] = Object.values(
versionTags,
).map((tagValue) => ({
name: tagValue.label,
label: tagValue.label,
permalink: tagValue.permalink,
count: tagValue.docIds.length,
}));
// Only create /tags page if there are tags.
if (Object.keys(tagsProp).length > 0) {
if (tagsProp.length > 0) {
const tagsPropPath = await createData(
`${docuHash(`tags-list-${version.versionName}-prop`)}.json`,
JSON.stringify(tagsProp, null, 2),

26
packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts vendored
View file

@ -7,7 +7,8 @@
declare module '@docusaurus/plugin-content-docs' {
import type {MDXOptions} from '@docusaurus/mdx-loader';
import type {ContentPaths, Tag, FrontMatterTag} from '@docusaurus/utils';
import type {ContentPaths, FrontMatterTag} from '@docusaurus/utils';
import type {TagsListItem, TagModule, Tag} from '@docusaurus/types';
import type {Required} from 'utility-types';
export type Assets = {
@ -483,25 +484,14 @@ declare module '@docusaurus/plugin-content-docs' {
export type PropSidebar = import('./sidebars/types').PropSidebar;
export type PropSidebars = import('./sidebars/types').PropSidebars;
export type PropTagDocListDoc = {
id: string;
title: string;
description: string;
permalink: string;
};
export type PropTagDocList = {
allTagsPath: string;
name: string; // normalized name/label of the tag
permalink: string; // pathname of the tag
docs: PropTagDocListDoc[];
};
export type PropTagDocListDoc = Pick<
DocMetadata,
'id' | 'title' | 'description' | 'permalink'
>;
export type PropTagDocList = TagModule & {items: PropTagDocListDoc[]};
export type PropTagsListPage = {
tags: {
name: string;
permalink: string;
count: number;
}[];
tags: TagsListItem[];
};
}

7
packages/docusaurus-plugin-content-docs/src/props.ts
View file

@ -137,7 +137,7 @@ export function toTagDocListProp({
}: {
allTagsPath: string;
tag: VersionTag;
docs: Pick<DocMetadata, 'id' | 'title' | 'description' | 'permalink'>[];
docs: DocMetadata[];
}): PropTagDocList {
function toDocListProp(): PropTagDocListDoc[] {
const list = _.compact(
@ -154,9 +154,10 @@ export function toTagDocListProp({
}
return {
name: tag.label,
label: tag.label,
permalink: tag.permalink,
docs: toDocListProp(),
allTagsPath,
count: tag.docIds.length,
items: toDocListProp(),
};
}

5
packages/docusaurus-plugin-content-docs/src/types.ts
View file

@ -8,13 +8,14 @@
/// <reference types="@docusaurus/module-type-aliases" />
import type {Sidebars} from './sidebars/types';
import type {BrokenMarkdownLink, Tag} from '@docusaurus/utils';
import type {BrokenMarkdownLink} from '@docusaurus/utils';
import type {
VersionMetadata,
LastUpdateData,
DocMetadata,
CategoryGeneratedIndexMetadata,
} from '@docusaurus/plugin-content-docs';
import type {Tag} from '@docusaurus/types';
export type DocFile = {
contentPath: string; // /!\ may be localized
@ -33,7 +34,7 @@ export type VersionTag = Tag & {
docIds: string[];
};
export type VersionTags = {
[key: string]: VersionTag;
[permalink: string]: VersionTag;
};
export type LoadedVersion = VersionMetadata & {

6
packages/docusaurus-theme-classic/src/theme-classic.d.ts vendored
View file

@ -1031,7 +1031,7 @@ declare module '@theme/IconExternalLink' {
}
declare module '@theme/TagsListByLetter' {
import type {TagsListItem} from '@docusaurus/theme-common';
import type {TagsListItem} from '@docusaurus/types';
export interface Props {
readonly tags: readonly TagsListItem[];
@ -1040,7 +1040,7 @@ declare module '@theme/TagsListByLetter' {
}
declare module '@theme/TagsListInline' {
import type {Tag} from '@docusaurus/utils';
import type {Tag} from '@docusaurus/types';
export interface Props {
readonly tags: readonly Tag[];
@ -1049,7 +1049,7 @@ declare module '@theme/TagsListInline' {
}
declare module '@theme/Tag' {
import type {TagsListItem} from '@docusaurus/theme-common';
import type {TagsListItem} from '@docusaurus/types';
import type {Optional} from 'utility-types';
export interface Props extends Optional<TagsListItem, 'count'> {}

5
packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
View file

@ -19,8 +19,7 @@ import {
import SearchMetadata from '../SearchMetadata';
import clsx from 'clsx';
export default function BlogTagsListPage(props: Props): JSX.Element {
const {tags, sidebar} = props;
export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
const title = translateTagsPageTitle();
return (
<HtmlClassNameProvider
@ -32,7 +31,7 @@ export default function BlogTagsListPage(props: Props): JSX.Element {
<SearchMetadata tag="blog_tags_list" />
<BlogLayout sidebar={sidebar}>
<h1>{title}</h1>
<TagsListByLetter tags={Object.values(tags)} />
<TagsListByLetter tags={tags} />
</BlogLayout>
</HtmlClassNameProvider>
);

13
packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
View file

@ -40,9 +40,12 @@ function useBlogPostsPlural() {
);
}
export default function BlogTagsPostsPage(props: Props): JSX.Element {
const {metadata, items, sidebar, listMetadata} = props;
const {allTagsPath, name: tagName, count} = metadata;
export default function BlogTagsPostsPage({
tag,
items,
sidebar,
listMetadata,
}: Props): JSX.Element {
const blogPostsPlural = useBlogPostsPlural();
const title = translate(
{
@ -50,7 +53,7 @@ export default function BlogTagsPostsPage(props: Props): JSX.Element {
description: 'The title of the page for a blog tag',
message: '{nPosts} tagged with "{tagName}"',
},
{nPosts: blogPostsPlural(count), tagName},
{nPosts: blogPostsPlural(tag.count), tagName: tag.label},
);
return (
@ -65,7 +68,7 @@ export default function BlogTagsPostsPage(props: Props): JSX.Element {
<header className="margin-bottom--xl">
<h1>{title}</h1>
<Link href={allTagsPath}>
<Link href={tag.allTagsPath}>
<Translate
id="theme.tags.tagsPageLink"
description="The label of the link targeting the tag list page">

7
packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
View file

@ -15,7 +15,6 @@ import {
ThemeClassNames,
usePluralForm,
} from '@docusaurus/theme-common';
import type {PropTagDocListDoc} from '@docusaurus/plugin-content-docs';
import Translate, {translate} from '@docusaurus/Translate';
import type {Props} from '@theme/DocTagDocListPage';
import SearchMetadata from '@theme/SearchMetadata';
@ -39,7 +38,7 @@ function useNDocsTaggedPlural() {
);
}
function DocItem({doc}: {doc: PropTagDocListDoc}): JSX.Element {
function DocItem({doc}: {doc: Props['tag']['items'][number]}): JSX.Element {
return (
<article className="margin-vert--lg">
<Link to={doc.permalink}>
@ -58,7 +57,7 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
description: 'The title of the page for a docs tag',
message: '{nDocsTagged} with "{tagName}"',
},
{nDocsTagged: nDocsTaggedPlural(tag.docs.length), tagName: tag.name},
{nDocsTagged: nDocsTaggedPlural(tag.count), tagName: tag.label},
);
return (
@ -84,7 +83,7 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
</Link>
</header>
<section className="margin-vert--lg">
{tag.docs.map((doc) => (
{tag.items.map((doc) => (
<DocItem key={doc.id} doc={doc} />
))}
</section>

6
packages/docusaurus-theme-classic/src/theme/Tag/index.tsx
View file

@ -12,9 +12,7 @@ import type {Props} from '@theme/Tag';
import styles from './styles.module.css';
export default function Tag(props: Props): JSX.Element {
const {permalink, name, count} = props;
export default function Tag({permalink, label, count}: Props): JSX.Element {
return (
<Link
href={permalink}
@ -22,7 +20,7 @@ export default function Tag(props: Props): JSX.Element {
styles.tag,
count ? styles.tagWithCount : styles.tagRegular,
)}>
{name}
{label}
{count && <span>{count}</span>}
</Link>
);

2
packages/docusaurus-theme-classic/src/theme/TagsListInline/index.tsx
View file

@ -26,7 +26,7 @@ export default function TagsListInline({tags}: Props): JSX.Element {
<ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
{tags.map(({label, permalink: tagPermalink}) => (
<li key={tagPermalink} className={styles.tag}>
<Tag name={label} permalink={tagPermalink} />
<Tag label={label} permalink={tagPermalink} />
</li>
))}
</ul>

1
packages/docusaurus-theme-common/src/index.ts
View file

@ -86,7 +86,6 @@ export {
translateTagsPageTitle,
listTagsByLetters,
type TagLetterEntry,
type TagsListItem,
} from './utils/tagsUtils';
export {useHistoryPopHandler} from './utils/historyUtils';

12
packages/docusaurus-theme-common/src/utils/__tests__/tagUtils.test.ts
View file

@ -15,32 +15,32 @@ describe('listTagsByLetters', () => {
it('creates letters list', () => {
const tag1: Tag = {
name: 'tag1',
label: 'tag1',
permalink: '/tag1',
count: 1,
};
const tag2: Tag = {
name: 'Tag2',
label: 'Tag2',
permalink: '/tag2',
count: 11,
};
const tagZxy: Tag = {
name: 'zxy',
label: 'zxy',
permalink: '/zxy',
count: 987,
};
const tagAbc: Tag = {
name: 'Abc',
label: 'Abc',
permalink: '/abc',
count: 123,
};
const tagDef: Tag = {
name: 'def',
label: 'def',
permalink: '/def',
count: 1,
};
const tagAaa: Tag = {
name: 'aaa',
label: 'aaa',
permalink: '/aaa',
count: 10,
};

13
packages/docusaurus-theme-common/src/utils/tagsUtils.ts
View file

@ -6,6 +6,7 @@
*/
import {translate} from '@docusaurus/Translate';
import type {TagsListItem} from '@docusaurus/types';
export const translateTagsPageTitle = (): string =>
translate({
@ -14,13 +15,7 @@ export const translateTagsPageTitle = (): string =>
description: 'The title of the tag list page',
});
export type TagsListItem = Readonly<{
name: string;
permalink: string;
count: number;
}>;
export type TagLetterEntry = Readonly<{letter: string; tags: TagsListItem[]}>;
export type TagLetterEntry = {letter: string; tags: TagsListItem[]};
function getTagLetter(tag: string): string {
return tag[0]!.toUpperCase();
@ -35,7 +30,7 @@ export function listTagsByLetters(
): TagLetterEntry[] {
const groups: {[initial: string]: TagsListItem[]} = {};
Object.values(tags).forEach((tag) => {
const initial = getTagLetter(tag.name);
const initial = getTagLetter(tag.label);
groups[initial] ??= [];
groups[initial]!.push(tag);
});
@ -47,7 +42,7 @@ export function listTagsByLetters(
.map(([letter, letterTags]) => {
// Sort tags inside a letter
const sortedTags = letterTags.sort((tag1, tag2) =>
tag1.name.localeCompare(tag2.name),
tag1.label.localeCompare(tag2.label),
);
return {letter, tags: sortedTags};
})

19
packages/docusaurus-types/src/index.d.ts vendored
View file

@ -594,3 +594,22 @@ export type ClientModule = {
}) => void;
onRouteUpdateDelayed?: (args: {location: Location}) => void;
};
/** What the user configures. */
export type Tag = {
label: string;
/** Permalink to this tag's page, without the `/tags/` base path. */
permalink: string;
};
/** What the tags list page should know about each tag. */
export type TagsListItem = Tag & {
/** Number of posts/docs with this tag. */
count: number;
};
/** What the tag's own page should know about the tag. */
export type TagModule = TagsListItem & {
/** The tags list page's permalink. */
allTagsPath: string;
};

2
packages/docusaurus-utils-validation/src/validationSchemas.ts
View file

@ -7,7 +7,7 @@
import Joi from './Joi';
import {isValidPathname, DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
import type {Tag} from '@docusaurus/utils';
import type {Tag} from '@docusaurus/types';
import {JoiFrontMatter} from './JoiFrontMatter';
export const PluginIdSchema = Joi.string()

1
packages/docusaurus-utils/src/index.ts
View file

@ -56,7 +56,6 @@ export {
buildSshUrl,
} from './urlUtils';
export {
type Tag,
type FrontMatterTag,
normalizeFrontMatterTags,
groupTaggedItems,

7
packages/docusaurus-utils/src/tags.ts
View file

@ -7,12 +7,7 @@
import _ from 'lodash';
import {normalizeUrl} from './urlUtils';
export type Tag = {
label: string;
/** Permalink to this tag's page, without the `/tags/` base path. */
permalink: string;
};
import type {Tag} from '@docusaurus/types';
export type FrontMatterTag = string | Tag;