@micropage-sh/cli 2.0.0

package/templates/PROJECT_AGENT.template.md

@@ -0,0 +1,31 @@
+# Project agent guide (Micropage CLI)
+
+This project was created with the Micropage CLI and is designed to be friendly to local AI agents and automation.
+
+## Key files and layout
+
+- `landing.page` — primary page file. Treat this as the canonical entrypoint for the site.
+- `*.page` — additional page files. They are merged in alphabetical order after `landing.page` when pushing.
+- `examples/` — curated examples showing different layouts and components:
+  - `startup-landing.page` — SaaS / product launch landing page with hero, feature grid, pricing, contact form, and an `img: <- product-dashboard` keyword image.
+  - `portfolio.page` — minimal portfolio layout for designers/developers; good reference for text-heavy sections and project lists.
+  - `mobile-app-landing.page` — mobile app landing template (PocketTrack) with app-style hero, feature bullets, and platform download buttons.
+  - `components-hero-variants.page` — multiple hero section variants (single CTA, image + copy, centered hero).
+  - `components-pricing-and-forms.page` — pricing table (three tiers) and a richer contact/quote form, including an `img: <- pricing-cards` example.
+- `assets/logo.svg` and `assets/favicon.svg` — default logo and favicon for new projects (uploaded on push). `.page` files reference the stored filename: `logo: <- logo.svg` / `favicon: <- favicon.svg`.
+
+## How to propose edits safely
+
+- Prefer editing existing `.page` files instead of introducing new formats.
+- Keep the Micropage DSL valid — follow the patterns used in the `examples/` folder.
+- When creating alternative versions of a section, consider:
+  - Copying the original block into `examples/` and annotating it there.
+  - Proposing a diff-style change rather than rewriting entire files.
+
+## Reference documentation
+
+For full documentation of the Micropage format and features, see:
+
+- `https://docs.micropage.sh`
+
+You can use the examples in this project as concrete references when generating or modifying `.page` content.*** End Patch***}"/>

package/templates/assets/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-labelledby="title desc">
+  <title>Micropage favicon</title>
+  <desc>Minimal stacked bar favicon for starter projects</desc>
+  <rect x="4" y="7" width="24" height="4" rx="2" fill="#4f46e5"/>
+  <rect x="6" y="14" width="20" height="4" rx="2" fill="#0ea5e9"/>
+  <rect x="8" y="21" width="16" height="4" rx="2" fill="#22c55e"/>
+</svg>
+

package/templates/assets/logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
+  <title>Micropage starter logo</title>
+  <desc>Abstract stacked rectangles suggesting pages</desc>
+  <defs>
+    <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#4f46e5"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+  </defs>
+  <rect x="10" y="14" width="44" height="12" rx="3" fill="url(#g)"/>
+  <rect x="14" y="28" width="36" height="10" rx="3" fill="#111827" opacity="0.9"/>
+  <rect x="18" y="40" width="28" height="8" rx="3" fill="#111827" opacity="0.7"/>
+</svg>
+

package/templates/examples/components-colors.page

@@ -0,0 +1,84 @@
+[site]
+title: Color System Examples
+description: Reference for bg:, align:, and text: section modifiers
+colors:
+  primary: #5c6fff
+
+[site.dark]
+colors:
+  primary: #8ba2ff
+
+[nav]
+Home -> /
+
+[Home -> /]
+
+/// hero bg:primary
+h1: Colored hero section
+p: This hero uses the primary brand color as background. Text contrast is auto-computed from luminance.
+button: Get started -> /signup
+
+/// section bg:primary-subtle
+h2: Primary subtle background
+p: A 12% tint of the primary color — good for alternating sections without full saturation.
+
+/// section
+h2: Default section (top-aligned columns)
+p: No bg modifier. Columns align to the top by default — better for unequal-height cards and pricing grids.
+
+col:
+  h3: Card A
+  p: Short content.
+
+col:
+  h3: Card B
+  p: Longer content that stays aligned at the top instead of centering, giving a cleaner grid layout.
+
+col:
+  h3: Card C
+  p: A third card to demonstrate top alignment across the row.
+
+/// section bg:dark text:light
+h2: Dark background
+p: Use text:light when you need an explicit contrast override, such as for dark or custom-colored backgrounds.
+
+/// section bg:muted
+h2: Muted background
+p: Uses Bootstrap's secondary background variable — a subtle surface tint that respects both light and dark themes.
+
+/// section bg:success
+h2: Bootstrap semantic — success
+p: Bootstrap semantic tokens (success, warning, info, danger, dark, light) work without defining any brand colors.
+
+/// section bg:warning
+h2: Bootstrap semantic — warning
+p: Warning uses dark text automatically for readability.
+
+/// section bg:info
+h2: Bootstrap semantic — info
+
+/// section bg:danger
+h2: Bootstrap semantic — danger
+
+/// section align:center
+h2: Center-aligned columns
+p: Use align:center for image-and-text split layouts where vertical centering looks intentional.
+
+col:
+  img: <- workspace
+
+col:
+  h3: Paired with image
+  p: Vertically centred next to the image on large screens.
+
+/// section bg:primary align:center
+h2: Combined — primary background, center aligned
+p: Modifiers compose freely. Any bg: can be paired with align: or text:.
+
+col:
+  h3: Left column
+  p: Feature one.
+
+col:
+  h3: Right column
+  p: Feature two.

