graham/ghall.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial theme picker logic

Browse Source
This commit is contained in:
Graham Hall
2025-11-05 16:55:48 -05:00
parent 6b86b0adb2
commit e802d6238e
10 changed files with 143 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
astro.config.mjs
+1 -1
View File
@@ -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
+6
View File
@@ -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
+2
View File
@@ -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/paintbrush.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 562 B

src/components/Header/Drawer.astro
+1 -6
View File
@@ -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
+12 -10
View File
@@ -1,13 +1,17 @@
---
import Drawer from "./Drawer.astro";
import Nav from "./Nav.astro";
import ThemeMenu from "./ThemeMenu.astro";
---
<header>
<div class="container">
<a href="/">ghall.space</a>
<Nav />
<Drawer />
<div>
<Nav />
<ThemeMenu />
<Drawer />
</div>
</div>
</header>
@@ -15,8 +19,7 @@ import Nav from "./Nav.astro";
header {
margin-bottom: 20px;
height: 70px;
background-color: rgba(252, 252, 252, 90%);
backdrop-filter: blur(10px);
background-color: var(--background);
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/ThemeMenu.astro
+90
View File
@@ -0,0 +1,90 @@
---
import BrushIcon from "../../assets/svg/paintbrush.svg";
---
<div
class="container"
x-data="{ menuOpen: false }"
@keydown.escape="menuOpen = false"
>
<button id="theme-button" type="button" @click="menuOpen = ! menuOpen"
><BrushIcon width={24} height={24} /></button
>
<div class="overlay" @click="menuOpen = !menuOpen" x-show="menuOpen"></div>
<div
class="theme-menu"
x-show="menuOpen"
x-transition:enter-start="hidden-menu"
x-transition:enter-end="visible-menu"
x-transition:leave-start="visible-menu"
x-transition:leave-end="hidden-menu"
>
<legend>Select a theme:</legend>
<div>
<input
type="radio"
id="system"
name="theme"
value="system"
x-model="theme"
/>
<label for="system">System</label>
<input
type="radio"
id="light"
name="theme"
value="light"
x-model="theme"
/>
<label for="light">Light</label>
<input type="radio" id="dark" name="theme" value="dark" x-model="theme" />
<label for="dark">Dark</label>
</div>
</div>
</div>
<style>
.container {
display: inline;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
}
.theme-menu {
position: absolute;
top: 10px;
right: 10px;
background-color: var(--background);
padding: 20px;
width: 300px;
z-index: 4;
border: var(--border);
transition: var(--transition);
}
.hidden-menu {
opacity: 0;
scale: 0.9;
}
#theme-button {
background: none;
border: none;
padding: 0;
margin: 0;
color: var(--text);
}
#theme-button:hover {
opacity: 0.75;
}
</style>
src/entrypoint.ts
+6
View File
@@ -0,0 +1,6 @@
import persist from "@alpinejs/persist";
import type { Alpine } from "alpinejs";
export default (Alpine: Alpine) => {
Alpine.plugin(persist);
};
src/global.css
+10 -14
View File
@@ -20,28 +20,24 @@
--radius: 5px;
--border: 1px solid #ced3f1;
--max-page-width: 800px;
--transition: all 0.3s ease-in-out;
}
@media (prefers-color-scheme: dark) {
:root {
--blue: #89b4fa;
--sky: #89dceb;
--red: #f38ba8;
--orange: #fab387;
--text: #cdd6f4;
--background: #1e1e2e;
--border: 1px solid #505160;
}
.theme-dark {
--blue: #89b4fa;
--sky: #89dceb;
--red: #f38ba8;
--orange: #fab387;
--text: #cdd6f4;
--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
+12 -2
View File
@@ -35,8 +35,18 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || "Unknown";
</head>
<body
class="layout-simple"
x-data="{ drawerOpen: false }"
:class="drawerOpen ? 'lock-scroll' : ''"
x-data="{
drawerOpen: false,
theme: $persist('system'),
isDark() {
const osIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (this.theme === 'dark' || this.theme === 'system' && osIsDark) return true;
return false;
}
}"
:class="{ 'lock-scroll': drawerOpen, 'theme-dark': isDark()}"
>
<Header />
<main transition:animate="initial">