# Maintenance Page | Ocelot.Social Documentation
Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

# Maintenance Page

April 5, 2026
Less than 1 minute

On This Page

- Development
- Testing & Linting
- Production Build
- Docker
- Branding
- Nginx
- Project Structure

# Maintenance Page

Static maintenance page for ocelot.social instances. Shown to users during planned downtime, returning HTTP 503 for all routes so search engines know the outage is temporary.

Built with Nuxt 4 (static generation), Tailwind CSS v4, and the @ocelot-social/ui component library. Supports 11 languages via `@nuxtjs/i18n`.

## Development

    npm install
    npm run dev        # http://localhost:3000

## Testing & Linting

    npm test           # vitest
    npm run lint       # eslint

## Production Build

The app is generated as a fully static site (`nuxt generate`) and served by nginx.

    npm run generate   # outputs to .output/public/
    npm run preview    # local preview of the static build

## Docker

Multi-stage Dockerfile:

Stage | Purpose
--- | ---
`ui-library` | Builds `@ocelot-social/ui` from `packages/ui/`
`build` | Installs deps, applies branding, runs `nuxt generate`
`development` | Hot-reload dev server (mount sources)
`production` | nginx alpine serving the static files

Build context must be the repo root so Docker can access `packages/ui/`:

    docker build -f maintenance/Dockerfile --target production -t maintenance .
    docker run -p 8080:8080 maintenance

## Branding

The Dockerfile uses `ONBUILD` instructions to overlay instance-specific branding:

- `branding/static/` — logo, favicon, and other public assets
- `branding/constants/metadata.js` — site name, description, etc.
- `branding/constants/emails.js` — contact email addresses
- `branding/locales/*.json` — translation overrides (merged via `tools/merge-locales.sh`)

## Nginx

The nginx config (`nginx/custom.conf`) returns 503 for all non-asset requests, serving `index.html` as the error page. This signals to search engines that the downtime is temporary.

## Project Structure

    maintenance/
    ├── app/              # Nuxt application source
    │   ├── assets/css/   # Tailwind & branding CSS
    │   ├── components/   # Vue components
    │   ├── constants/    # Branding constants (metadata, emails)
    │   └── plugins/      # Nuxt plugins
    ├── locales/          # i18n translation files (11 languages)
    ├── nginx/            # nginx config for production
    ├── public/           # Static assets (favicon, logo)
    └── tools/            # Build helper scripts