package/templates/examples/components-hero-variants.page

@@ -0,0 +1,28 @@
+[site]
+title: Hero Variants
+description: Component-only examples for hero sections
+logo: <- logo.svg
+favicon: <- favicon.svg
+
+[nav]
+Home -> /
+
+[Home -> /]
+
+/// hero
+h1: Simple hero with single CTA
+p: Great for minimal landing pages and focused campaigns.
+button: Get started -> /signup
+
+/// hero
+h1: Hero with supporting media
+p: Pair copy with an image or illustration on the side.
+img: workspace.jpg
+button: Learn more -> /tour
+button: View docs -> https://docs.micropage.sh
+
+/// hero
+h1: Centered hero with subtle subheading
+p: Use this pattern when you want to make a single message stand out.
+button: Join the beta -> /beta
+

package/templates/examples/components-pricing-and-forms.page

@@ -0,0 +1,45 @@
+[site]
+title: Components — Pricing & Forms
+description: Pricing tables and form patterns for reuse
+logo: <- logo.svg
+favicon: <- favicon.svg
+
+[nav]
+Home -> /
+
+[Home -> /]
+
+/// section
+h2: Pricing table (three tiers)
+
+col:
+  img: <- pricing-cards
+  h3: Starter
+  p: For small experiments and side projects.
+  p: 1 project, basic assets, 100 form submissions.
+  button: Choose starter -> /signup
+
+col:
+  h3: Growth
+  p: For active products and teams.
+  p: More projects, higher limits, email digests.
+  button: Choose growth -> /signup
+
+col:
+  h3: Scale
+  p: For agencies and high-traffic launches.
+  p: Priority queue, higher limits, dedicated support.
+  button: Talk to us -> /contact
+
+/// section
+h2: Contact form with extra fields
+
+form: contact
+input: Name*
+input: Email*
+input: Company
+select: Budget [< $1k, $1k–$5k, $5k–$20k, > $20k]
+checkboxes: Interested in [Design, Development, Copywriting]
+text: Project details
+submit: Request a quote
+

package/templates/examples/mobile-app-landing.page

@@ -0,0 +1,77 @@
+[site]
+title: PocketTrack
+description: Mobile app template for simple tracking and insights
+logo: <- logo.svg
+favicon: <- favicon.svg
+
+[nav]
+Home -> /
+Features -> /features
+Download -> /download
+
+[footer]
+/// section
+
+col:
+  p: PocketTrack — simple habit tracking for iOS and Android.
+
+col:
+  p: Questions or feedback? We’d love to hear from you.
+
+col:
+  link: Help center -> /support
+  link: Privacy -> /privacy
+
+
+[Home -> /]
+
+/// hero
+h1: Track the habits that matter
+p: PocketTrack is a simple mobile app that helps you log habits, see progress, and stay motivated.
+img: <- mobile-dashboard
+button: Download for iOS -> /download
+button: Download for Android -> /download
+
+/// section
+h2: Why PocketTrack
+
+col:
+  icon: bi bi-check-circle
+  h3: Lightweight
+  p: Add habits in seconds, check them off with a tap.
+
+col:
+  icon: bi bi-graph-up
+  h3: Clear progress
+  p: See streaks and trends on a simple timeline.
+
+col:
+  icon: bi bi-moon
+  h3: Dark mode ready
+  p: Looks great day or night.
+
+
+[Features -> /features]
+
+/// section
+h1: Built for everyday use
+
+col:
+  h3: Daily reminders
+  p: Stay on track with gentle nudges at the times you choose.
+
+col:
+  h3: Flexible categories
+  p: Group habits by health, work, relationships, or anything else you care about.
+
+
+[Download -> /download]
+
+/// section
+h1: Get the app
+p: PocketTrack is available for iOS and Android.
+
+col:
+  button: Download on the App Store -> https://example.com/app-store
+  button: Get it on Google Play -> https://example.com/google-play
+

