✅ test: Add test

locales/ar/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "لقد أضفنا ميزات جديدة أثناء غيابك.",
   "allChangelog": "عرض جميع سجلات التحديثات",
   "description": "تابع الميزات الجديدة والتحسينات في {{appName}}",
+  "pagination": {
+    "older": "عرض التغييرات السابقة",
+    "prev": "الصفحة السابقة"
+  },
   "readDetails": "اقرأ التفاصيل",
   "title": "سجل التحديثات",
   "versionDetails": "تفاصيل الإصدار",

locales/bg-BG/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Докато ви нямаше, добавихме нови функции.",
   "allChangelog": "Вижте всички актуализации",
   "description": "Следете новите функции и подобрения на {{appName}}",
+  "pagination": {
+    "older": "Преглед на историческите промени",
+    "prev": "Предишна страница"
+  },
   "readDetails": "Прочетете подробности",
   "title": "Актуализации",
   "versionDetails": "Детайли за версиите",

locales/de-DE/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Wir haben neue Funktionen hinzugefügt, während Sie weg waren.",
   "allChangelog": "Alle Änderungsprotokolle anzeigen",
   "description": "Verfolgen Sie die neuen Funktionen und Verbesserungen von {{appName}} kontinuierlich",
+  "pagination": {
+    "older": "Ältere Änderungen anzeigen",
+    "prev": "Vorherige Seite"
+  },
   "readDetails": "Details lesen",
   "title": "Änderungsprotokoll",
   "versionDetails": "Versionsdetails",

locales/en-US/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "We've introduced new features while you were away.",
   "allChangelog": "View all changelogs",
   "description": "Stay updated on the new features and improvements of {{appName}}",
+  "pagination": {
+    "older": "View Historical Changes",
+    "prev": "Previous Page"
+  },
   "readDetails": "Read details",
   "title": "Changelog",
   "versionDetails": "Version details",

locales/es-ES/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Hemos traído nuevas características mientras estabas ausente.",
   "allChangelog": "Ver todos los registros de cambios",
   "description": "Sigue las nuevas funciones y mejoras de {{appName}}",
+  "pagination": {
+    "older": "Ver cambios anteriores",
+    "prev": "Página anterior"
+  },
   "readDetails": "Leer detalles",
   "title": "Registro de cambios",
   "versionDetails": "Detalles de la versión",

locales/fa-IR/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "در زمان غیبت شما، ویژگی‌های جدیدی اضافه کردیم.",
   "allChangelog": "تمام تغییرات را مشاهده کنید",
   "description": "به‌روزرسانی‌های جدید و بهبودهای {{appName}} را دنبال کنید",
+  "pagination": {
+    "older": "مشاهده تغییرات قبلی",
+    "prev": "صفحه قبلی"
+  },
   "readDetails": "جزئیات را بخوانید",
   "title": "تغییرات",
   "versionDetails": "جزئیات نسخه",

locales/fr-FR/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Nous avons ajouté de nouvelles fonctionnalités pendant votre absence.",
   "allChangelog": "Voir tous les journaux de mise à jour",
   "description": "Suivez en continu les nouvelles fonctionnalités et améliorations de {{appName}}",
+  "pagination": {
+    "older": "Voir les modifications antérieures",
+    "prev": "Page précédente"
+  },
   "readDetails": "Lire les détails",
   "title": "Journal des mises à jour",
   "versionDetails": "Détails de la version",

locales/it-IT/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Abbiamo introdotto nuove funzionalità mentre eri via.",
   "allChangelog": "Visualizza tutti i registri delle modifiche",
   "description": "Tieni traccia delle nuove funzionalità e miglioramenti di {{appName}}",
+  "pagination": {
+    "older": "Visualizza le modifiche precedenti",
+    "prev": "Pagina precedente"
+  },
   "readDetails": "Leggi i dettagli",
   "title": "Registro delle modifiche",
   "versionDetails": "Dettagli versione",

locales/ja-JP/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "あなたが離れている間に、新しい機能を追加しました。",
   "allChangelog": "すべての更新ログを見る",
   "description": "{{appName}}の新機能と改善を継続的に追跡",
+  "pagination": {
+    "older": "履歴の変更を表示",
+    "prev": "前のページ"
+  },
   "readDetails": "詳細を読む",
   "title": "更新ログ",
   "versionDetails": "バージョンの詳細",

locales/ko-KR/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "귀하가 떠나 있는 동안 새로운 기능이 추가되었습니다.",
   "allChangelog": "모든 업데이트 로그 보기",
   "description": "{{appName}}의 새로운 기능과 개선 사항을 지속적으로 추적하세요",
+  "pagination": {
+    "older": "이전 변경 사항 보기",
+    "prev": "이전 페이지"
+  },
   "readDetails": "자세히 읽기",
   "title": "업데이트 로그",
   "versionDetails": "버전 세부정보",

