chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

finally have some more fixes for the styling

Browse source
This commit is contained in:
Chris Kruining 2024-12-02 13:08:23 +01:00
parent ecf7b0df20
commit aee0523adc
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
6 changed files with 28 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app.config.ts
View file

@ -76,8 +76,8 @@ export default defineConfig({
},
server: {
preset: 'bun',
prerender: {
crawlLinks: true,
},
// prerender: {
// crawlLinks: true,
// },
},
});

3
src/components/colorschemepicker.module.css
View file

@ -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 {

14
src/components/colorschemepicker.tsx
View file

@ -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<State>(() => getState(), { deferStream: true, initialValue: { colorScheme: ColorScheme.Auto, hue: 0 } });
const [state, { mutate }] = createResource<State>(() => getState(), { deferStream: true });
const updateState = useAction(setState);
return <Suspense>
@ -75,8 +75,8 @@ export const ThemeProvider: ParentComponent = (props) => {
return <ThemeContext.Provider value={{
get theme() { return store; },
setColorScheme(colorScheme: ColorScheme) { updateState(mutate(prev => ({ ...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}
</ThemeContext.Provider>;

3
src/entry-server.tsx
View file

@ -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,

30
src/routes/(editor).tsx
View file

@ -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<CommandPaletteApi>();
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 <MenuProvider commands={commands}>
@ -53,26 +57,14 @@ export default function Editor(props: ParentProps) {
<Title>Calque</Title>
<Show when={theme.colorScheme || theme.hue ? theme : undefined}>{
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 <>
<Meta name="color-scheme" content={theme().colorScheme} />
<Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme().hue})`} />
<Meta name="color-scheme" content={theme.colorScheme} />
<Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue})`} />
<Style>{`
:root {
--hue: ${theme().hue}deg !important;
--hue: ${theme.hue}deg !important;
}
`}</Style>
</>;
}
}</Show>
<Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
<Link rel="icon" href="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />

2
src/routes/editor.module.css
View file

@ -65,7 +65,7 @@
@media (display-mode: window-controls-overlay) {
& {
color: light-dark(#0005, #fff5);
color: light-dark(#0008, #fff8);
}
}
}