@rettangoli/sites 1.0.0-rc10 → 1.0.0-rc12

package/README.md

@@ -140,7 +140,8 @@ Binding order:
 
 - Base template: `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/base.yaml`
 - Docs template: `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/docs.yaml`
-- Generic partials: `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/{seo,navbar,mobile-nav,docs-sidebar}.yaml`
+- Landing/blog templates: `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/{landing-features,blog-article-list,blog-article}.yaml`
+- Generic partials: `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/{seo,navbar,mobile-nav,docs-sidebar,top-navbar,footer}.yaml`
 - Legacy docs partial (compat, flat path): `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/docs-mobile-nav.yaml`
 
 See `sites/README.md` for full alias examples and required data contract.
@@ -189,12 +190,14 @@ Available in YAML templates/pages without extra setup:
 - `formatDate(value, format = "YYYYMMDDHHmmss", useUtc = true)`
 - `now(format = "YYYYMMDDHHmmss", useUtc = true)`
 - `sort(list, key, order = "asc")`
+- `chunk(list, size = 1, pad = false, fillValue = null)`
 - `md(content)`
 - `toQueryString(object)`
 
-`formatDate` tokens: `YYYY`, `MM`, `DD`, `HH`, `mm`, `ss`.
+`formatDate` tokens: `YYYY`, `MMM`, `MM`, `DD`, `D`, `HH`, `mm`, `ss`.
 `decodeURI`/`decodeURIComponent` return the original input when decoding fails.
 `sort` supports `order` as `asc` or `desc` (default: `asc`), accepts dot-path keys (for example `data.date`), and returns a new array.
+`chunk` splits arrays into rows of `size`; with `pad = true`, the last row is padded with `fillValue`.
 `md` returns raw rendered HTML from Markdown for template insertion.
 
 ## Screenshots
@@ -207,6 +210,16 @@ Use VT against your generated site:
 2. Add `vt` config in `rettangoli.config.yaml`.
 3. Run `rtgl vt generate`, `rtgl vt report`, and `rtgl vt accept`.
 
+Docker runtime (recommended for stable Playwright/browser versions):
+
+```bash
+IMAGE="han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27"
+docker pull "$IMAGE"
+docker run --rm -v "$PWD:/workspace" -w /workspace "$IMAGE" rtgl vt screenshot
+docker run --rm -v "$PWD:/workspace" -w /workspace "$IMAGE" rtgl vt report
+docker run --rm -v "$PWD:/workspace" -w /workspace "$IMAGE" rtgl vt accept
+```
+
 Example:
 
 ```yaml

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/sites",
-  "version": "1.0.0-rc10",
+  "version": "1.0.0-rc12",
   "description": "Generate static sites using Markdown and YAML for docs, blogs, and marketing sites.",
   "author": {
     "name": "Luciano Hanyon Wu",
@@ -32,7 +32,8 @@
     "vitest": "^4.0.15"
   },
   "scripts": {
-    "test": "vitest run --reporter=verbose"
+    "test": "vitest run --reporter=verbose",
+    "watch:theme-lab": "bunx rtgl sites watch --root-dir ./vt/theme-lab/site --output-path _site --reload-mode full"
   },
   "type": "module",
   "license": "MIT",

package/sites/README.md

@@ -9,6 +9,12 @@ These files are distribution assets, not `@rettangoli/sites` runtime source code
   - `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/base.yaml`
 - Docs layout template:
   - `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/docs.yaml`
+- Landing page with features template:
+  - `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/landing-features.yaml`
+- Blog article list template:
+  - `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/blog-article-list.yaml`
+- Blog article template:
+  - `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/blog-article.yaml`
 
 ## Published Partials
 
@@ -17,6 +23,31 @@ These files are distribution assets, not `@rettangoli/sites` runtime source code
 - `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/mobile-nav.yaml`
 - `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/docs-sidebar.yaml`
 - `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/docs-mobile-nav.yaml` (legacy compat partial, flat path)
+- `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/top-navbar.yaml`
+- `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/landing-hero.yaml`
+- `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/landing-features-section.yaml`
+- `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/landing-cta.yaml`
+- `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/footer.yaml`
+
+## Published Theme Bundle
+
+- `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/themes/theme-rtgl-themes.css`
+
+Apply one class to `body` or `html`, for example:
+- `slate-light`, `slate-dark`
+- `mono-light`, `mono-dark`
+- `catppuccin-latte`, `catppuccin-frappe`, `catppuccin-macchiato`, `catppuccin-mocha`
+- `github-light`, `github-dark`, `nord-light`, `nord-dark`
+
+## Published Theme Bundle
+
+- `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/themes/theme-rtgl-themes.css`
+
+Apply one class to `body` or `html`, for example:
+- `slate-light`, `slate-dark`
+- `mono-light`, `mono-dark`
+- `catppuccin-latte`, `catppuccin-frappe`, `catppuccin-macchiato`, `catppuccin-mocha`
+- `github-light`, `github-dark`, `nord-light`, `nord-dark`
 
 ## Recommended Alias Map
 
@@ -25,13 +56,36 @@ imports:
   templates:
     base: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/base.yaml
     docs: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/docs.yaml
+    landing-features: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/landing-features.yaml
+    blog-article-list: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/blog-article-list.yaml
+    blog-article: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/templates/blog-article.yaml
   partials:
     seo: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/seo.yaml
     navbar: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/navbar.yaml
     mobile-nav: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/mobile-nav.yaml
     docs-sidebar: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/docs-sidebar.yaml
+    top-navbar: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/top-navbar.yaml
+    landing-hero: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/landing-hero.yaml
+    landing-features-section: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/landing-features-section.yaml
+    landing-cta: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/landing-cta.yaml
+    footer: https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/partials/footer.yaml
 ```
 
