feat(2.6): Add common layout components

one-aalam · Aug 30, 2021 · 39c2d60 · 39c2d60 · vercel · Aug 30, 2021
1 parent f1050eb
commit 39c2d60
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 33 deletions.
diff --git a/src/layouts/default.astro b/src/layouts/default.astro
@@ -0,0 +1,32 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import MainLayout from '../components/MainLayout.astro';
+
+const { content, showPageHeader = true } = Astro.props
+---
+<!doctype html>
+<html lang="en">
+    <head>
+        <BaseHead title={content.title ? `Astro - Ink | ${content.title}` : ''} description={content.description}/>
+    </head>
+    <MainLayout>
+        {showPageHeader &&
+            <div class="page__header">
+                <h1 class="page__title">{content.title}</h1>
+                <h5 class="page__desc">{content.description}</h5>
+            </div>
+        }
+        <slot />
+    </MainLayout>
+</html>
+<style>
+    .page__header {
+        @apply py-4 mb-1
+    }
+    .page__title {
+        @apply text-5xl font-extrabold text-primary dark:text-primaryDark
+    }
+    .page__desc {
+        @apply text-gray-400
+    }
+</style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,19 +1,10 @@
 ---
-import BaseHead from '$/components/BaseHead.astro'
-import MainLayout from '$/components/MainLayout.astro'
+import DefaultPageLayout from '$/layouts/default.astro'
+
 const title = 'About';
 const description = 'There\'s a simple secret to building a faster website — just ship less.';
 ---
-<html>
-  <head>
-    <BaseHead title={`Astro Ink | ${title}`} description={description} />
-  </head>
-  <MainLayout>
-    <div class="page__header mb-6">
-        <h1 class="page__title">{title}</h1>
-        <h5 class="page__desc">{description}</h5>
-    </div>
-
+<DefaultPageLayout content={{ title, description }}>
     <article class="page__content prose lg:prose-md max-w-none dark:text-white">
         <p>
             Astro-Ink is a crisp, minimal, personal blog theme for Astro, that shows the capability of statically built sites - offering all the goodness and DX of the modern JS ecosystem without actually shipping any JS by default. It's built by...
@@ -28,20 +19,9 @@ const description = 'There\'s a simple secret to building a faster website — j
             </div>
         </div>
     </article>
-
-  </MainLayout>
-</html>
+</DefaultPageLayout>
 
 <style>
-    .page__header {
-        @apply py-4 mb-1
-    }
-    .page__title {
-        @apply text-5xl font-extrabold text-primary dark:text-primaryDark
-    }
-    .page__desc {
-        @apply text-gray-400
-    }
     .author {
         @apply flex flex-col w-full
     }

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,13 +1,11 @@
 ---
-import BaseHead from '$/components/BaseHead.astro'
-import MainLayout from '$/components/MainLayout.astro'
+import DefaultPageLayout from '$/layouts/default.astro'
 import Intro from '$/components/Intro.astro'
+
+const title = 'Home'
+const description = 'Astro-Ink is a crisp, minimal, personal blog theme for Astro'
+
 ---
-<html>
-  <head>
-    <BaseHead title="Astro Ink | Home" />
-  </head>
-  <MainLayout>
+<DefaultPageLayout content={{ title, description }} showPageHeader={false}>
     <Intro/>
-  </MainLayout>
-</html>
+</DefaultPageLayout>