--- title: Demo Page Layouts dimension: things category: demo-page-layouts.md tags: connections, ontology related_dimensions: connections, events, people scope: global created: 2025-11-03 updated: 2025-11-03 version: 1.0.0 ai_context: | This document is part of the things dimension in the demo-page-layouts.md category. Location: one/things/demo-page-layouts.md Purpose: Documents one platform demo page layouts Related dimensions: connections, events, people For AI agents: Read this to understand demo page layouts. --- # ONE Platform Demo Page Layouts ## Version 1.0.0 - Page Structure Specification This document defines the complete layout structure for all ONE Platform demo pages. Every demo page follows a consistent 5-section pattern that teaches the 6-dimension ontology through interactive examples. --- ## Standard Demo Page Structure ### 5-Section Pattern (Every Page) ``` ┌─────────────────────────────────────────┐ │ SECTION 1: HERO │ Hero introduction ├─────────────────────────────────────────┤ │ SECTION 2: PLAYGROUND │ Interactive demo ├─────────────────────────────────────────┤ │ SECTION 3: CODE EXAMPLES │ Implementation patterns ├─────────────────────────────────────────┤ │ SECTION 4: RELATIONSHIP EXPLORER │ Visualize connections ├─────────────────────────────────────────┤ │ SECTION 5: CTA SECTION │ Call to action └─────────────────────────────────────────┘ ``` --- ## Section 1: Hero Section ### Purpose Introduce the dimension with a compelling headline, description, and visual hierarchy that prepares users for hands-on exploration. ### Structure ```astro
Dimension Name

The {Dimension} Layer of Reality

{One-sentence description of what this dimension represents}

``` ### Responsive Behavior | Breakpoint | Width | Padding | Font Size | | ----------------- | --------- | ---------- | ---------- | | Mobile (320px) | 100% | px-4 py-20 | 28px title | | Tablet (768px) | 100% | px-6 py-24 | 36px title | | Desktop (1024px+) | max-w-4xl | px-8 py-32 | 48px title | ### Hero Section Specifications | Element | Font Size | Line Height | Max Width | | -------------- | ------------ | ----------- | --------- | | Badge | text-sm | normal | auto | | Headline (h1) | text-4xl→6xl | 1.2 | 100% | | Subheading (p) | text-xl→2xl | 1.5 | 560px | | Button text | text-base | normal | auto | --- ## Section 2: Playground Section ### Purpose Provide **interactive, hands-on experience** with the dimension through a form + live data display pattern. ### Structure ```astro

Try It Yourself

Use the playground below to create and explore {dimension} entities in real time.

Create New {Entity}

Live Data (JSON)

{`{
  "id": "entity_123",
  "name": "Example Entity",
  "type": "thing",
  "properties": {
    "key": "value"
  },
  "createdAt": 1729880400000,
  "status": "active"
}`}

Data updates in real-time as you interact with the playground

42

Entities Created

18

Relationships

Pro Tip: Click "Create Entity" to see real-time updates in the JSON viewer on the right. Watch how the ontology captures your input.

``` ### Playground Variations by Dimension #### Groups Demo Playground ```astro
``` #### Things Demo Playground ```astro
``` ### Responsive Grid | Breakpoint | Layout | Gap | | ----------------- | --------- | --------------- | | Mobile (< 1024px) | 1 column | 6 spacing units | | Desktop (1024px+) | 2 columns | 8 spacing units | --- ## Section 3: Code Examples Section ### Purpose Show **developers exactly how** to implement features using the ontology through progressive, copy-paste-ready code examples. ### Structure ```astro

Implementation Patterns

Copy-paste ready examples for common {dimension} tasks.

Create {Entity}

TypeScript 
{`// Create a new thing in the ontology
export const create = mutation({
  args: {
    name: v.string(),
    type: v.string(),
    properties: v.any(),
  },
  handler: async (ctx, args) => {
    const thingId = await ctx.db.insert('things', {
      groupId: args.groupId,
      type: args.type,
      name: args.name,
      properties: args.properties,
      status: 'draft',
      createdAt: Date.now(),
      updatedAt: Date.now(),
    });

    // Log the creation event
    await ctx.db.insert('events', {
      groupId: args.groupId,
      type: 'thing_created',
      targetId: thingId,
      actorId: ctx.auth?.getUserIdentity()?.tokenIdentifier,
      timestamp: Date.now(),
      metadata: { entityType: args.type },
    });

    return thingId;
  },
});`}

Location: convex/mutations/things.ts

Key Points:

  • All entities stored in the things table
  • Every creation logs an event for audit trail
  • Properties field is flexible JSON
  • Status lifecycle: draft → active → published → archived
``` ### Code Example Template Each code example should include: 1. **File location** (where to put the code) 2. **Language** (TypeScript, SQL, etc.) 3. **Syntax-highlighted code** (copy-paste ready) 4. **Key points** (what to understand) 5. **Related patterns** (see also links) ### Code Themes ```css /* Light theme */ .code-light { background: hsl(var(--color-background)); color: hsl(var(--color-foreground)); border: 1px solid hsl(var(--color-border)); } /* Dark theme */ .code-dark { background: hsl(0 0% 13%); color: hsl(210 40% 98%); border: 1px solid hsl(215 16.3% 20%); } ``` --- ## Section 4: Relationship Explorer Section ### Purpose Visualize **how entities connect** through an interactive network graph that demonstrates the power of relationships in the ontology. ### Structure ```astro

Visualize Relationships

See how {dimension} entities connect and relate to each other.

Thing
Connection
Event

