refactor: split parts into standalone components

src/components/ArticleList.astro

@@ -0,0 +1,19 @@
+---
+const { posts, displayDate = false, placeholder = false } = Astro.props;
+---
+<div style="margin-top: 1rem; margin-left: 1rem;">
+    {posts.map((post) => (
+            <p>
+                {displayDate && <span class="list-date">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>}
+                <a href={`/blog/${post.slug}`}>{post.data.title}</a>
+            </p>
+    ))}
+
+    {placeholder && posts.length === 0 && (
+            <>
+                <p>
+                    <span style="color: var(--terminal-yellow);">No posts here yet</span>
+                </p>
+            </>
+    )}
+</div>

src/components/Navbar.astro

@@ -0,0 +1,9 @@
+---
+import {siteConfig} from "../config";
+const navBarItems = siteConfig.navBarItems
+---
+<nav class="nav">
+    <a href="/" class="home">~</a>
+    <a href="/blog">Blog</a>
+    {navBarItems.map((item) => <a href={item.link}>{item.text}</a>)}
+</nav>

src/components/Statistics.astro

@@ -0,0 +1,35 @@
+---
+import {siteConfig} from "../config";
+const noscript = siteConfig.noClientJavaScript
+const statisticsType = siteConfig.siteAnalytics.type
+const umamiConfig = siteConfig.siteAnalytics.umami
+const goatCounterConfig = siteConfig.siteAnalytics.goatcounter
+---
+{statisticsType === 'umami' && (
+    <script
+            is:inline
+            defer
+            src={`https://${umamiConfig.instanceDomain}/script.js`}
+            data-website-id={umamiConfig.websiteId}
+    ></script>
+)}
+
+{statisticsEnabled && statisticsType === 'goatcounter' && (
+    <>
+        {noscript ? (
+            <img src={`https://${goatCounterConfig.instanceDomain}/count?p=/${Astro.url.pathname}`} alt="Analytics" />
+        ) : (
+        <>
+            <script
+                is:inline
+                async
+                data-goatcounter={`https://${goatCounterConfig.instanceDomain}/count`}
+                src={`https://${goatCounterConfig.instanceDomain}/count.js`}
+            ></script>
+            <noscript>
+                <img src={`https://${goatCounterConfig.instanceDomain}/count?p=/${Astro.url.pathname}`} alt="Analytics" />
+            </noscript>
+        </>
+        )}
+    </>
+)}

src/layouts/Layout.astro

@@ -8,6 +8,8 @@ import Meta from "../components/helper/head/Meta.astro";
 
 import { siteConfig } from "../config";
 import Logo from '../assets/mercury.svg'
