SEO

src/app/[sanitySectionSlug]/page.tsx

@@ -1,10 +1,20 @@
+import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import LandingPage from '@/components/LandingPage';
 import { DEFAULT_SECTION } from '@/components/LandingPage/constants';
 import { getSection } from '@/components/LandingPage/utils';
+import { generateMetadataFromSanity } from '@/components/LandingPage/metadata';
 
-// TODO: Add page metadata
+export type ParamProps = {
+  params: Promise<{ sanitySectionSlug: string }>;
+};
+
+export async function generateMetadata(props: ParamProps): Promise<Metadata> {
+  const params = await props.params;
+  const metadata = await generateMetadataFromSanity(params.sanitySectionSlug);
+  return metadata;
+}
 
 export default function SanityContentPage({ params }: { params: { sanitySectionSlug: string } }) {
   const sanitySection = getSection(params.sanitySectionSlug);

src/app/page.tsx

@@ -1,59 +1,13 @@
 import { Metadata } from 'next';
 
-import { basePath } from '@/config';
 import LandingPage from '@/components/LandingPage';
 import { EnumSection } from '@/components/LandingPage/sections/sections';
+import { generateMetadataFromSanity } from '@/components/LandingPage/metadata';
 
-export const metadata: Metadata = {
-  title: 'Open Brain Platform',
-  description: 'Virtual labs to explore, build and simulate the brain',
-  keywords: [
-    'blue',
-    'institute',
-    'platform',
-    'explore',
-    'build',
-    'model',
-    'simulate',
-    'brain',
-    'simulation',
-    'neuroscience',
-    'virtual labs',
-    'circuit',
-    'cellular',
-    'system',
-  ],
-  authors: [{ name: 'Open Brain Institute', url: 'https://www.openbraininstitute.org' }],
-  openGraph: {
-    title: 'Open Brain Institute',
-    description: 'Virtual labs to explore, build and simulate the brain',
-    authors: ['Open Brain Institute'],
-    images: [
-      {
-        url: `${basePath}/images/opengraph/OBP_OGImage.jpg`,
-        width: 800,
-        height: 500,
-      },
-    ],
-  },
-  robots: {
-    index: true,
-    follow: true,
-    nocache: true,
-    googleBot: {
-      index: true,
-      follow: true,
-      noimageindex: true,
-    },
-  },
-  metadataBase: new URL('https://www.openbrainplatform.com'),
-  alternates: {
-    canonical: '/',
-    languages: {
-      'en-US': '/en-US',
-    },
-  },
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const metadata = await generateMetadataFromSanity('/');
+  return metadata;
+}
 
 export default function RootPage({
   searchParams,

src/components/LandingPage/components/swipeable-cards-list/swipeable-cards-list.module.css

@@ -48,7 +48,7 @@
     gap: 2em;
   }
 
-  .swipeableCardsList > footer >div {
+  .swipeableCardsList > footer > div {
     order: 2;
   }
 }

src/components/LandingPage/metadata/README.md

@@ -0,0 +1,7 @@
+# SEO Metadata
+
+The title, description, keywords and image preview are defined in Sanity for each secion of the landing page.
+
+<https://open-brain-institute.sanity.studio/structure/pages;14864618-d335-4023-ada8-aba493bdea83>
+
+If anything goes wrong with the query, we fall back to a default metadata that is defined in [`default.ts`](./default.ts).

src/components/LandingPage/metadata/default.ts

@@ -0,0 +1,54 @@
+import { Metadata } from 'next';
+
+import ImageURL from './default.jpg';
+
+export const DEFAULT_METADATA: Metadata = {
+  title: 'Open Brain Platform',
+  description: 'Virtual labs to explore, build and simulate the brain',
+  keywords: [
+    'blue',
+    'institute',
+    'platform',
+    'explore',
+    'build',
+    'model',
+    'simulate',
+    'brain',
+    'simulation',
+    'neuroscience',
+    'virtual labs',
+    'circuit',
+    'cellular',
+    'system',
+  ],
+  authors: [{ name: 'Open Brain Institute', url: 'https://www.openbraininstitute.org' }],
+  openGraph: {
+    title: 'Open Brain Institute',
+    description: 'Virtual labs to explore, build and simulate the brain',
+    authors: ['Open Brain Institute'],
+    images: [
+      {
+        url: ImageURL.src,
+        width: 900,
+        height: 600,
+      },
+    ],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      noimageindex: true,
+    },
+  },
+  metadataBase: new URL('https://www.openbrainplatform.com'),
+  alternates: {
+    canonical: '/',
+    languages: {
+      'en-US': '/en-US',
+    },
+  },
+};

src/components/LandingPage/metadata/index.ts

@@ -0,0 +1 @@
+export * from './metadata';

src/components/LandingPage/metadata/metadata.groq

@@ -0,0 +1,9 @@
+*[_type == "pages" && slug.current == "{{SLUG}}"][0] {
+    title,
+    seoTitle,
+    seoDescription,
+    seoKeywords,
+    'imageURL': ogImage.asset->url,
+    'imageWidth': ogImage.asset->metadata.dimensions.width,
+    'imageHeight': ogImage.asset->metadata.dimensions.height
+}

src/components/LandingPage/metadata/metadata.ts

@@ -0,0 +1,60 @@
+import { Metadata } from 'next';
+
+import { fetchSanity } from '../content/content';
+import { tryType } from '../content';
+import queryTemplate from './metadata.groq';
+import { DEFAULT_METADATA } from './default';
+import { logError } from '@/util/logger';
+
+export async function generateMetadataFromSanity(slug: string): Promise<Metadata> {
+  const query = queryTemplate.replace('{{SLUG}}', slug);
+  try {
+    const content = await fetchSanity(query, isContentForSeo);
+    if (!content) return DEFAULT_METADATA;
+
+    return {
+      title: content.seoTitle,
+      description: content.seoDescription,
+      keywords: content.seoKeywords,
+      authors: [{ name: 'Open Brain Institute' }, { name: 'Henry Markram' }],
+      creator: 'Open Brain Institute',
+      openGraph: {
+        title: content.title,
+        description: content.seoDescription,
+        images: [
+          {
+            url: content.imageURL,
+            width: content.imageWidth,
+            height: content.imageHeight,
+          },
+        ],
+        type: 'website',
+      },
+    };
+  } catch (ex) {
+    logError('Unable to retrieve SEO content from Sanity!', ex, query);
+    return DEFAULT_METADATA;
+  }
+}
+
+interface ContentForSeo {
+  title: string;
+  seoTitle: string;
+  seoDescription: string;
+  seoKeywords: string[];
+  imageURL: string;
+  imageWidth: number;
+  imageHeight: number;
+}
+
+function isContentForSeo(data: unknown): data is ContentForSeo {
+  return tryType('ContentForSeo', data, {
+    title: 'string',
+    seoTitle: 'string',
+    seoDescription: 'string',
+    seoKeywords: ['array', 'string'],
+    imageURL: 'string',
+    imageWidth: 'number',
+    imageHeight: 'number',
+  });
+}

src/components/LandingPage/widgets/PriceList/large-screen/FeatureBloc/FeatureLine/FeatureCell/FeatureCell.module.css

@@ -1,71 +1,71 @@
 .featureCell {
-    color: #0a0;
-    fill: currentColor;
-    place-self: start;
-  }
+  color: #0a0;
+  fill: currentColor;
+  place-self: start;
+}
 
