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

packages/docusaurus-init/templates/bootstrap/blog/2019-05-28-hola.md

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

packages/docusaurus-init/templates/bootstrap/blog/2019-05-29-hello-world.md

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

packages/docusaurus-init/templates/bootstrap/blog/2019-05-30-welcome.md

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

packages/docusaurus-init/templates/bootstrap/docusaurus.config.js

@@ -54,5 +54,5 @@ module.exports = {
       copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
     },
   },
-  presets: [['@docusaurus/preset-bootstrap', {}]],
+  presets: [['@docusaurus/preset-bootstrap']],
 };

packages/docusaurus-preset-bootstrap/package.json

@@ -8,6 +8,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@docusaurus/theme-bootstrap": "^2.0.0-alpha.50",
+    "@docusaurus/plugin-content-blog": "^2.0.0-alpha.50",
     "@docusaurus/plugin-content-pages": "^2.0.0-alpha.50"
   },
   "peerDependencies": {

packages/docusaurus-preset-bootstrap/src/index.js

@@ -8,6 +8,9 @@
 module.exports = function preset(context, opts = {}) {
   return {
     themes: [['@docusaurus/theme-bootstrap', opts.theme]],
-    plugins: [['@docusaurus/plugin-content-pages', opts.pages]],
+    plugins: [
+      ['@docusaurus/plugin-content-pages', opts.pages],
+      ['@docusaurus/plugin-content-blog', opts.blog],
+    ],
   };
 };

packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js

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

packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js

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

packages/docusaurus-theme-bootstrap/src/theme/BlogPostPage/index.js

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

packages/docusaurus-theme-bootstrap/src/theme/BlogTagsListPage/index.js

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

packages/docusaurus-theme-bootstrap/src/theme/BlogTagsPostsPage/index.js

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