Onvu (On-View) is a developer-focused, multi-locale website template that combines a structured portfolio homepage with an interconnected digital knowledge garden. Built with Next.js 15, TypeScript, Tailwind CSS, and Zustand, it provides a high-performance, responsive layout designed to serve as a customizable personal space.

• Dual-Mode System: A clean, single-page resume portfolio (work history, project list, education, featured writings) combined with a deep knowledge garden.
• Interactive Three-Panel Garden: A tabbed note workspace featuring a collapsible navigation/search explorer, a center note view with scroll-restored tab states, and a collapsible tools panel displaying backlinks, table of contents, series navigation, and localized graph visualization.
• Automatic Asset Pipeline: Relative image/video references in markdown files are captured at build time, content-hashed for cache-busting, resized to multiple responsive widths, compressed into WebP, and outputted directly to public/notes-assets/.
• Global & Local Graph Views: Interactive, force-directed knowledge graph visualizations utilizing canvas-based rendering to show note connections (2-hop neighborhood views on individual notes, and full-screen visualization globally).
• Fuzzy Search & Command Palette: Interactive keyboard-driven palette (/ or double Shift) synchronized with browser query parameters, enabling deep search across writing content, themes, and locale switching.
• Persistent Themes: Seamless switching across five states (Light, Dark, Warm, Forest, and System) with zero flash of unstyled content (FOUC).
• Multi-Locale: English, German, and Ukrainian localizations supported out-of-the-box, generating locale-prefixed routes, localized sitemaps, metadata tags, and per-locale RSS feeds.
• Rich Markdown Support: LaTeX, Mermaid, WikiLinks, Videos, Image Carousels and many more!

# Clone the repository
git clone https://github.com/y9vad9/onvu.git my-site
cd my-site

# Rename remotes to pull upstream updates easily
git remote rename origin upstream
git remote add origin https://github.com/your-username/my-site.git

# Install dependencies and start the development server
npm install
npm run dev

• npm run dev - Start local Next.js development server.
• npm run build - Compile the dynamic production bundle for server hosting.
• npm run build:static - Compile the static export (out/ directory) for CDNs/Cloudflare Pages.
• npm run start - Run the production-built Next.js server locally.
• npm run lint - Lint the codebase.
• npm run test - Run Vitest unit and integration suites.
• npm run typecheck - Verify TypeScript compiler checks.

To ensure your custom content is protected when fetching upstream changes, Onvu uses .gitattributes configured with merge=ours. Edits to the following files will never be overwritten by upstream merges:

Notes are written in Markdown with YAML frontmatter. Frontmatter fields direct layout behavior, category groups, and sorting:

---
title: "Understanding Kotlin Coroutines"
preview: "A beginner's guide to suspend functions, scopes, and context dispatchers."
date: 2024-03-01
parents: ["Kotlin", "Backend"]
series: "Kotlin Coroutines"
order: 1
archived: false
epic: true
coverImage: "./sample-colocated.png"
---

• parents: An array of categories/tags used for filtering and search index categorization.
• series & order: Groups notes together into a sequential course or series with back/next navigation.
• archived: Set to true to flag notes as archived (displays an amber badge).
• epic: Set to true to highlight the note inside the garden dashboard's main category cards.
• coverImage: Relates to a co-located image (e.g., ./image.png) or a shared path in content/assets/.

Notes can reference images and videos using standard Markdown/HTML relative syntax.

At build time:

1. Primitives parse Markdown/MDX ASTs to locate local media paths.
2. Found images are read and processed using Sharp, generating responsive webp sizes (480w, 800w, 1280w, 1920w).
3. Compressed assets are written with content-addressed filenames into /public/notes-assets/.
4. This directory (/public/notes-assets/) is git-ignored, meaning you never check bloated production WebP files into version control. Keep only your source images in the content folder.

Set the following environment variable so sitemaps, RSS feeds, and canonical URLs resolve correctly in production:

NEXT_PUBLIC_BASE_URL=https://yourdomain.com

Onvu can be deployed to Vercel, Netlify, or any platform that supports Next.js or static export.

Onvu can be built as a fully static application that can be hosted on Cloudflare Pages, GitHub Pages, or any CDN.

When deploying statically, use the command npm run build:static (pre-configured in .github/workflows/deploy.yml). This command:

1. Temporarily moves the server-only dynamic /api routes out of the Next.js compilation folder during the build to satisfy Next's static export requirements.
2. Directs the frontend client (via NEXT_PUBLIC_ONVU_MODE=static) to load all search indexes and knowledge graph data from pre-built, static JSON snapshots emitted under public/_static/.

A ready-to-go GitHub Actions workflow is included at .github/workflows/deploy.yml.

1. Add repository secrets

In your GitHub repository, go to Settings → Secrets and variables → Actions and add:

2. Update the project name

In .github/workflows/deploy.yml, change the --project-name value in the Wrangler command to match your Cloudflare Pages project name:

command: pages deploy out --project-name=your-project-name

3. Enable automatic deploys on push

By default, the workflow only runs when triggered manually (via Actions → Deploy to Cloudflare Pages → Run workflow). To automate it on every push to main, open .github/workflows/deploy.yml and uncomment the push trigger block at the top of the file.

To pull new features, bug fixes, and engine updates from the main template:

git fetch upstream
git merge upstream/main

Because of the merge=ours policies in .gitattributes, your files under content/ and site.config.ts will merge cleanly without risk of loss.