Decompose layouts a bit

seattlejs · Dec 29, 2024 · 68df423 · 68df423
1 parent 8d4cfa0
commit 68df423
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 34 deletions.
diff --git a/src/components/PageContainer.astro b/src/components/PageContainer.astro
@@ -0,0 +1,15 @@
+---
+import Footer from './Footer.astro'
+import Header from './Header.astro'
+---
+
+<div id="main">
+  <Header />
+  <div id="page">
+    <div class="page-title">
+      <h1>{Astro.props.pageTitle}</h1>
+    </div>
+    <div class="page-body"><slot /></div>
+  </div>
+  <Footer />
+</div>
diff --git a/src/layouts/Layout.astro → src/layouts/BaseLayout.astro b/src/layouts/Layout.astro → src/layouts/BaseLayout.astro
@@ -1,6 +1,4 @@
 ---
-import Footer from '@/components/Footer.astro'
-import Header from '@/components/Header.astro'
 import '../styles/main.css'
 
 let { pageTitle } = Astro.props
@@ -52,20 +50,7 @@ if (pageTitle) {
     ` : `` } -->
   </head>
   <body>
-    <!-- Figure out if this styling for main and it's wrapper is necessary -->
-    <!-- <style>
-      :host {
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-      }
-      #main {
-        flex: 1;
-      }
-    </style> -->
-    <Header />
-    <div id="main"><slot /></div>
-    <Footer />
+    <slot />
     <script
       src="https://kit.fontawesome.com/95fd764ad0.js"
       crossorigin="anonymous"

diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -1,13 +1,10 @@
 ---
-import Layout from '@/layouts/Layout.astro'
-const { pageTitle } = Astro.props
+import PageContainer from '@/components/PageContainer.astro'
+import Layout from '@/layouts/BaseLayout.astro'
 ---
 
-<Layout pageTitle={pageTitle}>
-  <div id="page">
-    <div class="page-title">
-      <h1>{pageTitle}</h1>
-    </div>
-    <div class="page-body"><slot /></div>
-  </div>
+<Layout pageTitle={Astro.props.pageTitle}>
+  <PageContainer pageTitle={Astro.props.pageTitle}>
+    <slot />
+  </PageContainer>
 </Layout>
diff --git a/src/pages/events/[id].astro b/src/pages/events/[id].astro
@@ -3,8 +3,9 @@ import type { InferGetStaticPropsType, GetStaticPaths } from 'astro'
 import { marked } from 'marked'
 
 import { inflateEvent } from '@/utils/data'
-import PageLayout from '@/layouts/PageLayout.astro'
 import events from '@/data/events.json'
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import PageContainer from '@/components/PageContainer.astro'
 
 export const getStaticPaths = (async () => {
   return events.map(event => ({ params: { id: event.id }, props: { event } }))
@@ -38,7 +39,7 @@ let location = event.location ?? null
 // }
 ---
 
-<PageLayout pageTitle={pageTitle}>
+<BaseLayout pageTitle={pageTitle}>
   <div id="email-container" class="container" hidden style={{ margin: '20px' }}>
     <button id="copy-html-btn" type="button"> Copy HTML to clipboard </button>
     <div id="html-contents">
@@ -118,7 +119,7 @@ let location = event.location ?? null
     </div>
   </div>
 
-  <div id="event-page-container">
+  <PageContainer pageTitle={pageTitle}>
     {description && <p set:html={toHTML(description)} />}
     {location && <p>{location}</p>}
     {
@@ -184,8 +185,8 @@ let location = event.location ?? null
           </div>
         ))
     }
-  </div>
-</PageLayout>
+  </PageContainer>
+</BaseLayout>
 
 <script>
   import { initializeSwitch } from '@/scripts/queryParamSwitch'
@@ -200,6 +201,6 @@ let location = event.location ?? null
 
   initializeSwitch([
     ['email', '#email-container'],
-    ['', '#event-page-container'],
+    ['', '#main'],
   ])
 </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from '@/layouts/Layout.astro'
+import PageLayout from '@/layouts/PageLayout.astro'
 import { Image } from 'astro:assets'
 import Event from '@/components/Event.astro'
 import Organizers from '@/components/Organizers.astro'
@@ -15,7 +15,7 @@ const TWELVE_HOURS = 1000 * 60 * 60 * 12
 const futureEvents = [events.at(-1)]
 ---
 
-<Layout pageTitle="SeattleJS">
+<PageLayout pageTitle="SeattleJS">
   <!-- <img
     class="hero-image"
     src="/_public/images/blank-seattlejs-header.png"
@@ -65,7 +65,7 @@ const futureEvents = [events.at(-1)]
     <h2>Organizers</h2>
     <Organizers />
   </div>
-</Layout>
+</PageLayout>
 
 <style>
   .sponsors :global(div) {