refactor(v2): improve semantic markup of blog (#2003)

* refactor(v2): improve semantic markup of blog

* Refactor/simplify
This commit is contained in:
Alexey Pyltsyn 2019-11-17 15:00:11 +03:00 committed by Yangshun Tay
parent dda10beea6
commit dec9c1279c
3 changed files with 20 additions and 26 deletions

View file

@ -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} />

View file

@ -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>
); );
} }

View file

@ -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>