Skip to content

Commit

Permalink
refactor(theme): split BlogPostItem into smaller theme subcomponents (#…
Browse files Browse the repository at this point in the history 
…7716)
  • Loading branch information
@slorber
slorber committed Jul 14, 2022
1 parent c931ffb commit 41449e1
Show file tree
Hide file tree
Showing 43 changed files with 931 additions and 593 deletions.
4 changes: 2 additions & 2 deletions ...ages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/translations.test.ts.snap
View file
Expand Up @@ -52,11 +52,11 @@ exports[`translateContent falls back when translation is incomplete 1`] = `
"description": "/blog/2021/06/19/hello",
"formattedDate": "June 19, 2021",
"frontMatter": {},
"hasTruncateMarker": true,
"permalink": "/blog/2021/06/19/hello",
"source": "/blog/2021/06/19/hello",
"tags": [],
"title": "Hello",
"truncated": true,
},
},
],
Expand Down Expand Up @@ -96,11 +96,11 @@ exports[`translateContent returns translated loaded 1`] = `
"description": "/blog/2021/06/19/hello",
"formattedDate": "June 19, 2021",
"frontMatter": {},
"hasTruncateMarker": true,
"permalink": "/blog/2021/06/19/hello",
"source": "/blog/2021/06/19/hello",
"tags": [],
"title": "Hello",
"truncated": true,
},
},
],
Expand Down
2 changes: 1 addition & 1 deletion packages/docusaurus-plugin-content-blog/src/__tests__/blogUtils.test.ts
View file
Expand Up @@ -210,7 +210,7 @@ describe('linkify', () => {
permalink: '/blog/2019/01/01/date-matter',
title: 'date-matter',
},
truncated: false,
hasTruncateMarker: false,
frontMatter: {},
authors: [],
formattedDate: '',
Expand Down
12 changes: 6 additions & 6 deletions packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts
View file
Expand Up @@ -171,7 +171,7 @@ describe('blog plugin', () => {
permalink: '/blog/2018/12/14/Happy-First-Birthday-Slash',
title: 'Happy 1st Birthday Slash! (translated)',
},
truncated: false,
hasTruncateMarker: false,
});

expect(
Expand Down Expand Up @@ -214,7 +214,7 @@ describe('blog plugin', () => {
permalink: '/blog/date-matter',
title: 'date-matter',
},
truncated: false,
hasTruncateMarker: false,
});

expect({
Expand Down Expand Up @@ -251,7 +251,7 @@ describe('blog plugin', () => {
permalink: '/blog/tags/complex',
},
],
truncated: false,
hasTruncateMarker: false,
});

expect({
Expand Down Expand Up @@ -288,7 +288,7 @@ describe('blog plugin', () => {
title: 'Simple Slug',
},
tags: [],
truncated: false,
hasTruncateMarker: false,
});

expect({
Expand All @@ -313,7 +313,7 @@ describe('blog plugin', () => {
permalink: '/blog/date-matter',
title: 'date-matter',
},
truncated: false,
hasTruncateMarker: false,
});
});

Expand Down Expand Up @@ -470,7 +470,7 @@ describe('blog plugin', () => {
tags: [],
prevItem: undefined,
nextItem: undefined,
truncated: false,
hasTruncateMarker: false,
});
});

