Ottalanding package: Themes for Homepages (nextjs app) - #112
Open
thinkdj wants to merge 14 commits into
Open
Conversation
Implements 16 marketing section components across two distinct templates: Atlas (GitHub/Atlassian/Notion style): - HeroSection — centered layout, badge, dual CTAs, optional screenshot - FeaturesGrid — bordered card grid, 2–4 col, icon box per feature - PricingTable — per-plan cards, monthly/annual toggle, feature checklist - TestimonialsCarousel — 3-up paginated grid, star rating, avatars - FAQAccordion — 2-col layout (header left, accordion right) - LogoCloud — grayscale logos, text fallback, hover reveal - CTABanner — bordered card, centered, dual CTAs - FooterMarketing — 4-col grid, social icons, legal bar Mono (Linear/Vercel style): - HeroSection — left-aligned, monospace label, inverted CTA button - FeaturesGrid — numbered rows (01, 02…), title+desc in columns - PricingTable — full comparison table, features as rows, plans as cols - TestimonialsCarousel — single quote, typographic quotemark, numbered nav - FAQAccordion — numbered questions, +/− toggle, flat full-width rows - LogoCloud — horizontal rule + monospace name fallbacks - CTABanner — full-width inverted (bg-foreground) section - FooterMarketing — flat single-row nav, minimal bottom strip All components consume brand CSS variables via Tailwind token classes (bg-background, text-foreground, border-border, etc.) — zero hardcoded colors, fully compatible with @ottabase/brand-engine themes. https://claude.ai/code/session_01R1MVKojSQdAqQZUT4U6Mm7
… build errors - Replace placeholder page.tsx with full Atlas marketing homepage (HeroSection, LogoCloud, FeaturesGrid, TestimonialsCarousel, PricingTable, FAQAccordion, CTABanner, FooterMarketing) - Add @ottabase/ui-marketing to template app deps, transpilePackages, optimizePackageImports, and tailwind content scanning Fix build errors: - ui-marketing tsconfig: add lib:ES2020 so padStart type resolves - ui-marketing tsup: add lib/utils entry so relative dist imports work - ui-marketing mono/PricingTable: fix Map<> generic inference (TS2322) - brand-engine: exclude layout-api.ts (unrelated ORM type errors) from tsconfig and build script; build dependency chain (db → cf → utils → ottaorm → brand-engine) to get dist types - Template app tsconfig: replace catch-all @ottabase/* source path alias with explicit mappings only for UI packages in transpilePackages; all other packages resolve via their built dist through node_modules https://claude.ai/code/session_01R1MVKojSQdAqQZUT4U6Mm7
…w pages
- Fix React duplicate key warnings in FooterMarketing (atlas + mono): change
key={link.href} → key={link.label} in section links and legal links
- Add 3 new types to ui-marketing/src/types.ts: NavbarProps, StatsSectionProps,
StepsSectionProps (with NavLink, StatItem, Step primitives)
- Add 6 new components: AtlasNavbar, AtlasStatsSection, AtlasStepsSection,
MonoNavbar, MonoStatsSection, MonoStepsSection
- Update atlas/index.ts and mono/index.ts barrels to export new components
- Update tsup.config.ts entries and package.json sub-path exports for all 6
- Refactor app/page.tsx: switch to barrel imports, extract data to shared
lib/marketing-demo-data.tsx, add Navbar + StatsSection + StepsSection
- Add /theme route: theme gallery page listing all 8 built-in brand themes
with HSL color swatches (uses THEME_PRESET_ITEMS from brand-engine)
- Add /theme/[themeName] route: server component resolves light/dark CSS vars
via buildCSSVarMap; ThemePreviewClient renders full Atlas or Mono marketing
page scoped to the selected theme and color scheme
Build: next build passes ✓, all 6 app routes generated
https://claude.ai/code/session_01R1MVKojSQdAqQZUT4U6Mm7
Introduces the ottalanding package: a structured, theme-swappable system for building landing pages. Content (hero, features, pricing, etc.) is strongly typed and stored in DB via OttaORM models. Themes are visual layers that render this content — swap like WordPress, data stays the same. - Content types: serializable, DB-ready types for all section kinds (hero, features, pricing, testimonials, FAQ, logo-cloud, CTA, stats, steps) - Theme system: LandingTheme interface, registry, section component map, page renderer — adding a new theme = one object implementing the interface - OttaORM models: LandingSite, LandingPage, LandingSection, LandingTheme with full field metadata, validation, and query helpers - Init helper and barrel exports following ottablog patterns https://claude.ai/code/session_015rv1ZTZ9tsTEkBrE1WtxVK
…s app 1. Admin form configs: Each section type (hero, features, pricing, etc.) gets purpose-built form fields via SECTION_FIELDS instead of generic JSON editors. Fields have proper labels, placeholders, and validation. 2. Table rename: All tables now prefixed with ottalanding_* (sites, pages, sections, themes) for namespace clarity. 3. Atlas + Mono themes: Both ui-marketing templates are now proper ottalanding themes. Each wraps the existing components, adapting serializable content types → React component props. 4. Next.js app integration: Homepage now uses renderPage(theme, site, page) from ottalanding. All content lives in config/landing.config.ts as strongly typed LandingSiteData. Old hardcoded demo data removed. Theme preview page updated to use ottalanding themes. Brand Engine (CSS vars) remains separate — controls visual tokens. https://claude.ai/code/session_015rv1ZTZ9tsTEkBrE1WtxVK
…as and Mono themes Add four new section types (feature-highlight, about, contact, timeline) with full type definitions, themed components for both Atlas and Mono, and integration into the ottalanding theme system. https://claude.ai/code/session_015rv1ZTZ9tsTEkBrE1WtxVK
…design - Create 15 SaaS ui-marketing components (Hero, Features, Pricing, Testimonials, FAQ, LogoCloud, CTA, Navbar, Stats, Steps, Footer, FeatureHighlight, About, Contact, Timeline) with pill buttons, soft shadows, rounded-2xl cards - Add SaaS ottalanding theme definition and register in initOttaLanding() - Add 4 new section types to Mono theme (feature-highlight, about, contact, timeline) - Update theme gallery preview to include Atlas/Mono/SaaS template toggle - Add SaaS exports to ui-marketing package.json and tsup.config.ts https://claude.ai/code/session_015rv1ZTZ9tsTEkBrE1WtxVK
…nd sections - Enable ottalanding package in migration config and DB schema - Add section field definitions for 4 new section types (feature-highlight, about, contact, timeline) to support structured admin forms - Create landing admin pages: - Sites list with create/delete - Site editor with settings tab and pages tab - Page editor with sections management (add, reorder, toggle visibility, delete) - Section content editor with type-specific forms powered by SECTION_FIELDS - Add 4 admin routes (/admin/landing, sites/$siteId, pages/$pageId, sections/$sectionId) - Add Landing Pages card to admin index dashboard - Create landingHooks.ts with typed CRUD hooks for all ottalanding entities https://claude.ai/code/session_015rv1ZTZ9tsTEkBrE1WtxVK
- Add FeatureHighlight, About, Contact, Timeline tsup entries and package.json exports for Atlas and Mono themes (were only added for SaaS) - Add @ottabase/ottalanding as dependency in tanstack app (fixes worker test) - Fix ottalanding test script to pass with no test files https://claude.ai/code/session_015rv1ZTZ9tsTEkBrE1WtxVK
Import and register ottalanding models in the worker DB init, and add AppScoped RLS entries for ottalanding_sites, ottalanding_pages, and ottalanding_sections. Add static writable definitions to LandingPage and LandingSection so parent FKs (siteId/pageId) are create-only and appId can be injected by RLS; update updateable fields accordingly. These changes enable proper row-level security, app scoping, and controlled write permissions for landing site/page/section records.
Add a LandingPreviewModal for rendering a live preview of a landing site and pages (uses @ottalanding renderPage). Wire the preview into the AdminLandingSiteEditorPage (Preview button, dialog) and export it from the landing index. Introduce homePageId everywhere: add column to landingSites schema, expose it in the LandingSite model UI, and add homePageId to the LandingSiteItem type. Use homePageId (fallback to slug "home" or first page) when choosing which page to preview. Harden list handling with Array.isArray guards for API responses and add logic to fetch sections per page for the preview. Also update next-env reference path and add a dev:homepage script to package.json.
There was a problem hiding this comment.
Pull request overview
This pull request introduces a comprehensive landing page system for Ottabase, shifting from custom-built UI to a configuration-driven, theme-based architecture. It creates two new packages (@ottabase/ui-marketing and @ottabase/ottalanding) that work together to provide reusable marketing components and a semantic content layer with a theme system.
Changes:
- Created
@ottabase/ui-marketingpackage with 15 reusable marketing components across three visual themes (Atlas, Mono, SaaS) - Created
@ottabase/ottalandingpackage providing a semantic landing page layer with ORM models, theme registry, and rendering system - Refactored Next.js homepage app to use the new packages with centralized configuration and added theme preview functionality
- Added admin UI in TanStack app for managing landing sites, pages, and sections with live preview
Reviewed changes
Copilot reviewed 104 out of 105 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
packages/ui-marketing/* |
New package with 45+ marketing components implementing Atlas, Mono, and SaaS themes |
packages/ottalanding/* |
New package providing semantic content types, theme system, ORM models, and rendering logic |
apps/ottabase-template-app-nextjs-homepage/* |
Refactored to use ottalanding package with theme gallery and preview pages |
apps/ottabase-template-app-tanstack/src/pages/admin/landing/* |
New admin UI for managing landing sites, pages, and sections |
apps/ottabase-template-app-tanstack/src/hooks/landingHooks.ts |
Model hooks for ottalanding entities |
packages/ottaorm/src/rls/registry.ts |
Added RLS policies for ottalanding models |
apps/ottabase-template-app-tanstack/ottabase/db/schema.ts |
Integrated ottalanding table schemas |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Owner
Author
|
@copilot Review this pull request, suggest. Admin UI is for tanstack main app, and themes are implemented in nextjs app. Nextjs app is yet to have the admin set data integration, so that's fine. Check rest. |
* Initial plan * fix: landing admin select option typing Co-authored-by: thinkdj <688055+thinkdj@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thinkdj <688055+thinkdj@users.noreply.github.com>
Owner
Author
|
@copilot Take latest pull from main, merge and fix conflicts if any |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a major refactor to the homepage and theme preview functionality, shifting the app from custom-built UI components to a configuration-driven, reusable landing page system powered by the
@ottabase/ottalandingpackage. It also adds a new theme gallery and theme preview pages, enabling users to browse and preview built-in brand themes across multiple templates. The changes streamline homepage rendering, centralize content and theme configuration, and enhance theme exploration.Homepage refactor and content centralization:
app/page.tsxwith therenderPagefunction from@ottabase/ottalanding, using centralized content and theme configuration fromlanding.config.ts.app/layout.tsxto source metadata (title, description, authors) fromlanding.config.ts, ensuring consistency and easier content management.Theme gallery and preview enhancements:
app/theme/page.tsx) that displays all built-in brand themes, allowing users to browse and select themes for preview.app/theme/[themeName]/page.tsx) that resolves CSS variables for both light and dark modes and renders a client-side theme preview component. (apps/ottabase-template-app-nextjs-homepage/app/theme/[themeName]/page.tsxR1-R33)ThemePreviewClient.tsxto enable interactive preview of selected themes, with toggles for template type and color scheme, using therenderPagefunction for consistent rendering. (apps/ottabase-template-app-nextjs-homepage/app/theme/[themeName]/ThemePreviewClient.tsxR1-R95)Configuration improvements:
config/brand.config.tsto source theme preset fromlanding.config.ts, separating brand styling from landing content for clearer configuration and maintainability.