diff --git a/index.html b/index.html
index 5a9ae2b..45e16be 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,9 @@
-
+
+
+
@@ -37,15 +39,6 @@
-
-
diff --git a/public/_headers b/public/_headers
index 7adb9b1..14fee5c 100644
--- a/public/_headers
+++ b/public/_headers
@@ -3,7 +3,7 @@
# (Cloudflare Pages, Netlify). A CSP meta tag in index.html provides
# baseline protection regardless of hosting platform.
/*
- Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https://avatars.githubusercontent.com https://img.youtube.com; connect-src 'self'; frame-src https://www.youtube.com; frame-ancestors 'none'
+ Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https://avatars.githubusercontent.com https://img.youtube.com; connect-src 'self'; frame-src https://www.youtube.com; frame-ancestors 'none'
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
diff --git a/public/theme-init.js b/public/theme-init.js
new file mode 100644
index 0000000..2be91d6
--- /dev/null
+++ b/public/theme-init.js
@@ -0,0 +1,14 @@
+(function () {
+ try {
+ var theme = localStorage.getItem('theme')
+ var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+ if (theme === 'dark' || (!theme && prefersDark)) {
+ document.documentElement.classList.add('dark')
+ }
+ } catch {
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.documentElement.classList.add('dark')
+ }
+ }
+})()
diff --git a/src/App.tsx b/src/App.tsx
index 59886ef..959845a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -52,12 +52,12 @@ export default function App() {
}
const { heading, sub } = ROLE_SECTION_TITLE[selectedRole]
-
- function getIssues() {
- if (selectedRole === 'tester') return testerFiltered
- if (selectedRole === 'writer') return writerFiltered
- return filtered
- }
+ const issues =
+ selectedRole === 'tester'
+ ? testerFiltered
+ : selectedRole === 'writer'
+ ? writerFiltered
+ : filtered
return (
<>
@@ -89,7 +89,8 @@ export default function App() {
{ setPage(1) }, [issues])
-
const visible = issues.slice(0, page * PAGE_SIZE)
const hasMore = visible.length < issues.length
diff --git a/src/components/ResourcesSection.tsx b/src/components/ResourcesSection.tsx
index 1c820df..ef8561d 100644
--- a/src/components/ResourcesSection.tsx
+++ b/src/components/ResourcesSection.tsx
@@ -379,7 +379,7 @@ function StepRow({ step, index, role }: { step: StepDef; index: number; role: Ro
-
+
diff --git a/src/hooks/useIssues.ts b/src/hooks/useIssues.ts
index a967761..1c70d31 100644
--- a/src/hooks/useIssues.ts
+++ b/src/hooks/useIssues.ts
@@ -6,17 +6,26 @@ type Status = 'idle' | 'loading' | 'success' | 'error'
export function useIssues(filters: FilterState) {
const [data, setData] = useState(null)
- const [status, setStatus] = useState('idle')
+ const [status, setStatus] = useState('loading')
useEffect(() => {
- setStatus('loading')
- fetch('/data/issues.json')
+ const controller = new AbortController()
+
+ fetch('/data/issues.json', { signal: controller.signal })
.then((r) => {
if (!r.ok) throw new Error(`HTTP ${r.status}`)
return r.json() as Promise
})
- .then((d) => { setData(d); setStatus('success') })
- .catch((err) => { console.error('[useIssues] failed to load issues.json:', err); setStatus('error') })
+ .then((d) => {
+ setData(d)
+ setStatus('success')
+ })
+ .catch((err: unknown) => {
+ if (controller.signal.aborted) return
+ console.error('[useIssues] failed to load issues.json:', err)
+ setStatus('error')
+ })
+ return () => controller.abort()
}, [])
const filtered = useMemo(