save change for tags

src/theme/BlogListPage/ListItem/index.js

@@ -10,7 +10,6 @@ export const ListItem = ({ content, belowFold }) => {
   const tag = tags[0] ?? {};
   const imageUrl = frontMatter.coverImage ?? '/img/blog_placeholder.png';
   const postUrl = ensureTrailingSlash(permalink);
-
   return (
     <div className={styles.root}>
       <div className={styles.imageBox}>
@@ -37,8 +36,8 @@ export const ListItem = ({ content, belowFold }) => {
           <Link to={postUrl}>{title}</Link>
         </h2>
         <div className={styles.authors}>
-          by {authors.map(author => (
-            <a href={author.url} className={styles.author} key={author.key}>{author.name}</a>
+          by {authors.map((author, i) => (
+            <a href={author.url} className={styles.author} key={i}>{author.name}</a>
           ))} on {formattedDate}
         </div>
       </div>

src/theme/BlogListPage/index.js

@@ -14,7 +14,8 @@ import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 // import BlogPostItems from '@theme/BlogPostItems';
 import { ListItem } from './ListItem';
-import { Chips } from './Chips'
+import { Chips } from './Chips';
+import { tagNames } from '@site/tagNames.js';
 import styles from './styles.module.css';
 
 function BlogListPageMetadata(props) {
@@ -39,14 +40,7 @@ function BlogListPageContent(props) {
   const {items, sidebar} = props;
   // No official way to get all tags right now: https://github.com/facebook/docusaurus/discussions/5856
   // unless show all posts without pagination, so added all tag list link
-  const popularItemsNames = [
-    'actions',
-    'release',
-    'announcement',
-    'docs',
-    'feature',
-    'tutorial',
-  ].map((name) => {
+  const tags = tagNames.map((name) => {
     return {
       name,
       permalink: `/tags/${name.replace(/ /g, '-')}`,
@@ -59,17 +53,14 @@ function BlogListPageContent(props) {
     // </BlogLayout>
     <Layout title='Blog'>
       <main className={styles.root}>
-        <h2 className={styles.title}>Popular Tags</h2>
+        <h2 className={styles.title}>Filter by Tag</h2>
         <div className={styles.categories}>
           <Chips
             activeChip={metadata.permalink}
-            items={popularItemsNames}
+            items={tags}
           />
         </div>
-        <div className={styles.links}>
-          <a href='/'>All posts</a>
-          <a href='/tags'>All tag list</a>
-        </div>
+        <a className={styles.link} href='/'>Show all posts</a>
         <h2 className={styles.title}>{isTagsPage? `All "${props.tag.label}" blogs`: "Blog Posts"}</h2>
         <div className={styles.posts}>
           {items.map(({ content }, i) => (

src/theme/BlogListPage/styles.module.css

@@ -12,9 +12,8 @@
   margin-bottom: 1.5rem;
 }
 
-.links {
-  display: flex;
-  gap: 1rem;
+.link {
+  display: block;
   margin-bottom: 4rem;
 }
 
@@ -31,7 +30,7 @@
   grid-template-columns: 1fr;
   grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
   gap: var(--gap);
-  margin: 0;
+  margin-bottom: 5rem;
 }
 
 @media screen and (min-width: 576px) {

tagNames.js

@@ -0,0 +1,19 @@
+export const tagNames = [
+    'actions',
+    'announcement',
+    'backporter',
+    'deployment',
+    'docs',
+    'feature',
+    'gitea',
+    'helm-chart',
+    'jupyter',
+    'label',
+    'project',
+    'quarterly',
+    'release',
+    'rendering',
+    'tea',
+    'tutorial',
+    'ui'
+]