-  .featureCell.unavailable {
-    color: var(--color-neutral);
-    fill: currentColor;
-  }
+.featureCell.unavailable {
+  color: var(--color-neutral);
+  fill: currentColor;
+}
 
-  svg.featureCell {
-    width: 1.5em;
-    height: 1.5em;
-  }
+svg.featureCell {
+  width: 1.5em;
+  height: 1.5em;
+}
 
-  button.tooltip {
-    all: unset;
-    color: #0a0;
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.5em;
-    position: relative;
-    width: fit-content;
-  }
+button.tooltip {
+  all: unset;
+  color: #0a0;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5em;
+  position: relative;
+  width: fit-content;
+}
 
-  button.tooltip::after {
-    pointer-events: none;
-    content: attr(data-tooltip);
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: max-content;
-    max-width: min(300px, 80vw);
-    overflow: hidden;
-    z-index: 999998;
-    background-color: var(--color-primary);
-    color: #fffe;
-    padding: 1.5em;
-    transform: translateY(calc(-100% - 12px)) translateX(8px);
-    border-radius: 4px;
-    transition: opacity 0.3s;
-    opacity: 0;
-  }
+button.tooltip::after {
+  pointer-events: none;
+  content: attr(data-tooltip);
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: max-content;
+  max-width: min(300px, 80vw);
+  overflow: hidden;
+  z-index: 999998;
+  background-color: var(--color-primary);
+  color: #fffe;
+  padding: 1.5em;
+  transform: translateY(calc(-100% - 12px)) translateX(8px);
+  border-radius: 4px;
+  transition: opacity 0.3s;
+  opacity: 0;
+}
 
-  button.tooltip::before {
-    pointer-events: none;
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 0;
-    height: 0;
-    border: 16px solid;
-    border-color: var(--color-primary) transparent transparent transparent;
-    z-index: 999999;
-    box-sizing: content-box;
-    transform: scaleX(0.5) translate(8px, -12px);
-    transition: opacity 0.3s;
-    opacity: 0;
-  }
+button.tooltip::before {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  border: 16px solid;
+  border-color: var(--color-primary) transparent transparent transparent;
+  z-index: 999999;
+  box-sizing: content-box;
+  transform: scaleX(0.5) translate(8px, -12px);
+  transition: opacity 0.3s;
+  opacity: 0;
+}
 
-  button.tooltip:hover::before,
-  button.tooltip:hover::after,
-  button.tooltip:active::before,
-  button.tooltip:active::after {
-    opacity: 1;
-  }
+button.tooltip:hover::before,
+button.tooltip:hover::after,
+button.tooltip:active::before,
+button.tooltip:active::after {
+  opacity: 1;
+}

src/components/LandingPage/widgets/PriceList/small-screen/small-screen.tsx

@@ -5,10 +5,9 @@ import FeatureBloc from './FeatureBloc';
 import { classNames } from '@/util/utils';
 import { styleBlockFullWidth } from '@/components/LandingPage/styles';
 import { useSanityContentForPricing } from '@/components/LandingPage/content/pricing';
+import { useMenuHeight } from '@/components/LandingPage/utils';
 
-import { ID_MENU } from '@/components/LandingPage/constants';
 import styles from './small-screen.module.css';
-import { useMenuHeight } from '@/components/LandingPage/utils';
 
 export interface SmallScreenProps {
   className?: string;

src/components/coming-soon/header.module.css

@@ -0,0 +1,3 @@
+.link:hover {
+  color: currentColor;
+}