+import Statistics from "../components/Statistics.astro";
+import Navbar from "../components/Navbar.astro";
 
 interface Props {
   title: string;
@@ -20,9 +22,6 @@ interface Props {
 const noscript = siteConfig.noClientJavaScript
 
 const statisticsEnabled = siteConfig.siteAnalytics.enabled
-const statisticsType = siteConfig.siteAnalytics.type
-const umamiConfig = siteConfig.siteAnalytics.umami
-const goatCounterConfig = siteConfig.siteAnalytics.goatcounter
 
 const defaultTitle = siteConfig.title
 const formattedRootPath = defaultTitle.toLowerCase().replace(/\s+/g, '-');
@@ -31,7 +30,6 @@ const path = formattedRootPath + (relativePath === '/' ? '' : relativePath)
 
 const pageTitle = (relativePath === '/' ? defaultTitle : `${Astro.props.title} - ${defaultTitle}`)
 
-const navBarItems = siteConfig.navBarItems
 const customFooter = siteConfig.customFooter
 const nekoType = siteConfig.neko?.type
 
@@ -54,13 +52,7 @@ const { title = pageTitle, author = siteConfig.defaultAuthor.name,description =
         <div class="terminal-path">
           {path}
         </div>
-        
+        <Navbar />
-        <nav class="nav">
-          <a href="/" class="home">~</a>
-          <a href="/blog">Blog</a>
-          {navBarItems.map((item) => <a href={item.link}>{item.text}</a>)}
-        </nav>
-
         <Search />
         
         <div class="content-box">
@@ -80,33 +72,7 @@ const { title = pageTitle, author = siteConfig.defaultAuthor.name,description =
         <p>Powered by <a href="https://git.gb0.dev/gb/mercury" target="_blank"><Logo width={16} height={16} /> mercury</a></p>
       </div>
     </footer>
-    {statisticsEnabled && statisticsType === 'umami' && (
+    {statisticsEnabled && <Statistics/>}
-          <script
-            is:inline
-            defer
-            src={`https://${umamiConfig.instanceDomain}/script.js`}
-            data-website-id={umamiConfig.websiteId}
-          ></script>
-        )}
-    {statisticsEnabled && statisticsType === 'goatcounter' && (
-      <>
-        {noscript ? (
-          <img src={`https://${goatCounterConfig.instanceDomain}/count?p=/${Astro.url.pathname}`} alt="Analytics" />
-        ) : (
-          <>
-            <script
-              is:inline
-              async
-              data-goatcounter={`https://${goatCounterConfig.instanceDomain}/count`}
-              src={`https://${goatCounterConfig.instanceDomain}/count.js`}
-            ></script>
-            <noscript>
-              <img src={`https://${goatCounterConfig.instanceDomain}/count?p=/${Astro.url.pathname}`} alt="Analytics" />
-            </noscript>
-          </>
-        )}
-      </>
-    )}
     { (siteConfig.neko.enabled && !noscript) &&
       <>
         <script is:inline define:vars={{ nekoType }}>

src/pages/blog.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
 import NewsLetter from "../components/NewsLetter.astro";
 import {siteConfig} from "../config";
+import ArticleList from "../components/ArticleList.astro";
 
 const posts = await getCollection('posts');
 posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());
@@ -16,22 +17,7 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
     
     <div style="margin-top: 2rem;">
       <span class="command">ls -la posts/</span>
-      <div style="margin-top: 1rem; margin-left: 1rem;">
+      <ArticleList posts={posts} displayDate={true} placeholder={true} />
-        {posts.map((post) => (
-          <p>
-            <span class="list-date">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
-            <a href={`/blog/${post.slug}`}>{post.data.title}</a>
-          </p>
-        ))}
-        
-        {posts.length === 0 && (
-          <>
-            <p>
-              <span style="color: var(--terminal-yellow);">No posts here yet</span>
-            </p>
-          </>
-        )}
-      </div>
     </div>
     
     <div style="margin-top: 2rem;">

src/pages/categories/[...category].astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 import {getCollection} from "astro:content";
+import ArticleList from "../../components/ArticleList.astro";
 
 export async function getStaticPaths() {
     const allPosts = await getCollection('posts');
@@ -25,12 +26,7 @@ const { posts } = Astro.props;
 <Layout title={`posts tagged with ${category}`} description={`Posts tagged with ${category}`}>
     <h1 class="title">ls ~/blog | grep "{category}"</h1>
     <ul>
-        {posts.map((post: any) =>
+        <ArticleList posts={posts} displayDate={true} />
-            <p>
-                <span class="list-date">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
-                <a href={`/blog/${post.slug}`}>{post.data.title}</a>
-            </p>
-        )}
     </ul>
 </Layout>
 

src/pages/tags/[...tag].astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 import {getCollection} from "astro:content";
+import ArticleList from "../../components/ArticleList.astro";
 
 export async function getStaticPaths() {
     const allPosts = await getCollection('posts');
@@ -21,11 +22,6 @@ const { posts } = Astro.props;
 <Layout title={`posts tagged with ${tag}`} description={`Posts tagged with ${tag}`}>
     <h1 class="title">ls ~/blog | grep "{tag}"</h1>
     <ul>
-        {posts.map((post: any) =>
+        <ArticleList posts={posts} displayDate={true} />
-            <p>
-                <span class="list-date">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
-                <a href={`/blog/${post.slug}`}>{post.data.title}</a>
-            </p>
-        )}
     </ul>
 </Layout>