add changelogs hash to body tag

a-hariti · a-hariti · commit ffd842ab00c3 · 2024-11-08T18:11:18.000+01:00
diff --git a/apps/changelog/prisma/seed/seed.mjs b/apps/changelog/prisma/seed/seed.mjs
@@ -43,8 +43,10 @@ async function seed() {
         updatedAt: new Date('01/01/2020'),
         title: 'Changelog 3',
         slug: 'changelog-3',
-        content: 'Changelog 3 content with [markdown content](https://de.wikipedia.org/wiki/Markdown)',
-        summary: 'Changelog 3 summary with [markdown content](https://de.wikipedia.org/wiki/Markdown)',
+        content:
+          'Changelog 3 content with [markdown content](https://de.wikipedia.org/wiki/Markdown)',
+        summary:
+          'Changelog 3 summary with [markdown content](https://de.wikipedia.org/wiki/Markdown)',
         published: true,
         deleted: false,
       },
diff --git a/apps/changelog/src/app/changelog/feed.xml/route.ts b/apps/changelog/src/app/changelog/feed.xml/route.ts
@@ -14,7 +14,7 @@ export async function GET() {
     ttl: 60,
   });
 
-  const allChangelogs = await getChangelogs();
+  const {changelogs: allChangelogs} = await getChangelogs();
 
   if (allChangelogs) {
     allChangelogs
diff --git a/apps/changelog/src/app/changelog/page.tsx b/apps/changelog/src/app/changelog/page.tsx
@@ -13,7 +13,7 @@ import {Element} from 'hast';
 export const dynamic = 'force-dynamic';
 
 export default async function Page() {
-  const changelogs = await getChangelogs();
+  const {changelogs} = await getChangelogs();
 
   const changelogsWithPublishedAt = changelogs.filter(changelog => {
     return changelog.publishedAt !== null;
diff --git a/apps/changelog/src/app/layout.tsx b/apps/changelog/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import {getChangelogs} from '@/server/utils';
 import './globals.css';
 
 import {Theme} from '@radix-ui/themes';
@@ -30,10 +31,11 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({children}: {children: React.ReactNode}) {
+export default async function RootLayout({children}: {children: React.ReactNode}) {
+  const {hash: chngelogsHash} = await getChangelogs();
   return (
     <html lang="en">
-      <body className={`${rubik.variable}`}>
+      <body className={`${rubik.variable}`} data-content-hash={chngelogsHash}>
         <Theme accentColor="iris" grayColor="sand" radius="large" scaling="95%">
           {children}
         </Theme>
diff --git a/apps/changelog/src/server/utils.ts b/apps/changelog/src/server/utils.ts
@@ -1,9 +1,10 @@
 import {prismaClient} from '@/server/prisma-client';
+import {Changelog} from '@prisma/client';
 import {unstable_cache} from 'next/cache';
 
 export const getChangelogs = unstable_cache(
   async () => {
-    return await prismaClient.changelog.findMany({
+    const changelogs = await prismaClient.changelog.findMany({
       include: {
         categories: true,
       },
@@ -14,6 +15,27 @@ export const getChangelogs = unstable_cache(
         publishedAt: 'desc',
       },
     });
+    const hashHex = (buffer: ArrayBuffer) => {
+      const hexCodes = Array.from(new Uint8Array(buffer)).map(value =>
+        value.toString(16).padStart(2, '0')
+      );
+      return hexCodes.join('');
+    };
+    const hashChangelogs = (changelogs: Changelog[]) =>
+      crypto.subtle
+        .digest(
+          'SHA-256',
+          new TextEncoder().encode(
+            changelogs
+              .map(changelogs => changelogs.id + ':' + changelogs.updatedAt)
+              .join(',')
+          )
+        )
+        .then(hashHex);
+    return {
+      changelogs,
+      hash: await hashChangelogs(changelogs),
+    };
   },
   ['changelogs'],
   {tags: ['changelogs']}
