fix: added missing seo for termen pages

MinBZK · Dec 20, 2024 · 7cf47d4 · 7cf47d4
1 parent be8c72a
commit 7cf47d4
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 77 deletions.
diff --git a/.changeset/cyan-moose-rescue.md b/.changeset/cyan-moose-rescue.md
@@ -0,0 +1,5 @@
+---
+"web": patch
+---
+
+Added SEO tags for `/termen/*` pages
diff --git a/apps/web/src/app/termen/[...slug]/get-parsed-term.ts b/apps/web/src/app/termen/[...slug]/get-parsed-term.ts
@@ -0,0 +1,81 @@
+import { resolveCmsImage } from '@/common/resolve-cms-image';
+import { findTermInFormat } from '../find-term-in-format';
+
+type Args = {
+  slug: string;
+};
+
+interface FindFieldArgs {
+  input: Record<string, any>;
+  key: string;
+  value: string;
+}
+
+function findNodeWithField({ input, key, value }: FindFieldArgs): Record<string, any> | null {
+  let result: Record<string, any> | null = null;
+
+  function search(obj: Record<string, any>) {
+    if (typeof obj !== 'object' || obj === null) return;
+
+    for (const inputKey in obj) {
+      if (inputKey === key && obj[inputKey] === value) {
+        result = obj;
+        return;
+      }
+
+      if (typeof obj[inputKey] === 'object') {
+        search(obj[inputKey]);
+        if (result) return;
+      }
+    }
+  }
+
+  search(input);
+
+  return result;
+}
+
+export async function getParsedTerm({ slug }: Args) {
+  const term = await findTermInFormat({ slug, extension: '.json' });
+
+  const json = await await fetch(resolveCmsImage(term.files as any), {
+    method: 'GET',
+  }).then((res) => res.json() as Record<string, any>);
+
+  const rootNode = findNodeWithField({
+    input: json,
+    key: '@id',
+    value: `https://regels.overheid.nl/termen${slug}`,
+  });
+
+  const nlPrefLabelNode = findNodeWithField({
+    input: rootNode?.['http://www.w3.org/2004/02/skos/core#prefLabel'] || {},
+    key: '@language',
+    value: 'nl',
+  });
+
+  const nlDefinitionNode = findNodeWithField({
+    input: rootNode?.['http://www.w3.org/2004/02/skos/core#definition'] || {},
+    key: '@language',
+    value: 'nl',
+  });
+
+  const nlScopeNoteNode = findNodeWithField({
+    input: rootNode?.['http://www.w3.org/2004/02/skos/core#scopeNote'] || {},
+    key: '@language',
+    value: 'nl',
+  });
+
+  const nlLabelNode = findNodeWithField({
+    input: rootNode?.['http://www.w3.org/2000/01/rdf-schema#label'] || {},
+    key: '@language',
+    value: 'nl',
+  });
+
+  return {
+    nlLabel: nlLabelNode?.['@value'],
+    nlScopeNote: nlScopeNoteNode?.['@value'],
+    nlPrefLabel: nlPrefLabelNode?.['@value'],
+    nlDefinition: nlDefinitionNode?.['@value'],
+  };
+}
diff --git a/apps/web/src/app/termen/[...slug]/page.tsx b/apps/web/src/app/termen/[...slug]/page.tsx
@@ -1,86 +1,18 @@
-import { resolveCmsImage } from '@/common/resolve-cms-image';
 import { Button } from '@/components/button';
-import { Chip } from '@/components/chip';
 import { Container } from '@/components/container';
 import { Pill } from '@/components/pill';
 import { Typography } from '@/components/typography';
-import { db } from '@/drizzle/db';
-import { files, filesRelatedMorphs, terms } from '@/drizzle/schema';
-import { and, eq } from 'drizzle-orm';
 import { notFound } from 'next/navigation';
-import path from 'path';
-import { findTermInFormat } from '../find-term-in-format';
 import { getSlugFromParams } from '../get-slug-from-params';
