add popular tags

src/theme/BlogListPage/Chip/styles.module.css

@@ -17,6 +17,11 @@
   border-color: var(--color);
 }
 
+.skinPrimary {
+  color: var(--color);
+  background: var(--theme-card-bg-color);
+}
+
 .skinSecondary {
   color: var(--color);
   background: #33333d;

src/theme/BlogListPage/Chips/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Chip } from '../Chip';
+import styles from './styles.module.css';
+import { ensureTrailingSlash } from '@site/src/utils/ensureTrailingSlash.js';
+
+export const Chips = ({ items, activeChip }) => (
+  <div className={styles.root}>
+    {items.map(({ name, permalink }) => (
+      <Chip
+        key={permalink}
+        className={styles.chip}
+        label={name}
+        permalink={ensureTrailingSlash(permalink)}
+        active={activeChip === permalink}
+      />
+    ))}
+  </div>
+)

src/theme/BlogListPage/Chips/styles.module.css

@@ -0,0 +1,11 @@
+.root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 0.5rem;
+  align-items: center;
+}
+
+.linkToTags,
+.linkToTags:hover {
+  color: var(--palette-pink);
+}

src/theme/BlogListPage/ListItem/index.js

@@ -2,9 +2,7 @@ import React from 'react';
 import styles from './styles.module.css';
 import Link from '@docusaurus/Link';
 import { Chip } from '../Chip';
-import isInternalUrl from "@docusaurus/isInternalUrl";
-
-const ensureTrailingSlash = url => isInternalUrl(url) && !url.endsWith("/") ? `${url}/` : url;
+import { ensureTrailingSlash } from '@site/src/utils/ensureTrailingSlash.js';
 
 export const ListItem = ({ content, belowFold }) => {
   const {metadata, frontMatter} = content;

src/theme/BlogListPage/index.js

@@ -14,6 +14,7 @@ import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 // import BlogPostItems from '@theme/BlogPostItems';
 import { ListItem } from './ListItem';
+import { Chips } from './Chips'
 import styles from './styles.module.css';
 
 function BlogListPageMetadata(props) {
@@ -36,6 +37,19 @@ function BlogListPageContent(props) {
   const isTagsPage = props.tag !== undefined;
   const metadata = isTagsPage ? props.listMetadata: props.metadata;
   const {items, sidebar} = props;
+  const popularItemsNames = [
+    'actions',
+    'release',
+    'announcement',
+    'docs',
+    'feature',
+    'tutorial',
+  ].map((name) => {
+    return {
+      name,
+      permalink: `/tags/${name.replace(/ /g, '-')}`,
+    }
+  })
   return (
     // <BlogLayout sidebar={sidebar}>
     //   <BlogPostItems items={items} />
@@ -43,7 +57,18 @@ function BlogListPageContent(props) {
     // </BlogLayout>
     <Layout title='Blog'>
       <main className={styles.root}>
-        {isTagsPage && <div className={styles.tagTitle}>Blogs that contain tag "{props.tag.label}"</div>}
+        <h2 className={styles.title}>Popular Tags</h2>
+        <div className={styles.categories}>
+          <Chips
+            activeChip={metadata.permalink}
+            items={popularItemsNames}
+          />
+        </div>
+        <div className={styles.links}>
+          <a href='/'>All posts</a>
+          <a href='/tags'>All tag list</a>
+        </div>
+        <h2 className={styles.title}>{isTagsPage? `All "${props.tag.label}" blogs`: "Blog Posts"}</h2>
         <div className={styles.posts}>
           {items.map(({ content }, i) => (
             <ListItem

src/theme/BlogListPage/styles.module.css

@@ -2,12 +2,27 @@
   max-width: var(--ifm-container-width);
   margin: 0 auto 5rem auto;
   padding: 0 1rem;
+  margin-top: 5rem;
+  --marginTop: 2rem;
 }
 
-.tagTitle {
+.title {
   font-size: var(--ifm-h2-font-size);
   line-height: var(--ifm-h2-font-size);
-  margin-top: 1.5rem;
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+.links {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 4rem;
+}
+
+.categories {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 .posts {
@@ -17,11 +32,7 @@
   grid-template-columns: 1fr;
   grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
   gap: var(--gap);
-  margin: 2rem 0;
-}
-
-.tagTitle + .posts {
-  margin-top: 1.5rem;
+  margin: 0;
 }
 
 @media screen and (min-width: 576px) {
@@ -35,6 +46,5 @@
   .posts {
     --cols: 3;
     --gap: 4rem 2rem;
-    margin: 4.5rem 0;
   }
 }

src/utils/ensureTrailingSlash.js

@@ -0,0 +1,3 @@
+import isInternalUrl from "@docusaurus/isInternalUrl";
+
+export const ensureTrailingSlash = url => isInternalUrl(url) && !url.endsWith("/") ? `${url}/` : url;