Ensure the full width page layout in the same way as standard page la…

…yout #3325
sciety · Jun 17, 2024 · 2b55fad · 2b55fad
1 parent 844b8f0
commit 2b55fad
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/src/read-side/html-pages/shared-components/full-width-page-layout.ts b/src/read-side/html-pages/shared-components/full-width-page-layout.ts
@@ -1,23 +1,18 @@
 import { pipe } from 'fp-ts/function';
-import { siteFooter } from './site-footer';
-import { siteHeader } from './site-header';
+import { wrapWithHeaderAndFooter } from './standard-page-layout/standard-page-layout';
+import { toHtmlFragment } from '../../../types/html-fragment';
 import { toContentWrappedInLayout } from '../content-wrapped-in-layout';
-import { mobileMenu } from '../mobile-menu/mobile-menu';
 import { PageLayout } from '../page-layout';
 
 export const fullWidthPageLayout: PageLayout = (user) => (page) => pipe(
   `
-    <div class="standard-page-container">
-      ${siteHeader(user)}
-
-      <main id="mainContent">
-        <div class="page-content">
-          ${page.content}
-        </div>
-      </main>
-      ${siteFooter}
+  <main id="mainContent">
+    <div class="page-content">
+      ${page.content}
     </div>
-    ${mobileMenu(user)}
+  </main>
   `,
+  toHtmlFragment,
+  wrapWithHeaderAndFooter('standard-page-container', user),
   toContentWrappedInLayout,
 );
diff --git a/src/read-side/html-pages/shared-components/standard-page-layout/standard-page-layout.ts b/src/read-side/html-pages/shared-components/standard-page-layout/standard-page-layout.ts
@@ -1,21 +1,22 @@
 import * as O from 'fp-ts/Option';
 import { pipe } from 'fp-ts/function';
+import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
 import { UserDetails } from '../../../../types/user-details';
 import { toContentWrappedInLayout } from '../../content-wrapped-in-layout';
 import { mobileMenu } from '../../mobile-menu/mobile-menu';
 import { PageLayout } from '../../page-layout';
 import { siteFooter } from '../site-footer';
 import { siteHeader } from '../site-header';
 
-const wrapWithHeaderAndFooter = (pageContainerClass: string, user: O.Option<UserDetails>) => (main: string) => `
+export const wrapWithHeaderAndFooter = (pageContainerClass: string, user: O.Option<UserDetails>) => (main: HtmlFragment): HtmlFragment => toHtmlFragment(`
   <div class="${pageContainerClass}">
     ${siteHeader(user)}
 
     ${main}
     ${siteFooter}
   </div>
   ${mobileMenu(user)}
-`;
+`);
 
 export const standardPageLayout: PageLayout = (user) => (page) => pipe(
   `
@@ -27,6 +28,7 @@ export const standardPageLayout: PageLayout = (user) => (page) => pipe(
     </div>
   </main>
   `,
+  toHtmlFragment,
   wrapWithHeaderAndFooter('standard-page-container', user),
   toContentWrappedInLayout,
 );