Skip to content

Commit

Permalink
App router migration opengraph metadata (#1120)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
boodland and eleanorreem authored Sep 20, 2024
1 parent 4effeae commit 40496ab
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 7 deletions.
8 changes: 2 additions & 6 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
32 changes: 32 additions & 0 deletions app/rootMetadata.ts
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions constants/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@ export type ErrorDisplay =
| ReactElement<any, string | JSXElementConstructor<any>>
| ReactNodeArray
| null;

export const PRIMARY_MAIN_COLOR = '#F3D6D8';
3 changes: 2 additions & 1 deletion styles/theme.ts
Original file line number Diff line number Diff line change
@@ -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' {
Expand All @@ -16,7 +17,7 @@ declare module '@mui/material/styles' {
let theme = createTheme({
palette: {
primary: {
main: '#F3D6D8',
main: PRIMARY_MAIN_COLOR,
light: '#F7E2E4',
dark: '#EA0050',
},
Expand Down

0 comments on commit 40496ab

Please sign in to comment.