+import { getParsedTerm } from './get-parsed-term';
 
-interface FindFieldArgs {
-  input: Record<string, any>;
-  key: string;
-  value: string;
-}
-
-function findNodeWithField({ input, key, value }: FindFieldArgs): Record<string, any> | null {
-  let result: Record<string, any> | null = null;
-
-  function search(obj: Record<string, any>) {
-    if (typeof obj !== 'object' || obj === null) return;
-
-    for (const inputKey in obj) {
-      if (inputKey === key && obj[inputKey] === value) {
-        result = obj;
-        return;
-      }
-
-      if (typeof obj[inputKey] === 'object') {
-        search(obj[inputKey]);
-        if (result) return;
-      }
-    }
-  }
+type Args = {
+  params: { slug: string[] };
+};
 
-  search(input);
-
-  return result;
-}
-
-export default async function TermenPage({ params }: { params: { slug: string[] } }) {
+export default async function TermenPage({ params }: Args) {
   const slug = getSlugFromParams(params.slug);
-  const term = await findTermInFormat({ slug, extension: '.json' });
-
-  const json = await await fetch(resolveCmsImage(term.files as any), {
-    method: 'GET',
-  }).then((res) => res.json() as Record<string, any>);
-
-  const rootNode = findNodeWithField({
-    input: json,
-    key: '@id',
-    value: `https://regels.overheid.nl/termen${slug}`,
-  });
-
-  const nlPrefLabelNode = findNodeWithField({
-    input: rootNode?.['http://www.w3.org/2004/02/skos/core#prefLabel'] || {},
-    key: '@language',
-    value: 'nl',
-  });
-
-  const nlLabelNode = findNodeWithField({
-    input: rootNode?.['http://www.w3.org/2000/01/rdf-schema#label'] || {},
-    key: '@language',
-    value: 'nl',
-  });
-
-  const nlScopeNoteNode = findNodeWithField({
-    input: rootNode?.['http://www.w3.org/2004/02/skos/core#scopeNote'] || {},
-    key: '@language',
-    value: 'nl',
-  });
-
-  const nlDefinitionNode = findNodeWithField({
-    input: rootNode?.['http://www.w3.org/2004/02/skos/core#definition'] || {},
-    key: '@language',
-    value: 'nl',
-  });
-
-  const nlPrefLabel = nlPrefLabelNode?.['@value'];
+  const { nlDefinition, nlPrefLabel, nlScopeNote, nlLabel } = await getParsedTerm({ slug });
 
   if (!nlPrefLabel) return notFound();
 
@@ -91,11 +23,12 @@ export default async function TermenPage({ params }: { params: { slug: string[]
         <Pill label="Term" className="justify-self-start" />
       </div>
       <Typography variant="h2">Label</Typography>
-      <Typography>{nlLabelNode?.['@value']}</Typography>
+      <Typography>{nlLabel}</Typography>
       <Typography variant="h2">Definitie</Typography>
-      <Typography>{nlDefinitionNode?.['@value']}</Typography>
+      <Typography>{nlDefinition}</Typography>
       <Typography variant="h2">Scope notitie</Typography>
-      <Typography>{nlScopeNoteNode?.['@value']}</Typography>
+      <Typography>{nlScopeNote}</Typography>
+      <Typography>{nlDefinition}</Typography>
       <Typography variant="h3">Download</Typography>
       <div className="mt-4 flex gap-x-2">
         <Button component="a" href={`/termen/download/rdf${slug}`}>
@@ -111,3 +44,13 @@ export default async function TermenPage({ params }: { params: { slug: string[]
     </Container>
   );
 }
+
+export async function generateMetadata({ params }: Args) {
+  const slug = getSlugFromParams(params.slug);
+  const { nlDefinition, nlPrefLabel } = await getParsedTerm({ slug });
+
+  return {
+    title: 'Regelregister van de Nederlandse Overheid - ' + nlPrefLabel,
+    description: nlDefinition,
+  };
+}