App router migration opengraph metadata (#1120)

* Add basic Root Layout

* Add metadata

* Add reference included by next

* Add comment to explain the default meta tags

* Add public testing page to check the migration

* Remove non required file

* Move primary color to a constant so can be used in a server component (root layout)

* Create rootMetadata

* Fix format

* Add metadata to root layout

---------

Co-authored-by: eleanorreem <eleanor.reem@hotmail.co.uk>

app/layout.tsx

@@ -1,12 +1,8 @@
-import { Metadata } from 'next';
 import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import rootMetadata from './rootMetadata';
 import RollbarScript from '../components/head/RollbarScript';
 
-// Nextjs automatically includes for each route two default meta tags, charset and viewport
-// https://nextjs.org/docs/app/building-your-application/optimizing/metadata#default-fields
-export const metadata: Metadata = {
-  title: 'Bloom',
-};
+export const metadata = rootMetadata;
 
 export default function RootLayout({
   // Layouts must accept a children prop.

app/rootMetadata.ts

@@ -0,0 +1,32 @@
+import { Metadata } from 'next';
+import { PRIMARY_MAIN_COLOR } from '../constants/common';
+
+const descriptionContent =
+  'Join us on your healing journey. Bloom is here for you to learn, heal and grow towards a confident future. It is bought to you by Chayn, a global non-profit, run by survivors and allies from around the world.';
+const twitterDescriptionContent =
+  'Join us on your healing journey. Bloom is here for you to learn, heal and grow towards a confident future. It is bought to you by Chayn, a global non-profit, run by survivors and allies from around the world.';
+const imageAltContent =
+  'An cartoon drawing of a person with almost shoulder length hair against a pink background. They have flowers and leaves coming out of their head. The word "Bloom" hovers above the person.';
+
+// Nextjs automatically includes for each route two default meta tags, charset and viewport
+// https://nextjs.org/docs/app/building-your-application/optimizing/metadata#default-fields
+const rootMetadata: Metadata = {
+  title: 'Bloom',
+  openGraph: {
+    title: 'Welcome to Bloom',
+    description: descriptionContent,
+    images: [{ url: '/preview.png', alt: imageAltContent }],
+  },
+  twitter: {
+    description: twitterDescriptionContent,
+    card: 'summary_large_image',
+    images: [],
+  },
+  manifest: '/manifest.json',
+  icons: [{ rel: 'apple-touch-icon', url: '/icons/apple/icon-120x120.png' }],
+  other: {
+    'theme-color': PRIMARY_MAIN_COLOR,
+  },
+};
+
+export default rootMetadata;

constants/common.ts

@@ -12,3 +12,5 @@ export type ErrorDisplay =
   | ReactElement<any, string | JSXElementConstructor<any>>
   | ReactNodeArray
   | null;
+
+export const PRIMARY_MAIN_COLOR = '#F3D6D8';

styles/theme.ts

@@ -1,4 +1,5 @@
 import { createTheme, lighten, responsiveFontSizes } from '@mui/material/styles';
+import { PRIMARY_MAIN_COLOR } from '../constants/common';
 
 // If you want to declare custom colours that aren't officially in the palette, add them here
 declare module '@mui/material/styles' {
@@ -16,7 +17,7 @@ declare module '@mui/material/styles' {
 let theme = createTheme({
   palette: {
     primary: {
-      main: '#F3D6D8',
+      main: PRIMARY_MAIN_COLOR,
       light: '#F7E2E4',
       dark: '#EA0050',
     },