mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-19 19:22:28 +02:00
refactor(theme): split BlogPostItem into smaller theme subcomponents (#7716)
This commit is contained in:
Sébastien Lorber
GitHub
parent
c7f18801da
commit
c3ff131110
43 changed files with 938 additions and 600 deletions
|
|
@ -6,15 +6,19 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
import type {Props} from '@theme/BlogPostAuthor';
|
||||
import type {Props} from '@theme/BlogPostItem/Header/Author';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
export default function ChangelogAuthor({author}: Props): JSX.Element {
|
||||
export default function ChangelogAuthor({
|
||||
author,
|
||||
className,
|
||||
}: Props): JSX.Element {
|
||||
const {name, url, imageURL} = author;
|
||||
return (
|
||||
<div className="avatar margin-bottom--sm">
|
||||
<div className={clsx('avatar margin-bottom--sm', className)}>
|
||||
{imageURL && (
|
||||
<Link className="avatar__photo-link avatar__photo" href={url}>
|
||||
<img
|
||||
|
|
@ -7,17 +7,21 @@
|
|||
|
||||
import React, {useState} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import ChangelogAuthor from '@theme/ChangelogAuthor';
|
||||
import {useBlogPost} from '@docusaurus/theme-common/internal';
|
||||
import BlogPostItemHeaderAuthor from '@theme/BlogPostItem/Header/Author';
|
||||
import IconExpand from '@theme/IconExpand';
|
||||
import type {Props} from '@theme/BlogPostAuthors';
|
||||
import type {Props} from '@theme/BlogPostItem/Header/Authors';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
// Component responsible for the authors layout
|
||||
export default function BlogPostAuthors({
|
||||
authors,
|
||||
assets,
|
||||
className,
|
||||
}: Props): JSX.Element | null {
|
||||
const {
|
||||
metadata: {authors},
|
||||
assets,
|
||||
} = useBlogPost();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const authorsCount = authors.length;
|
||||
if (authorsCount === 0) {
|
||||
|
|
@ -29,10 +33,11 @@ export default function BlogPostAuthors({
|
|||
className={clsx(
|
||||
'margin-top--md margin-bottom--sm',
|
||||
styles.imageOnlyAuthorRow,
|
||||
className,
|
||||
)}>
|
||||
{filteredAuthors.map((author, idx) => (
|
||||
<div className={styles.imageOnlyAuthorCol} key={idx}>
|
||||
<ChangelogAuthor
|
||||
<BlogPostItemHeaderAuthor
|
||||
author={{
|
||||
...author,
|
||||
// Handle author images using relative paths
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {useBlogPost} from '@docusaurus/theme-common/internal';
|
||||
|
||||
import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title';
|
||||
import BlogPostItemHeaderInfo from '@theme/BlogPostItem/Header/Info';
|
||||
import BlogPostItemHeaderAuthors from '@theme/BlogPostItem/Header/Authors';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
// Reduce changelog title size, but only on list view
|
||||
function ChangelogTitle() {
|
||||
const {isBlogPostPage} = useBlogPost();
|
||||
return (
|
||||
<BlogPostItemHeaderTitle
|
||||
className={isBlogPostPage ? undefined : styles.changelogItemTitleList}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ChangelogItemHeader(): JSX.Element {
|
||||
return (
|
||||
<header>
|
||||
<ChangelogTitle />
|
||||
<BlogPostItemHeaderInfo />
|
||||
<BlogPostItemHeaderAuthors />
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
.changelogItemTitleList {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
|
@ -6,71 +6,18 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {MDXProvider} from '@mdx-js/react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
|
||||
import {blogPostContainerID} from '@docusaurus/utils-common';
|
||||
import MDXComponents from '@theme/MDXComponents';
|
||||
import ChangelogAuthors from '@theme/ChangelogAuthors';
|
||||
import ChangelogItemHeader from '@theme/ChangelogItem/Header';
|
||||
import type {Props} from '@theme/BlogPostItem';
|
||||
import BlogPostItemContainer from '@theme/BlogPostItem/Container';
|
||||
import BlogPostItemContent from '@theme/BlogPostItem/Content';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
export default function ChangelogItem(props: Props): JSX.Element {
|
||||
const {withBaseUrl} = useBaseUrlUtils();
|
||||
const {
|
||||
children,
|
||||
frontMatter,
|
||||
assets,
|
||||
metadata,
|
||||
isBlogPostPage = false,
|
||||
} = props;
|
||||
const {date, formattedDate, permalink, title, authors} = metadata;
|
||||
|
||||
const image = assets.image ?? frontMatter.image;
|
||||
|
||||
const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
|
||||
|
||||
export default function ChangelogItem({children}: Props): JSX.Element {
|
||||
return (
|
||||
<article
|
||||
className={!isBlogPostPage ? 'margin-bottom--md' : undefined}
|
||||
itemProp="blogPost"
|
||||
itemScope
|
||||
itemType="http://schema.org/BlogPosting">
|
||||
<header>
|
||||
<TitleHeading
|
||||
className={clsx(
|
||||
isBlogPostPage ? styles.blogPostPageTitle : styles.blogPostTitle,
|
||||
)}
|
||||
itemProp="headline">
|
||||
{isBlogPostPage ? (
|
||||
title
|
||||
) : (
|
||||
<Link itemProp="url" to={permalink}>
|
||||
{title}
|
||||
</Link>
|
||||
)}
|
||||
</TitleHeading>
|
||||
<div className={clsx(styles.blogPostData, 'margin-vert--md')}>
|
||||
<time dateTime={date} itemProp="datePublished">
|
||||
{formattedDate}
|
||||
</time>
|
||||
</div>
|
||||
<ChangelogAuthors authors={authors} assets={assets} />
|
||||
</header>
|
||||
|
||||
{image && (
|
||||
<meta itemProp="image" content={withBaseUrl(image, {absolute: true})} />
|
||||
)}
|
||||
|
||||
<div
|
||||
// This ID is used for the feed generation to locate the main content
|
||||
id={isBlogPostPage ? blogPostContainerID : undefined}
|
||||
className="markdown"
|
||||
itemProp="articleBody">
|
||||
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
|
||||
</div>
|
||||
</article>
|
||||
<BlogPostItemContainer className={styles.changelogItemContainer}>
|
||||
<ChangelogItemHeader />
|
||||
<BlogPostItemContent>{children}</BlogPostItemContent>
|
||||
</BlogPostItemContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,6 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
.blogPostTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.blogPostPageTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.blogPostData {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.blogPostDetailsFull {
|
||||
flex-direction: column;
|
||||
.changelogItemContainer {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import Link from '@docusaurus/Link';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
function TwitterLink() {
|
||||
return (
|
||||
<Link href="https://twitter.com/docusaurus" className={styles.twitter}>
|
||||
<b>Twitter</b>
|
||||
<svg
|
||||
style={{
|
||||
fill: '#1da1f2',
|
||||
position: 'relative',
|
||||
left: 4,
|
||||
top: 1,
|
||||
marginRight: 8,
|
||||
}}
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
|
||||
</svg>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function RssLink() {
|
||||
return (
|
||||
<Link href="pathname:///changelog/rss.xml" className={styles.rss}>
|
||||
<b>
|
||||
<Translate id="changelog.description.rssLink">RSS feeds</Translate>
|
||||
</b>
|
||||
<svg
|
||||
style={{
|
||||
fill: '#f26522',
|
||||
position: 'relative',
|
||||
left: 4,
|
||||
top: 1,
|
||||
marginRight: 8,
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z" />
|
||||
</svg>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ChangelogListHeader({
|
||||
blogTitle,
|
||||
}: {
|
||||
blogTitle: string;
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<header className="margin-bottom--lg">
|
||||
<h1 style={{fontSize: '3rem'}}>{blogTitle}</h1>
|
||||
<p>
|
||||
<Translate
|
||||
id="changelog.description"
|
||||
values={{
|
||||
twitterLink: <TwitterLink />,
|
||||
rssLink: <RssLink />,
|
||||
}}>
|
||||
{
|
||||
'Subscribe through {rssLink} or follow us on {twitterLink} to stay up-to-date with new releases!'
|
||||
}
|
||||
</Translate>
|
||||
</p>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,18 +5,6 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
.blogPostTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.blogPostData {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.blogPostDetailsFull {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rss,
|
||||
.rss:hover {
|
||||
color: #f26522;
|
||||
|
|
@ -7,8 +7,6 @@
|
|||
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import Link from '@docusaurus/Link';
|
||||
import {
|
||||
PageMetadata,
|
||||
HtmlClassNameProvider,
|
||||
|
|
@ -16,12 +14,12 @@ import {
|
|||
} from '@docusaurus/theme-common';
|
||||
import BlogLayout from '@theme/BlogLayout';
|
||||
import BlogListPaginator from '@theme/BlogListPaginator';
|
||||
import BlogPostItems from '@theme/BlogPostItems';
|
||||
import SearchMetadata from '@theme/SearchMetadata';
|
||||
import ChangelogItem from '@theme/ChangelogItem';
|
||||
import ChangelogListHeader from '@theme/ChangelogList/Header';
|
||||
import type {Props} from '@theme/BlogListPage';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
function ChangelogListMetadata(props: Props): JSX.Element {
|
||||
const {metadata} = props;
|
||||
const {blogTitle, blogDescription} = metadata;
|
||||
|
|
@ -36,78 +34,10 @@ function ChangelogListMetadata(props: Props): JSX.Element {
|
|||
function ChangelogListContent(props: Props): JSX.Element {
|
||||
const {metadata, items, sidebar} = props;
|
||||
const {blogTitle} = metadata;
|
||||
|
||||
return (
|
||||
<BlogLayout sidebar={sidebar}>
|
||||
<header className="margin-bottom--lg">
|
||||
<h1 style={{fontSize: '3rem'}}>{blogTitle}</h1>
|
||||
<p>
|
||||
<Translate
|
||||
id="changelog.description"
|
||||
values={{
|
||||
twitterLink: (
|
||||
<Link
|
||||
href="https://twitter.com/docusaurus"
|
||||
className={styles.twitter}>
|
||||
<b>Twitter</b>
|
||||
<svg
|
||||
style={{
|
||||
fill: '#1da1f2',
|
||||
position: 'relative',
|
||||
left: 4,
|
||||
top: 1,
|
||||
marginRight: 8,
|
||||
}}
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
|
||||
</svg>
|
||||
</Link>
|
||||
),
|
||||
rssLink: (
|
||||
<Link
|
||||
href="pathname:///changelog/rss.xml"
|
||||
className={styles.rss}>
|
||||
<b>
|
||||
<Translate id="changelog.description.rssLink">
|
||||
RSS feeds
|
||||
</Translate>
|
||||
</b>
|
||||
<svg
|
||||
style={{
|
||||
fill: '#f26522',
|
||||
position: 'relative',
|
||||
left: 4,
|
||||
top: 1,
|
||||
marginRight: 8,
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z" />
|
||||
</svg>
|
||||
</Link>
|
||||
),
|
||||
}}>
|
||||
{
|
||||
'Subscribe through {rssLink} or follow us on {twitterLink} to stay up-to-date with new releases!'
|
||||
}
|
||||
</Translate>
|
||||
</p>
|
||||
</header>
|
||||
{items.map(({content: BlogPostContent}) => (
|
||||
<ChangelogItem
|
||||
key={BlogPostContent.metadata.permalink}
|
||||
frontMatter={BlogPostContent.frontMatter}
|
||||
assets={BlogPostContent.assets}
|
||||
metadata={BlogPostContent.metadata}
|
||||
truncated={BlogPostContent.metadata.truncated}>
|
||||
<BlogPostContent />
|
||||
</ChangelogItem>
|
||||
))}
|
||||
<ChangelogListHeader blogTitle={blogTitle} />
|
||||
<BlogPostItems items={items} component={ChangelogItem} />
|
||||
<BlogListPaginator metadata={metadata} />
|
||||
</BlogLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,103 +5,65 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, {type ReactNode} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import Link from '@docusaurus/Link';
|
||||
import {
|
||||
PageMetadata,
|
||||
HtmlClassNameProvider,
|
||||
ThemeClassNames,
|
||||
} from '@docusaurus/theme-common';
|
||||
import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import {BlogPostProvider, useBlogPost} from '@docusaurus/theme-common/internal';
|
||||
import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata';
|
||||
import BlogLayout from '@theme/BlogLayout';
|
||||
import ChangelogItem from '@theme/ChangelogItem';
|
||||
import ChangelogPaginator from '@theme/ChangelogPaginator';
|
||||
import TOC from '@theme/TOC';
|
||||
import type {Props} from '@theme/BlogPostPage';
|
||||
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
|
||||
|
||||
function ChangelogPageMetadata(props: Props): JSX.Element {
|
||||
const {content: BlogPostContents} = props;
|
||||
const {assets, metadata} = BlogPostContents;
|
||||
const {title, description, date, tags, authors, frontMatter} = metadata;
|
||||
const {keywords} = frontMatter;
|
||||
|
||||
const image = assets.image ?? frontMatter.image;
|
||||
function BackToIndexLink() {
|
||||
const {metadata} = useBlogPost();
|
||||
// @ts-expect-error: we injected this
|
||||
const {listPageLink} = metadata;
|
||||
return (
|
||||
<PageMetadata
|
||||
title={title}
|
||||
description={description}
|
||||
keywords={keywords}
|
||||
image={image}>
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="article:published_time" content={date} />
|
||||
|
||||
{authors.some((author) => author.url) && (
|
||||
<meta
|
||||
property="article:author"
|
||||
content={authors
|
||||
.map((author) => author.url)
|
||||
.filter(Boolean)
|
||||
.join(',')}
|
||||
/>
|
||||
)}
|
||||
{tags.length > 0 && (
|
||||
<meta
|
||||
property="article:tag"
|
||||
content={tags.map((tag) => tag.label).join(',')}
|
||||
/>
|
||||
)}
|
||||
</PageMetadata>
|
||||
<Link to={listPageLink}>
|
||||
<Translate id="changelog.backLink">← Back to index page</Translate>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function ChangelogPageContent(props: Props): JSX.Element {
|
||||
const {content: BlogPostContents, sidebar} = props;
|
||||
const {assets, metadata} = BlogPostContents;
|
||||
const {
|
||||
nextItem,
|
||||
prevItem,
|
||||
frontMatter,
|
||||
// @ts-expect-error: we injected this
|
||||
listPageLink,
|
||||
} = metadata;
|
||||
function ChangelogPageContent({
|
||||
sidebar,
|
||||
children,
|
||||
}: {
|
||||
sidebar: BlogSidebar;
|
||||
children: ReactNode;
|
||||
}): JSX.Element {
|
||||
const {metadata, toc} = useBlogPost();
|
||||
const {nextItem, prevItem, frontMatter} = metadata;
|
||||
const {
|
||||
hide_table_of_contents: hideTableOfContents,
|
||||
toc_min_heading_level: tocMinHeadingLevel,
|
||||
toc_max_heading_level: tocMaxHeadingLevel,
|
||||
} = frontMatter;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageMetadata />
|
||||
<BlogLayout
|
||||
sidebar={sidebar}
|
||||
toc={
|
||||
!hideTableOfContents && BlogPostContents.toc.length > 0 ? (
|
||||
<TOC
|
||||
toc={BlogPostContents.toc}
|
||||
minHeadingLevel={tocMinHeadingLevel}
|
||||
maxHeadingLevel={tocMaxHeadingLevel}
|
||||
/>
|
||||
) : undefined
|
||||
}>
|
||||
<Link to={listPageLink}>
|
||||
<Translate id="changelog.backLink">← Back to index page</Translate>
|
||||
</Link>
|
||||
<BlogLayout
|
||||
sidebar={sidebar}
|
||||
toc={
|
||||
!hideTableOfContents && toc.length > 0 ? (
|
||||
<TOC
|
||||
toc={toc}
|
||||
minHeadingLevel={tocMinHeadingLevel}
|
||||
maxHeadingLevel={tocMaxHeadingLevel}
|
||||
/>
|
||||
) : undefined
|
||||
}>
|
||||
<BackToIndexLink />
|
||||
|
||||
<ChangelogItem
|
||||
frontMatter={frontMatter}
|
||||
assets={assets}
|
||||
metadata={metadata}
|
||||
isBlogPostPage>
|
||||
<BlogPostContents />
|
||||
</ChangelogItem>
|
||||
<ChangelogItem>{children}</ChangelogItem>
|
||||
|
||||
{(nextItem || prevItem) && (
|
||||
<ChangelogPaginator nextItem={nextItem} prevItem={prevItem} />
|
||||
)}
|
||||
</BlogLayout>
|
||||
</>
|
||||
{(nextItem || prevItem) && (
|
||||
<ChangelogPaginator nextItem={nextItem} prevItem={prevItem} />
|
||||
)}
|
||||
</BlogLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -109,14 +71,19 @@ function ChangelogPageContent(props: Props): JSX.Element {
|
|||
// own ChangelogItem. We don't want to apply the swizzled item to the actual
|
||||
// blog.
|
||||
export default function ChangelogPage(props: Props): JSX.Element {
|
||||
const ChangelogContent = props.content;
|
||||
return (
|
||||
<HtmlClassNameProvider
|
||||
className={clsx(
|
||||
ThemeClassNames.wrapper.blogPages,
|
||||
ThemeClassNames.page.blogPostPage,
|
||||
)}>
|
||||
<ChangelogPageMetadata {...props} />
|
||||
<ChangelogPageContent {...props} />
|
||||
</HtmlClassNameProvider>
|
||||
<BlogPostProvider content={props.content} isBlogPostPage>
|
||||
<HtmlClassNameProvider
|
||||
className={clsx(
|
||||
ThemeClassNames.wrapper.blogPages,
|
||||
ThemeClassNames.page.blogPostPage,
|
||||
)}>
|
||||
<BlogPostPageMetadata />
|
||||
<ChangelogPageContent sidebar={props.sidebar}>
|
||||
<ChangelogContent />
|
||||
</ChangelogPageContent>
|
||||
</HtmlClassNameProvider>
|
||||
</BlogPostProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
12
website/src/plugins/changelog/theme/types.d.ts
vendored
12
website/src/plugins/changelog/theme/types.d.ts
vendored
|
|
@ -5,10 +5,16 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
declare module '@theme/ChangelogItem';
|
||||
declare module '@theme/ChangelogAuthors';
|
||||
declare module '@theme/ChangelogAuthor';
|
||||
declare module '@theme/ChangelogPaginator';
|
||||
|
||||
declare module '@theme/ChangelogItem';
|
||||
declare module '@theme/ChangelogItem/Header';
|
||||
declare module '@theme/ChangelogItem/Header/Author';
|
||||
declare module '@theme/ChangelogItem/Header/Authors';
|
||||
|
||||
declare module '@theme/ChangelogList';
|
||||
declare module '@theme/ChangelogList/Header';
|
||||
|
||||
declare module '@theme/IconExpand' {
|
||||
import type {ComponentProps} from 'react';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue