From e91f3f4c576aa5ccb78de0cb922b055dd706e28b Mon Sep 17 00:00:00 2001
From: Pedro Martin <pataruco@gmail.com>
Date: Mon, 20 Jan 2025 10:31:55 +0000
Subject: [PATCH 1/2] feat: add metadata to register a patient page

---
 .../app/[lang]/register-a-patient/page.tsx    | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/website/src/app/[lang]/register-a-patient/page.tsx b/website/src/app/[lang]/register-a-patient/page.tsx
index 943484d..5fc4924 100644
--- a/website/src/app/[lang]/register-a-patient/page.tsx
+++ b/website/src/app/[lang]/register-a-patient/page.tsx
@@ -1,9 +1,17 @@
 import SupportBanner from '@components/support-banner';
+import { getClient } from '@graphql/client';
+import {
+  GetPageHeaderDocument,
+  type GetPageHeaderQuery,
+} from '@graphql/queries/page-header/index.generated';
+import { registerPatientPageHeaderId } from '@models/page-header';
 import type { PagePropsWithLocale } from '@shared/types/page-with-locale-params';
-import type { NextPage } from 'next';
+import type { Metadata, NextPage, ResolvingMetadata } from 'next';
 import RegisterPageBody from './page-body';
 import RegisterPageHeader from './page-header';
 
+const { query } = getClient();
+
 const Page: NextPage<PagePropsWithLocale> = async ({ params }) => {
   const { lang } = await params;
 
@@ -17,3 +25,39 @@ const Page: NextPage<PagePropsWithLocale> = async ({ params }) => {
 };
 
 export default Page;
+
+export async function generateMetadata(
+  { params }: PagePropsWithLocale,
+  parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const { lang } = await params;
+  const {
+    // @ts-ignore
+    title: { absolute },
+  } = await parent;
+
+  const {
+    data: {
+      // @ts-ignore
+      pageHeader: { title, sectionTitle },
+    },
+    error,
+  } = await query<GetPageHeaderQuery>({
+    query: GetPageHeaderDocument,
+    variables: {
+      locale: lang,
+      id: registerPatientPageHeaderId,
+    },
+  });
+
+  if (error || !title || !sectionTitle || !absolute) {
+    return {
+      title: 'NR2F1 FOUNDATION | Register a patient',
+    };
+  }
+
+  return {
+    title: `${absolute} | ${title}`,
+    description: sectionTitle,
+  };
+}

From 4d567efc7423b8e215f1bd45d7decde3c1eaaa9e Mon Sep 17 00:00:00 2001
From: Pedro Martin <pataruco@gmail.com>
Date: Mon, 20 Jan 2025 11:21:06 +0000
Subject: [PATCH 2/2] feat: add microdata to register a patient page

---
 .../app/[lang]/register-a-patient/page.tsx    | 86 +++++++++++++------
 website/src/components/accordion/index.tsx    |  4 +-
 .../queries/metadata/index.generated.tsx      |  3 +-
 .../graphql/queries/metadata/index.graphql    |  1 +
 website/src/models/metadata/index.ts          |  1 +
 5 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/website/src/app/[lang]/register-a-patient/page.tsx b/website/src/app/[lang]/register-a-patient/page.tsx
index 5fc4924..087290c 100644
--- a/website/src/app/[lang]/register-a-patient/page.tsx
+++ b/website/src/app/[lang]/register-a-patient/page.tsx
@@ -1,12 +1,13 @@
 import SupportBanner from '@components/support-banner';
 import { getClient } from '@graphql/client';
 import {
-  GetPageHeaderDocument,
-  type GetPageHeaderQuery,
-} from '@graphql/queries/page-header/index.generated';
-import { registerPatientPageHeaderId } from '@models/page-header';
+  GetMetadataDocument,
+  type GetMetadataQuery,
+} from '@graphql/queries/metadata/index.generated';
+import { registerPatientPageMetadataId } from '@models/metadata';
 import type { PagePropsWithLocale } from '@shared/types/page-with-locale-params';
-import type { Metadata, NextPage, ResolvingMetadata } from 'next';
+import type { Metadata, NextPage } from 'next';
+import type { Graph, MedicalStudy, WebPage, WithContext } from 'schema-dts';
 import RegisterPageBody from './page-body';
 import RegisterPageHeader from './page-header';
 
