@rettangoli/sites 0.2.6 → 0.2.7

package/README.md

@@ -1,325 +1,133 @@
 # Rettangoli Sites
 
-A straightforward, zero-complexity static site generator that uses Markdown and YAML to build websites. Perfect for landing pages, blogs, documentation, admin dashboards, and more.
+A static site generator using Markdown and YAML.
 
-## Features
-
-- 🚀 **Zero Configuration** - Works out of the box with sensible defaults
-- 📝 **Markdown & YAML** - Write content in familiar formats
-- 🎨 **Full-featured** - Templates, partials, collections, global data, nested pages, static assets, and extensible architecture
-
-## Installation
+## Quick Start
 
 ```bash
-npm install -g rtgl
-```
+# Create a new site from template
+bunx rtgl sites init my-site                   # Uses 'default' template
+bunx rtgl sites init my-site -t default        # Explicit template name
 
-## Quick Start
+# Install and build
+cd my-site
+bun install
+bun run build
+```
 
-### 1. Create Your Project Structure
+## Project Structure
 
 ```
 my-site/
-├── pages/           # Your content (YAML and Markdown files)
-├── templates/       # Reusable page templates (YAML)
-├── partials/        # Reusable components (YAML)
-├── data/            # Global data files (YAML)
-├── static/          # Static assets (CSS, JS, images)
-└── _site/           # Generated output (created automatically)
+├── pages/           # Content (YAML and Markdown)
+├── templates/       # Page layouts
+├── partials/        # Reusable components
+├── data/            # Global data files
+├── static/          # Static assets
+├── sites.config.js  # Optional config
+├── package.json
+└── _site/           # Generated output
 ```
 
-### 2. Create Your First Page
+## Pages
 
-**pages/index.yaml**
+**YAML page:**
 ```yaml
 ---
-title: Welcome
 template: base
+title: Home
 ---
-- heading: Welcome to My Site
-- paragraph: This is a simple static site built with Rettangoli Sites.
-```
-
-### 3. Create a Template
-
-**templates/base.yaml**
-```yaml
-- tag: html
-  children:
-    - tag: head
-      children:
-        - tag: title
-          children: $title
-    - tag: body
-      children: $content
+- h1: Welcome
+- p: Hello world
 ```
 
-### 4. Build Your Site
-
-```bash
-npx rtgl sites build
-```
-
-Your site will be generated in the `_site` directory.
-
-## Core Concepts
-
-### Pages
-
-Pages are the content of your site. They can be either:
-- **YAML files** (`.yaml`) - Structured content with components
-- **Markdown files** (`.md`) - Rich text content with frontmatter
-
-Every page can have frontmatter (metadata) at the top:
-
-```yaml
+**Markdown page:**
+```markdown
 ---
-title: My Page Title
 template: base
-tags: [blog, tutorial]
+title: About
 ---
-```
+# About Us
 
-### Templates
+Content in **markdown**.
+```
 
-Templates define the HTML structure for your pages. They're YAML files that describe HTML elements and can include dynamic content using the `$` prefix.
+## Syntax
 
-**Example template:**
 ```yaml
-- tag: article
-  children:
-    - tag: h1
-      children: $title
-    - tag: div
-      class: content
-      children: $content
-```
+# Element with class and id
+- div.container#main:
+    - h1: Title
 
-Templates can be organized in subdirectories:
-- `templates/base.yaml` → Referenced as `template: base`
-- `templates/blog/post.yaml` → Referenced as `template: blog/post`
+# Attributes
+- 'a href="/about"': About Us
+- 'img src="/logo.png" alt="Logo"':
 
-### Partials
+# Variables
+- h1: ${title}
+- p: ${site.description}
 
-Partials are reusable components that can be included in pages and templates using `$partial`:
+# Conditionals
+- $if showBanner:
+    - div.banner: Hello!
 
-**partials/header.yaml**
-```yaml
-- tag: header
-  children:
-    - tag: nav
-      children:
-        - tag: a
-          href: /
-          children: Home
-        - tag: a
-          href: /about
-          children: About
-```
+# Loops
+- $for item in items:
+    - li: ${item.name}
 
-**Using in a page:**
-```yaml
+# Partials
 - $partial: header
