feat(layouts): add empty placeholder

src/app/[locale]/articles/[...args]/page.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/config/content-config'
 import { isMobileDevice } from '@/config/middleware-config'
 import { type ListPageProps, getList, getListMetadata } from '@/contents'
+import { Empty } from '@/components/layouts/empty'
 import { Pagination } from '@/components/layouts/pagination'
 import { CategoryLinks } from '@/components/layouts/category-links'
 import { PublishedBooks } from '@/components/sidebar/published-books'
@@ -80,7 +81,10 @@ export default async function ArticlesPage({ params }: ListPageProps) {
 
   const isMobile = isMobileDevice()
 
-  const { items, page, lastPage, category } = await getList(folder, params)
+  const { items, page, lastPage, category, isEmpty } = await getList(
+    folder,
+    params,
+  )
 
   return (
     <LayoutMain className="sm:flex-row justify-between gap-16">
@@ -92,15 +96,19 @@ export default async function ArticlesPage({ params }: ListPageProps) {
           categories={articleCategories}
         />
 
-        <ul className="flex flex-col gap-12 w-full mb-12">
-          {items.map((i) => (
-            <ArticleCard
-              key={i.metadata.title}
-              slug={i.slug}
-              metadata={i.metadata}
-            />
-          ))}
-        </ul>
+        {isEmpty ? (
+          <Empty locale={params.locale} />
+        ) : (
+          <ul className="flex flex-col gap-12 w-full mb-12">
+            {items.map((i) => (
+              <ArticleCard
+                key={i.metadata.title}
+                slug={i.slug}
+                metadata={i.metadata}
+              />
+            ))}
+          </ul>
+        )}
 
         <Pagination
           slug="articles"

src/app/[locale]/cookbooks/[...args]/page.tsx

@@ -12,6 +12,7 @@ import {
 } from '@/config/content-config'
 import { isMobileDevice } from '@/config/middleware-config'
 import { type ListPageProps, getList, getListMetadata } from '@/contents'
+import { Empty } from '@/components/layouts/empty'
 import { Pagination } from '@/components/layouts/pagination'
 import { CategoryLinks } from '@/components/layouts/category-links'
 import { TimeDisplay } from '@/components/shared/time-display'
@@ -74,7 +75,10 @@ export default async function CookbooksPage({ params }: CookbooksPageProps) {
 
   const isMobile = isMobileDevice()
 
-  const { items, page, lastPage, category } = await getList(folder, params)
+  const { items, page, lastPage, category, isEmpty } = await getList(
+    folder,
+    params,
+  )
 
   return (
     <LayoutMain className="gap-8">
@@ -88,15 +92,19 @@ export default async function CookbooksPage({ params }: CookbooksPageProps) {
         collapsibleTitle={categoryGroupTitleConfig.cookbooks[params.locale]}
       />
 
-      <ul className="grid md:grid-cols-5 grid-cols-1 col-auto row-auto gap-8 mb-4 md:mb-12">
-        {items.map((i) => (
-          <ArticleCard
-            key={i.metadata.title}
-            slug={i.slug}
-            metadata={i.metadata}
-          />
-        ))}
-      </ul>
+      {isEmpty ? (
+        <Empty locale={params.locale} />
+      ) : (
+        <ul className="grid md:grid-cols-5 grid-cols-1 col-auto row-auto gap-8 mb-4 md:mb-12">
+          {items.map((i) => (
+            <ArticleCard
+              key={i.metadata.title}
+              slug={i.slug}
+              metadata={i.metadata}
+            />
+          ))}
+        </ul>
+      )}
 
       <Pagination
         slug="cookbooks"

src/components/layouts/empty.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import Image from 'next/image'
+import { getTranslations } from 'next-intl/server'
+import { Paragraph } from 'blackwork'
+import { type LocalePageParams } from '@/config/locale-config'
+import { isMobileDevice } from '@/config/middleware-config'
+import { cn } from '@/utils'
+
+export const Empty = async ({ locale }: LocalePageParams) => {
+  const isMobile = isMobileDevice()
+
+  const t = await getTranslations({
+    locale,
+    namespace: 'errorConfig.empty',
+  })
+
+  const avatarCls = cn(
+    'flex flex-shrink-0',
+    'relative rounded-full overflow-hidden',
+    'border-4 border-solid border-black dark:border-white',
+    'rounded-tl-[43%] rounded-tr-[93%] rounded-bl-[78%] rounded-br-[85%]',
+    'hover:rounded-tl-[93%] hover:rounded-tr-[33%] hover:rounded-bl-[98%] hover:rounded-br-[95%]',
+    'hover:rotate',
+    'transition-all duration-500',
+    isMobile ? 'w-48 h-48' : 'w-60 h-60',
+  )
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-6 my-24">
+      <div className={avatarCls}>
+        <Image
+          src="https://cdn.chengpeiquan.com/img/2024/10/202410041435283.jpg?x-oss-process=image/interlace,1"
+          alt=""
+          fill
+          sizes="240px"
+          style={{ objectFit: 'cover' }}
+        />
+      </div>
+
+      <Paragraph className="text-base text-muted-foreground">
+        {t('title')}
+      </Paragraph>
+    </div>
+  )
+}

src/contents/io.ts

@@ -82,6 +82,7 @@ interface GetContentsResponse {
   total: number
   lastPage: number
   category?: string
+  isEmpty: boolean
 }
 
 export const getContents = async (
@@ -95,6 +96,7 @@ export const getContents = async (
     total: z.number().default(0),
     lastPage: z.number().default(1),
     category: z.string().optional(),
+    isEmpty: z.boolean().default(true),
   })
 
   const defaultRes = contentsResponseSchema.parse({})
@@ -126,6 +128,7 @@ export const getContents = async (
       total,
       lastPage,
       category,
+      isEmpty: items.length === 0,
     } satisfies GetContentsResponse
   } catch (e) {
     return defaultRes

src/i18n/messages/en.json

@@ -54,6 +54,9 @@
       "description": "This is a picture I took when I was giving Luna a bath in 2017. It was the first time she had a bath in her cat life. Her curious and frightened expression was just like you who have come to the 404 page now.",
       "feedback": "If your previously favorite link has been removed，Please create an <issue></issue> so I can fix it.",
       "goBackLabel": "Go back Home"
+    },
+    "empty": {
+      "title": "There is no content here, don't read it."
     }
   }
-}
+}

src/i18n/messages/zh.json

@@ -54,6 +54,9 @@
       "description": "这是 2017 年我给黑妹洗澡时拍下的照片，那是她的猫生中第一次洗澡，又好奇又惊慌的表情，像极了此刻来到 404 页面的你。",
       "feedback": "如果你以前收藏的链接被移除了，请提 <issue></issue> 联系我。",
       "goBackLabel": "返回首页"
+    },
+    "empty": {
+      "title": "这里没有内容，不要看了"
     }
   }
-}
+}