mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-03 12:17:20 +02:00
refactor(v2): improve semantic markup of blog (#2003)
* refactor(v2): improve semantic markup of blog * Refactor/simplify
This commit is contained in:
parent
dda10beea6
commit
dec9c1279c
3 changed files with 20 additions and 26 deletions
|
@ -21,16 +21,13 @@ function BlogListPage(props) {
|
||||||
<div className="col col--8 col--offset-2">
|
<div className="col col--8 col--offset-2">
|
||||||
{items.map(
|
{items.map(
|
||||||
({content: BlogPostContent, metadata: blogPostMetadata}) => (
|
({content: BlogPostContent, metadata: blogPostMetadata}) => (
|
||||||
<div
|
<BlogPostItem
|
||||||
className="margin-bottom--xl"
|
key={blogPostMetadata.permalink}
|
||||||
key={blogPostMetadata.permalink}>
|
frontMatter={BlogPostContent.frontMatter}
|
||||||
<BlogPostItem
|
metadata={blogPostMetadata}
|
||||||
frontMatter={BlogPostContent.frontMatter}
|
truncated>
|
||||||
metadata={blogPostMetadata}
|
<BlogPostContent />
|
||||||
truncated>
|
</BlogPostItem>
|
||||||
<BlogPostContent />
|
|
||||||
</BlogPostItem>
|
|
||||||
</div>
|
|
||||||
),
|
),
|
||||||
)}
|
)}
|
||||||
<BlogListPaginator metadata={metadata} />
|
<BlogListPaginator metadata={metadata} />
|
||||||
|
|
|
@ -92,13 +92,13 @@ function BlogPostItem(props) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}>
|
||||||
{renderPostHeader()}
|
{renderPostHeader()}
|
||||||
<article className="markdown">
|
<section className="markdown">
|
||||||
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
|
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
|
||||||
</article>
|
</section>
|
||||||
{(tags.length > 0 || truncated) && (
|
{(tags.length > 0 || truncated) && (
|
||||||
<div className="row margin-vert--lg">
|
<footer className="row margin-vert--lg">
|
||||||
{tags.length > 0 && (
|
{tags.length > 0 && (
|
||||||
<div className="col">
|
<div className="col">
|
||||||
<strong>Tags:</strong>
|
<strong>Tags:</strong>
|
||||||
|
@ -121,9 +121,9 @@ function BlogPostItem(props) {
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</footer>
|
||||||
)}
|
)}
|
||||||
</div>
|
</article>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -29,16 +29,13 @@ function BlogTagsPostPage(props) {
|
||||||
<div className="margin-vert--xl">
|
<div className="margin-vert--xl">
|
||||||
{items.map(
|
{items.map(
|
||||||
({content: BlogPostContent, metadata: blogPostMetadata}) => (
|
({content: BlogPostContent, metadata: blogPostMetadata}) => (
|
||||||
<div
|
<BlogPostItem
|
||||||
className="margin-vert--xl"
|
key={blogPostMetadata.permalink}
|
||||||
key={blogPostMetadata.permalink}>
|
frontMatter={BlogPostContent.frontMatter}
|
||||||
<BlogPostItem
|
metadata={blogPostMetadata}
|
||||||
frontMatter={BlogPostContent.frontMatter}
|
truncated>
|
||||||
metadata={blogPostMetadata}
|
<BlogPostContent />
|
||||||
truncated>
|
</BlogPostItem>
|
||||||
<BlogPostContent />
|
|
||||||
</BlogPostItem>
|
|
||||||
</div>
|
|
||||||
),
|
),
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Reference in a new issue