feat: optimize tag style

src/css/custom.scss

@@ -278,3 +278,26 @@ div[class^='announcementBar_'] {
 .gsc-comments textarea {
   background: var(--content-background-color);
 }
+
+.tag {
+  &:hover {
+    color: currentColor !important;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--ifm-color-primary);
+    visibility: hidden;
+    transition: all 0.3s linear;
+  }
+
+  &:hover::after {
+    visibility: visible;
+    width: 100%;
+  }
+}

src/theme/BlogPostGridItems/index.tsx

@@ -61,9 +61,7 @@ export default function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.El
                           label={label}
                           permalink={tagPermalink}
                           key={tagPermalink}
-                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                          // @ts-ignore
-                          className={styles.tag}
+                          className={'tag'}
                         />
                       </>
                     )

src/theme/BlogPostItem/Footer/index.tsx

@@ -12,16 +12,8 @@ import styles from './styles.module.scss'
 
 export default function BlogPostItemFooter(): JSX.Element | null {
   const { metadata, isBlogPostPage } = useBlogPost()
-  const {
-    tags,
-    title,
-    editUrl,
-    hasTruncateMarker,
-    date,
-    formattedDate,
-    readingTime,
-    authors,
-  } = metadata
+  const { tags, title, editUrl, hasTruncateMarker, date, formattedDate, readingTime, authors } =
+    metadata
 
   // A post is truncated if it's in the "list view" and it has a truncate marker
   const truncatedPost = !isBlogPostPage && hasTruncateMarker
@@ -37,7 +29,7 @@ export default function BlogPostItemFooter(): JSX.Element | null {
         <div className={styles.blogPostInfo}>
           {/* {authorsExists && (
             <>
-              <Icon icon="ri:user-fill" color="#9ca3af" />
+              <Icon icon="ri:user-line"  />
               {authors.map(a => (
                 <span key={a.url} className="blog__author">
                   <a href={a.url} className={styles.blogPostAuthor}>
@@ -49,36 +41,26 @@ export default function BlogPostItemFooter(): JSX.Element | null {
           )} */}
           {date && (
             <>
-              <Icon icon="ri:calendar-fill" color="#9ca3af" />
-              <time
-                dateTime={date}
-                className={styles.blogPostDate}
-                itemProp="datePublished"
-              >
+              <Icon icon="ri:calendar-line" />
+              <time dateTime={date} className={styles.blogPostDate} itemProp="datePublished">
                 {formattedDate}
               </time>
             </>
           )}
           {tagsExists && (
             <>
-              <Icon icon="ri:price-tag-3-fill" color="#9ca3af" />
+              <Icon icon="ri:price-tag-3-line" />
               <span className={styles.blogPostInfoTags}>
                 {tags.map(({ label, permalink: tagPermalink }) => (
-                  <Tag
-                    label={label}
-                    permalink={tagPermalink}
-                    key={tagPermalink}
-                  />
+                  <Tag label={label} permalink={tagPermalink} key={tagPermalink} />
                 ))}
               </span>
             </>
           )}
           {readingTime && (
             <>
-              <Icon icon="ri:time-fill" color="#9ca3af" />
-              <span
-                className={clsx(styles.blogPostReadTime, 'blog__readingTime')}
-              >
+              <Icon icon="ri:time-line" />
+              <span className={clsx(styles.blogPostReadTime, 'blog__readingTime')}>
                 <ReadingTime readingTime={readingTime} />
               </span>
             </>
@@ -99,17 +81,8 @@ export default function BlogPostItemFooter(): JSX.Element | null {
 
   return (
     <footer
-      className={clsx(
-        'row docusaurus-mt-lg',
-        isBlogPostPage && styles.blogPostFooterDetailsFull,
-      )}
+      className={clsx('row docusaurus-mt-lg', isBlogPostPage && styles.blogPostFooterDetailsFull)}
     >
-      {tagsExists && (
-        <div className={clsx('col', { 'col--9': truncatedPost })}>
-          <TagsListInline tags={tags} />
-        </div>
-      )}
-
       {/* {isBlogPostPage && editUrl && (
         <div className="col margin-top--sm">
           <EditThisPage editUrl={editUrl} />

src/theme/BlogPostItem/Footer/styles.module.scss

@@ -9,7 +9,7 @@
   align-items: center;
   margin-bottom: var(--ifm-spacing-m);
   gap: 4px;
-  color: #9ca3af;
+  color: var(--ifm-secondary-text-color);
 
   font-size: 0.8rem;
   font-weight: 400;
@@ -20,7 +20,7 @@
   gap: 4px;
 
   a {
-    color: #9ca3af;
+    color: var(--ifm-secondary-text-color);
   }
 
   a:hover {

src/theme/BlogPostItem/Header/Authors/index.tsx

@@ -5,10 +5,7 @@ import BlogPostItemHeaderAuthor from '@theme/BlogPostItem/Header/Author'
 import type { Props } from '@theme/BlogPostItem/Header/Authors'
 import styles from './styles.module.css'
 
-// Component responsible for the authors layout
-export default function BlogPostItemHeaderAuthors({
-  className,
-}: Props): JSX.Element | null {
+export default function BlogPostItemHeaderAuthors({ className }: Props): JSX.Element | null {
   const {
     metadata: { authors },
     assets,
@@ -21,7 +18,7 @@ export default function BlogPostItemHeaderAuthors({
   return (
     <div
       className={clsx(
-        'margin-top--md margin-bottom--sm',
+        'margin-top--sm margin-bottom--sm',
         imageOnly ? styles.imageOnlyAuthorRow : 'row',
         className,
       )}

src/theme/BlogPostItem/Header/Info/index.tsx

@@ -4,8 +4,11 @@ import { translate } from '@docusaurus/Translate'
 import { usePluralForm } from '@docusaurus/theme-common'
 import { useBlogPost } from '@docusaurus/theme-common/internal'
 import type { Props } from '@theme/BlogPostItem/Header/Info'
+import TagsListInline from '@theme/TagsListInline'
 
 import styles from './styles.module.css'
+import Tag from '@site/src/theme/Tag'
+import { Icon } from '@iconify/react'
 
 // Very simple pluralization: probably good enough for now
 function useReadingTimePlural() {
@@ -32,38 +35,51 @@ export function ReadingTime({ readingTime }: { readingTime: number }) {
   return <>{readingTimePlural(readingTime)}</>
 }
 
-function Date({
-  date,
-  formattedDate,
-}: {
-  date: string
-  formattedDate: string
-}) {
+function Date({ date, formattedDate }: { date: string; formattedDate: string }) {
   return (
     <time dateTime={date} itemProp="datePublished">
       {formattedDate}
     </time>
   )
 }
 
-function Spacer() {
-  return <>{' · '}</>
-}
-
-export default function BlogPostItemHeaderInfo({
-  className,
-}: Props): JSX.Element {
+export default function BlogPostItemHeaderInfo({ className }: Props): JSX.Element {
   const { metadata } = useBlogPost()
-  const { date, formattedDate, readingTime } = metadata
+  const { date, tags, formattedDate, readingTime } = metadata
+
+  const tagsExists = tags.length > 0
 
   return (
-    <div className={clsx(styles.container, 'margin-vert--md', className)}>
-      <Date date={date} formattedDate={formattedDate} />
+    <div className={clsx(styles.container, 'margin-vert--sm', className)}>
+      <div className={styles.date}>
+        <Icon icon="ri:calendar-line" />
+        <Date date={date} formattedDate={formattedDate} />
+      </div>
+      {tagsExists && (
+        <div className={styles.tagInfo}>
+          <Icon icon="ri:price-tag-3-line" />
+          <div className={styles.tagList}>
+            {tags.slice(0, 2).map(({ label, permalink: tagPermalink }, index) => {
+              return (
+                <>
+                  {index !== 0 && '/'}
+                  <Tag
+                    label={label}
+                    permalink={tagPermalink}
+                    key={tagPermalink}
+                    className={'tag'}
+                  />
+                </>
+              )
+            })}
+          </div>
+        </div>
+      )}
       {typeof readingTime !== 'undefined' && (
-        <>
-          <Spacer />
+        <div className={styles.date}>
+          <Icon icon="ri:time-line" />
           <ReadingTime readingTime={readingTime} />
-        </>
+        </div>
       )}
     </div>
   )

src/theme/BlogPostItem/Header/Info/styles.module.css

@@ -1,3 +1,39 @@
 .container {
-  font-size: 0.9rem;
+  display: inline-flex;
+  gap: 0.5rem;
+  font-size: 0.95rem;
+}
+
+.date {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.read {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.tagInfo {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.tagList {
+  display: inline-flex;
+  align-items: center;
+}
+
+.tagList a {
+  padding: 1px 2px;
+  color: var(--ifm-text-color);
+
+  border: 0 !important;
+}
+
+.tagList a:hover {
+  color: var(--ifm-color-primary);
 }

src/theme/Tag/index.tsx

@@ -3,13 +3,18 @@ import clsx from 'clsx'
 import Link from '@docusaurus/Link'
 import type { Props } from '@theme/Tag'
 
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
-export default function Tag({ permalink, label, count }: Props): JSX.Element {
+export default function Tag({
+  permalink,
+  label,
+  count,
+  className,
+}: Props & { className?: string }): JSX.Element {
   return (
     <Link
       href={permalink}
-      className={clsx(styles.tag, count ? styles.tagWithCount : styles.tagRegular)}
+      className={clsx(styles.tag, count ? styles.tagWithCount : styles.tagRegular, className)}
     >
       {label}
       {count && <span>{count}</span>}

src/theme/Tag/styles.module.css → src/theme/Tag/styles.module.scss

@@ -1,22 +1,16 @@
-/**
- * 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.
- */
-
 :root {
   --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
 }
 
 .tag {
+  position: relative;
   border: 1px solid var(--docusaurus-tag-list-border);
   transition: border var(--ifm-transition-fast);
-}
 
-.tag:hover {
-  --docusaurus-tag-list-border: var(--ifm-link-color);
-  text-decoration: none;
+  &:hover {
+    --docusaurus-tag-list-border: var(--ifm-link-color);
+    text-decoration: none;
+  }
 }
 
 .tagRegular {