fix: footer matching content width

oxen-io · Oct 9, 2024 · 71bd3f5 · 71bd3f5
1 parent b801904
commit 71bd3f5
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 26 deletions.
diff --git a/apps/foundation/app/(Site)/[slug]/layout.tsx b/apps/foundation/app/(Site)/[slug]/layout.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { Footer } from '@/components/Footer';
+import { getInitialSiteDataForSSR } from '@/lib/sanity/sanity-server';
+
+export default async function UniversalPageLayout({ children }: { children: ReactNode }) {
+  const { settings } = await getInitialSiteDataForSSR();
+  return (
+    <>
+      {children}
+      <Footer className="max-w-screen-md" {...settings} />
+    </>
+  );
+}
diff --git a/apps/foundation/app/(Site)/blog/[slug]/HeadingOutline.tsx b/apps/foundation/app/(Site)/blog/[slug]/HeadingOutline.tsx
@@ -32,7 +32,7 @@ export default function HeadingOutline({ title, headings }: HeadingOutlineProps)
               onClick={() => {
                 scrollToHeading(heading);
               }}
-              className={cn(navlinkVariants({ active: false }), 'text-start')}
+              className={cn(navlinkVariants({ active: false }), 'w-full text-wrap text-start')}
             >
               {heading}
             </button>