-- heading: Welcome
+- $partial: card
+  title: My Card
+  description: Card content
 ```
 
-### Data Files
+## Data Files
 
-Global data files in the `data/` directory are automatically loaded and available in all pages and templates.
+`data/site.yaml` → available as `${site.name}`, `${site.nav}`, etc.
 
-**data/site.yaml**
-```yaml
-name: My Awesome Site
-author: John Doe
-social:
-  twitter: johndoe
-  github: johndoe
-```
+## Collections
 
-**Access in templates:**
-```yaml
-- tag: footer
-  children: 
-    - text: "© 2024 "
-    - text: $site.author
-```
-
-### Collections
-
-Collections group related content using tags. Any page with a `tags` field in its frontmatter becomes part of a collection.
-
-**pages/blog/post-1.md**
-```markdown
----
-title: My First Post
-tags: blog
-date: 2024-01-15
----
-# Hello World
-This is my first blog post.
-```
+Tag pages to create collections:
 
-**pages/blog-index.yaml**
 ```yaml
+# pages/blog/post.md
 ---
-title: Blog
+tags: [blog]
 ---
-- heading: Recent Posts
-- ul:
-    - $for post in collections.blog:
-        li:
-          - 'a href="${post.url}"':
-              - ${post.data.title}
 ```
 
-### Page Variables
-
-Every page has access to a `page.url` variable that contains the page's URL path. All frontmatter variables (like `title`) are available directly:
-
-**pages/about.yaml**
-```yaml
----
-title: About Us
----
-- paragraph: Current page URL is ${page.url}
-```
-
-**templates/base.yaml**
 ```yaml
-- tag: head
-  children:
-    - tag: title
-      children: ${title}
-    - tag: link
-      rel: canonical
-      href: ${page.url}
+# pages/blog.yaml
+- $for post in collections.blog:
+    - a href="${post.url}": ${post.data.title}
 ```
 
-The `page.url` variable contains the page's URL path without the `.html` extension, with trailing slashes:
-- `/index.html` → `page.url` = `/`
-- `/about.html` → `page.url` = `/about/`
-- `/docs/guide.html` → `page.url` = `/docs/guide/`
-
-This variable is available in both pages and templates, making it useful for navigation, breadcrumbs, and canonical URLs.
-
-### Static Files
-
-Everything in the `static/` directory is copied directly to the output:
-- `static/css/style.css` → `_site/css/style.css`
-- `static/images/logo.png` → `_site/images/logo.png`
-- `static/app.js` → `_site/app.js`
-
-## Advanced Features
-
-### Nested Pages
-
-Create subdirectories in `pages/` to organize your content:
-- `pages/index.yaml` → `_site/index.html`
-- `pages/about.yaml` → `_site/about.html`
-- `pages/blog/post-1.md` → `_site/blog/post-1.html`
-- `pages/docs/api/reference.yaml` → `_site/docs/api/reference.html`
-
-### Markdown Support
-
-Markdown files can use frontmatter and templates:
-
-```markdown
----
-title: My Blog Post
-template: blog/post
-tags: [blog, tutorial]
-author: Jane Doe
----
-# Introduction
-
-This is a **markdown** post with *formatting*.
-
-## Code Example
-
-\`\`\`javascript
-console.log('Hello, World!');
-\`\`\`
-```
-
-### Custom Markdown Renderer
-
-Configure a custom markdown renderer in `sites.config.js`:
+## Configuration
 
+`sites.config.js`:
 ```javascript
-import MarkdownIt from 'markdown-it';
-import hljs from 'highlight.js';
-
-const md = MarkdownIt({
-  highlight: function (str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      return hljs.highlight(str, { language: lang }).value;
-    }
-    return '';
-  }
-});
-
 export default {
-  mdRender: md
+  mdRender: customMarkdownRenderer,
+  functions: {
+    sortDate: (list) => list.sort((a, b) =>
+      new Date(b.data.date) - new Date(a.data.date)
+    )
+  }
 }
 ```
 
