From 16d35b60b189b025f3567b6ebcb25c2f230e5609 Mon Sep 17 00:00:00 2001
From: Riccardo <riccardo.s@hey.com>
Date: Sat, 31 Aug 2024 19:40:32 +0200
Subject: [PATCH] feat: add schema.org metadata

---
 app/confirmation/page.tsx | 25 +++++++++++++++++++------
 app/page.tsx              | 29 +++++++++++++++++++++--------
 app/privacy/page.tsx      | 24 ++++++++++++++++++------
 app/unsubscribe/page.tsx  | 29 +++++++++++++++++++++--------
 components/SchemaOrg.tsx  | 13 +++++++++++++
 5 files changed, 92 insertions(+), 28 deletions(-)
 create mode 100644 components/SchemaOrg.tsx

diff --git a/app/confirmation/page.tsx b/app/confirmation/page.tsx
index d014d44..e0f93ae 100644
--- a/app/confirmation/page.tsx
+++ b/app/confirmation/page.tsx
@@ -1,6 +1,8 @@
 'use client';
+
 import { CardDescription } from '@components/Card';
 import CustomCard from '@components/CustomCard';
+import Schema from '@components/SchemaOrg';
 import { ResponseType } from '@utils/validationSchemas';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useState } from 'react';
@@ -54,7 +56,7 @@ function ConfirmationPage() {
     fetchData();
   }, [code, router]);
 
