Merge pull request #19 from ghall89/theme-picker

theme picker

.astro/content-assets.mjs

@@ -1,10 +1,10 @@
 
+import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_1G57ng from "src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_Z1ESWoO from "src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_rrnp from "src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
-import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_Zi2DqH from "src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_1OkzEl from "src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_FYQiW from "src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
-export default new Map([["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
+export default new Map([["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
 		

astro.config.mjs

@@ -9,7 +9,7 @@ export default defineConfig({
 	site: "https://ghall.space",
 	output: "static",
 
-	integrations: [mdx(), alpinejs()],
+	integrations: [mdx(), alpinejs({ entrypoint: "/src/entrypoint" })],
 	redirects: {
 		"/posts/[...slug]": "/blog/[...slug]",
 		"/blog": "/blog/page/1",

bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "ghall.blog",
       "dependencies": {
+        "@alpinejs/persist": "^3.15.1",
         "@astrojs/alpinejs": "^0.4.9",
         "@astrojs/mdx": "^4.3.7",
         "@astrojs/rss": "^4.0.12",
@@ -21,6 +22,7 @@
       "devDependencies": {
         "@astrojs/ts-plugin": "^1.10.4",
         "@biomejs/biome": "2.3.2",
+        "@types/alpinejs__persist": "^3.13.4",
         "bun-types": "1.3.0",
       },
       "peerDependencies": {
@@ -29,6 +31,8 @@
     },
   },
   "packages": {
+    "@alpinejs/persist": ["@alpinejs/persist@3.15.1", "", {}, "sha512-EtK4s7I0xhRTJsLaYjhJ4SyQan8+gkGaRYvzFw+ndg7rzrjSHzhgRmQ20GZbnjj+eDg77fPMTvzvngX6yAExbg=="],
+
     "@astrojs/alpinejs": ["@astrojs/alpinejs@0.4.9", "", { "peerDependencies": { "@types/alpinejs": "^3.0.0", "alpinejs": "^3.0.0" } }, "sha512-fvKBAugn7yIngEKfdk6vL3ZlcVKtQvFXCZznG28OikGanKN5W+PkRPIdKaW/0gThRU2FyCemgzyHgyFjsH8dTA=="],
 
     "@astrojs/compiler": ["@astrojs/compiler@2.10.3", "", {}, "sha512-bL/O7YBxsFt55YHU021oL+xz+B/9HvGNId3F9xURN16aeqDK9juHGktdkCSXz+U4nqFACq6ZFvWomOzhV+zfPw=="],
@@ -261,6 +265,8 @@
 
     "@types/alpinejs": ["@types/alpinejs@3.13.11", "", {}, "sha512-3KhGkDixCPiLdL3Z/ok1GxHwLxEWqQOKJccgaQL01wc0EVM2tCTaqlC3NIedmxAXkVzt/V6VTM8qPgnOHKJ1MA=="],
 
+    "@types/alpinejs__persist": ["@types/alpinejs__persist@3.13.4", "", { "dependencies": { "@types/alpinejs": "*" } }, "sha512-H+cW7294EV5fGmIGD3BCJme54//KyWxZcP4uI9pk6W7fECR5hEwdO7j7wogz0o4vapS/kXiXiAjuqC9F+W0Vpw=="],
+
     "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],

package.json

@@ -15,6 +15,7 @@
 		"fix": "bunx biome lint --write"
 	},
 	"dependencies": {
+		"@alpinejs/persist": "^3.15.1",
 		"@astrojs/alpinejs": "^0.4.9",
 		"@astrojs/mdx": "^4.3.7",
 		"@astrojs/rss": "^4.0.12",
@@ -32,6 +33,7 @@
 	"devDependencies": {
 		"@astrojs/ts-plugin": "^1.10.4",
 		"@biomejs/biome": "2.3.2",
+		"@types/alpinejs__persist": "^3.13.4",
 		"bun-types": "1.3.0"
 	},
 	"module": "index.ts",

src/assets/svg/moon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#4c4f69" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+</svg>

src/assets/svg/sun.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#cdd6f4" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+</svg>

src/components/Header/Drawer.astro

@@ -1,7 +1,6 @@
 ---
 import BarsIcon from "../../assets/svg/bars.svg";
 import CloseIcon from "../../assets/svg/xmark.svg";
-
 import { navLinks } from "../../data/nav-links";
 ---
 
@@ -40,10 +39,6 @@ import { navLinks } from "../../data/nav-links";
 </div>
 
 <style>
-  :root {
-    --transition: all 0.3s ease-in-out;
-  }
-
   .drawer-container {
     display: none;
   }
@@ -80,7 +75,7 @@ import { navLinks } from "../../data/nav-links";
   }
 
   nav {
-    text-align: center;
+    text-align: left;
     padding: 12px;
     display: flex;
     flex-direction: column;

src/components/Header/Header.astro

@@ -1,22 +1,25 @@
 ---
 import Drawer from "./Drawer.astro";
 import Nav from "./Nav.astro";
+import ThemeToggle from "./ThemeToggle.astro";
 ---
 
 <header>
   <div class="container">
     <a href="/">ghall.space</a>
+    <div>
       <Nav />
+      <ThemeToggle />
       <Drawer />
     </div>
+  </div>
 </header>
 
 <style>
   header {
     margin-bottom: 20px;
     height: 70px;
-    background-color: rgba(252, 252, 252, 90%);
+    background-color: var(--background);
-    backdrop-filter: blur(10px);
     width: 100%;
     top: 0;
     position: fixed;
@@ -35,15 +38,14 @@ import Nav from "./Nav.astro";
     height: 100%;
   }
 
+  .container > div {
+    display: flex;
+    gap: 20px;
+  }
+
   a {
     font-size: 1.6rem;
     color: var(--text);
     font-weight: bold;
   }
-
-  @media (prefers-color-scheme: dark) {
-    header {
-      background-color: rgba(30, 30, 46, 90%);
-    }
-  }
 </style>

src/components/Header/ThemeToggle.astro

@@ -0,0 +1,28 @@
+---
+import BrushIcon from "../../assets/svg/paintbrush.svg";
+---
+
+<input type="checkbox" x-model="darkMode" />
+
+<style>
+  input {
+    appearance: none;
+    height: 24px;
+    width: 24px;
+    background-image: url(../../assets/svg/moon.svg);
+    background-size: 24px;
+    padding: 10px;
+    border-radius: 100%;
+    transition: var(--transition);
+    transform: rotate(0deg) translateY(-2px);
+  }
+
+  input:hover {
+    opacity: 0.7;
+  }
+
+  input:checked {
+    background-image: url(../../assets/svg/sun.svg);
+    transform: rotate(180deg) translateY(2px);
+  }
+</style>

src/entrypoint.ts

@@ -0,0 +1,6 @@
+import persist from "@alpinejs/persist";
+import type { Alpine } from "alpinejs";
+
+export default (Alpine: Alpine) => {
+	Alpine.plugin(persist);
+};

src/global.css

@@ -20,10 +20,10 @@
 	--radius: 5px;
 	--border: 1px solid #ced3f1;
 	--max-page-width: 800px;
+	--transition: all 0.3s ease-in-out;
 }
 
-@media (prefers-color-scheme: dark) {
+.theme-dark {
-	:root {
 	--blue: #89b4fa;
 	--sky: #89dceb;
 	--red: #f38ba8;
@@ -32,16 +32,12 @@
 	--background: #1e1e2e;
 	--border: 1px solid #505160;
 }
-}
 
-html {
+body {
 	color: var(--text);
 	background-color: var(--background);
 	font-family: "Noto Sans", sans-serif;
 	font-size: 1.1rem;
-}
-
-body {
 	margin: 0;
 	padding: 0;
 }

src/layouts/Layout.astro

@@ -35,8 +35,11 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || "Unknown";
   </head>
   <body
     class="layout-simple"
-    x-data="{ drawerOpen: false }"
+    x-data="{
-    :class="drawerOpen ? 'lock-scroll' : ''"
+      drawerOpen: false,
+      darkMode: $persist(false)
+    }"
+    :class="{ 'lock-scroll': drawerOpen, 'theme-dark': darkMode}"
   >
     <Header />
     <main transition:animate="initial">