-### Dynamic Content with Jempl
-
-Rettangoli Sites uses [Jempl](https://github.com/yuusoft-org/jempl) for templating, which provides powerful features for dynamic content including variable replacement, conditionals, loops, and partials.
+## Scripts
 
-For detailed syntax and usage examples, please refer to the [Jempl documentation](https://github.com/yuusoft-org/jempl).
+```bash
+bun run build       # Build site to _site/
+bun run watch       # Build + watch for changes
+bun run serve       # Serve _site/
+bun run screenshot  # Generate page screenshots
+```
 
+## Templates
 
-## Example Projects
+Starter templates in `templates/`:
 
-### Blog Site Structure
-```
-blog-site/
-├── pages/
-│   ├── index.yaml          # Homepage
-│   ├── about.md            # About page
-│   └── blog/
-│       ├── index.yaml      # Blog listing
-│       ├── 2024-01-15-first-post.md
-│       └── 2024-01-20-second-post.md
-├── templates/
-│   ├── base.yaml           # Main layout
-│   └── blog/
-│       ├── post.yaml       # Blog post template
-│       └── listing.yaml    # Blog list template
-├── partials/
-│   ├── header.yaml
-│   ├── footer.yaml
-│   └── post-card.yaml
-├── data/
-│   └── site.yaml           # Site metadata
-└── static/
-    ├── css/
-    │   └── style.css
-    └── images/
-        └── logo.png
-```
-
-### Documentation Site Structure
-```
-docs-site/
-├── pages/
-│   ├── index.yaml
-│   └── docs/
-│       ├── getting-started.md
-│       ├── api/
-│       │   ├── overview.md
-│       │   └── reference.yaml
-│       └── guides/
-│           ├── installation.md
-│           └── configuration.md
-├── templates/
-│   ├── base.yaml
-│   └── docs.yaml
-├── partials/
-│   ├── nav.yaml
-│   └── sidebar.yaml
-└── static/
-    └── css/
-        └── docs.css
-```
+- **default** - Basic site with homepage, blog, and about page

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/sites",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Generate static sites using Markdown and YAML. Straightforward, zero-complexity. Complete toolkit for landing pages, blogs, documentation, admin dashboards, and more.git remote add origin git@github.com:yuusoft-org/sitic.git",
   "author": {
     "name": "Luciano Hanyon Wu",

package/src/cli/index.js

@@ -1,9 +1,11 @@
 import { buildSite } from './build.js';
 import watchSite from './watch.js';
 import screenshotCommand from '../screenshotRunner.js';
+import { initSite } from './init.js';
 
 export {
   buildSite,
   watchSite,
   screenshotCommand,
+  initSite,
 }

package/src/cli/init.js

@@ -0,0 +1,38 @@
+import { existsSync, mkdirSync, cpSync, readdirSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export function initSite({ projectName, template = 'default' }) {
+  const templatesDir = resolve(__dirname, '../../templates');
+  const templatePath = resolve(templatesDir, template);
+  const targetPath = resolve(process.cwd(), projectName);
+
+  // Check if template exists
+  if (!existsSync(templatePath)) {
+    const available = readdirSync(templatesDir).filter(f =>
+      existsSync(resolve(templatesDir, f, 'package.json'))
+    );
+    console.error(`Template "${template}" not found.`);
+    console.error(`Available templates: ${available.join(', ')}`);
+    process.exit(1);
+  }
+
+  // Check if target directory already exists
+  if (existsSync(targetPath)) {
+    console.error(`Directory "${projectName}" already exists.`);
+    process.exit(1);
+  }
+
+  // Create target directory and copy template
+  mkdirSync(targetPath, { recursive: true });
+  cpSync(templatePath, targetPath, { recursive: true });
+
+  console.log(`Created "${projectName}" from template "${template}"`);
+  console.log('');
+  console.log('Next steps:');
+  console.log(`  cd ${projectName}`);
+  console.log('  bun install');
+  console.log('  bun run build');
+}

package/src/utils/loadSiteConfig.js

@@ -32,7 +32,7 @@ export async function loadSiteConfig(rootDir, throwOnError = true, bustCache = f
     return configExport || {};
   } catch (e) {
     // Only ignore file not found errors
-    if (e.code === 'ENOENT') {
+    if (e.code === 'ENOENT' || e.code === 'ERR_MODULE_NOT_FOUND') {
       // Config file is optional, return empty config
       return {};
     } else if (throwOnError) {

package/templates/default/README.md

@@ -0,0 +1,212 @@
+# My Site
+
+A static site built with [Rettangoli Sites](https://github.com/yuusoft-org/rettangoli) using the [rtgl UI](https://github.com/yuusoft-org/rettangoli/tree/main/packages/rettangoli-ui) framework.
+
+## Getting Started
+
+```bash
+bun install
+bun run build
+bun run serve
+```
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `bun run build` | Build site to `_site/` |
+| `bun run watch` | Build and watch for changes |
+| `bun run serve` | Serve `_site/` locally |
+| `bun run screenshot` | Build and capture screenshots |
+
+## Project Structure
+
+```
+├── pages/           # Content (YAML and Markdown files)
+├── templates/       # Page layouts
+├── partials/        # Reusable components
+├── data/            # Global data files
+├── static/          # Static assets (copied as-is)
+├── sites.config.js  # Configuration and custom functions
+└── _site/           # Generated output
+```
+
+## Pages
+
+Pages can be **YAML** or **Markdown** files in `pages/`.
+
+**YAML page:**
+```yaml
+---
+template: base
+title: Home
+---
+- rtgl-text s="h1": Welcome
+- rtgl-text: Hello world
+```
+
+**Markdown page:**
+```markdown
+---
+template: base
+title: About
+---
+# About Us
+
+Content in **markdown**.
+```
+
+### Frontmatter
+
+| Field | Description |
+|-------|-------------|
+| `template` | Template to use (e.g., `base`, `post`) |
+| `title` | Page title |
+| `tags` | Array of tags for collections (e.g., `[blog]`) |
+
+### URL Mapping
+
+- `pages/index.yaml` → `/`
+- `pages/about.md` → `/about/`
+- `pages/blog/post.md` → `/blog/post/`
+
+## rtgl UI Components
+
+```yaml
+# Layout with rtgl-view
+- rtgl-view d="h" g="lg" av="c":    # horizontal, gap, align vertical center
+    - rtgl-view flex="1":            # flex grow
+    - rtgl-view w="200" h="100":     # fixed width/height
+
+# Text with rtgl-text
+- rtgl-text s="h1": Heading 1
+- rtgl-text s="lg" c="mu-fg": Large muted text
+- rtgl-text fw="bold" ta="c": Bold centered
+
+# Buttons
+- rtgl-button: Click me
+- rtgl-button v="se": Secondary
+
+# Links with hover states
+- 'a href="/about" style="text-decoration: none"':
+    - rtgl-text h-c="pr" h-cur="p": Hover link
+```
+
+### Common Attributes
+
+| Attr | Description | Values |
+|------|-------------|--------|
+| `w` | Width | `f` (full), number, `100vw` |
+| `h` | Height | number, `100vh` |
+| `d` | Direction | `h` (horizontal), `v` (vertical) |
+| `g` | Gap | `xs`, `sm`, `md`, `lg`, `xl` |
+| `p` | Padding | `xs`, `sm`, `md`, `lg`, `xl` |
+| `m` | Margin | `xs`, `sm`, `md`, `lg`, `xl` |
+| `av` | Align vertical | `s` (start), `c` (center), `e` (end) |
+| `ah` | Align horizontal | `s`, `c`, `e` |
+| `bgc` | Background color | `bg`, `su`, `mu`, `pr` |
+| `c` | Text color | `fg`, `mu-fg`, `pr` |
+| `s` | Text size | `h1`, `h2`, `h3`, `h4`, `lg`, `md`, `sm` |
+| `br` | Border radius | `xs`, `sm`, `md`, `lg`, `xl` |
+| `flex` | Flex grow | `1`, `2`, etc. |
+
+### Responsive Prefixes
+
+```yaml
+- rtgl-view md-w="100vw" lg-w="768" w="1024":
+```
+
+| Prefix | Breakpoint |
+|--------|------------|
+| `md-` | Mobile (< 768px) |
+| `lg-` | Tablet (< 1024px) |
+| (none) | Desktop |
+
+### Hover States
+
+Prefix with `h-` for hover:
+```yaml
+- rtgl-text h-c="pr" h-cur="p": Hover to highlight
+- rtgl-view h-bgc="suv": Hover background
+```
+
+## Syntax
+
+```yaml
+# Variables
+- rtgl-text: ${title}
+- rtgl-text: ${site.name}
+
+# Conditionals
+- $if showBanner:
+    - rtgl-view bgc="pr" p="lg":
+        - rtgl-text: Hello!
+
+# Loops
+- $for item in items:
+    - rtgl-text: ${item.name}
+
+# Partials
+- $partial: header
+- $partial: card
+  title: My Card
+```
+
+## Data Files
+
+Files in `data/` are available globally. Filename becomes the variable name.
+
+`data/site.yaml` → `${site.name}`, `${site.nav}`, etc.
+
+## Collections
+
+Tag pages to create collections:
+
+```yaml
+# pages/blog/post.md
+---
+tags: [blog]
+date: '2024-01-15'
+---
+```
+
+```yaml
+# List posts
+- rtgl-view g="md":
+    - $for post in collections.blog:
+        - 'a href="${post.url}" style="text-decoration: none"':
+            - rtgl-view p="lg" bgc="su" br="lg" h-bgc="suv" h-cur="p":
+                - rtgl-text s="lg": ${post.data.title}
+                - rtgl-text s="sm" c="mu-fg": ${post.data.date}
+```
+
+Collection item properties:
+- `item.url` - Page URL
+- `item.data` - Frontmatter (title, date, etc.)
+- `item.content` - Raw content
+
+## Configuration
+
+`sites.config.js` for custom functions:
+
+```javascript
+export default {
+  functions: {
+    sortDate: (list) => [...list].sort((a, b) =>
+      new Date(b.data.date) - new Date(a.data.date)
+    ),
+  },
+}
+```
+
+Use in templates:
+```yaml
+- $for post in sortDate(collections.blog):
+```
+
+## Static Files
+
+Everything in `static/` is copied to `_site/`:
+
+- `static/css/theme.css` → `_site/css/theme.css`
+- `static/images/logo.png` → `_site/images/logo.png`

package/templates/default/data/site.yaml

@@ -0,0 +1,25 @@
+name: My Site
+
+nav:
+  - text: Home
+    href: /
+  - text: Blog
+    href: /blog/
+  - text: About
+    href: /about/
+
+footer:
+  links:
+    - text: Privacy
+      href: /privacy/
+    - text: Terms
+      href: /terms/
+
+landing:
+  features:
+    - title: Simple
+      description: Write content in YAML and Markdown
+    - title: Fast
+      description: Static site generation for optimal performance
+    - title: Flexible
+      description: Templates, partials, and collections

package/templates/default/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "my-site",
+  "type": "module",
+  "scripts": {
+    "build": "rtgl sites build",
+    "watch": "rtgl sites watch",
+    "serve": "serve _site",
+    "screenshot": "rtgl sites build -s"
+  },
+  "devDependencies": {
+    "rtgl": "0.0.37",
+    "serve": "latest"
+  }
+}

package/templates/default/pages/about.md

@@ -0,0 +1,16 @@
+---
+template: base
+title: About
+---
+
+# About Us
+
+This is a sample page written in **Markdown**.
+
+## Our Mission
+
+We build great things with simple tools.
+
+## Contact
+
+Feel free to reach out!

package/templates/default/pages/blog/hello-world.md

@@ -0,0 +1,14 @@
+---
+template: post
+title: Hello World
+tags: [blog]
+date: '2024-01-15'
+---
+
+# Hello World
+
+This is my first blog post.
+
+## What's Next
+
+Stay tuned for more updates!

package/templates/default/pages/blog.yaml

@@ -0,0 +1,14 @@
+---
+template: base
+title: Blog
+---
+- rtgl-text s="h1" mb="xl": Blog
+
+- rtgl-view g="md" w="f":
+    - $for post in collections.blog:
+        - 'a href="${post.url}" style="text-decoration: none"':
+            - rtgl-view w="f" p="lg" bgc="su" br="lg" h-bgc="suv" h-cur="p":
+                - rtgl-view d="h" av="c" w="f":
+                    - rtgl-text s="lg": ${post.data.title}
+                    - rtgl-view flex="1":
+                    - rtgl-text s="sm" c="mu-fg": ${post.data.date}

package/templates/default/pages/index.yaml

@@ -0,0 +1,21 @@
+---
+template: base
+title: My Site
+---
+- rtgl-view ah="c" pv="xl":
+    - rtgl-text s="h1" ta="c": Welcome to My Site
+    - rtgl-view h="lg":
+    - rtgl-text s="lg" c="mu-fg" ta="c": Built with Rettangoli Sites
+    - rtgl-view h="xl":
+    - 'a href="/about/" style="text-decoration: none"':
+        - rtgl-button: Learn More
+
+- rtgl-view h="100":
+
+- rtgl-view w="f":
+    - rtgl-text s="h2" mb="lg": Features
+    - rtgl-view d="h" g="lg" w="f" md-d="v":
+        - $for feature in site.landing.features:
+            - rtgl-view flex="1" p="lg" bgc="su" br="lg":
+                - rtgl-text s="h4" mb="sm": ${feature.title}
+                - rtgl-text c="mu-fg": ${feature.description}

package/templates/default/partials/footer.yaml

@@ -0,0 +1,9 @@
+- rtgl-view h="1" w="f" bgc="bo":
+- rtgl-view md-w="100vw" lg-w="768" w="1024" ph="lg" pv="xl":
+    - rtgl-view d="h" w="f" av="c":
+        - rtgl-text s="sm" c="mu-fg": © 2024 ${site.name}
+        - rtgl-view flex="1":
+        - rtgl-view d="h" g="lg":
+            - $for link in site.footer.links:
+                - 'a href="${link.href}" style="text-decoration: none"':
+                    - rtgl-text s="sm" c="mu-fg" h-c="fg" h-cur="p": ${link.text}

package/templates/default/partials/header.yaml

@@ -0,0 +1,9 @@
+- rtgl-view bwb="xs" w="f" ah="c" pos="fix" bgc="bg":
+    - rtgl-view md-w="100vw" lg-w="768" w="1024" d="h" av="c" h="64" ph="lg":
+        - 'a href="/" style="text-decoration: none"':
+            - rtgl-text s="lg" fw="bold": ${site.name}
+        - rtgl-view flex="1":
+        - rtgl-view d="h" g="lg" av="c":
+            - $for link in site.nav:
+                - 'a href="${link.href}" style="text-decoration: none"':
+                    - rtgl-text c="mu-fg" h-c="fg" h-cur="p": ${link.text}

package/templates/default/sites.config.js

@@ -0,0 +1,9 @@
+export default {
+  // Custom template functions
+  functions: {
+    // Sort by date descending
+    sortDate: (list) => [...list].sort((a, b) =>
+      new Date(b.data.date) - new Date(a.data.date)
+    ),
+  },
+}

package/templates/default/static/css/theme.css

@@ -0,0 +1,224 @@
+html {
+  margin: 0;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  width: 100%;
+}
+
+html::-webkit-scrollbar {
+  display: none;
+}
+
+body::-webkit-scrollbar {
+  display: none;
+}
+
+* {
+  scrollbar-color: var(--input) transparent;
+}
+
+body {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background);
+  color: var(--foreground);
+  overscroll-behavior: none;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  text-decoration-color: var(--muted-foreground);
+}
+
+a:hover {
+  text-decoration-color: var(--foreground);
+}
+
+::selection {
+  background-color: var(--accent);
+}
+
+:root {
+  --width-stretch: 100%;
+
+  --spacing-xs: 2px;
+  --spacing-sm: 4px;
+  --spacing-md: 8px;
+  --spacing-lg: 16px;
+  --spacing-xl: 32px;
+
+  --border-radius-xs: 1px;
+  --border-radius-sm: 2px;
+  --border-radius-md: 4px;
+  --border-radius-lg: 8px;
+  --border-radius-xl: 16px;
+  --border-radius-f: 50%;
+
+  --border-width-xs: 1px;
+  --border-width-sm: 2px;
+  --border-width-md: 4px;
+  --border-width-lg: 8px;
+  --border-width-xl: 16px;
+
+  --shadow-sm: 0px 2px 6px rgba(0, 0, 0, .45);
+  --shadow-md: 0px 5px 12px rgba(0, 0, 0, .45);
+  --shadow-lg: 0px 10px 24px rgba(0, 0, 0, .45);
+
+  --h1-font-size: 3rem;
+  --h1-font-weight: 600;
+  --h1-line-height: 1;
+  --h1-letter-spacing: -.025em;
+
+  --h2-font-size: 1.875rem;
+  --h2-font-weight: 500;
+  --h2-line-height: 2.25rem;
+  --h2-letter-spacing: -.025em;
+
+  --h3-font-size: 1.5rem;
+  --h3-font-weight: 600;
+  --h3-line-height: 2rem;
+  --h3-letter-spacing: -.025em;
+
+  --h4-font-size: 1.25rem;
+  --h4-font-weight: 600;
+  --h4-line-height: 1.75rem;
+  --h4-letter-spacing: -.025em;
+
+  --lg-font-size: 1.125rem;
+  --lg-font-weight: 400;
+  --lg-line-height: 1.75rem;
+  --lg-letter-spacing: normal;
+
+  --md-font-size: 1rem;
+  --md-font-weight: normal;
+  --md-line-height: 1.625rem;
+  --md-letter-spacing: normal;
+
+  --sm-font-size: .875rem;
+  --sm-font-weight: 400;
+  --sm-line-height: 1.25;
+  --sm-letter-spacing: normal;
+
+  --xs-font-size: .75rem;
+  --xs-font-weight: normal;
+  --xs-line-height: 1;
+  --xs-letter-spacing: normal;
+
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.95 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.305 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+h1 {
+  font-size: var(--h1-font-size);
+  font-weight: var(--h1-font-weight);
+  line-height: var(--h1-line-height);
+  letter-spacing: var(--h1-letter-spacing);
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+
+h2 {
+  font-size: var(--h2-font-size);
+  font-weight: var(--h2-font-weight);
+  line-height: var(--h2-line-height);
+  letter-spacing: var(--h2-letter-spacing);
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+
+h3 {
+  font-size: var(--h3-font-size);
+  font-weight: var(--h3-font-weight);
+  line-height: var(--h3-line-height);
+  letter-spacing: var(--h3-letter-spacing);
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+
+h4 {
+  font-size: var(--h4-font-size);
+  font-weight: var(--h4-font-weight);
+  line-height: var(--h4-line-height);
+  letter-spacing: var(--h4-letter-spacing);
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+
+p {
+  font-size: var(--md-font-size);
+  font-weight: var(--md-font-weight);
+  line-height: var(--md-line-height);
+  letter-spacing: var(--md-letter-spacing);
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+ul {
+  margin-top: 0;
+  margin-bottom: 16px;
+  margin-left: 4px;
+  padding-left: 16px;
+}
+
+li {
+  margin-bottom: 8px;
+  font-size: var(--md-font-size);
+  font-weight: var(--md-font-weight);
+  line-height: var(--md-line-height);
+  letter-spacing: var(--md-letter-spacing);
+}
+
+blockquote {
+  margin-top: 0;
+  margin-bottom: 16px;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 16px;
+  border-left: 2px solid var(--foreground);
+}
+
+blockquote > p {
+  margin-bottom: 0px;
+}
+
+h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
+  scroll-margin-top: 80px;
+}

package/templates/default/templates/base.yaml

@@ -0,0 +1,18 @@
+- html lang="en":
+    - head:
+        - meta charset="utf-8":
+        - meta name="viewport" content="width=device-width,initial-scale=1":
+        - title: ${title} - ${site.name}
+        - link rel="stylesheet" href="/css/theme.css":
+        - script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js":
+        - script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@0.1.31/dist/rettangoli-iife-ui.min.js":
+    - body.dark:
+        - rtgl-view w="f":
+            - rtgl-view h="64":
+            - rtgl-view w="f" ah="c":
+                - rtgl-view w="f" ph="lg" pb="lg" ah="c" md-w="100vw" lg-w="768" w="1024":
+                    - "${content}"
+                - rtgl-view h="30vh":
+                - $partial: footer
+            - rtgl-view pos="abs" cor="top" ah="c" bgc="bg":
+                - $partial: header

package/templates/default/templates/post.yaml

@@ -0,0 +1,24 @@
+- html lang="en":
+    - head:
+        - meta charset="utf-8":
+        - meta name="viewport" content="width=device-width,initial-scale=1":
+        - title: ${title} - ${site.name}
+        - link rel="stylesheet" href="/css/theme.css":
+        - script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js":
+        - script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@0.1.31/dist/rettangoli-iife-ui.min.js":
+    - body.dark:
+        - rtgl-view h="64":
+        - rtgl-view w="f" ah="c":
+            - rtgl-view d="h" g="xl" pb="lg" md-w="100vw" lg-w="768" w="1024" ph="lg":
+                - rtgl-view id="content-container" lg-w="100%" w="624":
+                    - rtgl-text s="sm" c="mu-fg" mb="md": ${date}
+                    - "${content}"
+                    - rtgl-view h="xl":
+                    - 'a href="/blog/" style="text-decoration: none"':
+                        - rtgl-text c="pr" h-cur="p": ← Back to Blog
+                - 'rtgl-view lg-hide flex="1" style="position: sticky; top: 64px;"':
+                    - rtgl-page-outline id="page-outline" target-id="content-container":
+            - rtgl-view h="30vh":
+            - $partial: footer
+        - rtgl-view pos="abs" cor="top" ah="c" bgc="bg":
+            - $partial: header