The Interface for the Digital Subconscious.
ODA.dream is an immersive portfolio and interactive art installation built for the web. It explores the synthesis of biological wetware and digital hardware through a unique "Blossoming Lotus" spatial navigation system.
- Node.js v18+
- npm
# 1. Clone the repository
git clone https://github.com/your-repo/oda-dream.git
# 2. Install dependencies
npm install
# 3. Generate procedural assets (Critical step!)
# Creates SVG backgrounds for nodes to prevent visual glitches
npm run assets:generate
# 4. Start Development Server
npm run devThe site uses a File-Based CMS. The database consists of Markdown files located in src/content/.
The logic automatically builds a directed graph (The Lotus) based on the Frontmatter headers in these files.
To create a new page or hub, create a .md file in src/content/ (e.g., my-new-page.md).
Frontmatter Schema:
---
id: my-page-id # Unique ID (Required). Used in URLs (?id=my-page-id)
parent: home # ID of the parent node. 'home' is the root.
title_en: My Page # English Title
title_ru: Моя Страница # Russian Title
type: content # 'hub' (folder), 'content' (article), 'action' (link), 'media'
tags: [art, code] # Keywords displayed in the footer
updated: 2024.03.20 # Page revision (YYYY.MM.DD); events use date_start (ISO)
order: 1 # (Optional) Sort order in the grid (0-8)
---
## CONTENT BODY (ENGLISH)
Write your content here using Markdown.
---RU---
## ТЕЛО КОНТЕНТА (РУССКИЙ)
Текст на русском языке пишется после разделителя.hub: A navigation folder. Displays its children in the Lotus Grid. Icon: Layers.content: A leaf node. Displays text in the reading panel. Icon: FileText.media: Opens a full-screen Lightbox immediately. Icon: Film/Image.action: A node that executes a script or opens an external link.
We support standard Markdown images and a custom "Wiki-Link" syntax for advanced media embedding (Video, Audio, YouTube).
| Type | Syntax | Description |
|---|---|---|
| Standard |  |
Standard image embedding. |
| Wiki (Simple) | ![[ https://site.com/video.mp4 ]] |
Embeds video/audio player automatically. |
| Wiki (Poster) | ![[ url | title | poster_url ]] |
Embeds video with a custom cover image. |
Example:
![[https://my-bucket.com/video.mp4 | My Art Piece | /images/covers/cover.jpg]]The interface uses a CSS Variables approach for theming, controlled by src/index.css and React Context.
Themes are defined as data attributes on the <html> tag (e.g., data-theme="dark").
The colors are semantic variables (e.g., --color-canvas, --color-hud).
-
Define Colors: Open
src/index.cssand add a new block:[data-theme="my-new-theme"] { --color-canvas: 20 20 20; /* Background RGB */ --color-surface: 30 30 30; /* Grid Cell RGB */ --color-hud: 255 255 255; /* Primary Text RGB */ --color-accent: 255 0 128; /* Highlight/Laser RGB */ /* ... copy other vars from existing themes ... */ }
-
Register Type: Open
src/types.tsand add the name to theThemetype:export type Theme = "dark" | "light" | "ocean" | "matrix" | "my-new-theme";
-
Update Logic: Open
src/context/NavigationContext.tsxand add it to the cycle array:const sequence: Theme[] = [ "dark", "light", "ocean", "matrix", "my-new-theme", ];
-
Enable Switcher: Ensure the toggle button is visible in
src/constants.ts:export const ENABLE_THEME_SWITCHER = true;
Automation tools located in scripts/.
- Purpose: Procedurally generates SVG backgrounds for all nodes defined in
src/content. - Why: Ensures every node has a unique, high-fidelity cover image even if you haven't designed one manually.
- Style: Uses the "Vibrant Art Engine" (Noise, gradients, geometric primitives).
- Purpose: Deletes all generated assets. Use this if you want to regenerate the visual style from scratch.
- Purpose: Generates a
CONTENT_TREE.mdfile in thescripts/folder. - Why: Provides a visual tree of your site structure and a manifest of all used media files. Useful for debugging "Orphaned" nodes (nodes with invalid parents).
CONTENT-SCHEMA.md— canonical card fields, provenance, and registry rules (schema wins over code).content-keeper/BACKLOG.md— known gaps between schema and parser/scripts.npm run audit— integrity check; report incontent-keeper/PHASE-F-AUDIT.md.npm run registry:sync— refreshhub-registryand org stubs fromdata/registry/.
The project is configured for static hosting (GitHub Pages, Vercel, Netlify).
npm run buildThis command:
- Generates assets.
- Compiles TypeScript.
- Builds the Vite bundle to the
dist/folder.
A workflow is included in .github/workflows/deploy.yml.
- Push code to the
mainbranch. - GitHub Actions will automatically build and deploy to your Pages URL.
Upload the contents of the dist/ folder to any static file server.
- Note: Ensure your server handles
index.htmlfallback for SPA routing if you use deep links (though this app relies primarily on query params?id=, which works universally).
© 2018 - 2026 ODA.dream | Wellness Art Tech