diff --git a/app.config.ts b/app.config.ts index cf822ba..299ea96 100644 --- a/app.config.ts +++ b/app.config.ts @@ -1,4 +1,5 @@ import { defineConfig } from '@solidjs/start/config'; +import solidSvg from 'vite-plugin-solid-svg' // import { VitePWA } from 'vite-plugin-pwa' export default defineConfig({ @@ -7,6 +8,7 @@ export default defineConfig({ cspNonce: 'KAAS_IS_AWESOME', }, plugins: [ + solidSvg() // VitePWA({ // strategies: 'injectManifest', // registerType: 'autoUpdate', diff --git a/bun.lockb b/bun.lockb index 14b28bc..6d0efbd 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 62a810e..14a66e0 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "bun-types": "^1.1.34", "jsdom": "^25.0.1", "vite-plugin-pwa": "^0.21.0", + "vite-plugin-solid-svg": "^0.8.1", "workbox-window": "^7.3.0" } } \ No newline at end of file diff --git a/public/images/favicon.old.dark.svg b/public/images/favicon.old.dark.svg deleted file mode 100644 index 6ac344c..0000000 --- a/public/images/favicon.old.dark.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/public/images/favicon.old.light.svg b/public/images/favicon.old.light.svg deleted file mode 100644 index 3f2ef26..0000000 --- a/public/images/favicon.old.light.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/app.css b/src/app.css index 1aba89e..b6caa23 100644 --- a/src/app.css +++ b/src/app.css @@ -1,16 +1,28 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,GRAD@8..144,400,45;8..144,400,50;8..144,1000,0&family=Roboto+Serif:opsz,GRAD@8..144,71&display=swap"); :root { - --surface-1: light-dark(#ddd, #222); - --surface-2: light-dark(#e8e8e8, #282828); - --surface-3: light-dark(#eee, #333); - --surface-4: light-dark(#f8f8f8, #383838); - --surface-5: light-dark(#fff, #444); - --text-1: light-dark(#222, #eee); - --text-2: light-dark(#282828, #d8d8d8); + --hue: 182.77deg; - --primary: light-dark(oklch(.7503 0.117 181.6deg), oklch(.8549 0.1149 182.77deg)); - --secondary: oklch(from var(--primary) l c calc(h - 180)); + --primary-100: oklch(from var(--primary-500) .95 c h); + --primary-300: oklch(from var(--primary-500) .9 c h); + --primary-500: light-dark(oklch(.7503 0.117 var(--hue)), oklch(.8549 0.1149 var(--hue))); + --primary-700: oklch(from var(--primary-500) .7 c h); + --primary-900: oklch(from var(--primary-500) .6 c h); + + --secondary-100: oklch(from var(--secondary-500) .95 c h); + --secondary-300: oklch(from var(--secondary-500) .9 c h); + --secondary-500: oklch(from var(--primary-500) l c calc(h - 180)); + --secondary-700: oklch(from var(--secondary-500) .7 c h); + --secondary-900: oklch(from var(--secondary-500) .6 c h); + + --surface-1: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h)); + --surface-2: oklch(from var(--surface-1) calc(l + .025) c h); + --surface-3: oklch(from var(--surface-2) calc(l + .025) c h); + --surface-4: oklch(from var(--surface-3) calc(l + .025) c h); + --surface-5: oklch(from var(--surface-4) calc(l + .025) c h); + + --text-1: light-dark(oklch(from var(--secondary-500) .2 .02 h), oklch(from var(--secondary-500) .9 .02 h)); + --text-2: oklch(from var(--text-1) calc(l + .1) c h); --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249)); --fail: light-dark(oklch(.64 .21 25.3), oklch(.64 .21 25.3)); @@ -30,6 +42,7 @@ --padding-s: .25em; --padding-m: .5em; --padding-l: 1em; + --padding-xl: 1.5em; } html { @@ -49,7 +62,7 @@ body { background-color: var(--surface-1); color: var(--text-2); - accent-color: var(--primary); + accent-color: var(--primary-500); margin: 0; @@ -65,7 +78,7 @@ body { } a { - color: var(--primary); + color: var(--primary-500); } h1 { @@ -86,4 +99,10 @@ code { background-color: var(--surface-3); border: 1px solid var(--surface-5); border-radius: var(--radii-m); +} + +@property --hue { + syntax: ''; + inherits: false; + initial-value: 0deg; } \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx index 4cb642d..977a2cf 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -3,13 +3,16 @@ import { Router } from "@solidjs/router"; import { FileRoutes } from "@solidjs/start/router"; import { Suspense } from "solid-js"; import "./app.css"; +import { ThemeProvider } from "./components/colorschemepicker"; export default function App() { return ( ( - {props.children} + + {props.children} + )} > diff --git a/src/assets/edit-blank.svg b/src/assets/edit-blank.svg new file mode 100644 index 0000000..0e95e43 --- /dev/null +++ b/src/assets/edit-blank.svg @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/landing.svg b/src/assets/landing.svg new file mode 100644 index 0000000..b8d4ed8 --- /dev/null +++ b/src/assets/landing.svg @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/colorschemepicker.module.css b/src/components/colorschemepicker.module.css index 0a64665..797b99f 100644 --- a/src/components/colorschemepicker.module.css +++ b/src/components/colorschemepicker.module.css @@ -19,4 +19,10 @@ &:has(:focus-visible) { border-color: var(--info); } +} + +.hue { + display: flex; + flex-flow: row; + align-items: center; } \ No newline at end of file diff --git a/src/components/colorschemepicker.tsx b/src/components/colorschemepicker.tsx index 5d7ffb9..0f4c9bb 100644 --- a/src/components/colorschemepicker.tsx +++ b/src/components/colorschemepicker.tsx @@ -1,69 +1,115 @@ -import { Component, createEffect, createMemo, createResource, For, Setter } from "solid-js"; +import { Accessor, Component, createContext, createEffect, createMemo, createResource, For, ParentComponent, Setter, Show, Suspense, useContext } from "solid-js"; import css from './colorschemepicker.module.css'; import { CgDarkMode } from "solid-icons/cg"; -import { action, cache, useAction } from "@solidjs/router"; +import { action, createAsyncStore, query, useAction } from "@solidjs/router"; import { useSession } from "vinxi/http"; +import { createStore, reconcile, ReconcileOptions, SetStoreFunction } from "solid-js/store"; export enum ColorScheme { Auto = 'light dark', Light = 'light', Dark = 'dark', } -type ColorSchemeKey = keyof typeof ColorScheme; -const colorSchemeKeys: readonly ColorSchemeKey[] = ['Auto', 'Light', 'Dark'] as const; +const colorSchemes = Object.entries(ColorScheme) as readonly [keyof typeof ColorScheme, ColorScheme][]; -interface ColorSchemePickerProps { - value?: Setter; +export interface State { + colorScheme: ColorScheme; + hue: number; } const getSession = async () => { 'use server'; - console.log('what? why? how???', process.env.SESSION_SECRET); - - return useSession<{ colorScheme: ColorSchemeKey }>({ + return useSession({ password: process.env.SESSION_SECRET!, }); }; -export const getColorScheme = cache(async () => { +export const getState = query(async () => { 'use server'; const session = await getSession(); - return session.data.colorScheme; + return session.data; }, 'color-scheme'); -const setColorScheme = action(async (colorScheme: ColorSchemeKey) => { +const setState = action(async (state: State) => { 'use server'; const session = await getSession(); - await session.update({ colorScheme }); + await session.update(state); }, 'color-scheme'); -export const ColorSchemePicker: Component = (props) => { - const [value, { mutate }] = createResource(() => getColorScheme(), { initialValue: 'Auto' }); - const updateStore = useAction(setColorScheme); +interface ThemeContextType { + readonly theme: State; + setColorScheme(colorScheme: ColorScheme): void; + setHue(hue: number): void; +} - createEffect(() => { - props.value?.(ColorScheme[value()]); - }); +const ThemeContext = createContext(); - return ; + if (theme === undefined) { + throw new Error('useColorScheme is called outside a '); + } + + return theme; +}; + +export const ThemeProvider: ParentComponent = (props) => { + const [state, { mutate }] = createResource(() => getState(), { deferStream: true, initialValue: { colorScheme: ColorScheme.Auto, hue: 0 } }); + const updateState = useAction(setState); + + return + {state => { + const [store, setStore] = createStore(state()); + + createEffect(() => { + setStore(state()); + }); + + createEffect(() => { + console.log({ ...store }) + }); + + return ({ ...prev, colorScheme }))) }, + setHue(hue: number) { updateState(mutate(prev => ({ ...prev, hue }))) }, + }}> + {props.children} + ; + }} + ; +}; + +export const ColorSchemePicker: Component = (props) => { + const { theme, setColorScheme, setHue } = useStore(); + + return <> + + + + ; }; \ No newline at end of file diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index 1bb5e18..edde9a2 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -1,23 +1,26 @@ -import { Link, Meta, Title } from "@solidjs/meta"; -import { Component, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js"; -import { BsTranslate } from "solid-icons/bs"; +import { Link, Meta, Style, Title } from "@solidjs/meta"; +import { Component, createEffect, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js"; import { FilesProvider } from "~/features/file"; import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu"; -import { A, createAsync, useBeforeLeave } from "@solidjs/router"; +import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router"; import { createCommand, Modifier } from "~/features/command"; -import { ColorScheme, ColorSchemePicker, getColorScheme } from "~/components/colorschemepicker"; +import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker"; import css from "./editor.module.css"; +export const route: RouteDefinition = { + preload: () => getState(), +}; + export default function Editor(props: ParentProps) { - const storedColorScheme = createAsync(() => getColorScheme(), { initialValue: 'Auto' }); + const theme = useTheme(); const [commandPalette, setCommandPalette] = createSignal(); - const colorScheme = createMemo(() => ColorScheme[storedColorScheme()]); + const color = createMemo(() => ({ [ColorScheme.Auto]: undefined, [ColorScheme.Light]: '#eee', [ColorScheme.Dark]: '#333', - }[ColorScheme[storedColorScheme()]])); + }[theme.colorScheme])); const commands = [ createCommand('open command palette', () => { @@ -32,7 +35,7 @@ export default function Editor(props: ParentProps) { } useBeforeLeave((e) => { - e.preventDefault() + e.preventDefault(); transition(() => { e.retry(true) }) }); @@ -40,14 +43,18 @@ export default function Editor(props: ParentProps) { return Calque - - - - + + }> + + @@ -66,6 +73,7 @@ export default function Editor(props: ParentProps) {
+
diff --git a/src/routes/(editor)/edit.module.css b/src/routes/(editor)/edit.module.css index 2bcab2b..108e015 100644 --- a/src/routes/(editor)/edit.module.css +++ b/src/routes/(editor)/edit.module.css @@ -27,9 +27,25 @@ .blank { display: grid; - grid: 100% / 100%; + place-content: center; + place-items: center; + grid-auto-flow: column; + gap: var(--padding-l); inline-size: 100%; block-size: 100%; - place-items: center; + & > svg { + padding-inline-end: 3em; + margin-inline-end: 3em; + border-inline-end: 2px solid var(--surface-5); + } + + & > button { + background-color: var(--surface-4); + color: var(--text-1); + padding: var(--padding-l) var(--padding-xl); + border: none; + border-radius: var(--radii-m); + cursor: pointer; + } } \ No newline at end of file diff --git a/src/routes/(editor)/edit.tsx b/src/routes/(editor)/edit.tsx index 3192d40..bf9ba3b 100644 --- a/src/routes/(editor)/edit.tsx +++ b/src/routes/(editor)/edit.tsx @@ -7,9 +7,10 @@ import { Grid, load, useFiles } from "~/features/file"; import { Command, CommandType, Context, createCommand, Modifier, noop, useCommands } from "~/features/command"; import { GridApi } from "~/features/file/grid"; import { Tab, Tabs } from "~/components/tabs"; -import css from "./edit.module.css"; import { isServer } from "solid-js/web"; import { Prompt, PromptApi } from "~/components/prompt"; +import EditBlankImage from '~/assets/edit-blank.svg' +import css from "./edit.module.css"; const isInstalledPWA = !isServer && window.matchMedia('(display-mode: standalone)').matches; @@ -269,6 +270,10 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => { + + + + @@ -385,6 +390,8 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter = (props) => { return
+ +
}; \ No newline at end of file diff --git a/src/routes/(editor)/index.module.css b/src/routes/(editor)/index.module.css index 0a4b674..a0e4468 100644 --- a/src/routes/(editor)/index.module.css +++ b/src/routes/(editor)/index.module.css @@ -3,6 +3,11 @@ place-content: center; gap: var(--padding-m); + & > :is(.primary, .secondary) { + display: grid; + grid: 3em / repeat(5, 3em); + } + ul { display: flex; flex-flow: column; diff --git a/src/routes/(editor)/index.tsx b/src/routes/(editor)/index.tsx index 4a8679a..a55bb3e 100644 --- a/src/routes/(editor)/index.tsx +++ b/src/routes/(editor)/index.tsx @@ -1,46 +1,13 @@ -import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js"; -import { useFiles } from "~/features/file"; -import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai"; import { A } from "@solidjs/router"; +import LandingImage from '../../assets/landing.svg' import css from "./index.module.css"; -interface FileEntry { - name: string; - kind: 'file'; - meta: File; -} - -interface FolderEntry { - name: string; - kind: 'folder'; - entries: Entry[]; -} - -type Entry = FileEntry | FolderEntry; - -async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [], depth = 0): AsyncGenerator { - if (depth === 10) { - return; - } - - for await (const handle of directory.values()) { - - if (filters.some(f => f.test(handle.name))) { - continue; - } - - if (handle.kind === 'file') { - yield { name: handle.name, kind: 'file', meta: await handle.getFile() }; - } - else { - yield { name: handle.name, kind: 'folder', entries: await Array.fromAsync(walk(handle, filters, depth + 1)) }; - } - } -} export default function Index() { return (
+ +

Hi, welcome!

Lets get started diff --git a/src/routes/(editor)/test.module.css b/src/routes/(editor)/test.module.css new file mode 100644 index 0000000..465ae65 --- /dev/null +++ b/src/routes/(editor)/test.module.css @@ -0,0 +1,66 @@ +.main { + display: grid; + place-content: center; + gap: var(--padding-m); + + & > svg { + inline-size: 100%; + } + + & > :is(.primary, .secondary) { + display: grid; + grid: 3em / repeat(5, 3em); + } + + & > .primary { + & > :nth-child(1) { + background-color: var(--primary-100); + } + + & > :nth-child(2) { + background-color: var(--primary-300); + } + + & > :nth-child(3) { + background-color: var(--primary-500); + } + + & > :nth-child(4) { + background-color: var(--primary-700); + } + + & > :nth-child(5) { + background-color: var(--primary-900); + } + } + + & > .secondary { + & > :nth-child(1) { + background-color: var(--secondary-100); + } + + & > :nth-child(2) { + background-color: var(--secondary-300); + } + + & > :nth-child(3) { + background-color: var(--secondary-500); + } + + & > :nth-child(4) { + background-color: var(--secondary-700); + } + + & > :nth-child(5) { + background-color: var(--secondary-900); + } + } + + ul { + display: flex; + flex-flow: column; + gap: var(--padding-s); + padding-inline-start: var(--padding-l); + margin: 0; + } +} \ No newline at end of file diff --git a/src/routes/(editor)/test.tsx b/src/routes/(editor)/test.tsx new file mode 100644 index 0000000..9fedd4e --- /dev/null +++ b/src/routes/(editor)/test.tsx @@ -0,0 +1,38 @@ +import { A } from "@solidjs/router"; +import LandingImage from '../../assets/landing.svg' +import css from "./test.module.css"; + + +export default function Index() { + return ( +
+ + +

Hi, welcome!

+ Lets get started + +
+ + + + + +
+ +
+ + + + + +
+ + +
+ ); +} diff --git a/src/routes/editor.module.css b/src/routes/editor.module.css index 7f57193..597cb8b 100644 --- a/src/routes/editor.module.css +++ b/src/routes/editor.module.css @@ -50,6 +50,7 @@ & .right { display: grid; + grid-auto-flow: column; align-content: center; } } diff --git a/tsconfig.json b/tsconfig.json index 2464cc2..9557a86 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,7 @@ "@testing-library/jest-dom", "@types/wicg-file-system-access", "vinxi/types/client", + "vite-plugin-solid-svg/types-component-solid", "vite-plugin-pwa/solid", "bun-types" ],