From aee0523adcead25873d80a28870939839883d83f Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Mon, 2 Dec 2024 13:08:23 +0100 Subject: [PATCH] finally have some more fixes for the styling --- app.config.ts | 6 ++-- src/components/colorschemepicker.module.css | 3 +- src/components/colorschemepicker.tsx | 14 ++++---- src/entry-server.tsx | 3 +- src/routes/(editor).tsx | 36 ++++++++------------- src/routes/editor.module.css | 2 +- 6 files changed, 28 insertions(+), 36 deletions(-) diff --git a/app.config.ts b/app.config.ts index 299ea96..56b652b 100644 --- a/app.config.ts +++ b/app.config.ts @@ -76,8 +76,8 @@ export default defineConfig({ }, server: { preset: 'bun', - prerender: { - crawlLinks: true, - }, + // prerender: { + // crawlLinks: true, + // }, }, }); diff --git a/src/components/colorschemepicker.module.css b/src/components/colorschemepicker.module.css index 9324005..b586f43 100644 --- a/src/components/colorschemepicker.module.css +++ b/src/components/colorschemepicker.module.css @@ -2,13 +2,14 @@ display: flex; flex-flow: row; align-items: center; + background-color: inherit; border: 1px solid transparent; border-radius: var(--radii-m); padding: var(--padding-s); & select { border: none; - background-color: transparent; + background-color: inherit; border-radius: var(--radii-m); &:focus { diff --git a/src/components/colorschemepicker.tsx b/src/components/colorschemepicker.tsx index 2ba96de..6b3fb66 100644 --- a/src/components/colorschemepicker.tsx +++ b/src/components/colorschemepicker.tsx @@ -1,9 +1,9 @@ -import { Accessor, Component, createContext, createEffect, createMemo, createResource, For, ParentComponent, Setter, Show, Suspense, useContext } from "solid-js"; +import { Component, createContext, createEffect, createResource, For, ParentComponent, Show, Suspense, useContext } from "solid-js"; import css from './colorschemepicker.module.css'; import { CgDarkMode } from "solid-icons/cg"; -import { action, createAsyncStore, query, useAction } from "@solidjs/router"; +import { action, query, useAction } from "@solidjs/router"; import { useSession } from "vinxi/http"; -import { createStore, reconcile, ReconcileOptions, SetStoreFunction } from "solid-js/store"; +import { createStore } from "solid-js/store"; export enum ColorScheme { Auto = 'light dark', @@ -38,7 +38,7 @@ const setState = action(async (state: State) => { 'use server'; const session = await getSession(); - await session.update(state); + await session.update(prev => ({ ...prev, ...state })); }, 'color-scheme'); interface ThemeContextType { @@ -62,7 +62,7 @@ export const useTheme = () => { }; export const ThemeProvider: ParentComponent = (props) => { - const [state, { mutate }] = createResource(() => getState(), { deferStream: true, initialValue: { colorScheme: ColorScheme.Auto, hue: 0 } }); + const [state, { mutate }] = createResource(() => getState(), { deferStream: true }); const updateState = useAction(setState); return @@ -75,8 +75,8 @@ export const ThemeProvider: ParentComponent = (props) => { return ({ ...prev, colorScheme }))) }, - setHue(hue: number) { updateState(mutate(prev => ({ ...prev, hue }))) }, + setColorScheme(colorScheme: ColorScheme) { updateState(mutate(prev => ({ colorScheme, hue: prev?.hue ?? 0 }))) }, + setHue(hue: number) { updateState(mutate(prev => ({ hue, colorScheme: prev?.colorScheme ?? ColorScheme.Auto }))) }, }}> {props.children} ; diff --git a/src/entry-server.tsx b/src/entry-server.tsx index da4e228..51b314e 100644 --- a/src/entry-server.tsx +++ b/src/entry-server.tsx @@ -26,9 +26,8 @@ export default createHandler(({ nonce }) => { ); }, event => { const nonce = crypto.randomUUID(); - const isDev = process.env.NODE_ENV === 'development'; - const base = `'self' 'nonce-${nonce}' ${isDev ? `'unsafe-eval'` : ''}`; + const base = `'self' 'nonce-${nonce}' 'unsafe-eval'`; const policies = { default: base, diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index dc63a3c..12f25e2 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -13,9 +13,7 @@ import css from "./editor.module.css"; const event = getRequestEvent(); export const route: RouteDefinition = { - preload: ({ params, location, intent }) => { - console.log(); - + preload: () => { return getState(); }, }; @@ -25,6 +23,11 @@ export default function Editor(props: ParentProps) { const themeMenuId = createUniqueId(); const [commandPalette, setCommandPalette] = createSignal(); + const lightness = createMemo(() => { + const scheme = theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme; + + return scheme === ColorScheme.Light ? .9 : .2; + }); const commands = [ createCommand('open command palette', () => { @@ -44,8 +47,9 @@ export default function Editor(props: ParentProps) { transition(() => { e.retry(true) }) }); + console.log('server?', theme.colorScheme, theme.hue); createEffect(() => { - console.log(theme.hue); + console.log(theme.colorScheme, theme.hue); }); return @@ -53,26 +57,14 @@ export default function Editor(props: ParentProps) { Calque - { - theme => { - const lightness = createMemo(() => { - const scheme = theme().colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme().colorScheme; + + - return scheme === ColorScheme.Light ? .9 : .2; - }); - - return <> - - - - - ; + diff --git a/src/routes/editor.module.css b/src/routes/editor.module.css index b37b70b..9a3727e 100644 --- a/src/routes/editor.module.css +++ b/src/routes/editor.module.css @@ -65,7 +65,7 @@ @media (display-mode: window-controls-overlay) { & { - color: light-dark(#0005, #fff5); + color: light-dark(#0008, #fff8); } } }