feat(2.5): Multiple Pages + Linking

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

Hide file tree

Showing 4 changed files with 85 additions and 0 deletions.
diff --git a/src/components/MainLayout.astro b/src/components/MainLayout.astro
@@ -2,10 +2,13 @@
 import BaseLayout from './BaseLayout.astro';
 import Header from './Header.astro';
 import Footer from './Footer.astro';
+import Nav from './Nav.astro';
+
 ---
 <BaseLayout>
     <br class="my-4"/>
     <Header/>
+    <Nav/>
     <div class="content">
         <slot />
     </div>

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -0,0 +1,28 @@
+---
+import { toTitleCase } from '$/utils'
+
+const NAV_ITEMS: NavItems = {
+    home: {
+        path: '/',
+        title: 'home'
+    },
+    about: {
+        path: '/about',
+        title: 'about'
+    }
+}
+---
+<nav class="nav py-3">
+    <ul class="nav-list">
+         {
+            Object.keys(NAV_ITEMS).map(navItemKey => <li>
+                <a class="hover:underline" href={NAV_ITEMS[navItemKey].path} title={NAV_ITEMS[navItemKey].title}>{toTitleCase(NAV_ITEMS[navItemKey].title)}</a>
+            </li>)
+        }
+    </ul>
+</nav>
+<style>
+    .nav-list {
+        @apply inline-flex list-none gap-8 text-xl font-semibold text-primarySecondary dark:text-primarySecondaryDark py-2
+    }
+</style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -0,0 +1,48 @@
+---
+import BaseHead from '$/components/BaseHead.astro'
+import MainLayout from '$/components/MainLayout.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>
+
+    <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...
+        </p>
+        <h3>Few Bots, Meta-humans & a Guy!</h3>
+        <div class="author">
+            <img class="rounded-full" width="160" src="https://assets.website-files.com/5e51c674258ffe10d286d30a/5e5358878e2493fbea064dd9_peep-59.svg" title="Aalam" />
+            <div>
+                Aftab Alam //
+                <a href="https://twitter.com/aftabbuddy" title="Author's Twitter Handle">@aftabbuddy</a> //
+                <a href="https://github.com/one-aalam" title="Author's Github URL">one-aalam</a>
+            </div>
+        </div>
+    </article>
+
+  </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
+    }
+    .author {
+        @apply flex flex-col w-full
+    }
+</style>
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -0,0 +1,6 @@
+export const toTitleCase = (str: string) => str.replace(
+      /\w\S*/g,
+      function(txt) {
+        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+      }
+    )