From 4c1701a06d4ad5a68e75a295faf653b6d44c68fa Mon Sep 17 00:00:00 2001 From: Chris Wanstrath Date: Fri, 30 Jan 2026 18:29:42 -0800 Subject: [PATCH] fix code stuff --- .../code/20260130-000000/src/server/index.tsx | 243 +++++++----------- 1 file changed, 96 insertions(+), 147 deletions(-) diff --git a/apps/code/20260130-000000/src/server/index.tsx b/apps/code/20260130-000000/src/server/index.tsx index 74936bb..4b2d3d7 100644 --- a/apps/code/20260130-000000/src/server/index.tsx +++ b/apps/code/20260130-000000/src/server/index.tsx @@ -3,6 +3,7 @@ import { createThemes, define, stylesToCSS } from '@because/forge' import { readdir, stat } from 'fs/promises' import { readFileSync } from 'fs' import { join, extname, basename } from 'path' +import type { Child } from 'hono/jsx' const APPS_DIR = process.env.APPS_DIR! @@ -43,7 +44,7 @@ const theme = createThemes({ }) // Styles -const Container = define('CodeBrowserContainer', { +const Container = define('Container', { fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', padding: '20px', maxWidth: '1200px', @@ -63,7 +64,7 @@ const Title = define('Title', { fontWeight: 'bold', }) -const AppName = define('AppName', { +const Subtitle = define('Subtitle', { color: theme('textMuted'), fontSize: '18px', marginTop: '5px', @@ -141,7 +142,7 @@ const CodeHeader = define('CodeHeader', { fontSize: '14px', }) -const Error = define('Error', { +const ErrorBox = define('ErrorBox', { color: theme('error'), padding: '20px', backgroundColor: theme('errorBg'), @@ -176,14 +177,20 @@ const FileIconSvg = () => ( ) -const themeScript = ` - (function() { - var theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - document.body.setAttribute('data-theme', theme); - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) { - document.body.setAttribute('data-theme', e.matches ? 'dark' : 'light'); - }); - })(); +const initScript = ` +(function() { + var theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + document.body.setAttribute('data-theme', theme); + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) { + document.body.setAttribute('data-theme', e.matches ? 'dark' : 'light'); + }); + function sendHeight() { + window.parent.postMessage({ type: 'resize-iframe', height: document.documentElement.scrollHeight }, '*'); + } + sendHeight(); + new ResizeObserver(sendHeight).observe(document.body); + window.addEventListener('load', sendHeight); +})(); ` const baseStyles = ` @@ -193,6 +200,44 @@ body { } ` +interface LayoutProps { + title: string + subtitle?: string + children: Child + highlight?: boolean +} + +function Layout({ title, subtitle, children, highlight }: LayoutProps) { + return ( + + + + + {title} + + {highlight && ( + <> + + + + + )} + + + - - -