diff --git a/README.md b/README.md index 3ea4512f..236ac4f3 100644 --- a/README.md +++ b/README.md @@ -12,18 +12,20 @@ This README has three parts, in the order you need them: --- -## 1. The 5 plugin capabilities +## 1. The 5 plugin capabilities — most advanced first -A "capability" is **how much a plugin nests** — not how hard it is. Every screenshot below is a real -bundle from this repo's build output. +A "capability" is **how much a plugin nests** — not how hard it is to use. The tour below starts from +the most advanced thing this repo produces (a whole app of apps) and walks down to the simplest +(one element), because the top of the ladder is the point: every rung below it stays independently +embeddable. Every screenshot is a real bundle from this repo's build output. | # | Capability | What it is | Example bundle | |---|------------|------------|----------------| -| 1 | **Single element** | One folder → one bundle → one custom element. | `all-people-groups` | -| 2 | **Prop-table element** | One `root.vue` + a preset table → many maps from one plugin. | `doxa-simple-map` | -| 3 | **Monolithic element** | One `root.vue` nests many views internally → one element. | `doxa-research-map` | -| 4 | **Nested-element SPA** | A composite that nests *other plugins* and wires them with props/events. | `big-picture` | | 5 | **Nested-SPA / app shell** | Many SPAs nested into one deep-linkable app. | `doxa-maps-spa` | +| 4 | **Nested-element SPA** | A composite that nests *other plugins* and wires them with props/events. | `big-picture` | +| 3 | **Monolithic element** | One `root.vue` nests many views internally → one element. | `doxa-research-map` | +| 2 | **Prop-table element** | One `root.vue` + a preset table → many maps from one plugin. | `doxa-simple-map` | +| 1 | **Single element** | One folder → one bundle → one custom element. | `all-people-groups` | > The tier is decided by the files, not by how simple a folder looks: an `*.instances.json` makes a > bundle **cap-2** however light it is, and a `meta.json` `type` declares tiers 3/4/5. The authoritative, @@ -31,38 +33,7 @@ bundle from this repo's build output. > **[documentation/reference-capability-exemplars.md](./documentation/reference-capability-exemplars.md)** > — cite that file rather than remembering. -### Capability 1 — single element -One folder, one `.vue`, one embeddable element. `plugin-designs/all-people-groups/` shows every people -group on one map. - -![Capability 1 — a single-element plugin (all-people-groups)](documentation/readme-images/cap1-single-element.png) - -### Capability 2 — prop-table element - -One `root.vue`, many maps. `plugin-designs/doxa-simple-map/` ships a preset prop-table -(`simple-map.instances.json`) that renders it three ways — each a standalone embeddable page from the -**same** code. - -| Prayer | Engagement | Adoption | -|--------|------------|----------| -| ![Capability 2 — prayer preset (doxa-simple-map)](documentation/readme-images/cap2-prayer.png) | ![Capability 2 — engagement preset (doxa-simple-map)](documentation/readme-images/cap2-engagement.png) | ![Capability 2 — adoption preset (doxa-simple-map)](documentation/readme-images/cap2-adoption.png) | - -### Capability 3 — monolithic element - -A whole multi-view map from one `root.vue`. The trade-off: you cannot embed just one of its tabs. - -![Capability 3 — the monolithic research map (doxa-research-map)](documentation/readme-images/cap3-monolithic-research.png) - -### Capability 4 — nested-element SPA - -A composite that nests **lower-tier plugins** and wires them with props and events. Each inner plugin -stays independently embeddable, and the composite is embeddable too. `plugin-designs/my-upg-100-list/` -ships three leaves: - -| Composite (`upg-100-mfe`) | List (`upg-100-list`) | Poster wall (`poster-wall`) | -|---------------------------|-----------------------|-----------------------------| -| ![Capability 4 — the UPG-100 composite (my-upg-100-list)](documentation/readme-images/cap4-upg100-mfe.png) | ![UPG-100 list leaf](documentation/readme-images/cap4-upg100-list.png) | ![UPG-100 poster-wall leaf](documentation/readme-images/cap4-upg100-poster-wall.png) | ### Capability 5 — nested-SPA / app shell @@ -79,6 +50,39 @@ studio without any wiring. This is [section 3](#3-the-plugin-studio). ![Capability 5 — the developer studio (plugin-studio)](documentation/readme-images/cap5-plugin-studio.png) +### Capability 4 — nested-element SPA + +A composite that nests **lower-tier plugins** and wires them with props and events. Each inner plugin +stays independently embeddable, and the composite is embeddable too. `plugin-designs/my-upg-100-list/` +ships three leaves: + +| Composite (`upg-100-mfe`) | List (`upg-100-list`) | Poster wall (`poster-wall`) | +|---------------------------|-----------------------|-----------------------------| +| ![Capability 4 — the UPG-100 composite (my-upg-100-list)](documentation/readme-images/cap4-upg100-mfe.png) | ![UPG-100 list leaf](documentation/readme-images/cap4-upg100-list.png) | ![UPG-100 poster-wall leaf](documentation/readme-images/cap4-upg100-poster-wall.png) | + +### Capability 3 — monolithic element + +A whole multi-view map from one `root.vue`. The trade-off: you cannot embed just one of its tabs. + +![Capability 3 — the monolithic research map (doxa-research-map)](documentation/readme-images/cap3-monolithic-research.png) + +### Capability 2 — prop-table element + +One `root.vue`, many maps. `plugin-designs/doxa-simple-map/` ships a preset prop-table +(`simple-map.instances.json`) that renders it three ways — each a standalone embeddable page from the +**same** code. + +| Prayer | Engagement | Adoption | +|--------|------------|----------| +| ![Capability 2 — prayer preset (doxa-simple-map)](documentation/readme-images/cap2-prayer.png) | ![Capability 2 — engagement preset (doxa-simple-map)](documentation/readme-images/cap2-engagement.png) | ![Capability 2 — adoption preset (doxa-simple-map)](documentation/readme-images/cap2-adoption.png) | + +### Capability 1 — single element + +One folder, one `.vue`, one embeddable element. `plugin-designs/all-people-groups/` shows every people +group on one map. + +![Capability 1 — a single-element plugin (all-people-groups)](documentation/readme-images/cap1-single-element.png) + --- ## 2. The 5 deployment methods diff --git a/documentation/readme-images/cap2-prayer.png b/documentation/readme-images/cap2-prayer.png index 2be464a5..bf095c0d 100644 Binary files a/documentation/readme-images/cap2-prayer.png and b/documentation/readme-images/cap2-prayer.png differ diff --git a/documentation/readme-images/cap3-monolithic-research.png b/documentation/readme-images/cap3-monolithic-research.png index be560a54..c36a39b6 100644 Binary files a/documentation/readme-images/cap3-monolithic-research.png and b/documentation/readme-images/cap3-monolithic-research.png differ diff --git a/documentation/readme-images/cap4-upg100-mfe.png b/documentation/readme-images/cap4-upg100-mfe.png index 4c9dc972..568b0d30 100644 Binary files a/documentation/readme-images/cap4-upg100-mfe.png and b/documentation/readme-images/cap4-upg100-mfe.png differ diff --git a/documentation/readme-images/cap5-doxa-maps-spa.png b/documentation/readme-images/cap5-doxa-maps-spa.png index ed6df98c..bd8a9c09 100644 Binary files a/documentation/readme-images/cap5-doxa-maps-spa.png and b/documentation/readme-images/cap5-doxa-maps-spa.png differ