refactor: replace gatsby page wrapper with layout

apps/website/gatsby-config.js

@@ -33,6 +33,7 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-pnpm',
+    'gatsby-plugin-layout',
     {
       resolve: '@amazeelabs/gatsby-source-silverback',
       options: {

apps/website/package.json

@@ -16,6 +16,7 @@
     "gatsby-plugin-pnpm": "^1.2.10",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sitemap": "^6.11.0",
+    "gatsby-plugin-layout": "^4.12.0",
     "netlify-cli": "^15.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

apps/website/src/utils/wrapper.tsx → apps/website/src/layouts/index.tsx

@@ -1,7 +1,8 @@
-import { Locale, NavigationFragment } from '@custom/schema';
+import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
+import { NavigationFragment } from '@custom/schema';
 import { IntlProvider } from '@custom/ui/intl';
 import { Frame } from '@custom/ui/routes/Frame';
-import { graphql, useStaticQuery } from 'gatsby';
+import { graphql, useStaticQuery, WrapPageElementNodeArgs } from 'gatsby';
 import React, { PropsWithChildren } from 'react';
 
 function useFrameQuery() {
@@ -34,15 +35,17 @@ function useFrameQuery() {
   `);
 }
 
-export function Wrapper({
+export default function Layout({
   children,
-  locale = 'en',
-}: PropsWithChildren<{ locale?: Locale }>) {
+  pageContext: { locale },
+}: PropsWithChildren<
+  WrapPageElementNodeArgs<any, SilverbackPageContext>['props']
+>) {
   const data = useFrameQuery();
   const main = locale === 'de' ? data.main_de : data.main_en;
   const footer = locale === 'de' ? data.footer_de : data.footer_en;
   return (
-    <IntlProvider locale={locale}>
+    <IntlProvider locale={locale || 'en'}>
       <Frame
         header={{ mainNavigation: main }}
         footer={{ footerNavigation: footer }}

apps/website/src/pages/404.tsx

@@ -7,7 +7,6 @@ import {
   LanguageNegotiator,
   LanguageNegotiatorContent,
 } from '../utils/language-negotiator';
-import { Wrapper } from '../utils/wrapper';
 
 export const query = graphql`
   query NotFoundPage {
@@ -40,16 +39,14 @@ export function Head() {
 
 export default function Index({ data }: PageProps<NotFoundPageQuery>) {
   return (
-    <Wrapper>
-      <LanguageNegotiator defaultLanguage={'en'}>
-        {data.websiteSettings?.notFoundPage?.translations?.map(
-          ({ locale, ...page }) => (
-            <LanguageNegotiatorContent key={locale} language={locale}>
-              <Page page={page} />
-            </LanguageNegotiatorContent>
-          ),
-        )}
-      </LanguageNegotiator>
-    </Wrapper>
+    <LanguageNegotiator defaultLanguage={'en'}>
+      {data.websiteSettings?.notFoundPage?.translations?.map(
+        ({ locale, ...page }) => (
+          <LanguageNegotiatorContent key={locale} language={locale}>
+            <Page page={page} />
+          </LanguageNegotiatorContent>
+        ),
+      )}
+    </LanguageNegotiator>
   );
 }

apps/website/src/pages/__preview/page.tsx

@@ -1,16 +1,11 @@
 import React from 'react';
 
 import PagePreview from '../../preview/page';
-import { Wrapper } from '../../utils/wrapper';
 
 export function Head() {
   return <meta title="Page preview" />;
 }
 
 export default function PagePreviewTemplate() {
-  return (
-    <Wrapper>
-      <PagePreview />
-    </Wrapper>
-  );
+  return <PagePreview />;
 }

apps/website/src/pages/content-hub.tsx

@@ -1,16 +1,10 @@
 import { ContentHub } from '@custom/ui/routes/ContentHub';
 import React from 'react';
 
-import { Wrapper } from '../utils/wrapper';
-
 export function Head() {
   return <meta title="Page not found" />;
 }
 
 export default function ContentHubPage() {
-  return (
-    <Wrapper>
-      <ContentHub pageSize={6} />
-    </Wrapper>
-  );
+  return <ContentHub pageSize={6} />;
 }

apps/website/src/templates/page.tsx

@@ -1,11 +1,9 @@
 import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
-import { Locale, PageFragment } from '@custom/schema';
+import { PageFragment } from '@custom/schema';
 import { Page } from '@custom/ui/routes/Page';
 import { graphql, HeadProps, PageProps } from 'gatsby';
 import React from 'react';
 
-import { Wrapper } from '../utils/wrapper';
-
 export const query = graphql`
   query PageTemplate($remoteId: String!) {
     page(remoteId: { eq: $remoteId }) {
@@ -48,11 +46,6 @@ export function Head({ data }: HeadProps<PageTemplateQuery>) {
 
 export default function PageTemplate({
   data,
-  pageContext,
 }: PageProps<PageTemplateQuery, SilverbackPageContext>) {
-  return (
-    <Wrapper locale={(pageContext.locale || 'en') as Locale}>
-      <Page page={data.page} />
-    </Wrapper>
-  );
+  return <Page page={data.page} />;
 }