support for multi-authors in about section

app/[locale]/Featured.tsx

@@ -26,7 +26,7 @@ export default async function Featured({ posts, params: { locale } }: HomeProps)
   const { t } = await createTranslation(locale, 'home')
   return (
     <>
-      <div className="divide-y divide-gray-200 dark:divide-gray-700 border-b border-gray-200 dark:border-gray-700">
+      <div className="divide-y divide-gray-200 border-b border-gray-200 dark:divide-gray-700 dark:border-gray-700">
         <div className="space-y-2 pb-8 pt-6 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-blue-400 dark:text-blue-400 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
             {t('featured')}

app/[locale]/[authors]/page.tsx

@@ -19,7 +19,7 @@ export async function generateMetadata({ params: { locale } }: AboutProps): Prom
   })
 }
 
-export default async function Page({ params: {authors, locale } }: AboutProps) {
+export default async function Page({ params: { authors, locale } }: AboutProps) {
   const author = allAuthors.find(
     (a) => a.slug.includes(authors) && a.language === locale
   ) as Authors

app/[locale]/about/page.tsx

@@ -20,9 +20,7 @@ export async function generateMetadata({ params: { locale } }: AboutProps): Prom
 }
 
 export default async function Page({ params: { locale } }: AboutProps) {
-  const author = allAuthors.find(
-    (a) => a.default === true && a.language === locale
-  ) as Authors
+  const author = allAuthors.find((a) => a.default === true && a.language === locale) as Authors
   const mainContent = coreContent(author)
 
   return (

app/[locale]/i18n/locales/en/common.json

@@ -25,4 +25,4 @@
   "telegramshare": "telegram share button",
   "pinterestshare": "pinterest share button",
   "threadsshare": "threadsshare button"
-}
+}

app/[locale]/i18n/locales/en/home.json

@@ -24,4 +24,4 @@
   "draft": "Under Construction",
   "noposts": "No posts found",
   "poststagged": "View posts tagged"
-}
+}

app/[locale]/i18n/locales/fr/common.json

@@ -25,4 +25,4 @@
   "telegramshare": "bouton de partage telegram",
   "pinterestshare": "bouton de partage pinterest",
   "threadsshare": "bouton de partage threads"
-}
+}

app/[locale]/localeid-map.json

@@ -47,4 +47,4 @@
     "fr": "articles/route-imbriquee/presentation-publications-en-plusieurs-parties-routage-imbrique",
     "en": "posts/nested-route/introducing-multi-part-posts-with-nested-routing"
   }
-}
+}

app/[locale]/page.tsx

