v0.2-first-miniapp

Component Library

The first living library of portable SiteFactory building blocks. Each component is plain HTML and CSS, designed to be readable by humans and easy for future agents to copy into new projects.

Core Module Pack: templates/core-module-pack/. Preview it at /template-previews/core-module-pack/; keep the template folder as the canonical reusable source pack.

This component library is the workspace for reviewing building blocks. The core module pack is the reusable source pack for copying modules into future projects.

First reusable template: templates/minimal-landing/. Preview it at /template-previews/minimal-landing/index.html; keep the root template as canonical source.

First functional mini-app template: templates/todo-list-app/. Preview it at /template-previews/todo-list-app/index.html; keep the template folder as canonical source.

First real project: projects/sthlm-electro/. Preview it at /project-previews/sthlm-electro/index.html; keep the project folder as canonical source.

First functional mini-app: projects/todo-list/. Preview it at /project-previews/todo-list/; keep the mini-app folder as canonical source.

Component names should follow NAMING.md. Use the same word for the same thing everywhere.

The registry at /docs/registry.html indexes reusable parts, projects, templates, miniapps and previews.

Section Header

Use when: a page or panel needs a clear title, optional label, and short context sentence.

Workspace

Project Overview

Current status, decisions, and next steps.

<header class="sf-section-header">
  <p class="sf-kicker">Workspace</p>
  <h3>Project Overview</h3>
  <p>Current status, decisions, and next steps.</p>
</header>

Status Card

Use when: a project, feature, or workflow step needs a visible state and short explanation.

In progress

Component library

First reusable mini-app workspace is being established.

<article class="sf-card sf-card-status">
  <div class="sf-status-row">
    <span class="sf-status-badge">In progress</span>
  </div>
  <h3>Component library</h3>
  <p>First reusable mini-app workspace is being established.</p>
</article>

Info Card

Use when: a compact block needs to explain one concept, decision, or reference.

Astro boundary

Astro provides development and preview. Mini-app markup stays portable.

<article class="sf-card">
  <h3>Astro boundary</h3>
  <p>Astro provides development and preview. Mini-app markup stays portable.</p>
</article>

Metric Card

Use when: one number or short value needs emphasis without creating a dashboard system.

10

First reusable building blocks

<article class="sf-card">
  <p class="sf-metric-value">10</p>
  <p class="sf-metric-label">First reusable building blocks</p>
</article>

Basic Panel

Use when: grouping related content in a calm bounded area improves scanning.

Next step

Use these pieces in one real page before extracting more patterns.

<section class="sf-panel">
  <h3>Next step</h3>
  <p>Use these pieces in one real page before extracting more patterns.</p>
</section>

Checklist Panel

Use when: a task, review, or release needs a short actionable checklist.

Build checklist

  • Inspect relevant files.
  • Keep markup portable.
  • Run the build.
<section class="sf-panel">
  <h3>Build checklist</h3>
  <ul class="sf-checklist">
    <li>Inspect relevant files.</li>
    <li>Keep markup portable.</li>
    <li>Run the build.</li>
  </ul>
</section>

Tag List

Use when: showing a small set of states, categories, tools, or constraints.

  • local-first
  • portable
  • plain HTML
<ul class="sf-tag-list" aria-label="Project tags">
  <li class="sf-tag">local-first</li>
  <li class="sf-tag">portable</li>
  <li class="sf-tag">plain HTML</li>
</ul>

Note Block

Use when: preserving an instruction, decision, or warning that future agents should notice.

<aside class="sf-note">
  <h3>Agent note</h3>
  <p>Do not convert this page into an Astro route unless there is a clear reason.</p>
</aside>

Button Row

Use when: a page needs two or three clear actions without adding navigation complexity.

Open dashboard Review checklist 
<div class="sf-button-row">
  <a class="sf-button sf-button-primary" href="./dashboard.html">Open dashboard</a>
  <a class="sf-button" href="./review.html">Review checklist</a>
</div>