feat(v2): bootstrap theme tags and specific tag page (#2590)

* 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

* feat(v2): add tags for blog post

* feat(v2): add post content

* feat(v2): add tags

* feat(v2): add specific tag page

* feat(v2): fix tablet layout

* feat(v2): fix tablet layout

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

@@ -17,7 +17,7 @@ function BlogListPage(props) {
         {items.map(({content: BlogPostContent}) => (
           <div
             key={BlogPostContent.metadata.permalink}
-            className="col col-md-4 offset-md-4 col-xs-6 mb-5">
+            className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
             <BlogPostCard
               frontMatter={BlogPostContent.frontMatter}
               metadata={BlogPostContent.metadata}

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

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import Link from '@docusaurus/Link';
 
 const MONTHS = [
   'January',
@@ -63,17 +64,17 @@ function BlogPostItem(props) {
 
       <div className="card-body">
         <h3 className="card-title text-primary">{title}</h3>
-        <p className="lead">{children}</p>
+        <div className="lead">{children}</div>
       </div>
 
       <footer className="row no-gutters m-3 justify-content-between">
         <div className="col col-xs">
           {tags.length > 0 && (
             <>
-              {tags.map(({label}) => (
+              {tags.map(({label, permalink: tagPermalink}) => (
-                <span key={label} className="badge badge-primary m-1">
+                <Link key={tagPermalink} className="m-1" to={tagPermalink}>
-                  {label}
+                  <span className="badge badge-primary">{label}</span>
-                </span>
+                </Link>
               ))}
             </>
           )}

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

@@ -4,5 +4,31 @@
  * 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 Link from '@docusaurus/Link';
 
-export default () => {};
+function BlogTagsListPage(props) {
+  const {tags} = props;
+  const renderAllTags = () => (
+    <>
+      {Object.keys(tags).map((tag) => (
+        <Link
+          href={tags[tag].permalink}
+          key={tag}
+          className="btn btn-primary m-2">
+          {tags[tag].name}{' '}
+          <span className="badge badge-light">{tags[tag].count}</span>
+        </Link>
+      ))}
+    </>
+  );
+
+  return (
+    <div className="container my-3 justify-content-center">
+      <h1 className="text-primary">Tags</h1>
+      <ul className="my-xl-4">{renderAllTags()}</ul>
+    </div>
+  );
+}
+
+export default BlogTagsListPage;

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

@@ -5,4 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default () => {};
+import React from 'react';
+import BlogPostItem from '@theme/BlogPostItem';
+import Link from '@docusaurus/Link';
+
+function pluralize(count, word) {
+  return count > 1 ? `${word}s` : word;
+}
+
+function BlogTagsPostPage(props) {
+  const {metadata, items} = props;
+  const {allTagsPath, name, count} = metadata;
+
+  return (
+    <div className="container-fluid my-4">
+      <header className="text-center">
+        <h1>
+          {count} {pluralize(count, 'post')} tagged with &quot;{name}
+          &quot;
+        </h1>
+        <Link href={allTagsPath}>View All Tags</Link>
+      </header>
+
+      <div className="my-4">
+        {items.map(({content: BlogPostContent}) => (
+          <div
+            key={BlogPostContent.metadata.permalink}
+            className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
+            <BlogPostItem
+              key={BlogPostContent.metadata.permalink}
+              frontMatter={BlogPostContent.frontMatter}
+              metadata={BlogPostContent.metadata}
+              truncated>
+              <BlogPostContent />
+            </BlogPostItem>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default BlogTagsPostPage;

packages/docusaurus/src/client/exports/Link.tsx

@@ -20,7 +20,7 @@ declare global {
 interface Props {
   readonly isNavLink?: boolean;
   readonly to?: string;
-  readonly href: string
+  readonly href: string;
 }
 
 function Link({isNavLink, ...props}: Props) {