@@ -11,8 +11,12 @@ type HomeProps = {
 export default async function Page({ params: { locale } }: HomeProps) {
   const sortedPosts = sortPosts(allBlogs)
   const posts = allCoreContent(sortedPosts)
-  return <>
-{posts.filter(post => post.language === locale).some(post => post.featured) && <Featured posts={posts} params={{ locale }} />}
-  <Main posts={posts} params={{ locale: locale }} />
-  </>
+  return (
+    <>
+      {posts.filter((post) => post.language === locale).some((post) => post.featured) && (
+        <Featured posts={posts} params={{ locale }} />
+      )}
+      <Main posts={posts} params={{ locale: locale }} />
+    </>
+  )
 }

app/[locale]/tag-data.json

@@ -1 +1,43 @@
-{"en":{"markdown":1,"code":1,"features":2,"next-js":7,"math":1,"ols":1,"github":1,"guide":6,"holiday":1,"canada":1,"images":1,"tailwind":4,"i18n":1,"hello":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1},"fr":{"next-js":7,"math":1,"ols":1,"markdown":1,"code":1,"fonctionnalites":4,"github":1,"guide":6,"tailwind":4,"i18n":1,"ecriture":1,"livre":1,"reflexion":1,"salut":1,"vacance":1,"canada":1,"images":1,"multi-auteurs":1}}
+{
+  "en": {
+    "markdown": 1,
+    "code": 1,
+    "features": 2,
+    "next-js": 7,
+    "math": 1,
+    "ols": 1,
+    "github": 1,
+    "guide": 6,
+    "holiday": 1,
+    "canada": 1,
+    "images": 1,
+    "tailwind": 4,
+    "i18n": 1,
+    "hello": 1,
+    "feature": 2,
+    "writings": 1,
+    "book": 1,
+    "reflection": 1,
+    "multi-author": 1
+  },
+  "fr": {
+    "next-js": 7,
+    "math": 1,
+    "ols": 1,
+    "markdown": 1,
+    "code": 1,
+    "fonctionnalites": 4,
+    "github": 1,
+    "guide": 6,
+    "tailwind": 4,
+    "i18n": 1,
+    "ecriture": 1,
+    "livre": 1,
+    "reflexion": 1,
+    "salut": 1,
+    "vacance": 1,
+    "canada": 1,
+    "images": 1,
+    "multi-auteurs": 1
+  }
+}

components/AuthorsMenu.tsx

@@ -11,75 +11,88 @@ import { LocaleTypes } from 'app/[locale]/i18n/settings'
 import { useTranslation } from 'app/[locale]/i18n/client'
 
 type AuthorsMenuProps = {
-    className : string
+  className: string
 }
 
-const AuthorsMenu = ({className}: AuthorsMenuProps) => {
-    const locale = useParams()?.locale as LocaleTypes
-    const { t } = useTranslation(locale, '')
-    const authors = allAuthors
+const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
+  const locale = useParams()?.locale as LocaleTypes
+  const { t } = useTranslation(locale, '')
+  const authors = allAuthors
     .filter((a) => a.language === locale)
-    .sort((a, b) => (a.default === b.default ? 0 : a.default ? -1 : 1)) as Authors[];
+    .sort((a, b) => (a.default === b.default ? 0 : a.default ? -1 : 1)) as Authors[]
 
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false)
 
-    const toggleMenu = () => {
-        setIsOpen(!isOpen)
-      }
-
-      const closeMenu = () => {
-        setIsOpen(false)
-      }
-
-      const menubarRef = useRef<HTMLDivElement>(null)
-      useOuterClick(menubarRef, closeMenu)
+  const toggleMenu = () => {
+    setIsOpen(!isOpen)
+  }
 
-    return (
-        <div ref={menubarRef} className={className}>
-            <Menu as="div" className="relative leading-5 inline-block text-left">
-                <div>
-                    <Menu.Button onClick={toggleMenu}>{t('about')}</Menu.Button>
-                </div>
-                <Transition
-                    as={Fragment}
-                    show={isOpen}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                >
-                    <Menu.Items className="absolute right-0 z-50 mt-2 w-40 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800" as="div">
-                        <RadioGroup>
-                            <div className="p-1">
-                                {authors.map((author) => {
-                                    const { name, avatar, language, slug } = author;
-                                    if (language === locale) {
-                                        return (
-                                            <RadioGroup.Option key={name} value={name} >
-                                                <Menu.Item>
-                                                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                                                        <div className="mr-2">
-                                                            <Image className='rounded-full' src={avatar?? ''} alt='' width={25} height={25}/>
-                                                        </div>
-                                                        <Link href={`/${slug}`} onClick={closeMenu} className='hover:text-primary-500 dark:hover:text-primary-500'>
-                                                         {name}
-                                                        </Link>
-                                                    </button>
-                                                </Menu.Item>
-                                            </RadioGroup.Option>
-                                        );
-                                    }
-                                    return null; // Return null if the language doesn't match the locale
-                                })}
-                            </div>
-                        </RadioGroup>
-                    </Menu.Items>
-                </Transition>
-            </Menu>
+  const closeMenu = () => {
+    setIsOpen(false)
+  }
+
+  const menubarRef = useRef<HTMLDivElement>(null)
+  useOuterClick(menubarRef, closeMenu)
+
+  return (
+    <div ref={menubarRef} className={className}>
+      <Menu as="div" className="relative inline-block text-left leading-5">
+        <div>
+          <Menu.Button onClick={toggleMenu}>{t('about')}</Menu.Button>
         </div>
-    )
+        <Transition
+          as={Fragment}
+          show={isOpen}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            className="absolute right-0 z-50 mt-2 w-40 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
+            as="div"
+          >
+            <RadioGroup>
+              <div className="p-1">
+                {authors.map((author) => {
+                  const { name, avatar, language, slug } = author
+                  if (language === locale) {
+                    return (
+                      <RadioGroup.Option key={name} value={name}>
+                        <Menu.Item>
+                          <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
+                            <div className="mr-2">
+                              <Image
+                                className="rounded-full"
+                                src={avatar ?? ''}
+                                alt=""
+                                width={25}
+                                height={25}
+                              />
+                            </div>
+                            <Link
+                              href={`/${slug}`}
+                              onClick={closeMenu}
+                              className="hover:text-primary-500 dark:hover:text-primary-500"
+                            >
+                              {name}
+                            </Link>
+                          </button>
+                        </Menu.Item>
+                      </RadioGroup.Option>
+                    )
+                  }
+                  return null // Return null if the language doesn't match the locale
+                })}
+              </div>
+            </RadioGroup>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  )
 }
 
 export default AuthorsMenu

