refactor(sw): remove old loggers

components/AutoGrid.tsx

@@ -1,5 +1,8 @@
 import { ComponentChildren, JSX } from 'preact'
-import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
+import {
+	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/SmartStylesheet.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.tsx'
 
 export type BlogProps = {
 	title: string

components/CohabitInfoTable.tsx

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

components/Footer.tsx

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

components/Header.tsx

@@ -3,7 +3,10 @@ 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 { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
+import {
+	getStyleScope,
+	useSmartStylesheet,
+} from ':plugins/SmartStylesheetIsland.tsx'
 
 const scope = getStyleScope(Header)
 

components/Heros.tsx

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

components/MachineCard.tsx

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

components/MemberCard.tsx

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

components/ProjectCard.tsx

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

components/SponsorCards.tsx

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

deno.json

@@ -8,30 +8,18 @@
 		"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
-	},
-	"lint": {
-		"rules": {
-			"tags": [
-				"fresh",
-				"recommended"
-			]
-		}
-	},
-	"exclude": [
-		"**/_fresh/*",
-		"packages/"
-	],
+	"fmt": { "singleQuote": true, "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",
-		"fresh": "jsr:@fresh/core@^2.0.0-alpha.25",
+		"esbuild": "npm:esbuild@^0.25.4",
+		"fresh": "jsr:@fresh/core@^2.0.0-alpha.34",
 		":components/": "./components/",
 		":islands/": "./islands/",
 		":src/": "./src/",
@@ -41,7 +29,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@^1.3.0",
+		"@preact/signals": "npm:@preact/signals@^2.0.4",
 		"@simplewebauthn/browser": "npm:@simplewebauthn/browser@^10.0.0",
 		"@simplewebauthn/server": "npm:@simplewebauthn/server@^10.0.0",
 		"@simplewebauthn/types": "npm:@simplewebauthn/types@^10.0.0",
@@ -50,7 +38,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.24.2",
+		"preact": "npm:preact@^10.26.6",
 		"react": "npm:react@^19.1.0",
 		"react-dom": "npm:react-dom@^19.1.0",
 		"web-push": "npm:web-push@^3.6.7"
@@ -65,16 +53,7 @@
 		],
 		"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

@@ -1,11 +0,0 @@
-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/SmartStylesheet.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.tsx'
 
 const systemHistory = signal<BotMessage[]>([{
 	role: 'system',

islands/IsOnline.tsx

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

islands/LoginForm.tsx

@@ -7,7 +7,10 @@ import type {
 } from '../routes/api/webauthn/login/[step].ts'
 import { Button } from ':components/Button.tsx'
 import { Input } from ':components/Input.tsx'
-import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'
+import {
+	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/SmartStylesheet.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.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/SmartStylesheet.tsx'
+import { useSmartStylesheet } from ':plugins/SmartStylesheetIsland.tsx'
 
 export default function SearchBox() {
 	useSmartStylesheet(import.meta)

islands/ThemePicker.css

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

islands/ThemePicker.tsx

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

main.ts

@@ -1,6 +1,5 @@
 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>()
@@ -16,31 +15,6 @@ 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,125 +1,16 @@
-import { asset, IS_BROWSER } from 'fresh/runtime'
+import { asset } 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'
 
-/**
- * List of css files imported by the current fresh route.
- */
-const styles = new Map<
-	string,
-	{ url: string; layer: string | undefined; scope: string | undefined }
->()
+const bundledFiles = new Set<string>()
 
 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.
  *
@@ -165,12 +56,20 @@ 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
@@ -199,20 +98,117 @@ export function smartStylesheetPlugin<T>(
 		if (path.startsWith('components') || path.startsWith('islands')) {
 			const scope = ctx.url.searchParams.get('__scope')
 
-			const css = await Deno.readTextFile(`./${path}`)
+			try {
+				const css = await Deno.readTextFile(`./${path}`)
+				const file = scope ? `@scope (.${scope}) {\n\n${css}\n}` : css
 
-			const file = scope ? `@scope (.${scope}) {\n\n${css}\n}` : css
-
-			return new Response(file, {
-				headers: {
-					'Content-Type': 'text/css; charset=utf-8',
-				},
-			})
+				return new Response(file, {
+					headers: {
+						'Content-Type': 'text/css; charset=utf-8',
+					},
+				})
+			} catch (error) {
+				if (error instanceof Deno.errors.NotFound) {
+					return new Response(null, { status: 404 })
+				}
+				throw error
+			}
 		}
 
-		return new Response(null, {
-			status: 400,
-			statusText: 'Bad Request - Invalid url',
-		})
+		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 },
+			})
+		} catch {
+			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

@@ -0,0 +1,7 @@
+/**
+ * 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

@@ -0,0 +1,111 @@
+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 } from ':plugins/SmartStylesheet.tsx'
+import { SmartStylesheet, StaticStylesheet } from ':plugins/SmartStylesheet.tsx'
 
 export default function App(
 	{ Component, data, url }: PageProps<{ title?: string } | undefined>,
@@ -42,7 +42,11 @@ export default function App(
 					type='image/x-icon'
 				/>
 				<SmartStylesheet pathname={url.pathname} />
-				<link rel='stylesheet' href={asset('/main.css')} />
+				<link
+					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(_req, ctx) {
+	GET(ctx) {
 		try {
 			const memberList = dbToMemberCardProps(db)
 

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

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

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

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

routes/api/webpush/vapid.ts

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

routes/apps/index.tsx

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

src/stylesheets/base.css

@@ -29,8 +29,7 @@
 	/* 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);
 
@@ -47,11 +46,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 / .6);
+	--_translucent-bg: hsl(from var(--_background-color) h s l / 0.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;