Skip to content

Commit b2980fb

Browse files
kremaliciouskremalicious
committed
theme switch refactor, readme updates
1 parent 537b924 commit b2980fb

File tree

22 files changed

+450
-393
lines changed

22 files changed

+450
-393
lines changed

‎.cursor/environment.json‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎README.md‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
- [🎈 Content creation helpers](#-content-creation-helpers)
3333
- [Add a new post](#add-a-new-post)
3434
- [🚚 Deployment](#-deployment)
35-
- [S3 Deployment](#s3-deployment)
3635
- [🏛 Licenses](#-licenses)
3736
- [Posts](#posts)
3837
- [Photos \& images](#photos--images)
@@ -41,13 +40,23 @@
4140

4241
## 🎉 Features
4342

44-
The whole [blog](https://kremalicious.com) is a statically exported site built with [Astro](https://astro.build) and TypeScript. Almost all components are Astro or native Web Components, with some React components loaded client-side.
43+
The whole [blog](https://kremalicious.com) is a statically exported site built with [Astro](https://astro.build) and TypeScript. Almost all components are Astro or native Web Components, with some React components.
4544

4645
Styling happens through a combination of basic global styles and on components level either through CSS modules or CSS in `<style>` tags within Astro components.
4746

47+
The high-level tech stack in a convenient buzzword list:
48+
49+
- [Astro](https://astro.build)
50+
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) + [CSS Modules](https://github.com/css-modules/css-modules)
51+
- [TypeScript](https://www.typescriptlang.org)
52+
- [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
53+
- [React](https://react.dev)
54+
- [Biome](https://biomejs.dev)
55+
- [Bun](https://bun.com)
56+
4857
Content lives under `content/` and Astro creates a content collection for each subfolder, which are then queried in components. Every post is a folder with a markdown file and all respective post assets co-located inside.
4958

50-
Retrieving content collections will enrich every post's frontmatter metadata, like extracting date and slug from the post folder name, or exif extraction for photos.
59+
Retrieving content collections enriches every post's frontmatter metadata, like extracting date and slug from the post folder name, or exif extraction for photos.
5160

5261
### 🌅 Image handling
5362

@@ -132,11 +141,16 @@ If you want to know how this works, have a look at the respective component unde
132141

133142
### 🌗 Theme Switcher
134143

135-
Includes a theme switcher which allows user to toggle between a light and a dark theme. Switching between them also happens automatically based on user's system preferences.
144+
Includes a theme switcher which allows to toggle between a light and a dark theme. Done without any dependencies:
145+
146+
- before document renders, the theme is set based on system preference or session storage user preference in the `<head>`
147+
- the theme switch web component then listens/dispatches a custom event to sync its UI
136148

137-
If you want to know how, have a look at the respective components:
149+
If you want to know how this works in detail, have a look at the respective files:
138150

139-
- [`src/components/ThemeSwitch/`](src/components/ThemeSwitch/)
151+
- [`theme.ts`](src/features/theme-switch/lib/theme.ts)
152+
- [`theme-switch-element.ts`](src/features/theme-switch/components/theme-switch-element.ts)
153+
- [`ThemeSwitch.astro`](src/features/theme-switch/components/ThemeSwitch.astro)
140154

141155
### 🎯 astro-redirect-from
142156

@@ -242,11 +256,7 @@ bun run new photo /path/to/photo1.jpg /path/to/photo2.jpg "Shared Title For Phot
242256

243257
## 🚚 Deployment
244258

245-
Every branch or Pull Request is automatically deployed by [Vercel](https://vercel.com) with their GitHub integration for testing. A link to a preview deployment will appear under each Pull Request. Vercel is NOT used for the production deployment.
246-
247-
### S3 Deployment
248-
249-
The latest deployment of the `main` branch is automatically deployed to S3 from the GitHub Action as the production deployment, aliased to `kremalicious.com`. The deploy command calls the [`scripts/deploy-s3.sh`](scripts/deploy-s3.sh) script, syncing the contents of the `dist/` folder to S3:
259+
The latest deployment of the `main` branch is automatically deployed to S3 from the GitHub Action as the production deployment, aliased to `kremalicious.com`. The deploy command calls the [`scripts/deploy-s3.sh`](scripts/deploy-s3.sh) script, syncing the contents of the `dist/` folder to S3 with proper caching headers applied:
250260

251261
```bash
252262
bun run deploy:s3

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"preview": "bun run --bun astro preview",
1313
"typecheck:astro": "bun run --bun astro check",
1414
"typecheck:tsc": "tsc --noEmit --pretty",
15-
"typecheck": "bun run typecheck:astro && bun run typecheck:tsc",
15+
"typecheck": "bun run typecheck:tsc && bun run typecheck:astro",
1616
"prebuild": "run-p --silent --continue-on-error create:symlinks move:downloads",
1717
"test:unit": "vitest run --config './test/vitest.config.ts' --coverage",
1818
"test:unit:watch": "vitest watch --config './test/vitest.config.ts' --coverage",

‎src/components/seo/Head.astro‎ renamed to ‎src/components/head/Head.astro‎

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -69,41 +69,31 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' })
6969
is:inline
7070
define:vars={{ sessionStorageName: metadata.sessionStorageName }}
7171
>
72-
// run early so no page flashes
73-
;(() => {
74-
function getPreferTheme() {
75-
const savedTheme = sessionStorage.getItem(sessionStorageName)
76-
if (savedTheme) return savedTheme
77-
78-
const isSystemDark = window.matchMedia(
79-
'(prefers-color-scheme: dark)'
80-
).matches
81-
82-
return isSystemDark ? 'dark' : 'light'
83-
}
84-
85-
function getThemeColor(theme) {
86-
return theme === 'dark' ? '#1d2224' : '#e7eef4'
72+
function setInitialTheme() {
73+
const colors = { dark: '#1d2224', light: '#e7eef4' }
74+
const preferredTheme = sessionStorage.getItem(sessionStorageName)
75+
const systemPrefersDark = window?.matchMedia(
76+
'(prefers-color-scheme: dark)'
77+
).matches
78+
let theme = 'light'
79+
80+
if (preferredTheme === 'dark' || preferredTheme === 'light') {
81+
theme = preferredTheme
82+
} else if (systemPrefersDark) {
83+
theme = 'dark'
8784
}
8885

89-
const themeValue = getPreferTheme()
90-
const themeColor = getThemeColor(themeValue)
86+
const root = document.documentElement
87+
const meta = document.querySelector('meta[name="theme-color"]')
88+
const color = colors[theme]
9189

92-
function reflectPreference() {
93-
const htmlEl = document.documentElement
94-
const metaThemeColor = document.querySelector('meta[name=theme-color]')
95-
96-
htmlEl.setAttribute('data-theme', themeValue)
97-
htmlEl.setAttribute('data-theme-color', themeColor)
98-
metaThemeColor?.setAttribute('content', themeColor)
99-
}
100-
101-
reflectPreference()
102-
})()
90+
root.setAttribute('data-theme', theme)
91+
root.setAttribute('data-theme-color', color)
92+
meta?.setAttribute('content', color)
93+
}
94+
setInitialTheme()
10395
</script>
10496

105-
<script src="@/components/header/ThemeSwitch/theme-switch.ts"></script>
106-
10797
<title>{titleFinal}</title>
10898

10999
<link rel="canonical" href={canonicalUrl}>

‎src/components/seo/SchemaOrg.astro‎ renamed to ‎src/components/head/SchemaOrg.astro‎

File renamed without changes.

‎src/components/header/Header.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
import { SearchTrigger } from '@/features/search/components'
3+
import ThemeSwitch from '@/features/theme-switch/components/ThemeSwitch.astro'
34
import Logo from '@/images/logo.svg'
45
import styles from './Header.module.css'
56
import Menu from './Menu.astro'
6-
import ThemeSwitch from './ThemeSwitch/index.astro'
77
---
88

99
<header class={styles.header} aria-label="Header" id="header">

‎src/components/header/Header.module.css‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,10 @@
6565
transition: 0.2s ease-out;
6666
}
6767

68-
.nav > div,
69-
.nav > button {
70-
padding: var(--space-s);
71-
}
72-
7368
.nav > div,
7469
.nav > button,
75-
.nav > div > label,
76-
.nav > div > label > div {
70+
.nav theme-switch {
71+
padding: var(--space-s);
7772
display: inline-flex;
7873
align-items: center;
7974
}

‎src/components/header/ThemeSwitch/index.astro‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/components/header/ThemeSwitch/index.module.css‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

0 commit comments

Comments
 (0)