locales/nl-NL/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "We hebben nieuwe functies toegevoegd terwijl je weg was.",
   "allChangelog": "Bekijk alle changelogs",
   "description": "Blijf op de hoogte van nieuwe functies en verbeteringen van {{appName}}",
+  "pagination": {
+    "older": "Bekijk eerdere wijzigingen",
+    "prev": "Vorige pagina"
+  },
   "readDetails": "Lees meer",
   "title": "Changelog",
   "versionDetails": "Versie details",

locales/pl-PL/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "W czasie Twojej nieobecności wprowadziliśmy nowe funkcje.",
   "allChangelog": "Zobacz wszystkie dzienniki zmian",
   "description": "Na bieżąco śledź nowe funkcje i ulepszenia {{appName}}",
+  "pagination": {
+    "older": "Zobacz wcześniejsze zmiany",
+    "prev": "Poprzednia strona"
+  },
   "readDetails": "Przeczytaj szczegóły",
   "title": "Dziennik zmian",
   "versionDetails": "Szczegóły wersji",

locales/pt-BR/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Trouxemos novos recursos enquanto você estava ausente.",
   "allChangelog": "Veja todos os registros de alterações",
   "description": "Acompanhe as novas funcionalidades e melhorias do {{appName}}",
+  "pagination": {
+    "older": "Ver alterações anteriores",
+    "prev": "Página anterior"
+  },
   "readDetails": "Leia os detalhes",
   "title": "Registro de Atualizações",
   "versionDetails": "Detalhes da versão",

locales/ru-RU/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Мы добавили новые функции, пока вы отсутствовали.",
   "allChangelog": "Просмотреть все журналы изменений",
   "description": "Постоянно следите за новыми функциями и улучшениями {{appName}}",
+  "pagination": {
+    "older": "Посмотреть историю изменений",
+    "prev": "Предыдущая страница"
+  },
   "readDetails": "Читать детали",
   "title": "Журнал изменений",
   "versionDetails": "Детали версий",

locales/tr-TR/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Siz yokken yeni özellikler ekledik.",
   "allChangelog": "Tüm güncelleme günlüklerini görüntüle",
   "description": "{{appName}}'in yeni özelliklerini ve iyileştirmelerini sürekli takip edin",
+  "pagination": {
+    "older": "Geçmiş değişiklikleri görüntüle",
+    "prev": "Önceki sayfa"
+  },
   "readDetails": "Detayları okuyun",
   "title": "Güncelleme Günlüğü",
   "versionDetails": "Sürüm detayları",

locales/vi-VN/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "Chúng tôi đã mang đến những tính năng mới trong thời gian bạn vắng mặt.",
   "allChangelog": "Xem tất cả nhật ký cập nhật",
   "description": "Theo dõi các tính năng và cải tiến mới của {{appName}}",
+  "pagination": {
+    "older": "Xem thay đổi lịch sử",
+    "prev": "Trang trước"
+  },
   "readDetails": "Đọc chi tiết",
   "title": "Nhật ký cập nhật",
   "versionDetails": "Chi tiết phiên bản",

locales/zh-CN/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "在您离开期间，我们带来了新的特性。",
   "allChangelog": "查看所有更新日志",
   "description": "持续追踪 {{appName}} 的新功能和改进",
+  "pagination": {
+    "older": "查看历史变更",
+    "prev": "上一页"
+  },
   "readDetails": "阅读详情",
   "title": "更新日志",
   "versionDetails": "版本详情",

locales/zh-TW/changelog.json

@@ -7,6 +7,10 @@
   "addedWhileAway": "在您離開期間，我們帶來了新的特性。",
   "allChangelog": "查看所有更新日誌",
   "description": "持續追蹤 {{appName}} 的新功能和改進",
+  "pagination": {
+    "older": "查看歷史變更",
+    "prev": "上一頁"
+  },
   "readDetails": "閱讀詳情",
   "title": "更新日誌",
   "versionDetails": "版本詳情",

package.json

@@ -189,6 +189,7 @@
     "pdfjs-dist": "4.4.168",
     "pg": "^8.13.0",
     "pino": "^9.5.0",
+    "plaiceholder": "^3.0.0",
     "polished": "^4.3.1",
     "posthog-js": "^1.174.2",
     "pwa-install-handler": "^2.6.1",

src/app/(main)/changelog/_layout/Desktop.tsx

