diff --git a/PROGRESS.json b/PROGRESS.json new file mode 100644 index 0000000..05e046d --- /dev/null +++ b/PROGRESS.json @@ -0,0 +1,19 @@ +{ + "schema": "d7460n-progress/1", + "read_order": ["PROGRESS.json", "newest shard in shards[]"], + "meta": { + "repo": "autocss-com/angular", + "what": "Framework reference demo for the AutoCSS remote-rendering phase: a standard/idiomatic Angular app that renders its OWN data inside the remotely-loaded AutoCSS UI (https://autocss.com). NOT tied to a product yet; a real product + its own CLAUDE.md come later.", + "rules": [ + "README stays MINIMAL — only what a developer changes from the default scaffold. Developers move fast; a long changelog reads as 'lots of work' when it isn't. Full change history lives HERE, mirroring the autocss repo's memory system.", + "AutoCSS is loaded REMOTELY from https://autocss.com — do not vendor/copy it.", + "Framework build tooling (npm/Angular CLI) is fine here — AutoCSS's zero-dependency rule applies to AutoCSS itself, not to this back-end." + ], + "cross_repo_master": "The authoritative cross-repo accounting lives in autocss-com/autocss (PROGRESS.json + progress/log-001.ndjson). This file is the angular-specific mirror." + }, + "shards": ["progress/log-001.ndjson"], + "cursor": { + "phase": "Stage 2 (styles) DONE: renders its own data inside the AutoCSS scaffold, styled solely by remote autocss.com CSS. Live at https://autocss-com.github.io/angular/.", + "next": "Wire the remote AutoCSS JS runtime (app.js/oninput) so AutoCSS RENDERS the data (not the framework). Later: assign a real product + add a per-repo CLAUDE.md." + } +} diff --git a/README.md b/README.md index f88d152..a30b0a4 100644 --- a/README.md +++ b/README.md @@ -1,111 +1,40 @@ # AutoCSS demo — Angular data layer -A standard **Angular** instance (standalone component, signals, `HttpClient`) -that renders its own sample data inside the **remote [AutoCSS](https://autocss.com) -UI scaffold**. It is the Angular back-end reference for the AutoCSS -remote-rendering demo: *have UI, bring your own data — one UI, many back-ends.* +A standard **Angular** app that renders its own data inside the remote +**[AutoCSS](https://autocss.com)** UI — *have UI, bring your own data.* The app +ships the data; AutoCSS (loaded from `https://autocss.com`) is the whole UI. -- **Data layer:** the app fetches `public/data/records.json` — the same JSON - shape the AutoCSS UI consumes (`[{ id, title, intro, items: [] }]`) — and - renders it as a table with loading/error states. -- **AutoCSS attach (styles):** the page includes the default AutoCSS Holy-Grail - HTML scaffold and links the AutoCSS stylesheets remotely from - `https://autocss.com`. The app's own content-level elements live inside - `
`. (The AutoCSS JS runtime is **not** wired yet — styles only.) +**Live:** -## Develop +## Run ```bash npm install -npm start # ng serve +npm start ``` -## Build +## Build & deploy ```bash -npm run build # ng build --base-href /angular/ -> dist/autocss-angular-demo/browser +npm run build # → dist/autocss-angular-demo/browser (built with --base-href /angular/) ``` -## Deploy +Pushing to `main` auto-builds and deploys to GitHub Pages via +`.github/workflows/deploy.yml`. -On push to `main`, a GitHub Actions workflow builds and publishes -`dist/autocss-angular-demo/browser` to GitHub Pages: - +## Using AutoCSS in an Angular app ---- +Starting from a stock `ng new` app, the whole integration is just a few small +touches: -## Changes from the default scaffold +1. **Link the AutoCSS styles** — add the `https://autocss.com/assets/css/…` + stylesheets to `src/index.html`. +2. **Make `` the root** — set the component `selector` to + `'app-container'` and put `` in `src/index.html`. + The template renders the AutoCSS scaffold, with your content inside `
`. +3. **Allow the `app-*` custom elements** — add + `schemas: [CUSTOM_ELEMENTS_SCHEMA]` to the component. +4. **Bring your data** — fetch it (here `public/data/records.json` via `HttpClient`) + and render. -> Baseline = a fresh `ng new` (Angular CLI 20; `--style=css --routing=false -> --ssr=false`). This is the **complete** list of what had to change to render -> the app's own data and to drop it into the remote AutoCSS UI. Nothing else was -> modified, and **no third-party libraries were added.** - -### Data layer -- **Added `public/data/records.json`** — the sample dataset (AutoCSS contract - shape). The Angular application builder copies `public/` to the output root, so - it deploys as `data/records.json`. -- **`src/app/app.ts`** — the standalone `App` component fetches `data/records.json` - via `HttpClient` (a document-base-relative path that resolves against - ``), holds `status`/`records` in **signals** with - `record`/`columns` `computed`, and the template renders a `` with - `@if`/`@for` control flow. -- **`src/app/app.config.ts` — added `provideHttpClient()`** (a fresh standalone - app does not provide `HttpClient` by default). - -### AutoCSS scaffold + remote styles -- **`src/index.html`** — added the block of remote AutoCSS stylesheet ``s - (`https://autocss.com/assets/css/*.css`) in the same `@layer`-cascade order as - `autocss/index.html` (`reset, fonts, color-scheme, color-theme-66ccff, layout, - inputs, media, typography, scrolling, a11y, forms, fallbacks, loading`; - `themes.css` + `transitions.css` left commented out to mirror the source). -- **`src/app/app.html`** — renders the default AutoCSS Holy-Grail scaffold - (`` → ``, `
`, `
`) placed **inside - `
`**. - -### Native stylesheets commented out -- The framework's own stylesheets are **disabled** so the remote AutoCSS - stylesheets are the sole source of styling: the component `styleUrl: './app.css'` - in `src/app/app.ts` is commented out, and the contents of the global - `src/styles.css` are commented out. (`src/styles.css` stays referenced from - `angular.json`, which is strict JSON and cannot hold comments, so its rules are - disabled inside the file instead.) The CSS files are kept for easy re-enable. - -### Angular-specific wiring (the gotchas) -- **Component root merged into ``.** The component `selector` was - changed from `app-root` to **`app-container`**, and `src/index.html` bootstraps - into `` (no separate ``). `app.html` - renders the scaffold's **children**, so the component's host element IS - `` — the Holy-Grail grid root that AutoCSS's `layout.css` styles. - No `app-root { display: contents }` shim is needed. -- **`src/app/app.ts` — `schemas: [CUSTOM_ELEMENTS_SCHEMA]` (required).** The - template still contains `app-banner`, `app-logo`, `app-legal`, and - `app-version`; without the schema Angular's compiler errors - (`'app-banner' is not a known element`). The schema lets those render as native - custom elements. -- **Do not set `:host` display in `src/app/app.css`** (the scaffold's default - `:host { display: block }` was removed). Angular compiles `:host` to an - attribute selector (specificity `0,1,0`) that beats AutoCSS's - `app-container { display: grid }` type rule (`0,0,1`), so any `:host` display - would override the Holy-Grail grid. -- Static `checked` attributes on the "Layouts" checkbox and "System" radio work - as-is; glyphs (`☼ ☾ ◐ ✖`) are written as HTML entities in the template. - -### Build / GitHub Pages -- **`package.json` — `build` script is `ng build --base-href /angular/`** so the - built `index.html` carries `` for project Pages hosting. -- **Added `.github/workflows/deploy.yml`** — `npm ci` → `npm run build` → deploy - **`dist/autocss-angular-demo/browser`** to Pages (triggers on push to `main`). - Requires repo **Settings → Pages → Source = GitHub Actions**. - -### Version note -- Scaffolded with **Angular CLI 20** rather than the latest. The build - environment's Node (22.22.2) is just below the CLI 21/22 engine floor - (≥ 22.22.3); the GitHub Actions runner's newer Node 22.x builds it fine and the - lockfile pins the toolchain. - -### Housekeeping -- `package.json` name → `autocss-angular-demo`. -- Appended a Node/Angular section to `.gitignore`. +_(Full change history: [`progress/`](./progress).)_ diff --git a/progress/log-001.ndjson b/progress/log-001.ndjson new file mode 100644 index 0000000..bbafae3 --- /dev/null +++ b/progress/log-001.ndjson @@ -0,0 +1,6 @@ +{"ts":"2026-07-02","type":"note","phase":"init","msg":"Per-repo memory shard opened (mirrors autocss-com/autocss). README is kept MINIMAL (only what a developer changes from the stock scaffold); the full change history lives here so Claude + the maintainer have a complete accounting. A per-repo CLAUDE.md comes later, when this demo is tied to a real product."} +{"ts":"2026-07-02","type":"feature","phase":"stage-1","name":"Angular data-layer demo on GitHub Pages","what":"Standard Angular app (standalone component, signals, @if/@for, HttpClient) that fetches its own public/data/records.json (AutoCSS [{id,title,intro,items:[]}] contract shape) and renders it as a
with loading/error states. Built with --base-href /angular/. Added provideHttpClient() (a fresh standalone app doesn't provide HttpClient). GitHub Actions workflow builds + deploys dist/autocss-angular-demo/browser to Pages.","pr":"autocss-com/angular#1 (merged)","verify":"browser-verified: 6 rows, no console errors","version_note":"Scaffolded with Angular CLI 20 because the build env's Node (22.22.2) is just below the CLI 21/22 engine floor (>=22.22.3); the Pages runner's newer Node 22.x builds it fine and the lockfile pins the toolchain.","tested":true} +{"ts":"2026-07-02","type":"feature","phase":"stage-2/scaffold+styles","name":"attach AutoCSS scaffold + remote styles","what":"Wrapped the app in the default AutoCSS Holy-Grail scaffold (app-container down to
; the app's content-level elements moved INSIDE
). Linked the remote AutoCSS stylesheets from https://autocss.com in src/index.html, same @layer order as autocss/index.html (themes.css + transitions.css left commented out to match the source). STYLES ONLY — no AutoCSS JS. Angular quirk: schemas:[CUSTOM_ELEMENTS_SCHEMA] on the standalone component so app-* elements don't error at compile.","pr":"autocss-com/angular#2 (merged ec19c34)","tested":true} +{"ts":"2026-07-02","type":"feature","phase":"stage-2/refine","name":"merged root + native CSS off + tag-based mount","what":"(a) The framework root IS the AutoCSS : component selector CHANGED app-root->app-container, index.html bootstraps , app.html renders the scaffold's children; removed app-root{display:contents}. Must NOT set :host display (Angular's emulated :host attr-selector specificity 0,1,0 beats AutoCSS's app-container{display:grid} type rule 0,0,1) — the scaffold's default :host{display:block} was removed. (b) Native stylesheets COMMENTED OUT so the remote AutoCSS CSS is the sole styling source: component styleUrl './app.css' commented out (app.ts), and src/styles.css CONTENTS commented out — angular.json is strict JSON and cannot hold comments, so the global stylesheet is disabled inside the file while staying referenced. (c) Bootstrapping is already tag-based via the app-container selector with no id in the HTML, so the 'mount by tag / no id hook' step needed NO change for Angular.","pr":"autocss-com/angular#3 (merged 8d52d93)","tested":true} +{"ts":"2026-07-02","type":"note","phase":"docs","msg":"README minimized to only 'what a developer changes from the default scaffold' (per maintainer: devs want to move fast; a long change list looks like a lot of work when it isn't). The detailed change history was moved here + PROGRESS.json, mirroring the autocss repo's memory system."} +{"ts":"2026-07-02","type":"test","phase":"verify","msg":"Every change browser-verified via Playwright chromium (a local server maps the /angular/ subpath -> the browser build dir; autocss.com is stubbed as empty CSS because this sandbox can't reach it through the egress cert — real styles load on Pages). Asserted: app-container present, app-container>header/nav/aside/footer, main>article, table INSIDE article, 6 rows, h1='Angular data layer', appErrors=[]. All PASS. Live: https://autocss-com.github.io/angular/"}