+## JSON Schemas For Template/Partial Data
+
+Canonical schema file in this repo:
+
+- `sites/schemas/data-contract.schema.yaml`
+
+Published URL format:
+
+- `https://cdn.jsdelivr.net/npm/@rettangoli/sites@<version>/sites/schemas/data-contract.schema.yaml`
+
+Use `$defs` for individual contracts:
+
+- Templates: `template.base`, `template.docs`, `template.landingFeatures`, `template.blogArticleList`, `template.blogArticle`
+- Partials: `partial.seo`, `partial.navbar`, `partial.mobileNav`, `partial.docsSidebar`, `partial.docsMobileNav`, `partial.topNavbar`, `partial.landingHero`, `partial.landingFeaturesSection`, `partial.landingCta`, `partial.footer`
+
 ## Frontmatter Examples
 
 Docs page:
@@ -55,6 +109,17 @@ title: Home
 ---
 ```
 
+Landing page:
+
+```yaml
+---
+template: landing-features
+title: Product Landing
+_bind:
+  seo: seo
+---
+```
+
 ## Docs Template Data Contract
 
 The `docs` template expects:
@@ -65,3 +130,22 @@ The `docs` template expects:
 - `title`
 
 Use `_bind.docs` to map `docs` from a global data file (for example `data/docs.yaml`).
+
+## Shared Data Contract
+
+Templates and partials that include a top bar/footer expect:
+
+- `site.navbar.brand` with `label` and `href`
+- `site.navbar.items[]` with `label`, `href`, optional `target`
+- `site.navbar.ctas[]` with `label`, `href`, optional `variant`, optional `target`
+- `site.navbar.github.href` (optional)
+- `site.footer.brand` with `label` and `tagline`
+- `site.footer.columns[]` with `title` and `links[]`
+- `site.footer.legalLinks[]` with `label`, `href`, optional `target`
+- `site.footer.copyright`
+
+Template-specific data:
+
+- `landing-features` uses `landing.title`, `landing.subtitle`, optional `landing.actions[]`, optional `landing.image.{src,alt}`, `landing.featuresTitle`, `landing.featuresSubtitle`, `landing.features[]` (each with `title`, optional `subtitle`, optional `image.{src,alt}`, optional `imageRight`, optional `bullets[]`), and optional `landing.cta` (`title`, optional `subtitle`, optional `svg`, optional `cta.{label,href,variant,newTab}`)
+- `blog-article-list` uses `description` and `posts[]` (`title`, `date`, `excerpt`, `author`, `readingTime`, `href`, optional `imageSrc` and `imageAlt`)
+- `blog-article` uses `category`, `readingTime`, `description`, `author`, `date`, and optional `updatedAt`

package/sites/partials/footer.yaml

@@ -0,0 +1,30 @@
+- rtgl-view w=f h=80:
+- rtgl-view w=f bwt=xs bc=bo ah=c mb=lg:
+    - rtgl-view w="1160" xl-w="1024" lg-w=f ph=lg pv=xl g=lg:
+        - rtgl-view md-d=v d=h wrap g=xl w=f av=s:
+            - rtgl-view w="1fg" md-w=f g=sm:
+                - rtgl-text s=lg fw=bold: ${brand.label}
+                - rtgl-text c=mu-fg: ${brand.tagline}
+            - rtgl-view w="1fg" md-w=f md-d=v d=h wrap g=xl ah=e:
+                - $for column in columns:
+                    - rtgl-view w="1fg" md-w=f md-g=xl g=lg:
+                        - rtgl-text s=sm c=mu-fg: ${column.title}
+                        - $for link in column.links:
+                            - $if link.target:
+                                - rtgl-view href="${link.href}" target="${link.target}" d=h av=c cur=p:
+                                    - rtgl-text s=sm h-c=fg h-cur=p: ${link.label}
+                              $else:
+                                - rtgl-view href="${link.href}" d=h av=c cur=p:
+                                    - rtgl-text s=sm h-c=fg h-cur=p: ${link.label}
+        - rtgl-view md-d=v d=h wrap md-g=lg g=md md-av=s av=c w=f:
+            - rtgl-view md-w=f ah=s:
+                - rtgl-text s=sm c=mu-fg: ${copyright}
+            - rtgl-view w=1fg md-hide:
+            - rtgl-view md-d=v d=h wrap md-g=lg g=md md-ah=s ah=e md-w=f:
+                - $for link in legalLinks:
+                    - $if link.target:
+                        - rtgl-view href="${link.href}" target="${link.target}" d=h av=c ah=s md-w=f cur=p:
+                            - rtgl-text s=sm c=mu-fg h-c=fg h-cur=p: ${link.label}
+                      $else:
+                        - rtgl-view href="${link.href}" d=h av=c ah=s md-w=f cur=p:
+                            - rtgl-text s=sm c=mu-fg h-c=fg h-cur=p: ${link.label}

package/sites/partials/landing-cta.yaml

@@ -0,0 +1,18 @@
+- 'rtgl-view w="f" pv="xl" style="padding-top: 128px; padding-bottom: 128px"':
+    - rtgl-view ah="c" p="xl" br="md" bw="sm" w="f":
+        - $if svg:
+            - rtgl-svg svg="${svg}" wh="48" c="pr" mb="md":
+        - rtgl-text s="h2" mb="md" c="pr" ta="c": ${title}
+        - $if subtitle:
+            - rtgl-text s="lg" c="pr" mb="lg" ta="c": ${subtitle}
+        - $if cta:
+            - $if cta.newTab:
+                - $if cta.variant:
+                    - rtgl-button v="${cta.variant}" href="${cta.href}" new-tab: ${cta.label}
+                  $else:
+                    - rtgl-button href="${cta.href}" new-tab: ${cta.label}
+              $else:
+                - $if cta.variant:
+                    - rtgl-button v="${cta.variant}" href="${cta.href}": ${cta.label}
+                  $else:
+                    - rtgl-button href="${cta.href}": ${cta.label}

package/sites/partials/landing-features-section.yaml

@@ -0,0 +1,53 @@
+- rtgl-view w=f g=xl pv=xl:
+    - rtgl-view w=f g=lg ah=c pv=xl:
+        - rtgl-text s=h2 ta=c w=f mb=md: ${title}
+        - $if subtitle:
+            - rtgl-text s=lg c=mu-fg ta=c w=f mt=sm mb=xl: ${subtitle}
+
+    - $if items:
+        - rtgl-view w=f g=xl pt=xl:
+            - $for feature in items:
+                - $if feature.imageRight:
+                    - rtgl-view d=h md-d=v g=xl w=f av=c pv=xl:
+                        - rtgl-view w=1fg md-w=f g=lg:
+                            - rtgl-text s=h3 mb=sm: ${feature.title}
+                            - $if feature.subtitle:
+                                - rtgl-text s=lg c=mu-fg mb=lg: ${feature.subtitle}
+                            - $if feature.bullets:
+                                - rtgl-view g=md mt=sm:
+                                    - $for bullet in feature.bullets:
+                                        - rtgl-view d=h g=md av=s:
+                                            - rtgl-text c=mu-fg: •
+                                            - rtgl-text c=mu-fg w=1fg: ${bullet}
+                        - rtgl-view w=1fg md-w=f:
+                            - $if feature.image:
+                                - $if feature.image.src:
+                                    - rtgl-image w=f h=360 md-h=280 of=cov br=md src="${feature.image.src}" alt="${feature.image.alt}":
+                                  $else:
+                                    - rtgl-view w=f h=360 md-h=280 bw=xs bc=bo bgc=se br=md ah=c av=c:
+                                        - rtgl-text c=se-fg: Feature image
+                              $else:
+                                - rtgl-view w=f h=360 md-h=280 bw=xs bc=bo bgc=se br=md ah=c av=c:
+                                    - rtgl-text c=se-fg: Feature image
+                  $else:
+                    - rtgl-view d=h md-d=v g=xl w=f av=c pv=xl:
+                        - rtgl-view w=1fg md-w=f:
+                            - $if feature.image:
+                                - $if feature.image.src:
+                                    - rtgl-image w=f h=360 md-h=280 of=cov br=md src="${feature.image.src}" alt="${feature.image.alt}":
+                                  $else:
+                                    - rtgl-view w=f h=360 md-h=280 bw=xs bc=bo bgc=se br=md ah=c av=c:
+                                        - rtgl-text c=se-fg: Feature image
+                              $else:
+                                - rtgl-view w=f h=360 md-h=280 bw=xs bc=bo bgc=se br=md ah=c av=c:
+                                    - rtgl-text c=se-fg: Feature image
+                        - rtgl-view w=1fg md-w=f g=lg:
+                            - rtgl-text s=h3 mb=sm: ${feature.title}
+                            - $if feature.subtitle:
+                                - rtgl-text s=lg c=mu-fg mb=lg: ${feature.subtitle}
+                            - $if feature.bullets:
+                                - rtgl-view g=md mt=sm:
+                                    - $for bullet in feature.bullets:
+                                        - rtgl-view d=h g=md av=s:
+                                            - rtgl-text c=mu-fg: •
+                                            - rtgl-text c=mu-fg w=1fg: ${bullet}

package/sites/partials/landing-hero.yaml

@@ -0,0 +1,20 @@
+- rtgl-view w=f g=xl pt=xl:
+    - rtgl-view w=f g=lg ah=c pv=xl:
+        - rtgl-text s=h1 ta=c w=f mb=sm: ${title}
+        - $if subtitle:
+            - rtgl-text s=lg c=mu-fg ta=c w=f mt=sm mb=lg: ${subtitle}
+        - $if actions:
+            - rtgl-view d=h wrap g=md w=f ah=c av=c mt=lg mb=xl:
+                - $for action in actions:
+                    - $if action.variant:
+                        - rtgl-button v="${action.variant}" href="${action.href}": ${action.label}
+                      $else:
+                        - rtgl-button href="${action.href}": ${action.label}
+
+    - $if image:
+        - $if image.src:
+            - rtgl-image w=f h=520 lg-h=420 md-h=280 of=cov br=md mb=xl src="${image.src}" alt="${image.alt}":
+          $else:
+            - rtgl-view w=f h=520 lg-h=420 md-h=280 bw=xs bc=bo bgc=se br=md mb=xl ah=c av=c:
+                - rtgl-text c=se-fg: Hero image
+        - rtgl-view h=xl:

package/sites/partials/navbar.yaml

@@ -1,5 +1,5 @@
 - 'rtgl-view data-mobile-autohide="true" 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:
+    - rtgl-view md-w=f lg-w="768" w="1024" d=h av=c h=64 ph=lg:
         - rtgl-text: ${title}
         - rtgl-view w=1fg:
         - rtgl-view d=h av=c:

package/sites/partials/top-navbar.yaml

@@ -0,0 +1,83 @@
+- 'rtgl-view data-mobile-autohide="true" md-hide bwb=xs w=f ah=c pos=fix z=1000 bgc=bg style="top:0;left:0"':
+    - rtgl-view w="1160" xl-w="1024" lg-w=f d=h av=c h=64 ph=lg g=lg:
+        - rtgl-view d=h wrap g=lg av=c:
+            - rtgl-view href="${brand.href}" cur=p:
+                - rtgl-text s=lg fw=bold: ${brand.label}
+            - rtgl-view d=h wrap g=sm av=c:
+                - $for item in items:
+                    - $if item.target:
+                        - rtgl-button v=lk href="${item.href}" new-tab rel="noopener noreferrer": ${item.label}
+                      $else:
+                        - rtgl-button v=lk href="${item.href}": ${item.label}
+        - rtgl-view w=1fg:
+        - rtgl-view d=h g=lg av=c:
+            - $if github:
+                - $if github.href:
+                    - rtgl-view href="${github.href}" new-tab cur=p:
+                        - rtgl-svg.svg-icon wh=20 svg=github:
+            - $if ctas:
+                - rtgl-view d=h g=lg av=c:
+                    - $for cta in ctas:
+                        - $if cta:
+                            - $if cta.label:
+                                - $if cta.href:
+                                    - $if cta.target:
+                                        - $if cta.variant:
+                                            - rtgl-button v="${cta.variant}" href="${cta.href}" new-tab rel="noopener noreferrer": ${cta.label}
+                                          $else:
+                                            - rtgl-button v=se href="${cta.href}" new-tab rel="noopener noreferrer": ${cta.label}
+                                      $else:
+                                        - $if cta.variant:
+                                            - rtgl-button v="${cta.variant}" href="${cta.href}": ${cta.label}
+                                          $else:
+                                            - rtgl-button v=se href="${cta.href}": ${cta.label}
+              $else:
+                - $if cta:
+                    - $if cta.label:
+                        - $if cta.href:
+                            - rtgl-button v=se href="${cta.href}": ${cta.label}
+
+- 'rtgl-view data-mobile-autohide="true" hide md-show pos=fix w=f h=56 bgc=bg av=c ph=lg d=h bwb=xs z=1000 style="top:0;left:0"':
+    - rtgl-view href="${brand.href}" cur=p:
+        - rtgl-text s=md fw=bold: ${brand.label}
+    - rtgl-view w=1fg:
+    - 'rtgl-view id="mobile-menu-btn" data-testid="mobile-menu-btn" cur=pointer aria-label="Open navigation menu" aria-controls="mobile-nav-overlay" aria-expanded="false" data-open-label="Open navigation menu" data-close-label="Close navigation menu"':
+        - rtgl-svg id="mobile-menu-icon" data-testid="mobile-menu-icon" wh=24 svg=menu cur=pointer:
+
+- 'rtgl-view id="mobile-nav-overlay" pos=fix w=f bgc=bg z=999 d=v hidden style="top:56px;left:0;height:calc(100vh - 56px)"':
+    - rtgl-view sv w=f h=f ph=lg pv=lg g=lg:
+        - $if items:
+            - rtgl-view d=v g=sm w=f:
+                - $for item in items:
+                    - $if item.target:
+                        - 'rtgl-view data-mobile-nav-close="true" href="${item.href}" new-tab rel="noopener noreferrer" cur=p p=sm':
+                            - rtgl-text s=lg: ${item.label}
+                      $else:
+                        - 'rtgl-view data-mobile-nav-close="true" href="${item.href}" cur=p p=sm':
+                            - rtgl-text s=lg: ${item.label}
+        - $if github:
+            - $if github.href:
+                - 'rtgl-view data-mobile-nav-close="true" href="${github.href}" new-tab rel="noopener noreferrer" cur=p d=h av=c g=sm p=sm':
+                    - rtgl-svg.svg-icon wh=20 svg=github:
+                    - rtgl-text s=md: GitHub
+        - $if ctas:
+            - rtgl-view d=v g=lg w=f:
+                - $for cta in ctas:
+                    - $if cta:
+                        - $if cta.label:
+                            - $if cta.href:
+                                - $if cta.target:
+                                    - $if cta.variant:
+                                        - 'rtgl-button data-mobile-nav-close="true" v="${cta.variant}" href="${cta.href}" new-tab rel="noopener noreferrer" w=f': ${cta.label}
+                                      $else:
+                                        - 'rtgl-button data-mobile-nav-close="true" v=se href="${cta.href}" new-tab rel="noopener noreferrer" w=f': ${cta.label}
+                                  $else:
+                                    - $if cta.variant:
+                                        - 'rtgl-button data-mobile-nav-close="true" v="${cta.variant}" href="${cta.href}" w=f': ${cta.label}
+                                      $else:
+                                        - 'rtgl-button data-mobile-nav-close="true" v=se href="${cta.href}" w=f': ${cta.label}
+          $else:
+            - $if cta:
+                - $if cta.label:
+                    - $if cta.href:
+                        - 'rtgl-button data-mobile-nav-close="true" v=se href="${cta.href}" w=f': ${cta.label}