From dd2c19050c7415de2fd1e46fff258c67b3c8ae76 Mon Sep 17 00:00:00 2001
From: Zixuan Chen <czxvvv@foxmail.com>
Date: Sun, 28 Apr 2024 21:33:36 +0200
Subject: [PATCH] fix: authors in blog page

---
 app/about/TypedBio.tsx                        | 12 ++--
 app/blog/[...slug]/page.tsx                   | 12 ++--
 .../notes/how-to-add-fonts-in-tailwin.mdx     | 10 +--
 layouts/PostLayout.tsx                        | 68 ++++++++++---------
 4 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/app/about/TypedBio.tsx b/app/about/TypedBio.tsx
index b741190..56030e7 100644
--- a/app/about/TypedBio.tsx
+++ b/app/about/TypedBio.tsx
@@ -25,23 +25,23 @@ const TypedBios = () => {
     <div>
       <span>👋 </span>
       <ul id="bios" className="hidden">
-        <li>
+        <li key="1">
           {t('typed.Iam')} {t('typed.alias.1')}{' '}
           <b className="text-primary-300">{t('typed.alias.2')}</b> {t('typed.alias.3')}.
         </li>
-        <li>
+        <li key="2">
           {t('typed.Iam-a')} <b className="text-primary-300">{t('typed.swe')}</b>.
         </li>
-        <li>
+        <li key="3">
           {t('typed.Iam-a')} <b className="text-primary-300">{t('typed.mle')}</b>.
         </li>
-        <li>
+        <li key="4">
           {t('typed.Iam-a')} <b className="text-primary-300">{t('typed.gamer')}</b>.
         </li>
-        <li>
+        <li key="5">
           {t('typed.Iam-a')} <b className="text-primary-300">{t('typed.anime')}</b>.
         </li>
-        <li>
+        <li key="6">
           {t('typed.Iam-a')} <b className="text-primary-300">{t('typed.pet1')}</b>
           {t('typed.pet2')}.
         </li>
diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx
index d9efada..1ba1b9c 100644
--- a/app/blog/[...slug]/page.tsx
+++ b/app/blog/[...slug]/page.tsx
@@ -30,7 +30,7 @@ export async function generateMetadata({
   const post = allBlogs.find((p) => p.slug === slug)
   const authorList = post?.authors || ['default']
   const authorDetails = authorList.map((author) => {
-    const authorResults = allAuthors.find((p) => p.slug === author)
+    const authorResults = allAuthors.find((p) => p.slug.endsWith(author))
     return coreContent(authorResults as Authors)
   })
   if (!post) {
@@ -93,10 +93,12 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
   const next = sortedCoreContents[postIndex - 1]
   const post = allBlogs.find((p) => p.slug === slug) as Blog
   const authorList = post?.authors || ['default']
-  const authorDetails = authorList.map((author) => {
-    const authorResults = allAuthors.find((p) => p.slug === author)
-    return coreContent(authorResults as Authors)
-  })
+  const authorDetails = authorList
+    .map((author) => {
+      const authorResults = allAuthors.filter((p) => p.slug.endsWith(author))
+      return authorResults.map((authorResult) => coreContent(authorResult as Authors))
+    })
+    .flat()
   const mainContent = coreContent(post)
   const jsonLd = post.structuredData
   jsonLd['author'] = authorDetails.map((author) => {
diff --git a/data/blog/notes/how-to-add-fonts-in-tailwin.mdx b/data/blog/notes/how-to-add-fonts-in-tailwin.mdx
index 849557e..1321c23 100644
--- a/data/blog/notes/how-to-add-fonts-in-tailwin.mdx
+++ b/data/blog/notes/how-to-add-fonts-in-tailwin.mdx
@@ -83,10 +83,10 @@ The three dots in `...fontFamily.sans` expand the array of sans font family to o
 4. Now, you can use `font-pangolin` as a className in any textual element.
 
 ```
-<p className="font-pangolin"> Hello </p>
+<span className="font-pangolin"> Hello </span>
 ```
 
-<p className="font-sans"> Hello </p>
+<span className="font-sans"> Hello </span>
 
 # Local font
 
@@ -110,11 +110,11 @@ The three dots in `...fontFamily.sans` expand the array of sans font family to o
 4. use it as a className
 
 ```
-<p className="font-hsr"> aaron abduct accidental adjacent afghan after aint anaheim and anybody although allotted ambidextrous amend announced aqua arrangement ask aspin ate attitude authorised avery award axolotl ello </p>
+<span className="font-hsr"> aaron abduct accidental adjacent afghan after aint anaheim and anybody although allotted ambidextrous amend announced aqua arrangement ask aspin ate attitude authorised avery award axolotl ello </span>
 ```
 
-<p className="font-starrail">
+<span className="font-starrail">
   {' '}
   aaron abduct accidental adjacent afghan after aint anaheim and anybody although allotted ambidextrous
   amend announced aqua arrangement ask aspin ate attitude authorised avery award axolotl ello{' '}
-</p>
+</span>
diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx
index ed0b80f..df2b0bf 100644
--- a/layouts/PostLayout.tsx
+++ b/layouts/PostLayout.tsx
@@ -1,4 +1,5 @@
-import { ReactNode } from 'react'
+'use client'
+import { ReactNode, useContext } from 'react'
 import { CoreContent } from 'pliny/utils/contentlayer'
 import type { Blog, Authors } from 'contentlayer/generated'
 import Comments from '@/components/Comments'
@@ -9,6 +10,7 @@ import Image from '@/components/Image'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import ScrollTopAndComment from '@/components/ScrollTopAndComment'
+import { LanguageContext } from 'utils/locale'
 
 const editUrl = (path) => `${siteMetadata.siteRepo}/blob/main/data/${path}`
 const discussUrl = (path) =>
@@ -33,6 +35,8 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
   const { filePath, path, slug, date, title, tags } = content
   const basePath = path.split('/')[0]
 
+  const { currentLang } = useContext(LanguageContext)
+
   return (
     <SectionContainer>
       <ScrollTopAndComment />
@@ -60,36 +64,38 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
               <dt className="sr-only">Authors</dt>
               <dd>
                 <ul className="flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
-                  {authorDetails.map((author) => (
-                    <li className="flex items-center space-x-2" key={author.name}>
-                      {author.avatar && (
-                        <Image
-                          src={author.avatar}
-                          width={38}
-                          height={38}
-                          alt="avatar"
-                          className="h-10 w-10 rounded-full"
-                        />
-                      )}
-                      <dl className="whitespace-nowrap text-sm font-medium leading-5">
-                        <dt className="sr-only">Name</dt>
-                        <dd className="text-gray-900 dark:text-gray-100">{author.name}</dd>
-                        <dt className="sr-only">Twitter</dt>
-                        <dd>
-                          {author.twitter && (
-                            <Link
-                              href={author.twitter}
-                              className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                            >
-                              {author.twitter
-                                .replace('https://twitter.com/', '@')
-                                .replace('https://x.com/', '@')}
-                            </Link>
-                          )}
-                        </dd>
-                      </dl>
-                    </li>
-                  ))}
+                  {authorDetails
+                    .filter((author) => author.slug.startsWith(currentLang))
+                    .map((author) => (
+                      <li className="flex items-center space-x-2" key={author.slug}>
+                        {author.avatar && (
+                          <Image
+                            src={author.avatar}
+                            width={38}
+                            height={38}
+                            alt="avatar"
+                            className="h-10 w-10 rounded-full"
+                          />
+                        )}
+                        <dl className="whitespace-nowrap text-sm font-medium leading-5">
+                          <dt className="sr-only">Name</dt>
+                          <dd className="text-gray-900 dark:text-gray-100">{author.name}</dd>
+                          <dt className="sr-only">Twitter</dt>
+                          <dd>
+                            {author.twitter && (
+                              <Link
+                                href={author.twitter}
+                                className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                              >
+                                {author.twitter
+                                  .replace('https://twitter.com/', '@')
+                                  .replace('https://x.com/', '@')}
+                              </Link>
+                            )}
+                          </dd>
+                        </dl>
+                      </li>
+                    ))}
                 </ul>
               </dd>
             </dl>