-  function render() {
+  const renderContent = () => {
     if (!loading) {
       return (
         <CardDescription className='text-center'>{message}</CardDescription>
@@ -62,22 +64,33 @@ function ConfirmationPage() {
     }
 
     return 'Just a second...';
-  }
+  };
 
   return (
     <CustomCard
       className='max-90vw w-96'
       title={loading ? 'Verifying' : 'Confirmed!'}
-      content={render()}
+      content={renderContent()}
       footer={false}
     />
   );
 }
 
 export default function Confirmation() {
+  const schema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'HackerNews Newsletter',
+    title: 'Subscription Confirmation',
+    url: `${process.env.HOME_URL}/confirmation`
+  };
+
   return (
-    <Suspense fallback={<>Loading...</>}>
-      <ConfirmationPage />
-    </Suspense>
+    <>
+      <Schema schema={schema} />
+      <Suspense fallback={<>Loading...</>}>
+        <ConfirmationPage />
+      </Suspense>
+    </>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index a867d38..06d2612 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { Button } from '@components/Button';
 import { CardDescription } from '@components/Card';
 import CustomCard from '@components/CustomCard';
@@ -6,6 +7,7 @@ import ErrorMessage from '@components/ErrorMessage';
 import { FormControl } from '@components/form/FormControl';
 import { FormMessage } from '@components/form/FormMessage';
 import { Input } from '@components/Input';
+import Schema from '@components/SchemaOrg';
 import { FormField } from '@contexts/FormField/FormFieldProvider';
 import { FormItem } from '@contexts/FormItem/FormItemProvider';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -22,6 +24,14 @@ export default function Home() {
   const [message, setMessage] = useState('');
   const [error, setError] = useState(false);
 
+  const schema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'HackerNews Newsletter',
+    title: 'Home',
+    url: process.env.HOME_URL
+  };
+
   const form = useForm<SubscribeFormType>({
     resolver: zodResolver(SubscribeFormSchema),
     defaultValues: {
@@ -58,7 +68,7 @@ export default function Home() {
     }
   }
 
-  function render() {
+  const renderContent = () => {
     if (error) {
       return ErrorMessage();
     }
@@ -105,14 +115,17 @@ export default function Home() {
         </p>
       </div>
     );
-  }
+  };
 
   return (
-    <CustomCard
-      className='max-90vw w-96'
-      title='Interested in keeping up with the latest from the tech world? 👩‍💻'
-      description='Subscribe to our newsletter! The top stories from Hackernews for you. Once a day. Every day.'
-      content={render()}
-    />
+    <>
+      <Schema schema={schema} />
+      <CustomCard
+        className='max-90vw w-96'
+        title='Interested in keeping up with the latest from the tech world? 👩‍💻'
+        description='Subscribe to our newsletter! The top stories from Hackernews for you. Once a day. Every day.'
+        content={renderContent()}
+      />
+    </>
   );
 }
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
index 89166f2..b7631b7 100644
--- a/app/privacy/page.tsx
+++ b/app/privacy/page.tsx
@@ -1,9 +1,18 @@
 'use client';
 
 import CustomCard from '@components/CustomCard';
+import Schema from '@components/SchemaOrg';
 import Link from 'next/link';
 
 export default function Privacy() {
+  const schema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'HackerNews Newsletter',
+    title: 'Privacy Policy',
+    url: `${process.env.HOME_URL}/privacy`
+  };
+
   const body = (
     <div className='my-2 max-h-[60vh] overflow-auto'>
       <p>
@@ -439,11 +448,14 @@ export default function Privacy() {
   );
 
   return (
-    <CustomCard
-      className='max-90vh max-90vw'
-      title='Privacy Policy'
-      description='Last updated: December 03, 2023'
-      content={body}
-    />
+    <>
+      <Schema schema={schema} />
+      <CustomCard
+        className='max-90vh max-90vw'
+        title='Privacy Policy'
+        description='Last updated: December 03, 2023'
+        content={body}
+      />
+    </>
   );
 }
diff --git a/app/unsubscribe/page.tsx b/app/unsubscribe/page.tsx
index a249d17..3f23c15 100644
--- a/app/unsubscribe/page.tsx
+++ b/app/unsubscribe/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { Button } from '@components/Button';
 import { CardDescription } from '@components/Card';
 import CustomCard from '@components/CustomCard';
@@ -6,6 +7,7 @@ import ErrorMessage from '@components/ErrorMessage';
 import { FormControl } from '@components/form/FormControl';
 import { FormMessage } from '@components/form/FormMessage';
 import { Input } from '@components/Input';
+import Schema from '@components/SchemaOrg';
 import { FormField } from '@contexts/FormField/FormFieldProvider';
 import { FormItem } from '@contexts/FormItem/FormItemProvider';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -23,6 +25,14 @@ export default function Unsubscribe() {
   const [error, setError] = useState(false);
   const ref = useRef<HTMLInputElement | null>(null);
 
+  const schema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'HackerNews Newsletter',
+    title: 'Unsubscribe',
+    url: `${process.env.HOME_URL}/unsubscribe`
+  };
+
   const form = useForm<UnsubscribeFormType>({
     resolver: zodResolver(UnsubscribeFormSchema),
     defaultValues: {
@@ -65,7 +75,7 @@ export default function Unsubscribe() {
     }
   }
 
-  function render() {
+  const renderContent = () => {
     if (error) {
       return ErrorMessage();
     }
@@ -108,14 +118,17 @@ export default function Unsubscribe() {
         </FormProvider>
       </div>
     );
-  }
+  };
 
   return (
-    <CustomCard
-      className='max-90vw w-96'
-      title='Unsubscribe'
-      description='You sure you want to leave? :('
-      content={render()}
-    />
+    <>
+      <Schema schema={schema} />
+      <CustomCard
+        className='max-90vw w-96'
+        title='Unsubscribe'
+        description='You sure you want to leave? :('
+        content={renderContent()}
+      />
+    </>
   );
 }
diff --git a/components/SchemaOrg.tsx b/components/SchemaOrg.tsx
new file mode 100644
index 0000000..33187d9
--- /dev/null
+++ b/components/SchemaOrg.tsx
@@ -0,0 +1,13 @@
+import Head from 'next/head';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SchemaOrg = ({ schema }: Record<string, any>) => (
+  <Head>
+    <script
+      type='application/ld+json'
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
+    />
+  </Head>
+);
+
+export default SchemaOrg;