feat(3.3): Add a dedicated Blog section

Author: one-aalam

src/config.ts

@@ -5,6 +5,10 @@ export const NAV_ITEMS: NavItems = {
         path: '/',
         title: 'home'
     },
+    blog: {
+        path: '/blog',
+        title: 'blog'
+    },
     about: {
         path: '/about',
         title: 'about'

src/pages/blog.astro

@@ -0,0 +1,12 @@
+---
+import DefaultPageLayout from '$/layouts/default.astro'
+import PostPreviewList from '$/components/PostPreviewList.astro'
+
+let title = 'Blog';
+let description = 'All the articles posted so far...'
+
+const posts = Astro.fetchContent('./blog/*.md')
+---
+<DefaultPageLayout content={{ title, description }}>
+    <PostPreviewList posts={posts} />
+</DefaultPageLayout>

src/pages/index.astro

@@ -10,4 +10,16 @@ const posts = Astro.fetchContent('./blog/*.md')
 ---
 <DefaultPageLayout content={{ title, description }} showPageHeader={false}>
     <PostPreviewList posts={posts} />
+    <div class="page__actions">
+        <a class="action__go-to-blog" href="/blog" title="All Posts">All Posts &rarr;</a>
+    </div>
 </DefaultPageLayout>
+
+<style>
+    .page__actions {
+        @apply flex justify-center md:justify-end py-6
+    }
+    .action__go-to-blog {
+        @apply text-base uppercase text-gray-400 dark:text-gray-600 hover:underline
+    }
+</style>