Tabi Pages

Build Tabi powered web apps with Markdown and Preact.

Quick Start

deno add jsr:@tabirun/app jsr:@tabirun/pages

deno.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@tabirun/pages/preact"
  },
  "imports": {
    "@tabirun/app": "jsr:@tabirun/app@^0.1.2",
    "@tabirun/pages": "jsr:@tabirun/pages@^0.6.0",
    "postcss": "npm:postcss@^8.4.49"
  }
}

postcss.config.ts

import type { Config } from "postcss";

export default { plugins: [] } satisfies Config;

styles/index.css

body {
  font-family: system-ui, sans-serif;
}

pages/index.md

# Hello, Tabi Pages!

dev.ts

import { TabiApp } from "@tabirun/app";
import { pages } from "@tabirun/pages";

const app = new TabiApp();
const { dev } = pages({ css: { entry: "./styles/index.css" } });
await dev(app);

Deno.serve({ port: 3000 }, app.handler);

build.ts

import { pages } from "@tabirun/pages";

const { build } = pages({ css: { entry: "./styles/index.css" } });
await build();

serve.ts

import { TabiApp } from "@tabirun/app";
import { pages } from "@tabirun/pages";

const app = new TabiApp();
const { serve } = pages();
serve(app);

Deno.serve({ port: 3000 }, app.handler);

deno run -A dev.ts    # Development with hot reload
deno run -A build.ts  # Build to ./dist
deno run -A serve.ts  # Serve ./dist