components/Header.tsx

@@ -40,12 +40,12 @@ const Header = () => {
         </div>
         <div className="flex items-center space-x-4 leading-5 sm:space-x-6">
           {headerNavLinks
-              .filter((link) => {
-                if (siteMetadata.multiauthors) {
-                    return link.href !== '/' && link.title !== 'About';
-                } else {
-                    return link.href !== '/';
-                }
+            .filter((link) => {
+              if (siteMetadata.multiauthors) {
+                return link.href !== '/' && link.title !== 'About'
+              } else {
+                return link.href !== '/'
+              }
             })
             .map((link) => {
               const isSelected = pathname.includes(link.href as string)
@@ -61,7 +61,7 @@ const Header = () => {
                 </Link>
               )
             })}
-           {(siteMetadata.multiauthors && <AuthorsMenu className='hidden sm:block'/>)}
+          {siteMetadata.multiauthors && <AuthorsMenu className="hidden sm:block" />}
           <SearchButton />
           <ThemeSwitch />
           <LangSwitch />

components/MobileNav.tsx

@@ -15,7 +15,7 @@ const MobileNav = () => {
   const { t } = useTranslation(locale, '')
   const authors = allAuthors
     .filter((a) => a.language === locale)
-    .sort((a, b) => (a.default === b.default ? 0 : a.default ? -1 : 1)) as Authors[];
+    .sort((a, b) => (a.default === b.default ? 0 : a.default ? -1 : 1)) as Authors[]
 
   const [navShow, setNavShow] = useState(false)
 
@@ -69,46 +69,61 @@ const MobileNav = () => {
           </button>
         </div>
         <nav className="fixed mt-8 h-full">
-          {headerNavLinks 
+          {headerNavLinks
             .filter((link) => {
-                if (siteMetadata.multiauthors) {
-                    return link.title !== 'About';
-                } else {
-                    return true ;
-                }
+              if (siteMetadata.multiauthors) {
+                return link.title !== 'About'
+              } else {
+                return true
+              }
             })
             .map((link) => (
-            <div key={link.title} className="px-12 py-4">
-              <Link
-                href={`/${locale}${link.href}`}
-                className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
-                onClick={onToggleNav}
-              >
-                {t(`${link.title.toLowerCase()}`)}
-              </Link>
-            </div>
-          ))}
-          {siteMetadata.multiauthors &&  
+              <div key={link.title} className="px-12 py-4">
+                <Link
+                  href={`/${locale}${link.href}`}
+                  className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+                  onClick={onToggleNav}
+                >
+                  {t(`${link.title.toLowerCase()}`)}
+                </Link>
+              </div>
+            ))}
+          {siteMetadata.multiauthors && (
             <>
-            <div className="px-12 py-4 text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{t('about')}:</div>
+              <div className="px-12 py-4 text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100">
+                {t('about')}:
+              </div>
               {authors.map((author) => {
-                const { name, avatar, language, slug } = author;
+                const { name, avatar, language, slug } = author
                 if (language === locale) {
-                  return ( 
-                    <button key={name} className="group flex w-full items-center rounded-md px-12 py-4 text-sm">
+                  return (
+                    <button
+                      key={name}
+                      className="group flex w-full items-center rounded-md px-12 py-4 text-sm"
+                    >
                       <div className="mr-2">
-                        <Image className='rounded-full' src={avatar ?? ''} alt='' width={25} height={25}/>
+                        <Image
+                          className="rounded-full"
+                          src={avatar ?? ''}
+                          alt=""
+                          width={25}
+                          height={25}
+                        />
                       </div>
-                      <Link href={`/${slug}`} onClick={onToggleNav} className="text-xl font-bold tracking-widest text-gray-900 dark:text-gray-100">
+                      <Link
+                        href={`/${slug}`}
+                        onClick={onToggleNav}
+                        className="text-xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+                      >
                         {name}
                       </Link>
                     </button>
-                  );
+                  )
                 }
-                return null;
+                return null
               })}
             </>
-          }
+          )}
         </nav>
       </div>
     </>