From 99d0cc7329af9ff1d02972a4612b8b5b755ba8e2 Mon Sep 17 00:00:00 2001 From: herbygitea Date: Wed, 8 Apr 2026 22:00:08 +0000 Subject: [PATCH] Create pbs-membership-loe1-phase3.md via n8n --- .../pbs-membership-loe1-phase3.md | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 PBS/Tech/Projects/pbs-membership-loe1-phase3.md/pbs-membership-loe1-phase3.md diff --git a/PBS/Tech/Projects/pbs-membership-loe1-phase3.md/pbs-membership-loe1-phase3.md b/PBS/Tech/Projects/pbs-membership-loe1-phase3.md/pbs-membership-loe1-phase3.md new file mode 100644 index 0000000..031053a --- /dev/null +++ b/PBS/Tech/Projects/pbs-membership-loe1-phase3.md/pbs-membership-loe1-phase3.md @@ -0,0 +1,128 @@ +--- +project: pbs-membership-loe1-phase3 +type: project-plan +status: planned +tags: [pbs-hub, flask, membership, loe1, the-garden, ui-design] +created: 2026-04-08 +updated: 2026-04-08 +path: PBS/Tech/Projects/pbs-membership-loe1-phase3.md +--- + +# PBS Membership LOE 1 Phase 3 - The Garden + +## Overview + +Phase 3 of LOE 1 (Recipe Saving) expanded in scope during planning. +Originally scoped as just "the saved recipes page in pbs-hub," it became +clear that the saved recipes page cannot exist without first building the +member experience container it lives in. Phase 3 now covers building **the +Garden** - the branded member area in pbs-hub - with saved recipes as the +first feature planted inside it. + +This session was dedicated to locking in the member experience skeleton: +URL structure, branding, navigation, visual direction, and page layout. No +code was written. Phases 1 (Backend API) and 2 (Save button) are still in +progress and will ship before Phase 3 work begins. + +## Decisions Locked + +| Decision | Choice | Rationale | +|---|---|---| +| Member area location | `plantbasedsoutherner.com/the-garden/` | +Path-based via Traefik routing to pbs-hub. Easy to flip to subdomain later +if needed. | +| Page title / H1 | "Welcome to the Sunflower Garden" | Jenny recommended +"garden" over "patch" - warmer, more inviting, implies tending. | +| Internal naming | "the garden" for member area, "Sunnies" for community | +Clean separation - the community and the place no longer share a name. | +| Login redirect | Ultimate Member sends authenticated users to +`/the-garden/` | Single entry point to the member experience. | +| Logout flow | pbs-hub calls WP logout, lands on WordPress home | WP +remains the auth source of truth. | +| Visual direction | Option #3 (garden-themed cards, structurally normal +grid) | Ships now. Option #1 (full illustrated scene) banked as +someday-goal when illustrator budget exists. | +| Card style | Seed packets | Built-in visual language (title + +illustration + description). "Coming soon" LOEs become unopened seed +packets - perfect metaphor. | +| Empty state copy | "Your garden is still a seed. Start saving recipes and +watch it grow." | Friendly, on-brand, points new Sunnies at the first +action. | + +## Page Structure (Top to Bottom) + +1. **Header strip** - matches WordPress Astra header for seamless visual +transition. "My Garden" is active nav item. +2. **Welcome hero** - soft green gradient or botanical pattern background. +Large warm heading "Welcome to the Sunflower Garden, [Name]." Sunnie +illustration in corner. Short tagline ("Here's what's growing today" or +similar). +3. **Card grid** - seed packet cards for each LOE. Responsive: 3 across +desktop, 2 tablet, 1 mobile. +4. **"Recently added to your garden" strip** - horizontal row of 3-4 most +recent saves. Empty state for new Sunnies shows the copy above with Sunnie +pointing at the saved recipes card. +5. **Footer** - matches WordPress Astra footer. + +## Card States + +- **Active LOE** (Saved Recipes at launch): full color seed packet, +blooming sunflower illustration, count badge ("12 saved"), clickable. +- **Coming soon LOE**: muted/sepia seed packet, seed or sprout +illustration, "Coming soon" label, not clickable but visible. + +## Phase 3 Sub-Phases (Shippable Milestones) + +- **3a - The Garden Skeleton**: Traefik routing for `/the-garden/`, pbs-hub +Flask app serving the page, WP cookie auth middleware, Astra-matching +header/footer templates, empty card grid, hero with Sunnie, logout flow. +Goal: logged-in Sunnie lands on the garden and sees the shell. +- **3b - Saved Recipes Seed Packet**: First active LOE card wired up. +Queries `user_interactions` + `pbs_recipes`, shows count, card is clickable. +- **3c - Saved Recipes Detail Page**: Click-through destination. List/grid +of saved recipes with thumbnails, titles, save dates, unsave action, +click-through to WP recipe. +- **3d - "Recently Added" Strip + Empty State**: The content area on the +garden home, plus the friendly empty state for new Sunnies. +- **3e - Coming Soon Seed Packets**: Muted cards for Meal Plans, Diversity +Tracker, User Profiles. Cheap to add, high brand value - shows Sunnies +what's coming. + +## Open Questions (To Resolve Before Phase 3a Starts) + +1. **Seed packet illustrations.** Phase 3a minimum requires: one active +"saved recipes" seed packet, one generic "coming soon" seed packet, one +corner Sunnie for the hero. Source TBD - Jenny draws, AI-generated, stock, +or hire out. Needs decision before 3a ships or it becomes a blocker. +2. **Astra header/footer matching strategy.** Options: (a) rebuild Astra +header in Jinja templates by hand (simpler but drifts when WP updates), (b) +WordPress serves header/footer HTML via endpoint pbs-hub fetches (more +robust, adds dependency), (c) iframe (rejected). Needs decision before 3a +template work starts. + +## Relationship to Other Phases + +- **Phase 1 (Backend API)**: planning complete, implementation pending. +Phase 3 depends on the `user_interactions` table and query patterns +established here. +- **Phase 2 (Save Button)**: planning complete, implementation pending. +Custom JS via WPCode Lite. Phase 3 reads the data Phase 2 writes. +- **LOEs 2-4**: their "coming soon" seed packets ship in Phase 3e. Actual +implementation is future work. + +## Someday / Stretch + +- **Visual direction Option #1**: full illustrated garden scene with +clickable hotspots. Requires illustrator budget. Revisit when PBS has +revenue to support it or Jenny has bandwidth to draw it. +- **Language expansion**: "your garden," "what's growing," "tend your +garden" for settings, "new in the garden this week" for content callouts. +Microcopy opportunity across the whole member experience. + +## Next Session + +Resume on Phases 1 and 2 implementation. Phase 3 planning is parked until +those ship. + + +...sent from Jenny & Travis \ No newline at end of file