@@ -7,8 +7,12 @@ type Props = { children: ReactNode };
 
 const Layout = ({ children }: Props) => {
   return (
-    <Flexbox align={'center'} style={{ minHeight: '100vh' }} width={'100%'}>
-      <Flexbox style={{ gap: 24, width: 'min(100%, 1024px)' }}>
+    <Flexbox
+      align={'center'}
+      style={{ height: '100%', overflowX: 'hidden', overflowY: 'auto' }}
+      width={'100%'}
+    >
+      <Flexbox paddingBlock={24} style={{ gap: 24, width: 'min(100%, 1024px)' }}>
         <Hero />
         {children}
       </Flexbox>

src/app/(main)/changelog/features/GridLayout.tsx

@@ -1,27 +1,22 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import { PropsWithChildren, ReactNode, memo } from 'react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const GridLayout = memo<PropsWithChildren<{ date?: ReactNode; mobile?: boolean }>>(
-  ({ mobile, children, date }) => {
-    const { md } = useResponsive();
-
-    const isMobile = mobile || !md;
-
-    return (
-      <Flexbox horizontal={!isMobile} width={'100%'} wrap={'wrap'}>
-        <Flexbox flex={1} style={{ position: 'relative' }}>
-          {date}
-        </Flexbox>
-        <Flexbox flex={3} gap={16} style={{ position: 'relative' }}>
-          {children}
-        </Flexbox>
-        {!isMobile && <Flexbox flex={1} style={{ position: 'relative' }} />}
+const GridLayout: FC<PropsWithChildren<{ date?: ReactNode; mobile?: boolean }>> = ({
+  mobile,
+  children,
+  date,
+}) => {
+  return (
+    <Flexbox horizontal={!mobile} wrap={'wrap'}>
+      <Flexbox flex={1} style={{ minWidth: 150, position: 'relative' }}>
+        {date}
+      </Flexbox>
+      <Flexbox flex={3} gap={16} style={{ minWidth: 600, position: 'relative' }}>
+        {children}
       </Flexbox>
-    );
-  },
-);
+      {!mobile && <Flexbox flex={1} style={{ minWidth: 150, position: 'relative' }} />}
+    </Flexbox>
+  );
+};
 
 export default GridLayout;

src/app/(main)/changelog/features/Post.tsx

@@ -1,11 +1,14 @@
-import { Image, Typography } from '@lobehub/ui';
+import { Typography } from '@lobehub/ui';
+import { Divider } from 'antd';
 import Link from 'next/link';
 import urlJoin from 'url-join';
 
 import { CustomMDX } from '@/components/mdx';
+import Image from '@/components/mdx/Image';
 import { OFFICIAL_SITE } from '@/const/url';
 import { Locales } from '@/locales/resources';
-import { ChangelogIndexItem, changelogService } from '@/services/changelog';
+import { ChangelogService } from '@/server/services/changelog';
+import { ChangelogIndexItem } from '@/types/changelog';
 
 import GridLayout from './GridLayout';
 import PublishedTime from './PublishedTime';
@@ -17,35 +20,36 @@ const Post = async ({
   versionRange,
   locale,
 }: ChangelogIndexItem & { branch?: string; locale: Locales; mobile?: boolean }) => {
+  const changelogService = new ChangelogService();
   const data = await changelogService.getPostById(id, { locale });
 
+  if (!data || !data.title) return null;
+
   return (
-    <GridLayout
-      date={
-        <PublishedTime
-          date={data.date.toISOString()}
-          style={{ lineHeight: mobile ? undefined : '60px' }}
-          template={'MMMM D, YYYY'}
-        />
-      }
-      mobile={mobile}
-    >
-      <Typography headerMultiple={mobile ? 0.2 : 0.3}>
-        <Link href={urlJoin(OFFICIAL_SITE, '/changelog', id)} style={{ color: 'inherit' }}>
-          <h1 id={id}>{data.rawTitle || data.title}</h1>
-        </Link>
-        <Image
-          alt={data.title}
-          minSize={mobile ? 188 : 326}
-          src={data.image}
-          style={{ marginBlock: '1.5em' }}
-        />
-        <CustomMDX source={data.content} />
-        <Link href={urlJoin(OFFICIAL_SITE, '/changelog', id)} style={{ color: 'inherit' }}>
-          <VersionTag range={versionRange} />
-        </Link>
-      </Typography>
-    </GridLayout>
+    <>
+      <Divider />
+      <GridLayout
+        date={
+          <PublishedTime
+            date={data.date.toISOString()}
+            style={{ lineHeight: mobile ? undefined : '60px' }}
+            template={'MMMM D, YYYY'}
+          />
+        }
+        mobile={mobile}
+      >
+        <Typography headerMultiple={mobile ? 0.2 : 0.3}>
+          <Link href={urlJoin(OFFICIAL_SITE, '/changelog', id)} style={{ color: 'inherit' }}>
+            <h1 id={id}>{data.rawTitle || data.title}</h1>
+          </Link>
+          <Image alt={data.title} src={data.image} />
+          <CustomMDX source={data.content} />
+          <Link href={urlJoin(OFFICIAL_SITE, '/changelog', id)} style={{ color: 'inherit' }}>
+            <VersionTag range={versionRange} />
+          </Link>
+        </Typography>
+      </GridLayout>
+    </>
   );
 };