{"id":51462503,"url":"https://github.com/dirnbauer/innesto","last_synced_at":"2026-07-06T07:00:52.194Z","repository":{"id":363886700,"uuid":"1265412944","full_name":"dirnbauer/innesto","owner":"dirnbauer","description":"Grafts shadcn/ui registry components onto TYPO3 as Desiderio-styled Content Blocks","archived":false,"fork":false,"pushed_at":"2026-06-10T19:33:07.000Z","size":1095,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T20:21:39.650Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dirnbauer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-10T18:49:30.000Z","updated_at":"2026-06-10T19:33:11.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dirnbauer/innesto","commit_stats":null,"previous_names":["dirnbauer/innesto"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/dirnbauer/innesto","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Finnesto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Finnesto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Finnesto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Finnesto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dirnbauer","download_url":"https://codeload.github.com/dirnbauer/innesto/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Finnesto/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35180933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-06T02:00:07.184Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-06T07:00:51.431Z","updated_at":"2026-07-06T07:00:52.182Z","avatar_url":"https://github.com/dirnbauer.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Innesto\n\n[![CI](https://github.com/dirnbauer/innesto/actions/workflows/ci.yml/badge.svg)](https://github.com/dirnbauer/innesto/actions/workflows/ci.yml)\n\n*innesto (it.) — graft.* A TYPO3 v14 experiment that grafts components from\n[shadcn/ui registries](https://registry.directory/) onto the\n[Desiderio](https://github.com/dirnbauer/desiderio) design system as Content\nBlocks elements.\n\n## What it does\n\n1. **Companion extension.** Innesto depends on Desiderio; its site set pulls\n   in the whole Desiderio set, so every grafted element automatically uses the\n   active shadcn theme preset, semantic tokens, and Fluid 5 component atoms.\n2. **Own content elements.** Elements live in\n   `ContentBlocks/ContentElements/` and are auto-discovered by TYPO3 Content\n   Blocks. Nineteen finished grafts ship with the extension: the\n   [Magic UI marquee](https://magicui.design/docs/components/marquee),\n   orbiting-circles, and\n   [terminal](https://magicui.design/docs/components/terminal) (an animated,\n   JavaScript-free typewriter — see the\n   [Terminal note](Documentation/Elements/Terminal.md)), the\n   [shadcnblocks case-studies2](https://www.shadcnblocks.com/block/case-studies2)\n   block (quotes + metrics, modeled as nested Collections), and the complete\n   15-element stats family from [blocks.so](https://blocks.so/) (trending,\n   badges, progress bars, circular progress, area charts, dashboards,\n   breakdowns — all rendered without React, via tokens, CSS and SVG).\n3. **Registry glue code.** A console command fetches any registry item — every\n   registry cataloged on [registry.directory](https://registry.directory/)\n   speaks the same `registry-item` JSON schema — and scaffolds a Content\n   Blocks element from it:\n\n   ```bash\n   vendor/bin/typo3 innesto:add magicui/marquee\n   vendor/bin/typo3 innesto:add magicui/terminal\n   vendor/bin/typo3 innesto:add shadcn/button\n   vendor/bin/typo3 innesto:add @shadcnblocks/case-studies2 --key case-studies\n   vendor/bin/typo3 innesto:add blocks/stats-09 --key stats-progress\n   vendor/bin/typo3 innesto:add https://magicui.design/r/globe.json --key globe\n   vendor/bin/typo3 innesto:add magicui/orbiting-circles --ai   # + AI finishing pass\n   ```\n\n📖 **The complete, screenshot-by-screenshot manual lives in the Desiderio\ndocs: [Adding content elements from a shadcn block](https://github.com/dirnbauer/desiderio/blob/main/Documentation/Developer/AddingContentElements.rst)**\n— it walks the `terminal` graft from picking the component to seeing it render.\nThis repo keeps a [CLI/command reference](Documentation/AddingContentElements.md)\nwith two more worked examples (marquee, case-studies).\n\n## What the pipeline converts automatically — and what it can't\n\n| Registry item part | Conversion |\n| --- | --- |\n| `cssVars` (theme/light/dark tokens) | ✅ automatic — emitted as CSS custom properties; Desiderio uses the same shadcn variable names, so they map 1:1 |\n| `css` (keyframes, rules) | ✅ automatic — serialized into the element's `assets/frontend.css` |\n| Tailwind `@theme` animation entries | ✅ automatic — custom property + matching utility class (the Desiderio Tailwind build does not scan grafted elements) |\n| Site-set registration (New Content Element wizard visibility) | ✅ automatic — the block is appended to the Innesto set's `optionalDependencies` |\n| Registry `categories` → wizard group | ✅ automatic — the item's first category becomes the element's wizard group; the blocks.so families (Stats, Grid List, Onboarding, …) ship pre-registered |\n| React/TSX markup | ⚠️ scaffolded — the source is preserved under `sources/`, the Fluid 5 template is generated as a stub with TODO markers; structural markup translates quickly, hooks/state need Alpine.js or a manual pass (or the `--ai` finishing pass) |\n| Component props | ⚠️ manual — model them as Content Blocks fields in `config.yaml` (covered by the `--ai` finishing pass) |\n\nThat last row is the honest limit: React components are programs, not\ndocuments, so a fully mechanical React→Fluid conversion is not possible.\nThe glue code does everything deterministic and leaves a clearly marked\nfinishing pass.\n\n## Install\n\n```bash\ncomposer config repositories.innesto vcs https://github.com/dirnbauer/innesto\ncomposer require dirnbauer/innesto:@dev\nvendor/bin/typo3 extension:setup\n```\n\nThen add the set to your site's `config.yaml`:\n\n```yaml\ndependencies:\n  - dirnbauer/innesto\n```\n\n## Grafting a component in four steps\n\n```bash\n# 1. Pick an item on https://registry.directory/ and fetch it — shorthand\n#    (@ optional) for shadcn/magicui/shadcnblocks/blocks, item-JSON URL for the rest:\nvendor/bin/typo3 innesto:add @shadcnblocks/case-studies2 --key case-studies\n\n# 2. Finish the graft — translate React → Fluid, model props as fields\n#    (the scaffold includes a tailored AI_PROMPT.md, or rerun with --ai):\ncd ContentBlocks/ContentElements/case-studies\nclaude -p \"$(cat AI_PROMPT.md)\" --permission-mode acceptEdits\n\n# 3. Create the new tables and flush caches:\nvendor/bin/typo3 extension:setup \u0026\u0026 vendor/bin/typo3 cache:flush\n\n# 4. Optional: put one demo record of every element on a page to inspect it:\nvendor/bin/typo3 innesto:seed \u003cpage-uid\u003e\n\n# 5. Add the element in the New Content Element wizard — done.\n```\n\nThe [manual](Documentation/AddingContentElements.md) walks through both worked\nexamples: the marquee (motion, CSS modifiers) and the case-studies block\n(structured content, nested Collections, File fields).\n\n## Element anatomy\n\n```\nContentBlocks/ContentElements/\u003ckey\u003e/\n├── AI_PROMPT.md                 # reproducible prompt for the finishing pass\n├── config.yaml                  # fields modeled from the component props\n├── templates/frontend.html      # Fluid 5, uses Desiderio d: atoms + tokens\n├── templates/backend-preview.fluid.html\n├── assets/frontend.css          # converted css/cssVars, semantic tokens only\n├── assets/icon.svg\n├── language/labels.xlf\n└── sources/\u003coriginal\u003e.tsx       # upstream source, kept for provenance\n```\n\nUpstream component sources keep their original licenses (Magic UI marquee:\nMIT). The extension itself is GPL-2.0-or-later, like TYPO3.\n\n## Development\n\nEvery graft is held to a contract — parseable config, uniquely-prefixed\nCollection tables, no reserved child identifiers, each configured field\nrendered, token-only styling (no raw colours), no inline scripts, a backend\npreview, a valid 16×16 icon, well-formed XLIFF, and site-set registration.\nThe audit enforces it across all elements:\n\n```bash\ncomposer audit:content-elements\n# or directly (ext-yaml or a symfony/yaml autoloader via AUDIT_AUTOLOAD):\nphp scripts/audit-content-elements.php\n```\n\n[CI](.github/workflows/ci.yml) runs `composer validate`, PHP lint, and the\naudit on PHP 8.3 and 8.4 for every push and pull request. It is install-free:\nthe extension is meant to be installed into a TYPO3 project that provides\n`webconsulting/desiderio`, so the audit reads `config.yaml` via ext-yaml\nrather than resolving the runtime.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirnbauer%2Finnesto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirnbauer%2Finnesto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirnbauer%2Finnesto/lists"}