From a9b8be8e5d2640a2ea24e9d6f2a5032507b5a6ee Mon Sep 17 00:00:00 2001
From: Jazee6 <jazee@jaze.top>
Date: Sat, 28 Dec 2024 17:30:27 +0800
Subject: [PATCH] feat: layout

---
 package.json                    |  2 +-
 src/components/Header.astro     |  2 +-
 src/components/Search.astro     |  2 +-
 src/layouts/MainLayout.astro    |  4 +-
 src/pages/about.astro           |  2 +-
 src/pages/posts/[...slug].astro | 66 +++++++++++++++++----------------
 src/styles/global.css           |  8 +++-
 7 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 4d698bb..b2ec705 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "astro-blur",
   "type": "module",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
diff --git a/src/components/Header.astro b/src/components/Header.astro
index d2a6d65..2d093b8 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,7 +3,7 @@ import {siteConfig, navBarConfig} from "../config";
 import {Icon} from 'astro-icon/components'
 ---
 
-<header class="fixed h-16 w-full blur-global">
+<header class="fixed h-16 w-full blur-global z-10">
     <div class="container-global h-full flex items-center">
         <div class="text-xl font-bold cursor-pointer">
             <a href="/">{siteConfig.title}</a>
diff --git a/src/components/Search.astro b/src/components/Search.astro
index 0473819..d3cbee8 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -1,7 +1,7 @@
 ---
 
 ---
-<div id="search-container" class="fixed hidden inset-0 z-10 backdrop-blur animate-in fade-in">
+<div id="search-container" class="fixed hidden inset-0 z-50 backdrop-blur animate-in fade-in">
     <div class="absolute top-16 left-1/2 -translate-x-1/2 container-global w-full h-full">
         <form class="w-3/4 mx-auto max-md:w-full animate-in slide-in-from-top">
             <label>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 9ce6387..81a8e4b 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -14,9 +14,9 @@ const {title, description, image} = Astro.props
 <BaseLayout title={title} description={description} image={image}>
     <main class="mt-20 mb-4">
         <div class="container-global flex items-start">
-            <aside class="bg-base transition-all basis-[16rem] shrink-0 rounded-xl max-md:hidden sticky top-20 mr-4">
+            <aside class="basis-[16rem] shrink-0 max-md:hidden sticky top-20 mr-4">
                 <slot name="aside">
-                    <div class="p-4 flex flex-col">
+                    <div class="bg-base transition-all rounded-xl p-4 flex flex-col">
                         <img src={siteConfig.avatar} alt="avatar"
                              class="w-56 h-56 rounded-full dark:brightness-75 transition-all"/>
                         <div class="text-center font-bold text-xl mt-4">
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 600a555..c66acad 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -10,7 +10,7 @@ const {data} = about;
 const {Content} = await render(about);
 ---
 <PageLayout title={getTitle('About')} description={getDesc('The About Page')}>
-    <article class="article-global" data-pagefind-body>
+    <article class="article-container article" data-pagefind-body>
         <h1>{data.title}</h1>
         <Content/>
     </article>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 68d8b50..ae0d484 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -6,6 +6,7 @@ import Badge from "../../components/Badge.astro";
 import Comment from "../../components/Comment.astro";
 import {getCollection, render} from 'astro:content';
 import type {CollectionEntry} from 'astro:content';
+import PageLayout from "../../layouts/PageLayout.astro";
 
 export async function getStaticPaths() {
     const posts = await getCollection('posts', ({data}) => {
@@ -24,32 +25,37 @@ interface Props {
 const {post} = Astro.props;
 const {data} = post;
 const {Content, headings, remarkPluginFrontmatter} = await render(post);
+const haveToc = headings.some(heading => heading.depth === 1 || heading.depth === 2);
 ---
-<MainLayout title={getTitle(data.title)} description={getDesc(data.description)}>
-    <slot slot="aside">
-        <div class="p-2">
-            <ul>
-                <li><a class="px-2 menu-item" href={`#${data.title}`}>{data.title}</a></li>
-                {headings.map(heading => {
-                    switch (heading.depth) {
-                        case 1:
-                            return (
-                                    <li><a class="px-2 menu-item" href={`#${heading.slug}`}>{heading.text}</a></li>
-                            )
-                        case 2:
-                            return (
-                                    <li><a class="pl-6 pr-2 menu-item" href={`#${heading.slug}`}>{heading.text}</a></li>
-                            )
-                    }
-                })}
-            </ul>
-        </div>
-    </slot>
-    <div class="grow">
-        <article class="article-global" data-pagefind-body>
-            <h1 id={data.title}>{data.title}</h1>
+<PageLayout comments={true} title={getTitle(data.title)} description={getDesc(data.description)}>
+    <div class="flex items-start">
+        {
+            haveToc &&
+                <aside class="basis-[16rem] shrink-0 max-md:hidden sticky top-20 mr-4 bg-base transition-all rounded-xl p-2">
+                    <ul>
+                        {headings.map(heading => {
+                            switch (heading.depth) {
+                                case 1:
+                                    return (
+                                            <li><a class="px-2 menu-item"
+                                                   href={`#${heading.slug}`}>{heading.text}</a>
+                                            </li>
+                                    )
+                                case 2:
+                                    return (
+                                            <li><a class="pl-6 pr-2 menu-item"
+                                                   href={`#${heading.slug}`}>{heading.text}</a></li>
+                                    )
+                            }
+                        })}
+                    </ul>
+                </aside>
+        }
+
+        <div class="grow article-container" data-pagefind-body>
+            <h1 class="text-4xl font-bold" id={data.title}>{data.title}</h1>
 
-            <div class="flex space-x-4">
+            <div class="flex space-x-4 mt-4">
                 <Badge icon="material-symbols:edit-calendar-rounded">
                     {new Date(remarkPluginFrontmatter.lastModified).toLocaleDateString(siteConfig.language)}
                 </Badge>
@@ -59,14 +65,12 @@ const {Content, headings, remarkPluginFrontmatter} = await render(post);
                         </Badge>}
             </div>
 
-            <Content/>
-        </article>
-        {
-            siteConfig.twikoo_uri &&
-                <Comment/>
-        }
+            <article class="article">
+                <Content/>
+            </article>
+        </div>
     </div>
-</MainLayout>
+</PageLayout>
 
 <script>
     import {debounce} from "../../utils";
diff --git a/src/styles/global.css b/src/styles/global.css
index 1fc536e..71b36b7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -43,8 +43,12 @@
         @apply cursor-pointer hover:bg-hover transition-all rounded-lg py-1 line-clamp-1 active:bg-active
     }
 
-    .article-global {
-        @apply bg-base transition-all rounded-xl p-4 prose prose-neutral dark:prose-invert max-w-none
+    .article-container {
+        @apply bg-base transition-all rounded-xl p-4
+    }
+
+    .article {
+        @apply prose prose-neutral dark:prose-invert max-w-none
         prose-img:rounded-xl prose-img:max-h-screen prose-pre:break-words prose-pre:whitespace-pre-wrap
         prose-h1:pt-24 prose-h1:-mt-24
         prose-h2:pt-24 prose-h2:-mt-[4.5rem]