diff --git a/package.json b/package.json index 8a5e5b8..48adeca 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": true, "scripts": { "start": "bun src/server.tsx", - "dev": "bun --hot src/server.tsx" + "dev": "env BUN_HOT=1 bun --hot src/server.tsx" }, "alias": { "@utils": "./src/utils.tsx", @@ -21,4 +21,4 @@ "hono": "^4.9.7", "kleur": "^4.1.5" } -} +} \ No newline at end of file diff --git a/public/vendor/C64_Pro_Mono-STYLE.woff2 b/public/vendor/C64_Pro_Mono-STYLE.woff2 new file mode 100644 index 0000000..a1b72c5 Binary files /dev/null and b/public/vendor/C64_Pro_Mono-STYLE.woff2 differ diff --git a/src/components/layout.tsx b/src/components/layout.tsx new file mode 100644 index 0000000..1ee0f73 --- /dev/null +++ b/src/components/layout.tsx @@ -0,0 +1,21 @@ +import type { FC } from "hono/jsx" + +export const Layout: FC = async ({ children, title }) => ( + + + {title || "Nose"} + + + + + + + +
+
+ {children} +
+
+ + +) \ No newline at end of file diff --git a/src/components/terminal.tsx b/src/components/terminal.tsx new file mode 100644 index 0000000..d0f4a01 --- /dev/null +++ b/src/components/terminal.tsx @@ -0,0 +1,8 @@ +import type { FC } from "hono/jsx" + +export const Terminal: FC = async () => ( + <> +

Hello NOSE!

+

This is 960×540 space.

+ +) \ No newline at end of file diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 0000000..df4d5df --- /dev/null +++ b/src/css/main.css @@ -0,0 +1,88 @@ +@font-face { + font-family: 'C64ProMono'; + src: url('/vendor/C64_Pro_Mono-STYLE.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} + +:root { + --font-family: 'C64ProMono', monospace; + --black: #000000; + --white: #E0E0E0; + --cyan: #00A8C8; + --red: #C62828; + --green: green; + --yellow: #C4A000; + --purple: #7C3AED; + --blue: #1565C0; + --magenta: #ff66cc; +} + +.black { + color: var(--black); +} + +.white { + color: var(--white); +} + +.cyan { + color: var(--cyan); +} + +.red { + color: var(--red); +} + +.green { + color: var(--green); +} + +.yellow { + color: var(--yellow); +} + +.purple { + color: var(--purple); +} + +.blue { + color: var(--blue); +} + +.magenta { + color: var(--magenta); +} + +:fullscreen::backdrop { + background: var(--background-color); +} + +html, +body { + font-family: var(--font-family); + margin: 0; + height: 100%; + /* black bars */ + background: black; + display: flex; + justify-content: center; + align-items: center; +} + +main { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +#content { + width: 960px; + height: 540px; + background: white; + /* nearest-neighbor scaling */ + image-rendering: pixelated; + transform-origin: center center; +} \ No newline at end of file diff --git a/src/js/.gitignore b/src/js/.gitignore deleted file mode 100644 index e69de29..0000000 diff --git a/src/js/main.ts b/src/js/main.ts new file mode 100644 index 0000000..5dd101a --- /dev/null +++ b/src/js/main.ts @@ -0,0 +1,11 @@ +function resize() { + const scale = Math.min( + window.innerWidth / 960, + window.innerHeight / 540 + ); + const content = document.getElementById("content")! + content.style.transform = `scale(${scale})` +} + +window.addEventListener("resize", resize) +resize() \ No newline at end of file diff --git a/src/server.tsx b/src/server.tsx index aa8710c..25a7039 100644 --- a/src/server.tsx +++ b/src/server.tsx @@ -7,6 +7,9 @@ import { NOSE_ICON, NOSE_DIR, NOSE_BIN, NOSE_APP } from "./config" import { transpile, isFile } from "./utils" import { apps, serveApp } from "./webapp" +import { Layout } from "./components/layout" +import { Terminal } from "./components/terminal" + // // Hono setup // @@ -56,36 +59,42 @@ app.use("*", async (c, next) => { return next() }) -app.get("/", c => { +app.get("/apps", c => { const url = new URL(c.req.url) const domain = url.hostname - const port = url.port + let port = url.port + port = port && port !== "80" ? `:${port}` : "" return c.html(<>

apps

-