components/AutoGrid.tsx

@@ -1,8 +1,5 @@
 import { ComponentChildren, JSX } from 'preact'
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 type Units = 'rem' | '%' | 'px'
 

components/BlogBlocks.tsx

@@ -1,6 +1,6 @@
 import { Markdown } from ':components/Markdown.tsx'
 import { NewsFrontMatter } from ':src/blog/types.ts'
-import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
 
 export type BlogProps = {
 	title: string

components/CohabitInfoTable.tsx

@@ -1,4 +1,4 @@
-import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
 
 export function CohabitInfoTable() {
 	return (

components/Footer.tsx

@@ -1,7 +1,4 @@
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 const scope = getStyleScope(Footer)
 

components/Header.tsx

@@ -3,10 +3,7 @@ import AiChatBox from ':islands/AiChatBox.tsx'
 import MoreBox from ':islands/MoreBox.tsx'
 import SearchBox from ':islands/SearchBox.tsx'
 import ThemePicker from ':islands/ThemePicker.tsx'
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 const scope = getStyleScope(Header)
 

components/Heros.tsx

@@ -1,7 +1,4 @@
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 const scope = getStyleScope(Heros)
 

components/MachineCard.tsx

@@ -1,7 +1,4 @@
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 type MachineCardProps = {
 	img: string

components/MemberCard.tsx

@@ -1,7 +1,4 @@
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 export type MemberCardProps = {
 	id: string

components/ProjectCard.tsx

@@ -1,8 +1,5 @@
 import { JSX } from 'preact'
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 type ProjectCardProps = {
 	id: string

components/SponsorCards.tsx

@@ -1,9 +1,6 @@
 import { asset } from 'fresh/runtime'
 import { Picture } from ':components/Picture.tsx'
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 const scope = getStyleScope(SponsorCards)
 

deno.json

@@ -8,18 +8,30 @@
 		"update": "deno run -A -r jsr:@fresh/update .",
 		"dev:add_package": "deno run --allow-net=git.cohabit.fr --allow-read=. --allow-write=./deno.json,./packages --allow-run=git,deno ./scripts/add_package.ts"
 	},
-	"fmt": { "singleQuote": true, "semiColons": false, "useTabs": true },
+	"fmt": {
-	"lint": { "rules": { "tags": ["fresh", "recommended"] } },
+		"singleQuote": true,
-	"exclude": ["**/_fresh/*", "packages/"],
+		"semiColons": false,
+		"useTabs": true
+	},
+	"lint": {
+		"rules": {
+			"tags": [
+				"fresh",
+				"recommended"
+			]
+		}
+	},
+	"exclude": [
+		"**/_fresh/*",
+		"packages/"
+	],
 	"imports": {
 		"@deno/emit": "jsr:@deno/emit@^0.46.0",
 		"@deno/gfm": "jsr:@deno/gfm@^0.10.0",
 		"@mdxeditor/editor": "npm:@mdxeditor/editor@^3.32.3",
 		"@std/fs": "jsr:@std/fs@^1.0.6",
-		"@std/media-types": "jsr:@std/media-types@^1.1.0",
 		"@std/path": "jsr:@std/path@^1.0.8",
-		"esbuild": "npm:esbuild@^0.25.4",
+		"fresh": "jsr:@fresh/core@^2.0.0-alpha.25",
-		"fresh": "jsr:@fresh/core@^2.0.0-alpha.34",
 		":components/": "./components/",
 		":islands/": "./islands/",
 		":src/": "./src/",
@@ -29,7 +41,7 @@
 		"@cohabit/resources-manager": "jsr:@cohabit/resources-manager@^0.2.1",
 		"@jotsr/delayed": "jsr:@jotsr/delayed@^2.1.1",
 		"@jotsr/smart-css-bundler": "jsr:@jotsr/smart-css-bundler@^0.3.0",
-		"@preact/signals": "npm:@preact/signals@^2.0.4",
+		"@preact/signals": "npm:@preact/signals@^1.3.0",
 		"@simplewebauthn/browser": "npm:@simplewebauthn/browser@^10.0.0",
 		"@simplewebauthn/server": "npm:@simplewebauthn/server@^10.0.0",
 		"@simplewebauthn/types": "npm:@simplewebauthn/types@^10.0.0",
@@ -38,7 +50,7 @@
 		"@std/http": "jsr:@std/http@^0.224.4",
 		"@std/json": "jsr:@std/json@^1.0.1",
 		"@std/streams": "jsr:@std/streams@^0.224.5",
-		"preact": "npm:preact@^10.26.6",
+		"preact": "npm:preact@^10.24.2",
 		"react": "npm:react@^19.1.0",
 		"react-dom": "npm:react-dom@^19.1.0",
 		"web-push": "npm:web-push@^3.6.7"
@@ -53,7 +65,16 @@
 		],
 		"jsx": "precompile",
 		"jsxImportSource": "preact",
-		"jsxPrecompileSkipElements": ["a", "img", "source", "body", "html", "head"]
+		"jsxPrecompileSkipElements": [
+			"a",
+			"img",
+			"source",
+			"body",
+			"html",
+			"head"
+		]
 	},
-	"unstable": ["kv"]
+	"unstable": [
+		"kv"
+	]
 }

fresh.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '$fresh/server.ts'
+import { cssBundler } from '@jotsr/smart-css-bundler/fresh'
+
+export default defineConfig({
+	plugins: [
+		cssBundler(
+			['./src/stylesheets/main.css'], //TODO fix bundler out paths , { bundleSubDir: 'css' }
+			{ externalPaths: ['assets'] },
+		),
+	],
+})

islands/AiChatBox.tsx

@@ -3,7 +3,7 @@ import { Markdown } from ':components/Markdown.tsx'
 import { Signal, signal, useSignal } from '@preact/signals'
 import { JSX } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
-import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
 
 const systemHistory = signal<BotMessage[]>([{
 	role: 'system',

islands/IsOnline.tsx

@@ -1,9 +1,6 @@
 import { type Signal, useComputed, useSignal } from '@preact/signals'
 import { useEffect } from 'preact/hooks'
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 type NetworkConnection = {
 	addEventListener: (

islands/LoginForm.tsx

@@ -7,10 +7,7 @@ import type {
 } from '../routes/api/webauthn/login/[step].ts'
 import { Button } from ':components/Button.tsx'
 import { Input } from ':components/Input.tsx'
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 const scope = getStyleScope(LoginForm)
 

islands/MoreBox.tsx

@@ -1,6 +1,6 @@
 import { VNode } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
-import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
 
 export default function MoreBox({ children }: { children: VNode | VNode[] }) {
 	useSmartStylesheet(import.meta)

islands/SearchBox.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
 
 export default function SearchBox() {
 	useSmartStylesheet(import.meta)

islands/ThemePicker.css

@@ -1,5 +1,5 @@
 :scope {
-	display: inline-flex !important;
+	display: inline-flex;
 	align-items: center;
 	gap: var(--_gap-half);
 	height: fit-content;

islands/ThemePicker.tsx

@@ -1,9 +1,6 @@
 import { useComputed, useSignal, useSignalEffect } from '@preact/signals'
 import { IS_BROWSER } from 'fresh/runtime'
-import {
+import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
-	getStyleScope,
-	useSmartStylesheet,
-} from ':plugins/SmartStylesheetIsland.tsx'
 
 const scope = getStyleScope(ThemePicker)
 

main.ts

@@ -1,5 +1,6 @@
 import { App, fsRoutes, staticFiles } from 'fresh'
 import { type State } from './utils.ts'
+import { contentType } from 'jsr:@std/media-types@1/content-type'
 import { smartStylesheetPlugin } from ':plugins/SmartStylesheet.tsx'
 
 export const app = new App<State>()
@@ -15,6 +16,31 @@ app.use(staticFiles())
 
 smartStylesheetPlugin(app)
 
+//TEMP fix before updating cssBundler middleware
+app.use(async (ctx) => {
+	const response = await ctx.next()
+	if (
+		response.status === 404 &&
+		!ctx.url.pathname.match(/\/js\/[0-9a-f]+\/\S+\.js/)
+	) {
+		const ext = ctx.url.pathname.split('.').at(-1) ?? '.bin'
+		const mime = contentType(ext) ?? 'application/octet-stream'
+
+		try {
+			const file = await Deno.readFile(`./_fresh/static/${ctx.url.pathname}`)
+			return new Response(file, {
+				headers: {
+					'Content-Type': mime,
+				},
+			})
+		} catch {
+			//TEMP don't handle specific error for now
+			return response
+		}
+	}
+	return response
+})
+
 await fsRoutes(app, {
 	dir: './',
 	loadIsland: (path) => import(`./islands/${path}`),

plugins/SmartStylesheet.tsx

@@ -1,16 +1,125 @@
-import { asset } from 'fresh/runtime'
+import { asset, IS_BROWSER } from 'fresh/runtime'
 import { App } from 'fresh'
-import { build, type Plugin } from 'esbuild'
-import { extname, fromFileUrl, toFileUrl } from '@std/path'
-import { exists } from '@std/fs/exists'
-import { ensureDir } from '@std/fs'
-import { contentType } from '@std/media-types'
-import { styles } from './SmartStylesheetCommon.tsx'
 
-const bundledFiles = new Set<string>()
+/**
+ * List of css files imported by the current fresh route.
+ */
+const styles = new Map<
+	string,
+	{ url: string; layer: string | undefined; scope: string | undefined }
+>()
 
 const baseRoute = '__smart_css__'
 
+/**
+ * Generate a css scope for the given component/island based on its name.
+ *
+ * @param component - Component or island to scope.
+ * @returns scope - css scope class.
+ *
+ * @example
+ * ```ts
+ * // ./(components|islands)/Button.tsx
+ * import type { JSX } from 'preact'
+ * import { getStyleScope, useSmartStylesheet } from './SmartStylesheet.tsx'
+ *
+ * const scope = getStyleScope(Button)
+ *
+ * export function Button(props: JSX.ButtonHTMLAttributes) {
+ *   useSmartStylesheet(import.meta, { scope })
+ *
+ *   return <button class={scope} {...props} />
+ * }
+ * ```
+ */
+export function getStyleScope<T extends { name: Readonly<string> }>(
+	component: T,
+): string {
+	// generate scope/class hash
+	return `_scope_${
+		btoa(component.name).slice(-10).replaceAll('=', '_').toLowerCase()
+	}`
+}
+
+/**
+ * Hook to load component/island stylesheet only when
+ * it is imported by the served route.
+ * For any `./(component|islands)/Element.tsx` it will
+ * load the corresponding `./(component|islands)/Element.css`
+ *
+ * @param meta - Component ImportMeta used to resolve
+ * stylesheet path, name and layer.
+ * @param options - CSS scope to use (default: none)
+ * and css layer ('components' or 'islands') depending of the ImportMeta.
+ *
+ * @example Basic usage
+ * ```ts
+ * // ./(components|islands)/Button.tsx
+ * import type { JSX } from 'preact'
+ * import { useSmartStylesheet } from './SmartStylesheet.tsx'
+ *
+ * export function Button(props: JSX.ButtonHTMLAttributes) {
+ *   useSmartStylesheet(import.meta)
+ *
+ *   return <button class={scope} {...props} />
+ * }
+ * ```
+ *
+ * @example Use css scope
+ * ```ts
+ * // ./(components|islands)/Button.tsx
+ * import type { JSX } from 'preact'
+ * import { getStyleScope, useSmartStylesheet } from './SmartStylesheet.tsx'
+ *
+ * const scope = getStyleScope(Button)
+ *
+ * export function Button(props: JSX.ButtonHTMLAttributes) {
+ *   useSmartStylesheet(import.meta, { scope })
+ *
+ *   return <button class={scope} {...props} />
+ * }
+ * ```
+ *
+ * @example Use custom layer
+ * ```ts
+ * // ./(components|islands)/Button.tsx
+ * import type { JSX } from 'preact'
+ * import { getStyleScope, useSmartStylesheet } from './SmartStylesheet.tsx'
+ *
+ * const scope = getStyleScope(Button)
+ *
+ * export function Button(props: JSX.ButtonHTMLAttributes) {
+ *   useSmartStylesheet(import.meta, { scope, layer: 'custom' })
+ *
+ *   return <button class={scope} {...props} />
+ * }
+ * ```
+ */
+export function useSmartStylesheet(
+	meta: ImportMeta,
+	options?: { scope?: string; layer?: string },
+) {
+	if (IS_BROWSER) return
+
+	// resolve filename
+	const css = meta.filename
+		?.replace('.tsx', '.css')
+		.replace(Deno.cwd(), '')
+		.replaceAll('\\', '/')
+
+	if (!css) return
+	if (styles.has(css)) return
+
+	// set css layer
+	const layerValue = options?.layer ?? css.includes('/components/')
+		? 'components'
+		: css.includes('/islands/')
+		? 'islands'
+		: undefined
+
+	styles.set(css, { url: css, scope: options?.scope, layer: layerValue })
+}
+
 /**
  * Dynamic components and islands stylesheet.
  *
@@ -56,20 +165,12 @@ export function SmartStylesheet(
 	)
 }
 
-export function StaticStylesheet(
-	options: { href: string },
-) {
-	return <link rel='stylesheet' href={asset(`/${baseRoute}/${options.href}`)} />
-}
-
 export function smartStylesheetPlugin<T>(
 	app: App<T>,
 	options: { baseRoute?: string } = {},
 ) {
 	options.baseRoute ??= baseRoute
 
-	bundleCss(['./src/stylesheets/main.css'], app, options.baseRoute)
-
 	//resolve dynamic styles imports
 	app.get(`/${options.baseRoute}/:path+`, async (ctx) => {
 		const { path } = ctx.params
@@ -98,117 +199,20 @@ export function smartStylesheetPlugin<T>(
 		if (path.startsWith('components') || path.startsWith('islands')) {
 			const scope = ctx.url.searchParams.get('__scope')
 
-			try {
+			const css = await Deno.readTextFile(`./${path}`)
-				const css = await Deno.readTextFile(`./${path}`)
-				const file = scope ? `@scope (.${scope}) {\n\n${css}\n}` : css
 
-				return new Response(file, {
+			const file = scope ? `@scope (.${scope}) {\n\n${css}\n}` : css
-					headers: {
-						'Content-Type': 'text/css; charset=utf-8',
-					},
-				})
-			} catch (error) {
-				if (error instanceof Deno.errors.NotFound) {
-					return new Response(null, { status: 404 })
-				}
-				throw error
-			}
-		}
 
-		try {
-			const file = await Deno.readFile(
-				`${app.config.build.outDir}/static/${options.baseRoute}/${path}`,
-			)
-			const mime = contentType(extname(path)) ?? 'application/octet-stream'
 			return new Response(file, {
-				headers: { 'Content-Type': mime },
+				headers: {
-			})
+					'Content-Type': 'text/css; charset=utf-8',
-		} catch {
+				},
-			return new Response(null, {
-				status: 400,
-				statusText: 'Bad Request - Invalid url',
 			})
 		}
+
+		return new Response(null, {
+			status: 400,
+			statusText: 'Bad Request - Invalid url',
+		})
 	})
 }
-
-async function bundleCss<T extends unknown>(
-	files: string[],
-	app: App<T>,
-	baseRoute?: string,
-) {
-	const cssPlugin: Plugin = {
-		name: 'smart-stylesheet-bundler',
-		setup(build) {
-			build.onResolve({ filter: /.*/ }, async (args) => {
-				const importer = args.importer.length
-					? args.importer
-					: `${app.config.root}/`
-				const importerUrl = importer.match(/\w+:\/\/.+/)
-					? new URL(importer)
-					: toFileUrl(importer)
-				const url = new URL(args.path, importerUrl)
-
-				const external = url.protocol === 'file:' && !(await exists(url))
-				const local = url.protocol === 'file:'
-
-				if (!external) bundledFiles.add(url.href)
-				const watchFiles: string[] = []
-				if (local && !external) watchFiles.push(fromFileUrl(url.href))
-
-				return {
-					path: external ? args.path : url.href,
-					namespace: external ? 'external' : 'internal',
-					external,
-					watchFiles,
-				}
-			})
-
-			build.onLoad({ filter: /.*/, namespace: 'internal' }, async (args) => {
-				const url = new URL(args.path)
-				let isCss = url.pathname.match(/.css$/) !== null
-				const buffer = url.protocol === 'file:'
-					? await Deno.readFile(url)
-					: await fetch(url).then((r) => {
-						if (r.headers.get('Content-type')?.includes('text/css')) {
-							isCss = true
-						}
-						return r.bytes()
-					})
-
-				if (isCss) {
-					return {
-						contents: new TextDecoder().decode(buffer),
-						loader: 'css',
-						resolveDir: url.href,
-					}
-				}
-
-				return {
-					contents: buffer,
-					loader: url.protocol === 'data:' ? 'dataurl' : 'file',
-				}
-			})
-		},
-	}
-
-	const outdir = baseRoute
-		? `${app.config.build.outDir}/static/${baseRoute}`
-		: `${app.config.build.outDir}/static`
-	await ensureDir(outdir)
-
-	const result = await build({
-		entryPoints: files,
-		bundle: true,
-		minify: true,
-		sourcemap: app.config.mode === 'development' ? 'inline' : false,
-		plugins: [cssPlugin],
-		outdir,
-		write: false,
-	})
-
-	for (const file of result.outputFiles) {
-		const path = new URL(file.path).pathname
-		Deno.writeFile(path, file.contents)
-	}
-}

plugins/SmartStylesheetCommon.tsx

@@ -1,7 +0,0 @@
-/**
- * List of css files imported by the current fresh route.
- */
-export const styles = new Map<
-	string,
-	{ url: string; layer: string | undefined; scope: string | undefined }
->()

plugins/SmartStylesheetIsland.tsx

@@ -1,111 +0,0 @@
-import { IS_BROWSER } from 'fresh/runtime'
-import { styles } from './SmartStylesheetCommon.tsx'
-
-/**
- * Generate a css scope for the given component/island based on its name.
- *
- * @param component - Component or island to scope.
- * @returns scope - css scope class.
- *
- * @example
- * ```ts
- * // ./(components|islands)/Button.tsx
- * import type { JSX } from 'preact'
- * import { getStyleScope, useSmartStylesheet } from './SmartStylesheet.tsx'
- *
- * const scope = getStyleScope(Button)
- *
- * export function Button(props: JSX.ButtonHTMLAttributes) {
- *   useSmartStylesheet(import.meta, { scope })
- *
- *   return <button class={scope} {...props} />
- * }
- * ```
- */
-export function getStyleScope<T extends { name: Readonly<string> }>(
-	component: T,
-): string {
-	// generate scope/class hash
-	return `_scope_${
-		btoa(component.name).slice(-10).replaceAll('=', '_').toLowerCase()
-	}`
-}
-
-/**
- * Hook to load component/island stylesheet only when
- * it is imported by the served route.
- * For any `./(component|islands)/Element.tsx` it will
- * load the corresponding `./(component|islands)/Element.css`
- *
- * @param meta - Component ImportMeta used to resolve
- * stylesheet path, name and layer.
- * @param options - CSS scope to use (default: none)
- * and css layer ('components' or 'islands') depending of the ImportMeta.
- *
- * @example Basic usage
- * ```ts
- * // ./(components|islands)/Button.tsx
- * import type { JSX } from 'preact'
- * import { useSmartStylesheet } from './SmartStylesheet.tsx'
- *
- * export function Button(props: JSX.ButtonHTMLAttributes) {
- *   useSmartStylesheet(import.meta)
- *
- *   return <button class={scope} {...props} />
- * }
- * ```
- *
- * @example Use css scope
- * ```ts
- * // ./(components|islands)/Button.tsx
- * import type { JSX } from 'preact'
- * import { getStyleScope, useSmartStylesheet } from './SmartStylesheet.tsx'
- *
- * const scope = getStyleScope(Button)
- *
- * export function Button(props: JSX.ButtonHTMLAttributes) {
- *   useSmartStylesheet(import.meta, { scope })
- *
- *   return <button class={scope} {...props} />
- * }
- * ```
- *
- * @example Use custom layer
- * ```ts
- * // ./(components|islands)/Button.tsx
- * import type { JSX } from 'preact'
- * import { getStyleScope, useSmartStylesheet } from './SmartStylesheet.tsx'
- *
- * const scope = getStyleScope(Button)
- *
- * export function Button(props: JSX.ButtonHTMLAttributes) {
- *   useSmartStylesheet(import.meta, { scope, layer: 'custom' })
- *
- *   return <button class={scope} {...props} />
- * }
- * ```
- */
-export function useSmartStylesheet(
-	meta: ImportMeta,
-	options?: { scope?: string; layer?: string },
-) {
-	if (IS_BROWSER) return
-
-	// resolve filename
-	const css = meta.filename
-		?.replace('.tsx', '.css')
-		.replace(Deno.cwd(), '')
-		.replaceAll('\\', '/')
-
-	if (!css) return
-	if (styles.has(css)) return
-
-	// set css layer
-	const layerValue = options?.layer ?? css.includes('/components/')
-		? 'components'
-		: css.includes('/islands/')
-		? 'islands'
-		: undefined
-
-	styles.set(css, { url: css, scope: options?.scope, layer: layerValue })
-}

routes/_app.tsx

@@ -4,7 +4,7 @@ import { Footer } from ':components/Footer.tsx'
 import { Header } from ':components/Header.tsx'
 import IsOnline from ':islands/IsOnline.tsx'
 import RegisterServiceWorker from ':islands/RegisterServiceWorker.tsx'
-import { SmartStylesheet, StaticStylesheet } from ':plugins/SmartStylesheet.tsx'
+import { SmartStylesheet } from ':plugins/SmartStylesheet.tsx'
 
 export default function App(
 	{ Component, data, url }: PageProps<{ title?: string } | undefined>,
@@ -42,11 +42,7 @@ export default function App(
 					type='image/x-icon'
 				/>
 				<SmartStylesheet pathname={url.pathname} />
-				<link
+				<link rel='stylesheet' href={asset('/main.css')} />
-					rel='stylesheet'
-					href='https://cdn.jsdelivr.net/npm/@mdxeditor/editor@3.32.3/dist/style.min.css'
-				/>
-				<StaticStylesheet href='main.css' />
 				<link rel='stylesheet' href={asset('/imports/markdown_css')} />
 				<title>{data?.title ?? 'Fablab Coh@bit'}</title>
 			</head>

routes/api/members/fetchAll.ts

@@ -5,7 +5,7 @@ import { SessionHandlers } from ':src/session/mod.ts'
 import { respondApi, respondApiStream } from ':src/utils.ts'
 
 export const handler: SessionHandlers = {
-	GET(ctx) {
+	GET(_req, ctx) {
 		try {
 			const memberList = dbToMemberCardProps(db)
 

routes/api/webauthn/login/[step].ts

@@ -27,8 +27,7 @@ export type WebAuthnLoginStartPayload = {
 export type WebAuthnLoginFinishPayload = AuthenticationResponseJSON
 
 export const handler: SessionHandlers = {
-	async POST(ctx) {
+	async POST(req, ctx) {
-		const req = ctx.req
 		const relyingParty = getRelyingParty(ctx.url)
 
 		const { step } = ctx.params as Params

routes/api/webauthn/register/[step].ts

@@ -27,8 +27,7 @@ export type WebAuthnRegisterStartPayload = { name: string }
 export type WebAuthnRegisterFinishPayload = RegistrationResponseJSON
 
 export const handler: SessionHandlers = {
-	async POST(ctx) {
+	async POST(req, ctx) {
-		const req = ctx.req
 		const relyingParty = getRelyingParty(ctx.url)
 
 		const { step } = ctx.params as Params

routes/api/webpush/vapid.ts

@@ -4,6 +4,7 @@ import { define } from '../../../utils.ts'
 
 export const handler = define.handlers({
 	GET() {
+		console.log('VAPID', publicKey)
 		return respondApi('success', publicKey)
 	},
 })

routes/apps/index.tsx

@@ -1,11 +1,7 @@
-import MdxEditor from ':islands/MdxEditor.tsx'
-
 export default function App() {
 	//TODO implement route
 	return (
 		<>
-			<MdxEditor />
-
 			<p>
 				Filters ... - os [] [] [] - cohabit []
 			</p>

src/serviceworker/mod.ts

@@ -109,6 +109,7 @@ if (IS_SW) {
 	})
 
 	self.addEventListener('push', (event) => {
+		console.log('push')
 		const { title, options } = (event.data?.json() ?? {}) as {
 			title?: string
 			options?: Partial<NotificationOptions>
@@ -120,9 +121,13 @@ if (IS_SW) {
 		}
 	})
 
-	// TODO handle notifications actions
+	self.addEventListener('notificationclick', (event) => {
-	// self.addEventListener('notificationclick', (event) => {})
+		console.log('SW - NOT_CLICK', event)
-	// self.addEventListener('notificationclose', (event) => {})
+	})
+
+	self.addEventListener('notificationclose', (event) => {
+		console.log('SW - NOT_CLOSE', event)
+	})
 }
 
 async function fetchHandler(event: FetchEvent) {

src/stylesheets/base.css

@@ -29,7 +29,8 @@
 	/* font */
 	--_font-size: var(--font-size-1);
 	--_font-family: 'MuseoModerno', 'Adjusted Verdana Fallback', sans-serif;
-	--_font-family-accent: 'Hepta Slab', 'Adjusted Lucida Bright Fallback', serif;
+	--_font-family-accent: 'Hepta Slab', 'Adjusted Lucida Bright Fallback',
+		serif;
 	--_font-family-code: 'Fira Code', 'Adjusted Courier New Fallback', monospace;
 	--_font-color: var(--choco-12);
 
@@ -46,11 +47,11 @@
 	/* color */
 	--_accent-color: var(--lime-6);
 	--_translucent: hsl(from var(--_font-color) h s l / 0.1);
-	--_translucent-bg: hsl(from var(--_background-color) h s l / 0.6);
+	--_translucent-bg: hsl(from var(--_background-color) h s l / .6);
 
 	/* other */
 	--_background-color: var(--sand-0);
-	--_background-image: url('/assets/css_bg_stardust_alpha_30.png');
+	--_background-image: url('assets/css_bg_stardust_alpha_30.png');
 	--_blur: var(--size-3);
 	--_transition-delay: 0.2s;