unyo-web/README.md

Unyo Website

Landing page and documentation website for Unyo — a simple anime streaming and manga reading desktop app.

Stack

Layer	Technology
Framework	Docusaurus 3 (React-based static site generator)
UI	React 18, CSS Modules
Styling	Custom dark purple/pink theme (Infima + custom CSS overrides)
Build	Webpack 5 (via Docusaurus)
Server	Nginx (Alpine) via Docker
Container	Multi-stage Dockerfile (Node 20 build → Nginx serve)

Project Structure

unyo-page/
├── assets/                    # Original screenshots and mascot (not used directly)
├── docker/
│   ├── Dockerfile             # Multi-stage: Node build → Nginx serve
│   └── nginx.conf             # Nginx config with SPA fallback and gzip
├── docker-compose.yml         # Production deployment config
├── .dockerignore
├── website/                   # Docusaurus project
│   ├── package.json
│   ├── babel.config.js
│   ├── docusaurus.config.js   # Site config (navbar, theme, presets)
│   ├── sidebars.js            # Docs sidebar ordering
│   ├── static/img/            # Static assets (logos, screenshots, mascot)
│   ├── src/
│   │   ├── css/
│   │   │   └── custom.css     # Purple/pink anime theme (all CSS variables)
│   │   ├── pages/
│   │   │   ├── index.js       # Landing page
│   │   │   └── index.module.css
│   │   └── components/
│   │       ├── Hero/           # Hero section with mascot + CTAs
│   │       ├── FeatureGrid/    # 6-card feature grid
│   │       └── ScreenshotGallery/ # Horizontal carousel with lightbox
│   └── docs/                  # Documentation markdown files
│       ├── intro.md
│       ├── installation.md
│       ├── getting-started.md
│       └── extensions.md

Getting Started

Prerequisites

• Node.js 20+
• npm 10+

Install Dependencies

cd website
npm install

Development Server

cd website
npm start

Opens at http://localhost:3000. Hot-reloading is enabled.

Production Build

cd website
npm run build

Output goes to website/build/. Serve locally with npm run serve.

Docker

Build and run the containerized site:

docker compose up --build

Serves at http://localhost:80.

To run in the background:

docker compose up -d --build

To stop:

docker compose down

Custom Port

Edit docker-compose.yml and change the ports mapping, e.g. "8080:80" for port 8080.

Deployment

1. Build the Docker image: docker compose build
2. Push to your VPS or use docker save / docker load
3. Run with docker compose up -d
4. Configure your reverse proxy (e.g. Caddy, Traefik) to forward to port 80

Configuration

Before deploying, update docusaurus.config.js:

• url — your production domain (currently https://unyo.dev)
• baseUrl — subpath if not deploying at root (currently /)

Static Build (No Docker)

cd website
npm run build
# Serve the build/ directory with any static file server
npx serve build

Adding Documentation

Documentation lives in website/docs/ as Markdown files.

1. Create a new Markdown file

touch website/docs/my-new-page.md

2. Add frontmatter

Every doc needs a title in its frontmatter:

---
title: My New Page
---

# My New Page

Content goes here...

3. Add it to the sidebar

Edit website/sidebars.js and add the filename (without .md) to the docs array:

const sidebars = {
  docs: [
    'intro',
    'installation',
    'getting-started',
    'extensions',
    'my-new-page',  // <-- add here
  ],
};

The order in this array determines the sidebar and previous/next navigation order.

4. Link to it from other pages

Use relative paths for internal links:

Check out [the new page](./my-new-page) for details.

Or absolute paths:

Check out [the new page](/docs/my-new-page) for details.

Using slug for custom URLs

By default, a file at docs/my-new-page.md is served at /docs/my-new-page. To change the URL, add a slug in frontmatter:

---
slug: /my-custom-url
title: My New Page
---

This makes the page available at /docs/my-custom-url instead.

Images

Place images in website/static/img/ and reference them with absolute paths:

![Alt text](/img/my-image.png)

Modifying the Theme

All theme customization lives in website/src/css/custom.css. The file uses CSS custom properties (variables) defined in two blocks:

• :root — custom Unyo variables (--unyo-*)
• html[data-theme=dark] — Docusaurus Infima overrides (--ifm-*)

The html[data-theme=dark] selector is required because Infima's default dark theme uses the same selector, and we need equal specificity for our overrides to take effect.

Key Variables

Variable	Purpose	Value
--unyo-bg	Page background	#0d0a1a
--unyo-bg-surface	Card/sidebar background	#151126
--unyo-purple	Primary purple	#a855f7
--unyo-pink	Accent pink	#ec4899
--unyo-text	Main text	#e8e0f0
--unyo-text-muted	Muted text	#9b8ec4

Landing Page Components

Component	File	Purpose
Hero	src/components/Hero/	Mascot, tagline, CTAs
FeatureGrid	src/components/FeatureGrid/	6 feature cards with icons
ScreenshotGallery	src/components/ScreenshotGallery/	Horizontal scroll carousel + lightbox
Custom footer	src/pages/index.js	Inline footer (not Docusaurus default)

License

This website is part of the Unyo project. See the Unyo repository for license information.