Initialize comments

src/layouts/MainGridLayout.astro

@@ -0,0 +1,46 @@
+---
+import Layout from "./Layout.astro";
+import Navbar from "@components/Navbar.astro";
+import SideBar from "@components/widget/SideBar.astro";
+import {pathsEqual} from "@utils/url-utils";
+import Footer from "@components/Footer.astro";
+import BackToTop from "@components/control/BackToTop.astro";
+import {siteConfig} from "@/config";
+
+interface Props {
+    title: string;
+    banner?: string;
+    description?: string;
+}
+
+const { title, banner, description } = Astro.props
+const isHomePage = pathsEqual(Astro.url.pathname, '/')
+const enableBanner = siteConfig.banner.enable
+
+---
+
+<Layout title={title} banner={banner} description={description}>
+<slot slot="head" name="head"></slot>
+<div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
+    mx-auto gap-4 relative px-0 md:px-4"
+>
+    <div id="top-row" class="col-span-2 grid-rows-1 z-50 onload-animation" class:list={[""]}>
+        <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
+        <Navbar></Navbar>
+    </div>
+    <SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>
+
+    <div id="content-wrapper" class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden onload-animation">
+        <!-- the overflow-hidden here prevent long text break the layout-->
+        <main id="swup" class="transition-fade">
+            <slot></slot>
+        </main>
+
+    </div>
+
+    <div id="footer" class="grid-rows-3 col-span-2 mt-4 onload-animation">
+        <Footer></Footer>
+    </div>
+    <BackToTop></BackToTop>
+</div>
+</Layout>