From ed1e429a73c57d70ded713ff1f6472ad5bf0894f Mon Sep 17 00:00:00 2001 From: Chris Wanstrath Date: Sun, 30 Nov 2025 08:43:53 -0800 Subject: [PATCH] dark mode and such --- src/code.tsx | 29 ++--- src/divider.tsx | 2 +- test/layout.tsx | 295 ++++++++++++++++++++++++++++++++++++++++++++++++ test/server.tsx | 26 ++++- 4 files changed, 332 insertions(+), 20 deletions(-) create mode 100644 test/layout.tsx diff --git a/src/code.tsx b/src/code.tsx index 7fc5de1..9dd7be7 100644 --- a/src/code.tsx +++ b/src/code.tsx @@ -77,19 +77,21 @@ type CodeExamplesProps = { // Container for multiple code examples export const CodeExamples: FC = ({ examples }) => { return ( - - {examples.map((example, i) => ( - {example} - ))} - +
+ + {examples.map((example, i) => ( + {example} + ))} + +
) } @@ -105,7 +107,6 @@ function tokenizeJSX(code: string): Token[] { while (i < code.length) { // Match opening/closing tags: < or = ({ children, style }) => { padding: "0 12px", fontSize: "14px", color: "#6b7280", - backgroundColor: "white", + backgroundColor: "#ffffff", } return ( diff --git a/test/layout.tsx b/test/layout.tsx new file mode 100644 index 0000000..d10980f --- /dev/null +++ b/test/layout.tsx @@ -0,0 +1,295 @@ +import "hono/jsx" +import { raw } from "hono/html" + +type LayoutProps = { + title: string + children: any + showHomeLink?: boolean +} + +export const Layout = ({ title, children, showHomeLink = true }: LayoutProps) => { + return ( + + + + + {title} - Howl UI + + + + + +
+ {showHomeLink && ( + + 🏠 + + )} + {title} +
+ + {children} + + + + + ) +} diff --git a/test/server.tsx b/test/server.tsx index 9be7c58..a7d69c2 100644 --- a/test/server.tsx +++ b/test/server.tsx @@ -2,6 +2,7 @@ import { Hono } from 'hono' import { readdirSync } from 'fs' import { join } from 'path' import { capitalize } from './utils' +import { Layout } from './layout' const port = process.env.PORT ?? '3100' const app = new Hono() @@ -15,14 +16,29 @@ app.get('/:file', async c => { return c.text('404 Not Found', 404) const page = await import(path + `?t=${Date.now()}`) - return c.html(<>

<{capitalize(file)} />

) + return c.html( + `}> + + + ) }) app.get('/', c => { - return c.html(<> -

Test Files

-
    {testFiles().map(x =>
  • {x}
    • )}
- ) + return c.html( + +
+
    + {testFiles().map(x => ( +
  • + + {x} + +
    • + ))} +
+
+ + ) }) function testFiles(): string[] {