Selected Entity

Entity Name

Type

thing

Status

active

Created

Oct 25, 2024

Group

org_demo_123

Connected To

owns → 3 items
authored_by ← 1 item

Try: Click nodes in the graph to explore relationships.

``` ### Relationship Graph Component **Requirements:** - Interactive node-link diagram - Click nodes to select and show properties - Hover to highlight connections - Zoom and pan support (desktop) - Touch-friendly (mobile) - Legend showing connection types - Responsive canvas sizing **Libraries:** - Recommended: Vis.js, D3.js, or Three.js - Alternative: Canvas/SVG with Framer Motion ### Graph Data Structure ```typescript interface GraphData { nodes: Array<{ id: string; label: string; type: "thing" | "connection" | "event"; color: string; size: number; }>; edges: Array<{ from: string; to: string; label: string; relationship: "owns" | "authored" | "holds" | "connected"; }>; } ``` --- ## Section 5: CTA Section ### Purpose Close with a clear **call to action** and next steps to encourage user engagement. ### Structure ```astro

Ready to build with the ONE Ontology?

The playground above is just the beginning. Create your own applications with the complete ontology framework.

Get Started → Read Docs

66+

Thing Types

25+

Connection Types

6

Dimensions

``` ### CTA Variations **For "Groups" page:** ``` "Ready to organize your community?" "Create your first group and start collaborating" ``` **For "Things" page:** ``` "Ready to model your domain?" "Define your first entity type and start building" ``` **For "Connections" page:** ``` "Ready to define relationships?" "Create your first connection and discover patterns" ``` --- ## Dimension-Specific Pages ### /ontology/groups **Hero:** "The Groups Dimension - Containers for Collaboration" **Playground:** Create hierarchical groups with parent-child relationships **Examples:** 1. Create organization with child departments 2. List all groups in hierarchy 3. Move group between parents **Graph:** Show organization tree structure **CTA:** "Organize Your Community" ### /ontology/people **Hero:** "The People Dimension - Authorization & Governance" **Playground:** Assign roles (org_owner, org_user, customer, platform_owner) to people **Examples:** 1. Create user with role 2. Update user permissions 3. Query users by role **Graph:** Show role hierarchy and access patterns **CTA:** "Manage Your Team" ### /ontology/things **Hero:** "The Things Dimension - All Entities" **Playground:** Create entities (66+ types) with custom properties **Examples:** 1. Create course entity with metadata 2. Create token with balance properties 3. Create agent with capabilities **Graph:** Show entity types and their relationships **CTA:** "Model Your Domain" ### /ontology/connections **Hero:** "The Connections Dimension - Relationships Matter" **Playground:** Create relationships (25+ types) between things **Examples:** 1. Create "owns" connection with metadata 2. Create "enrolled_in" with dates 3. Create bidirectional "follows" **Graph:** Visualize connection network **CTA:** "Define Your Relationships" ### /ontology/events **Hero:** "The Events Dimension - Complete Audit Trail" **Playground:** Create events (67+ types) logging all actions **Examples:** 1. Log entity creation event 2. Log transaction event with amount 3. Log user action with timestamp **Graph:** Show event timeline **CTA:** "Track Your History" ### /ontology/knowledge **Hero:** "The Knowledge Dimension - RAG & Search" **Playground:** Create embeddings and semantic search **Examples:** 1. Create knowledge chunk with embedding 2. Search similar documents 3. Build taxonomy of topics **Graph:** Show knowledge graph connections **CTA:** "Build Your Knowledge Base" --- ## Page Layout Implementation ### Astro Page Template ```astro --- // src/pages/ontology/[dimension].astro import Layout from '../../layouts/Layout.astro'; import DemoHero from '../../components/demo/DemoHero.astro'; import DemoPlayground from '../../components/demo/DemoPlayground.astro'; import DemoCodeExamples from '../../components/demo/DemoCodeExamples.astro'; import DemoRelationshipGraph from '../../components/demo/DemoRelationshipGraph.tsx'; import DemoCTA from '../../components/demo/DemoCTA.astro'; const { dimension } = Astro.params; const dimensionData = getDimensionData(dimension); ---
``` --- ## Responsive Design Matrix | Section | Mobile | Tablet | Desktop | | ---------- | --------------------- | ------------- | ------------- | | Hero | 1-col, 20px v-padding | 1-col, 24px | 1-col, 32px | | Playground | Stack (1 col) | Stack (1 col) | 2-col grid | | Code | 1-col, scroll-x | 1-col | 1-col | | Graph | Full width | Full width | 2/3 width | | CTA | 1-col buttons | 2-col buttons | 2-col buttons | --- ## Accessibility Checklist - [ ] All headings have proper hierarchy (h1 → h2 → h3) - [ ] Form labels associated with inputs - [ ] Error messages announced - [ ] Code blocks have `lang` attribute for syntax highlighting - [ ] Images have alt text - [ ] Interactive elements have focus states - [ ] Colors meet WCAG AAA contrast - [ ] Touch targets minimum 44px height --- ## Performance Targets - **Largest Contentful Paint (LCP):** < 2.5 seconds - **Cumulative Layout Shift (CLS):** < 0.1 - **First Input Delay (FID):** < 100ms - **Lighthouse Score:** 95+ across all metrics --- ## Version History | Version | Date | Changes | | ------- | -------- | ---------------------------------- | | 1.0.0 | Oct 2024 | Initial page layout specifications | --- **Page Layouts Maintained By:** Design Agent **Last Updated:** October 25, 2024 **Status:** Production Ready