203 lines
9.1 KiB
Markdown
203 lines
9.1 KiB
Markdown
# Public Site UX Planning Document
|
|
|
|
## Design Principles
|
|
|
|
- **Simple landing page, not a full website.** The public site is a single page (with maybe an event detail modal or page). It tells visitors who the community is, what they do, when they meet, and how to join.
|
|
- **Content-driven by settings.** Everything on the page comes from the database (site settings, events, links). No hardcoded content.
|
|
- **Theme-aware.** The page renders with the site's branding settings: logo, colors, background image.
|
|
- **Fast and accessible.** Server-side rendered, minimal client JS, semantic HTML.
|
|
- **Mobile-responsive.** Many visitors will check on their phones.
|
|
|
|
---
|
|
|
|
## Homepage Layout
|
|
|
|
```
|
|
┌─────────────────────────────────────────────┐
|
|
│ NAV BAR │
|
|
│ [Logo] Site Name [Link1] [Link2] [Link3] │
|
|
├─────────────────────────────────────────────┤
|
|
│ │
|
|
│ HERO SECTION │
|
|
│ [Background Image Optional] │
|
|
│ │
|
|
│ Site Name (large heading) │
|
|
│ Tagline / Subtitle │
|
|
│ [Primary CTA Button] │
|
|
│ │
|
|
├─────────────────────────────────────────────┤
|
|
│ │
|
|
│ ABOUT / INTRO SECTION │
|
|
│ │
|
|
│ About text (from settings) │
|
|
│ │
|
|
├─────────────────────────────────────────────┤
|
|
│ │
|
|
│ NEXT EVENT SECTION │
|
|
│ (if showNextEvent is enabled) │
|
|
│ │
|
|
│ "Next Event" heading │
|
|
│ Event card with: │
|
|
│ - Title │
|
|
│ - Date/Time │
|
|
│ - Description snippet │
|
|
│ - [Event Link / Details] │
|
|
│ │
|
|
├─────────────────────────────────────────────┤
|
|
│ │
|
|
│ UPCOMING SCHEDULE SECTION │
|
|
│ (if showSchedule is enabled) │
|
|
│ │
|
|
│ "Upcoming Events" heading │
|
|
│ List of upcoming events: │
|
|
│ - Date | Title | Type │
|
|
│ - Each links to event or external │
|
|
│ │
|
|
├─────────────────────────────────────────────┤
|
|
│ │
|
|
│ SOCIAL LINKS SECTION │
|
|
│ │
|
|
│ [Discord] [Twitter] [YouTube] ... │
|
|
│ Icon + label, opens in new tab │
|
|
│ │
|
|
├─────────────────────────────────────────────┤
|
|
│ FOOTER │
|
|
│ Footer nav links │
|
|
│ "Powered by The Collective Hub" │
|
|
│ Copyright / site name │
|
|
└─────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Section Details
|
|
|
|
### Nav Bar
|
|
|
|
- **Position:** Sticky top (optional, can be static)
|
|
- **Content:**
|
|
- Site logo (or site name text if no logo)
|
|
- Site name (hidden if logo is present and preferred)
|
|
- Nav links from database (header position), ordered by `sortOrder`
|
|
- **Mobile:** Hamburger menu collapses nav links into a drawer or dropdown
|
|
- **Behavior:** External links open in new tab with `rel="noopener noreferrer"`
|
|
|
|
### Hero Section
|
|
|
|
- **Background:** Site background image (if set) with overlay/gradient for text readability. Falls back to background color.
|
|
- **Content:**
|
|
- Site name (large heading, `h1`)
|
|
- Tagline/subtitle (`p` or `h2`)
|
|
- Primary CTA button (if button text and link are set)
|
|
- **Button styling:** Uses accent color. Links to Discord invite, event page, or any URL set by admin.
|
|
- **If no hero content is set:** Section collapses or shows a minimal version with just the site name.
|
|
|
|
### About / Intro Section
|
|
|
|
- **Content:** About text from settings. Plain text or basic Markdown rendered to HTML.
|
|
- **If empty:** Section is hidden entirely.
|
|
- **Styling:** Clean typography, max-width for readability (~65ch).
|
|
|
|
### Next Event Section
|
|
|
|
- **Visibility:** Only shown if `showNextEvent` is enabled AND at least one published event exists with a future `startTime`.
|
|
- **Content:** A single event card showing the soonest upcoming event.
|
|
- Event title
|
|
- Date and time (displayed in visitor's local timezone via client-side JS)
|
|
- Short description (truncated)
|
|
- Event type badge/chip
|
|
- Location (if set)
|
|
- Link: "Event Details" → external link or internal event page
|
|
- **If no upcoming events:** Optionally show "No upcoming events — check back soon!" or hide section.
|
|
|
|
### Upcoming Schedule Section
|
|
|
|
- **Visibility:** Only shown if `showSchedule` is enabled.
|
|
- **Content:** List of upcoming published events (excluding the one shown in "Next Event" if duplicate).
|
|
- **List format:**
|
|
- Date (short format)
|
|
- Event title
|
|
- Event type icon or badge
|
|
- Optional: time, location
|
|
- **Max items:** Configurable, e.g., show next 5 events with a "View all events" link if more exist.
|
|
- **If no events:** Hide the section.
|
|
|
|
### Social Links Section
|
|
|
|
- **Visibility:** Shown if any social links exist in the database.
|
|
- **Content:** Row of icon+label links for each social platform.
|
|
- **Icons:** Simple SVG icons or icon font. Recognizable platform icons (Discord, Twitter/X, YouTube, Twitch, GitHub, etc.).
|
|
- **Behavior:** All open in new tab.
|
|
|
|
### Footer
|
|
|
|
- **Content:**
|
|
- Footer-position nav links (if any)
|
|
- Optional: "Powered by The Collective Hub" credit
|
|
- Site name / copyright
|
|
- **Styling:** Subtle, smaller text, subdued colors.
|
|
|
|
---
|
|
|
|
## Theme Rendering
|
|
|
|
The site's theme settings are applied via CSS custom properties on the root element:
|
|
|
|
```css
|
|
:root {
|
|
--color-accent: #e63946;
|
|
--color-background: #1a1a2e;
|
|
--color-text: #eaeaea;
|
|
--color-text-secondary: #b0b0b0;
|
|
--font-family: 'Inter', sans-serif;
|
|
/* derived values generated from presets if needed */
|
|
}
|
|
```
|
|
|
|
**Theme Presets:**
|
|
- **Dark:** Dark background, light text, accent color applied
|
|
- **Light:** Light background, dark text, accent color applied
|
|
- **Custom:** Owner sets each color manually
|
|
|
|
Presets provide sensible defaults for derived colors (card backgrounds, borders, muted text) so the owner only needs to pick 3 colors.
|
|
|
|
---
|
|
|
|
## States
|
|
|
|
| State | Behavior |
|
|
|-------|----------|
|
|
| **Loading** | Server-rendered, so no loading spinner on initial load. Fast. |
|
|
| **Empty site (no settings)** | Show site name from `sites` table. Everything else gracefully hidden. |
|
|
| **No events** | Hide event sections. |
|
|
| **No branding set** | Use neutral default colors (dark theme as fallback). |
|
|
| **Error (data fetch fails)** | Show a minimal page with site name. Log error server-side. Don't crash. |
|
|
| **Site deactivated** (`isActive=false`) | Show a simple "Site is currently unavailable" page with HTTP 503. |
|
|
|
|
---
|
|
|
|
## Responsive Behavior
|
|
|
|
- **Desktop (≥1024px):** Full layout as designed. Multi-column where appropriate.
|
|
- **Tablet (768-1023px):** Same layout, adjusted spacing. Nav may collapse.
|
|
- **Mobile (<768px):** Single column. Hamburger nav. Stacked sections. Larger touch targets for buttons.
|
|
|
|
---
|
|
|
|
## Performance Targets
|
|
|
|
- Server-rendered HTML (SSR) — no client-side rendering for public pages
|
|
- Minimal JavaScript — only for timezone conversion, mobile nav toggle
|
|
- Images from CDN with proper `width`/`height` and `loading="lazy"` on below-fold images
|
|
- No client-side data fetching for public pages (all data loaded server-side)
|
|
|
|
---
|
|
|
|
## What to Avoid
|
|
|
|
- **Animation-heavy designs.** Subtle transitions are fine; scroll-triggered animations are not needed.
|
|
- **Over-complicated layouts.** One column of stacked sections works well and is easy to maintain.
|
|
- **Custom fonts that hurt performance.** System font stack or a single web font (Inter) is sufficient.
|
|
- **Client-side routing for public pages.** The homepage is one page. If event detail pages are added later, they should be server-rendered too.
|
|
- **Assuming content exists.** Every section must handle the "nothing configured yet" case gracefully.
|