Expand Down
2 changes: 1 addition & 1 deletion packages/docusaurus-plugin-content-blog/src/__tests__/translations.test.ts
View file
Expand Up @@ -32,7 +32,7 @@ const sampleBlogPosts: BlogPost[] = [
formattedDate: 'June 19, 2021',
tags: [],
title: 'Hello',
truncated: true,
hasTruncateMarker: true,
authors: [],
frontMatter: {},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/docusaurus-plugin-content-blog/src/blogUtils.ts
View file
Expand Up @@ -323,7 +323,7 @@ async function processBlogSourceFile(
defaultReadingTime,
})
: undefined,
truncated: truncateMarker.test(content),
hasTruncateMarker: truncateMarker.test(content),
authors,
frontMatter,
},
Expand Down
38 changes: 17 additions & 21 deletions packages/docusaurus-plugin-content-blog/src/index.ts
View file
Expand Up @@ -195,6 +195,21 @@ export default async function pluginContentBlog(
? blogPosts
: blogPosts.slice(0, options.blogSidebarCount);

function blogPostItemsModule(items: string[]) {
return items.map((postId) => {
const blogPostMetadata = blogItemsToMetadata[postId]!;
return {
content: {
__import: true,
path: blogPostMetadata.source,
query: {
truncated: true,
},
},
};
});
}

if (archiveBasePath && blogPosts.length) {
const archiveUrl = normalizeUrl([
baseUrl,
Expand Down Expand Up @@ -275,15 +290,7 @@ export default async function pluginContentBlog(
exact: true,
modules: {
sidebar: aliasedSource(sidebarProp),
items: items.map((postID) => ({
content: {
__import: true,
path: blogItemsToMetadata[postID]!.source,
query: {
truncated: true,
},
},
})),
items: blogPostItemsModule(items),
metadata: aliasedSource(pageMetadataPath),
},
});
Expand Down Expand Up @@ -344,18 +351,7 @@ export default async function pluginContentBlog(
exact: true,
modules: {
sidebar: aliasedSource(sidebarProp),
items: items.map((postID) => {
const blogPostMetadata = blogItemsToMetadata[postID]!;
return {
content: {
__import: true,
path: blogPostMetadata.source,
query: {
truncated: true,
},
},
};
}),
items: blogPostItemsModule(items),
tag: aliasedSource(tagPropPath),
listMetadata: aliasedSource(listMetadataPath),
},
Expand Down
36 changes: 22 additions & 14 deletions packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts
View file
Expand Up @@ -6,6 +6,7 @@
*/

declare module '@docusaurus/plugin-content-blog' {
import type {LoadedMDXContent} from '@docusaurus/mdx-loader';
import type {MDXOptions} from '@docusaurus/mdx-loader';
import type {FrontMatterTag, Tag} from '@docusaurus/utils';
import type {Plugin, LoadContext} from '@docusaurus/types';
Expand Down Expand Up @@ -201,7 +202,7 @@ declare module '@docusaurus/plugin-content-blog' {
/**
* Whether the truncate marker exists in the post's content.
*/
readonly truncated?: boolean;
readonly hasTruncateMarker: boolean;
/**
* Used in pagination. Generated after the other metadata, so not readonly.
* Content is just a subset of another post's metadata.
Expand Down Expand Up @@ -462,33 +463,36 @@ declare module '@docusaurus/plugin-content-blog' {
items: string[];
};

type PropBlogPostMetadata = Overwrite<
BlogPostMetadata,
{
/** The publish date of the post. Serialized from the `Date` object. */
date: string;
}
>;

export type PropBlogPostContent = LoadedMDXContent<
BlogPostFrontMatter,
PropBlogPostMetadata,
Assets
>;

export default function pluginContentBlog(
context: LoadContext,
options: PluginOptions,
): Promise<Plugin<BlogContent>>;
}

declare module '@theme/BlogPostPage' {
import type {LoadedMDXContent} from '@docusaurus/mdx-loader';
import type {
BlogPostFrontMatter,
BlogPostMetadata,
Assets,
BlogSidebar,
PropBlogPostContent,
} from '@docusaurus/plugin-content-blog';
import type {Overwrite} from 'utility-types';

export type FrontMatter = BlogPostFrontMatter;

export type Metadata = Overwrite<
BlogPostMetadata,
{
/** The publish date of the post. Serialized from the `Date` object. */
date: string;
}
>;

export type Content = LoadedMDXContent<FrontMatter, Metadata, Assets>;
export type Content = PropBlogPostContent;

export interface Props {
/** Blog sidebar. */
Expand All @@ -500,6 +504,10 @@ declare module '@theme/BlogPostPage' {
export default function BlogPostPage(props: Props): JSX.Element;
}

declare module '@theme/BlogPostPage/Metadata' {
export default function BlogPostPageMetadata(): JSX.Element;
}

declare module '@theme/BlogListPage' {
import type {Content} from '@theme/BlogPostPage';
import type {
Expand Down
98 changes: 80 additions & 18 deletions packages/docusaurus-theme-classic/src/theme-classic.d.ts
View file
Expand Up @@ -95,41 +95,103 @@ declare module '@theme/BlogSidebar' {
}

declare module '@theme/BlogPostItem' {
import type {FrontMatter, Metadata} from '@theme/BlogPostPage';
import type {Assets} from '@docusaurus/plugin-content-blog';
import type {ReactNode} from 'react';

export interface Props {
readonly frontMatter: FrontMatter;
readonly assets: Assets;
readonly metadata: Metadata;
readonly truncated?: string | boolean;
readonly isBlogPostPage?: boolean;
readonly children: JSX.Element;
children: ReactNode;
className?: string;
}

export default function BlogPostItem(props: Props): JSX.Element;
}

declare module '@theme/BlogPostItems' {
import type {ComponentType, ReactNode} from 'react';
import type {PropBlogPostContent} from '@docusaurus/plugin-content-blog';

export interface Props {
items: readonly {content: PropBlogPostContent}[];
component?: ComponentType<{children: ReactNode}>;
}

export default function BlogPostItem(props: Props): JSX.Element;
}

declare module '@theme/BlogPostAuthor' {
import type {Metadata} from '@theme/BlogPostPage';
declare module '@theme/BlogPostItem/Container' {
import type {ReactNode} from 'react';

export interface Props {
children: ReactNode;
className?: string;
}

export default function BlogPostItemContainer(props: Props): JSX.Element;
}

declare module '@theme/BlogPostItem/Header' {
export default function BlogPostItemHeader(): JSX.Element;
}

declare module '@theme/BlogPostItem/Header/Title' {
export interface Props {
className?: string;
}

export default function BlogPostItemHeaderTitle(props: Props): JSX.Element;
}

declare module '@theme/BlogPostItem/Header/Info' {
export interface Props {
className?: string;
}

export default function BlogPostItemHeaderInfo(): JSX.Element;
}

declare module '@theme/BlogPostItem/Header/Author' {
import type {PropBlogPostContent} from '@docusaurus/plugin-content-blog';

export interface Props {
readonly author: Metadata['authors'][number];
readonly author: PropBlogPostContent['metadata']['authors'][number];
readonly className?: string;
}

export default function BlogPostAuthor(props: Props): JSX.Element;
export default function BlogPostItemHeaderAuthor(props: Props): JSX.Element;
}

declare module '@theme/BlogPostAuthors' {
import type {Metadata} from '@theme/BlogPostPage';
import type {Assets} from '@docusaurus/plugin-content-blog';
declare module '@theme/BlogPostItem/Header/Authors' {
export interface Props {
readonly className?: string;
}

export default function BlogPostItemHeaderAuthors(props: Props): JSX.Element;
}

declare module '@theme/BlogPostItem/Content' {
import type {ReactNode} from 'react';

export interface Props {
readonly authors: Metadata['authors'];
readonly assets: Assets;
children: ReactNode;
className?: string;
}

export default function BlogPostAuthors(props: Props): JSX.Element;
export default function BlogPostItemContent(props: Props): JSX.Element;
}

declare module '@theme/BlogPostItem/Footer' {
export default function BlogPostItemFooter(): JSX.Element | null;
}

declare module '@theme/BlogPostItem/Footer/ReadMoreLink' {
import type {Props as LinkProps} from '@docusaurus/Link';

export type Props = LinkProps & {
blogPostTitle: string;
};

export default function BlogPostItemFooterReadMoreLink(
props: Props,
): JSX.Element | null;
}

declare module '@theme/BlogPostPaginator' {
Expand Down
13 changes: 2 additions & 11 deletions packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
View file
Expand Up @@ -15,10 +15,10 @@ import {
ThemeClassNames,
} from '@docusaurus/theme-common';
import BlogLayout from '@theme/BlogLayout';
import BlogPostItem from '@theme/BlogPostItem';
import BlogListPaginator from '@theme/BlogListPaginator';
import SearchMetadata from '@theme/SearchMetadata';
import type {Props} from '@theme/BlogListPage';
import BlogPostItems from '@theme/BlogPostItems';

function BlogListPageMetadata(props: Props): JSX.Element {
const {metadata} = props;
Expand All @@ -40,16 +40,7 @@ function BlogListPageContent(props: Props): JSX.Element {
const {metadata, items, sidebar} = props;
return (
<BlogLayout sidebar={sidebar}>
{items.map(({content: BlogPostContent}) => (
<BlogPostItem
key={BlogPostContent.metadata.permalink}
frontMatter={BlogPostContent.frontMatter}
assets={BlogPostContent.assets}
metadata={BlogPostContent.metadata}
truncated={BlogPostContent.metadata.truncated}>
<BlogPostContent />
</BlogPostItem>
))}
<BlogPostItems items={items} />
<BlogListPaginator metadata={metadata} />
</BlogLayout>
);
Expand Down

0 comments on commit 41449e1

Please sign in to comment.