package/templates/examples/portfolio.page

@@ -0,0 +1,75 @@
+[site]
+title: Studio Arc
+description: Minimal portfolio for designers and developers
+logo: <- logo.svg
+favicon: <- favicon.svg
+
+[nav]
+Work -> /
+About -> /about
+Contact -> /contact
+
+[footer]
+/// section
+
+col:
+  p: Studio Arc — independent design and development studio.
+
+col:
+  p: Based in Copenhagen. Available for remote projects worldwide.
+
+col:
+  link: Email -> mailto:hello@example.com
+  link: LinkedIn -> https://linkedin.com
+
+
+[Work -> /]
+
+/// hero
+h1: Selected work
+p: A curated set of projects, case studies, and experiments.
+
+/// section
+h2: Projects
+
+col:
+  h3: Aurora UI
+  p: Design system and component library for a SaaS dashboard.
+  p: Role — Product design, front-end implementation.
+
+col:
+  h3: Field Notes
+  p: Journal-style blog for long-form writing.
+  p: Role — Visual direction, typography, layout.
+
+col:
+  h3: Signal Studio
+  p: Landing page for a creative agency with strong typography.
+  p: Role — Branding, layout, content.
+
+
+[About -> /about]
+
+/// section align:center
+h1: About Studio Arc
+
+col:
+  p: Studio Arc is a small, opinionated practice focused on clear typography, simple layouts, and fast-loading pages.
+
+col:
+  p: This example shows a text-heavy layout that you can adapt for your own bio or company story.
+
+
+[Contact -> /contact]
+
+/// section
+h1: Get in touch
+p: Share a short brief and we’ll reply with availability.
+
+form: contact
+input: Name*
+input: Email*
+text: Project summary
+text: Budget and timeline
+submit: Send
+

package/templates/examples/startup-landing.page

@@ -0,0 +1,100 @@
+[site]
+title: Launchpad
+description: Opinionated starter for SaaS and product launches
+logo: <- logo.svg
+favicon: <- favicon.svg
+
+[nav]
+Home -> /
+Pricing -> /pricing
+Contact -> /contact
+
+[footer]
+/// section
+
+col:
+  p: © {year} Launchpad. All rights reserved.
+
+col:
+  link: Docs -> https://docs.micropage.sh
+  link: Status -> /status
+
+col:
+  link: Twitter -> https://twitter.com
+  link: GitHub -> https://github.com
+
+
+[Home -> /]
+
+/// hero
+h1: Ship a polished site in minutes
+p: Launchpad gives you a fast, opinionated starting point for SaaS landing pages.
+img: aspect:16x9 <- product-dashboard
+button: Get started -> /pricing
+button: View docs -> https://docs.micropage.sh
+
+/// section
+h5: WHY LAUNCHPAD
+
+col:
+  icon: bi bi-rocket
+  h3: Built for speed
+  p: Start from a working layout instead of a blank page.
+
+col:
+  icon: bi bi-layers
+  h3: Structured content
+  p: Use sections, columns, and components with predictable behavior.
+
+col:
+  icon: bi bi-stars
+  h3: AI-friendly
+  p: Optimized so AI agents can safely propose edits and variants.
+
+/// section
+h2: Features
+
+col:
+  h3: Simple syntax
+  p: Micropage uses a compact text format instead of HTML templates.
+
+col:
+  h3: Static output
+  p: Generate static pages that deploy anywhere.
+
+col:
+  h3: Forms built in
+  p: Capture leads and messages without wiring up a backend.
+
+
+[Pricing -> /pricing]
+
+/// section align:center
+h1: Simple pricing
+p: Start for free, upgrade only when your site grows.
+
+col:
+  h3: Free
+  p: For experiments and personal projects.
+  p: 1 project, basic assets, 100 form submissions.
+  button: Get started -> /contact
+
+col:
+  h3: Pro
+  p: For serious launches and small teams.
+  p: More projects, assets, and priority queue.
+  button: Talk to sales -> /contact
+
+
+[Contact -> /contact]
+
+/// section
+h1: Contact us
+p: Tell us about your project and we’ll follow up.
+
+form: contact
+input: Name*
+input: Email*
+text: What are you launching?
+submit: Send message
+