diff --git a/apps/foundation/app/(Site)/blog/layout.tsx b/apps/foundation/app/(Site)/blog/layout.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { Footer } from '@/components/Footer';
+import { getInitialSiteDataForSSR } from '@/lib/sanity/sanity-server';
+
+export default async function BlogLayout({ children }: { children: ReactNode }) {
+  const { settings } = await getInitialSiteDataForSSR();
+  return (
+    <>
+      {children}
+      <Footer className="max-w-screen-xl" {...settings} />
+    </>
+  );
+}
diff --git a/apps/foundation/app/(Site)/blog/page.tsx b/apps/foundation/app/(Site)/blog/page.tsx
@@ -43,7 +43,7 @@ export default async function BlogGridPage() {
   );
 
   return (
-    <main className="mx-auto mt-4 flex max-w-screen-xl flex-col">
+    <main className="mt-4 flex max-w-screen-xl flex-col">
       <Link
         href={`${SANITY_SCHEMA_URL.POST}${latestPost.slug.current}`}
         prefetch

diff --git a/apps/foundation/app/(Site)/layout.tsx b/apps/foundation/app/(Site)/layout.tsx
@@ -5,7 +5,6 @@ import { GlobalProvider } from '@/providers/global-provider';
 import Header from '@/components/Header';
 import { ReactNode } from 'react';
 import { cn } from '@session/ui/lib/utils';
-import { Footer } from '@/components/Footer';
 import DevSheetServerSide from '@/components/DevSheetServerSide';
 import { getInitialSiteDataForSSR } from '@/lib/sanity/sanity-server';
 import Head from 'next/head';
@@ -32,7 +31,6 @@ export default async function RootLayout({ children }: { children: ReactNode })
         <body className="bg-session-white font-roboto-flex text-session-text-black mx-4 flex flex-col items-center overflow-x-hidden">
           <Header {...settings} />
           {children}
-          <Footer {...settings} />
           {!isProduction() ? <DevSheetServerSide /> : null}
         </body>
       </GlobalProvider>

diff --git a/apps/foundation/app/(Site)/not-found.tsx b/apps/foundation/app/(Site)/not-found.tsx
@@ -3,6 +3,8 @@ import { HomeIcon } from '@session/ui/icons/HomeIcon';
 import { Button } from '@session/ui/ui/button';
 import Link from 'next/link';
 import { getTranslations } from 'next-intl/server';
+import { Footer } from '@/components/Footer';
+import { getInitialSiteDataForSSR } from '@/lib/sanity/sanity-server';
 
 export async function generateMetadata() {
   const dictionary = await getTranslations('notFound');
@@ -14,28 +16,32 @@ export async function generateMetadata() {
 
 export default async function NotFound() {
   const dictionary = await getTranslations('notFound');
+  const { settings } = await getInitialSiteDataForSSR();
   return (
-    <div className="-mt-header-displacement flex h-screen w-full items-center justify-center p-32 align-middle">
-      <div className="flex flex-col items-center justify-center text-center align-middle md:flex-row md:gap-10 md:text-left lg:h-[140px]">
-        <span className="font-monument-extended text-9xl font-bold leading-none lg:mt-[-30px] lg:max-h-[140px] lg:text-[192px]">
-          404
-        </span>
-        <div className="bg-text-primary m-0 hidden h-full w-px p-0 lg:block" />
-        <div className="flex h-full flex-col justify-between gap-4 md:gap-0">
-          <p className="max-w-[380px] text-xl md:text-2xl">{dictionary('description')}</p>
-          <Link href="/" prefetch={false}>
-            <Button
-              size="lg"
-              variant="secondary"
-              className="group"
-              data-testid={ButtonDataTestId.Not_Found_Return_Home}
-            >
-              <HomeIcon className="fill-session-green group-hover:fill-session-black mr-2 h-6 w-6" />{' '}
-              {dictionary('homeButton')}
-            </Button>
-          </Link>
+    <>
+      <div className="-mt-header-displacement flex h-screen w-full items-center justify-center p-32 align-middle">
+        <div className="flex flex-col items-center justify-center text-center align-middle md:flex-row md:gap-10 md:text-left lg:h-[140px]">
+          <span className="font-monument-extended text-9xl font-bold leading-none lg:mt-[-30px] lg:max-h-[140px] lg:text-[192px]">
+            404
+          </span>
+          <div className="bg-text-primary m-0 hidden h-full w-px p-0 lg:block" />
+          <div className="flex h-full flex-col justify-between gap-4 md:gap-0">
+            <p className="max-w-[380px] text-xl md:text-2xl">{dictionary('description')}</p>
+            <Link href="/" prefetch={false}>
+              <Button
+                size="lg"
+                variant="secondary"
+                className="group"
+                data-testid={ButtonDataTestId.Not_Found_Return_Home}
+              >
+                <HomeIcon className="fill-session-green group-hover:fill-session-black mr-2 h-6 w-6" />{' '}
+                {dictionary('homeButton')}
+              </Button>
+            </Link>
+          </div>
         </div>
       </div>
-    </div>
+      <Footer className="max-w-screen-xl" {...settings} />
+    </>
   );
 }
diff --git a/apps/foundation/app/(Site)/page.tsx b/apps/foundation/app/(Site)/page.tsx
@@ -1,5 +1,6 @@
 import { getLandingPageSlug } from '@/lib/sanity/sanity-server';
 import UniversalPage from './[slug]/page';
+import UniversalPageLayout from '@/app/(Site)/[slug]/layout';
 
 /**
  * Force static rendering and cache the data of a layout or page by forcing `cookies()`, `headers()`
@@ -15,5 +16,9 @@ export default async function LandingPage() {
     throw new Error('No landing page set in settings to statically generate');
   }
 
-  return <UniversalPage params={{ slug }} />;
+  return (
+    <UniversalPageLayout>
+      <UniversalPage params={{ slug }} />
+    </UniversalPageLayout>
+  );
 }
diff --git a/apps/foundation/components/Footer.tsx b/apps/foundation/components/Footer.tsx
@@ -22,6 +22,7 @@ type FooterProps = {
   headerLinks?: SiteSchemaType['headerLinks'];
   showSocialLinksInFooter?: SiteSchemaType['showSocialLinksInFooter'];
   footerSocialLinks?: SiteSchemaType['footerSocialLinks'];
+  className?: string;
 };
 
 export async function Footer({
@@ -31,6 +32,7 @@ export async function Footer({
   headerLinks,
   showSocialLinksInFooter,
   footerSocialLinks,
+  className,
 }: FooterProps) {
   const routes: Array<NavLinkProps> = [];
 
@@ -88,7 +90,7 @@ export async function Footer({
   }
 
   return (
-    <div className="my-16 flex w-full max-w-screen-md flex-col gap-2 text-sm md:text-base">
+    <div className={cn('my-16 flex w-full flex-col gap-2 text-sm md:text-base', className)}>
       {copyright ? (
         <span className="font-source-serif inline-flex items-center gap-1.5 text-xs italic md:text-base">
           <FlagOfSwitzerlandIcon className="inline-block h-5 w-5 md:h-6 md:w-6" />