@@ -15,8 +16,53 @@ const { query } = getClient();
 const Page: NextPage<PagePropsWithLocale> = async ({ params }) => {
   const { lang } = await params;
 
+  const {
+    data: {
+      // @ts-ignore
+      htmlHeadMetadata: { title, description },
+    },
+  } = await query<GetMetadataQuery>({
+    query: GetMetadataDocument,
+    variables: {
+      locale: lang,
+      id: registerPatientPageMetadataId,
+    },
+  });
+
+  const medicalStudy: WithContext<MedicalStudy> = {
+    '@context': 'https://schema.org',
+    '@type': 'MedicalStudy',
+    name: title,
+    description,
+    potentialAction: [
+      {
+        '@type': 'RegisterAction',
+        target: `https://nr2f1.org/${lang}/register-patient`,
+        name: title,
+      },
+    ],
+  };
+
+  const webPage: WithContext<WebPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    url: `https://nr2f1.org/${lang}/register-a-patient`,
+    name: title,
+    inLanguage: lang,
+  };
+
+  const jsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [medicalStudy, webPage],
+  };
+
   return (
     <>
+      <script
+        type="application/ld+json"
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: this is a safe usage
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <RegisterPageHeader lang={lang} />
       <RegisterPageBody lang={lang} />
       <SupportBanner lang={lang} />
@@ -26,38 +72,28 @@ const Page: NextPage<PagePropsWithLocale> = async ({ params }) => {
 
 export default Page;
 
-export async function generateMetadata(
-  { params }: PagePropsWithLocale,
-  parent: ResolvingMetadata,
-): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: PagePropsWithLocale): Promise<Metadata> {
   const { lang } = await params;
-  const {
-    // @ts-ignore
-    title: { absolute },
-  } = await parent;
 
   const {
     data: {
       // @ts-ignore
-      pageHeader: { title, sectionTitle },
+      htmlHeadMetadata: { title, description, keywords },
     },
     error,
-  } = await query<GetPageHeaderQuery>({
-    query: GetPageHeaderDocument,
+  } = await query<GetMetadataQuery>({
+    query: GetMetadataDocument,
     variables: {
       locale: lang,
-      id: registerPatientPageHeaderId,
+      id: registerPatientPageMetadataId,
     },
   });
 
-  if (error || !title || !sectionTitle || !absolute) {
-    return {
-      title: 'NR2F1 FOUNDATION | Register a patient',
-    };
-  }
-
   return {
-    title: `${absolute} | ${title}`,
-    description: sectionTitle,
+    title: `NR2F1 Foundation | ${title}`,
+    description,
+    keywords,
   };
 }
diff --git a/website/src/components/accordion/index.tsx b/website/src/components/accordion/index.tsx
index 497d3bb..872810c 100644
--- a/website/src/components/accordion/index.tsx
+++ b/website/src/components/accordion/index.tsx
@@ -9,9 +9,7 @@ const Accordion: React.FC<AccordionProps> = ({ title, content }) => {
   return (
     <details className={styles.accordion}>
       <summary>{title}</summary>
-      <div>
-        <p>{content}</p>
-      </div>
+      <div>{content}</div>
     </details>
   );
 };
diff --git a/website/src/graphql/queries/metadata/index.generated.tsx b/website/src/graphql/queries/metadata/index.generated.tsx
index 4899581..bce80b7 100644
--- a/website/src/graphql/queries/metadata/index.generated.tsx
+++ b/website/src/graphql/queries/metadata/index.generated.tsx
@@ -9,7 +9,7 @@ export type GetMetadataQueryVariables = Types.Exact<{
 }>;
 
 
-export type GetMetadataQuery = { __typename?: 'Query', htmlHeadMetadata?: { __typename?: 'HtmlHeadMetadata', title?: string | null, description?: string | null } | null };
+export type GetMetadataQuery = { __typename?: 'Query', htmlHeadMetadata?: { __typename?: 'HtmlHeadMetadata', title?: string | null, description?: string | null, keywords?: string | null } | null };
 
 
 export const GetMetadataDocument = gql`
@@ -17,6 +17,7 @@ export const GetMetadataDocument = gql`
   htmlHeadMetadata(id: $id, locale: $locale) {
     title
     description
+    keywords
   }
 }
     `;
diff --git a/website/src/graphql/queries/metadata/index.graphql b/website/src/graphql/queries/metadata/index.graphql
index 91d43e2..3a17d0c 100644
--- a/website/src/graphql/queries/metadata/index.graphql
+++ b/website/src/graphql/queries/metadata/index.graphql
@@ -2,5 +2,6 @@ query GetMetadata($id: String!, $locale: String) {
   htmlHeadMetadata(id: $id, locale: $locale) {
     title
     description
+    keywords
   }
 }
diff --git a/website/src/models/metadata/index.ts b/website/src/models/metadata/index.ts
index 29e95be..d12bd89 100644
--- a/website/src/models/metadata/index.ts
+++ b/website/src/models/metadata/index.ts
@@ -1 +1,2 @@
 export const homepageMetadataId = '4CqS9EKVc0euRhzQasESTR';
+export const registerPatientPageMetadataId = 'EolZvaSlFMYGxwOjeHC0u';