initial to gitea

app/changelog/page.tsx

@@ -0,0 +1,63 @@
+import { Suspense } from "react";
+import { getChangelogEntries } from "@/lib/changelog";
+import { VersionEntry } from "@/components/changelog/version-entry";
+import { VersionToc } from "@/components/changelog/version-toc";
+import { getMetadata } from "@/app/layout";
+import docuConfig from "@/docu.json";
+import { FloatingVersionToc } from "@/components/changelog/floating-version";
+
+export const metadata = getMetadata({
+  title: "Changelog",
+  description: "Latest updates and improvements to DocuBook",
+  image: "release-note.png",
+});
+
+export default async function ChangelogPage() {
+  const entries = await getChangelogEntries();
+  const { meta } = docuConfig;
+  return (
+    <div className="flex flex-col w-full">
+      <div className="border-b">
+        <div className="py-8">
+          <h1 className="text-2xl font-extrabold">Changelog</h1>
+            <p className="text-lg text-muted-foreground mt-2">
+            Latest updates and improvements to {meta.title}
+           </p>
+        </div>
+      </div>
+
+      <div className="md:container py-8">
+        <div className="flex items-start gap-8">
+          <Suspense fallback={<div className="lg:flex hidden flex-[1.5] min-w-[238px]" />}>
+            <VersionToc
+              versions={entries.map(({ version, date }) => ({ version, date }))}
+            />
+          </Suspense>
+
+          <main className="flex-1 lg:flex-[5.25] min-w-0">
+            <div className="relative">
+              <div className="absolute left-0 top-0 h-full w-px bg-border lg:block hidden" />
+              <div className="lg:pl-12 pl-0 lg:pt-8">
+                {entries.map((entry, index) => (
+                    <section
+                        id={`version-${entry.version}`}
+                        key={entry.version}
+                        className="scroll-mt-20" // Tambahkan margin atas saat scroll
+                     >
+                        <VersionEntry {...entry} isLast={index === entries.length - 1} />
+                    </section>
+                ))}
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+          {/* Floating TOC for smaller screens */}
+            {entries.length > 0 && (
+            <FloatingVersionToc
+                versions={entries.map(({ version, date }) => ({ version, date }))}
+            />
+            )}
+    </div>
+  );
+}