NextBestNetwork/explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let the server set the theme based on the cookie sent at request time, which should stop flashing

Browse Source
This commit is contained in:
D. Rimron-Soutter
2025-10-17 13:39:25 +01:00
parent 8e687fe176
commit 052b14ca40
4 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/layout.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { cookies } from "next/headers";
import "@/scss/nbn.scss";
import NavbarClient from "@/components/Navbar";
@@ -9,25 +10,35 @@ export const metadata: Metadata = {
formatDetection: { email: false, address: false, telephone: false },
};
const noFlashThemeScript = `
(function() {
try {
var cookieMatch = document.cookie.match(/(?:^|; )theme=([^;]+)/);
var stored = cookieMatch ? decodeURIComponent(cookieMatch[1]) : null;
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var effective = (stored === 'light' || stored === 'dark') ? stored : (prefersDark ? 'dark' : 'light');
var el = document.documentElement;
if (el.getAttribute('data-bs-theme') !== effective) {
el.setAttribute('data-bs-theme', effective);
}
} catch(_) {}
})();`;
function themeInitScript() {
return `(function(){
try {
var cookie = document.cookie.split('; ').find(function(c){return c.indexOf('NBN-theme=')===0});
var value = cookie ? decodeURIComponent(cookie.split('=').slice(1).join('=')) : null;
var theme;
if (value === 'light' || value === 'dark') {
theme = value;
} else {
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
theme = prefersDark ? 'dark' : 'light';
}
var html = document.documentElement;
if (html.getAttribute('data-bs-theme') !== theme) {
html.setAttribute('data-bs-theme', theme);
}
} catch(_) {}
})();`;
}
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const cookieStore = await cookies();
const stored = cookieStore.get("NBN-theme")?.value;
const serverTheme = stored === "light" || stored === "dark" ? stored : "light";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<html lang="en" data-bs-theme={serverTheme}>
<head>
<script dangerouslySetInnerHTML={{ __html: noFlashThemeScript }} />
<script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />
</head>
<body>
<NavbarClient />

2
src/components/ThemeDropdown.tsx
View File

@@ -25,13 +25,13 @@ export default function ThemeDropdown() {
const apply = useCallback((t: Theme) => {
const effective = t === "auto" ? (prefersDark() ? "dark" : "light") : t;
document.documentElement.setAttribute("data-bs-theme", effective);
}, []);
useEffect(() => {
setMounted(true);
const v = getCookie(COOKIE);
console.log("Cookie:", v);
const initial: Theme = v === "light" || v === "dark" || v === "auto" ? (v as Theme) : "auto";
setTheme(initial);
// Important: apply immediately so “auto” reflects system after hydration

3
src/utils/register_parsers/reg_default.ts
View File

@@ -77,7 +77,6 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {
// });
} else if (trimmedLine.startsWith('*')) {
const noteMatch = trimmedLine.match(/^(\*+)\s*(.*)/);
console.log("NOTE MATCH",noteMatch);
if (noteMatch) {
accessData.notes.push({
ref: noteMatch[1],
@@ -89,8 +88,6 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {
reg.text += `${line}\n`;
continue;
}
// console.log("LINE",line);
console.log(line.match(/^\s+/), line);
if (line.match(/^\s+/) && accessData.operations.length > 0) {
accessData.operations[accessData.operations.length - 1].description += `\n${line}`;
} else {

4
src/utils/register_parsers/reg_f0.ts
View File

@@ -24,7 +24,6 @@ export const parseDescriptionF0 = (reg: Register, description: string) => {
if(spaces_at_start == 2) {
if (trimmedLine.startsWith('*')) {
console.log("PARENT",trimmedLine);
const noteMatch = trimmedLine.match(/^(\*+)\s*(.*)/);
if (noteMatch) {
reg.notes.push({
@@ -88,7 +87,6 @@ export const parseDescriptionF0 = (reg: Register, description: string) => {
const footnoteMatch = bitDescription.match(/(\*+)$/);
let footnoteRef: string | undefined = undefined;
if (footnoteMatch) {
console.log("FOOTNOTE",footnoteMatch);
footnoteRef = footnoteMatch[1];
bitDescription = bitDescription.substring(0, bitDescription.length - footnoteRef.length).trim();
}
@@ -112,7 +110,6 @@ export const parseDescriptionF0 = (reg: Register, description: string) => {
}
}
} else if (trimmedLine) {
console.log("LINE", trimmedLine);
if (line.match(/^\s+/) && accessData.operations.length > 0) {
accessData.operations[accessData.operations.length - 1].description += `\n${line}`;
} else {
@@ -125,7 +122,6 @@ export const parseDescriptionF0 = (reg: Register, description: string) => {
}
if (currentAccess) {
detail[currentAccess] = accessData;
console.log("FINAL",detail,currentAccess);
}
// Push the parsed detail into modes