-
-
Notifications
You must be signed in to change notification settings - Fork 8.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(v2): bootstrap blog post page and card (#2584)
* feat(v2): init the blog post card * feat(v2): Update card design * chore(v2): remove unused dependency * feat(v2): add post list * feat(v2): improve html tags * chore(v2): run prettier * feat(v2): remove old tag * feat(v2): apply suggestions
- Loading branch information
Showing
11 changed files
with
189 additions
and
2 deletions.
There are no files selected for viewing
11 changes: 11 additions & 0 deletions
11
packages/docusaurus-init/templates/bootstrap/blog/2019-05-28-hola.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
id: hola | ||
title: Hola | ||
author: Gao Wei | ||
author_title: Docusaurus Core Team | ||
author_url: https://github.com/wgao19 | ||
author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4 | ||
tags: [hola, docusaurus] | ||
--- | ||
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet |
17 changes: 17 additions & 0 deletions
17
packages/docusaurus-init/templates/bootstrap/blog/2019-05-29-hello-world.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
--- | ||
id: hello-world | ||
title: Hello | ||
author: Endilie Yacop Sucipto | ||
author_title: Maintainer of Docusaurus | ||
author_url: https://github.com/endiliey | ||
author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4 | ||
tags: [hello, docusaurus] | ||
--- | ||
|
||
Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/). | ||
|
||
<!--truncate--> | ||
|
||
This is a test post. | ||
|
||
A whole bunch of other information. |
13 changes: 13 additions & 0 deletions
13
packages/docusaurus-init/templates/bootstrap/blog/2019-05-30-welcome.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
--- | ||
id: welcome | ||
title: Welcome | ||
author: Yangshun Tay | ||
author_title: Front End Engineer @ Facebook | ||
author_url: https://github.com/yangshun | ||
author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4 | ||
tags: [facebook, hello, docusaurus] | ||
--- | ||
|
||
Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well! | ||
|
||
Delete the whole directory if you don't want the blog features. As simple as that! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
/** | ||
* 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 BlogPostCard from '@theme/BlogPostItem'; | ||
|
||
function BlogListPage(props) { | ||
const {items} = props; | ||
|
||
return ( | ||
<div className="container my-5"> | ||
<div className="row"> | ||
{items.map(({content: BlogPostContent}) => ( | ||
<div className="col col-8 offset-2 mb-5"> | ||
<BlogPostCard | ||
key={BlogPostContent.metadata.permalink} | ||
frontMatter={BlogPostContent.frontMatter} | ||
metadata={BlogPostContent.metadata} | ||
truncated={BlogPostContent.metadata.truncated} | ||
/> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export default BlogListPage; |
85 changes: 85 additions & 0 deletions
85
packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
/** | ||
* 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'; | ||
|
||
const MONTHS = [ | ||
'January', | ||
'February', | ||
'March', | ||
'April', | ||
'May', | ||
'June', | ||
'July', | ||
'August', | ||
'September', | ||
'October', | ||
'November', | ||
'December', | ||
]; | ||
|
||
function BlogPostItem(props) { | ||
const {frontMatter, metadata, truncated} = props; | ||
|
||
const {date, readingTime} = metadata; | ||
const {author, title} = frontMatter; | ||
|
||
const authorURL = frontMatter.author_url || frontMatter.authorURL; | ||
const authorImageURL = | ||
frontMatter.author_image_url || frontMatter.authorImageURL; | ||
|
||
const match = date.substring(0, 10).split('-'); | ||
const year = match[0]; | ||
const month = MONTHS[parseInt(match[1], 10) - 1]; | ||
const day = parseInt(match[2], 10); | ||
|
||
return ( | ||
<article className="card h-100"> | ||
<div className="row no-gutters rows-col-2 m-3"> | ||
<div className="col-xs mr-3"> | ||
{authorImageURL && ( | ||
<img style={{width: '50px'}} src={authorImageURL} alt={author} /> | ||
)} | ||
</div> | ||
<div className="col"> | ||
{author && ( | ||
<h5> | ||
<a href={authorURL} alt={author}> | ||
{author} | ||
</a> | ||
</h5> | ||
)} | ||
<time | ||
className="card-subtitle mb-md-4 font-weight-light" | ||
dateTime={date}> | ||
{month} {day}, {year}{' '} | ||
</time> | ||
</div> | ||
</div> | ||
|
||
<div className="card-body"> | ||
<h3 className="card-title text-primary">{title}</h3> | ||
<p className="lead">Markdown content</p> | ||
</div> | ||
|
||
<div className="text-right m-3"> | ||
{readingTime && ( | ||
<small className={truncated ? 'mx-3' : ''}> | ||
{Math.ceil(readingTime)} min read | ||
</small> | ||
)} | ||
{truncated && ( | ||
<a href="https://github.com/" className="stretched-link"> | ||
Read more | ||
</a> | ||
)} | ||
</div> | ||
</article> | ||
); | ||
} | ||
|
||
export default BlogPostItem; |
8 changes: 8 additions & 0 deletions
8
packages/docusaurus-theme-bootstrap/src/theme/BlogPostPage/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** | ||
* 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. | ||
*/ | ||
|
||
export default () => {}; |
8 changes: 8 additions & 0 deletions
8
packages/docusaurus-theme-bootstrap/src/theme/BlogTagsListPage/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** | ||
* 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. | ||
*/ | ||
|
||
export default () => {}; |
8 changes: 8 additions & 0 deletions
8
packages/docusaurus-theme-bootstrap/src/theme/BlogTagsPostsPage/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** | ||
* 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. | ||
*/ | ||
|
||
export default () => {}; |