This project is a recreation of the official ChibiMation website and is documented here as an implementation replica rather than the canonical upstream site source.

Marketing website for ChibiMation, built with Vue 3, TypeScript, Vite, and Vue Router. The site is a small content-driven SPA with three primary surfaces:

• a landing page with pre-registration CTA and latest-news highlight
• a news index and individual news posts sourced from Markdown files
• a creator program page with a promotional infographic

• Vue 3 with <script setup> single-file components
• TypeScript in strict mode
• Vite for local development and production builds
• Vue Router for client-side routing
• gray-matter + marked via a custom Vite plugin to turn Markdown news files into HTML at build time
• Bun lockfile present, but standard Vite scripts are package-manager agnostic

Install dependencies with your preferred package manager.

bun install

Run the development server:

bun run dev

Build for production:

bun run build

Preview the production build locally:

bun run preview

Equivalent npm run, pnpm, or yarn commands will also work because the scripts are defined in package.json.

The router is defined in src/router/index.ts.

Document titles are updated after each route change using the route meta title plus the default ChibiMation title.

• src/main.ts mounts the Vue app, installs the router, and loads global styles.
• src/App.vue is intentionally thin and renders only <RouterView />.

• src/components/AppHeader.vue provides the fixed navigation header with landing and brand variants.
• src/components/AppFooter.vue provides the footer, social links, Discord CTA, and return-to-top anchor.
• src/composables/useScrollReveal.ts attaches an IntersectionObserver to .reveal elements so sections animate in as they enter the viewport.

src/pages/HomePage.vue is the main marketing page. It:

• loads the current pre-registration count
• opens src/components/PreRegModal.vue for signups
• highlights the most recent news article via src/components/FeaturedNews.vue
• renders social links from src/data/socials.ts

News content is file-based.

1. Markdown files live in src/content/news/*.md.
2. src/plugins/vite-plugin-markdown.ts parses frontmatter with gray-matter and converts Markdown body content to HTML with marked.
3. src/data/news.ts eagerly imports all news modules with import.meta.glob, normalizes them into typed article objects, and exposes helper functions:
   • findArticleBySlug()
   • formatNewsDate()
   • getLatestArticle()
   • getSortedArticles()
4. src/pages/NewsPage.vue renders the article grid with src/components/NewsCard.vue.
5. src/pages/NewsPostPage.vue resolves the article by slug and injects the generated HTML with v-html.

If a news article frontmatter includes videoUrl, the news post page attempts to convert common YouTube URL formats into an embeddable player URL.

src/pages/CreatorProgramPage.vue renders a static infographic-driven page with an "Application opening soon" message.

Create a new Markdown file in src/content/news/ with frontmatter like this:

---
title: Example Update
slug: example-update
publishedAt: "2026-03-17"
excerpt: Short summary shown on cards and article headers.
coverImage: /assets/images/example.png
coverAlt: Accessible description of the cover artwork
videoUrl: https://youtu.be/example
videoCaption: Optional caption for the embedded or linked video
---

## Heading

Body copy here.

• title
• slug
• publishedAt
• excerpt
• coverImage
• coverAlt

• videoUrl
• videoCaption

• slug becomes the /news/:slug route segment, so it should remain URL-safe and stable after publishing.
• publishedAt is sorted using the JavaScript Date constructor. Use ISO-like date strings such as YYYY-MM-DD.
• Markdown body content is converted to HTML at build time.
• Raw HTML inside Markdown is supported and currently used for media blocks such as <figure> and <video>.

• Global tokens, fonts, layout variables, and reveal animation utilities live in src/styles/global.css.
• Branded imagery, icons, and fonts are stored under src/assets/.
• Static public assets such as the web manifest live under public/.
• Several page backgrounds reference @/assets/images/skyscraper_background.png.

.
|- public/
|  |- assets/
|  \- site.webmanifest
|- src/
|  |- assets/
|  |- components/
|  |- composables/
|  |- content/
|  |  \- news/
|  |- data/
|  |- pages/
|  |- plugins/
|  |- router/
|  |- styles/
|  |- App.vue
|  \- main.ts
|- _production-archive/
|- env.d.ts
|- index.html
|- package.json
|- tsconfig.json
\- vite.config.ts

• Path alias @ resolves to src/ in vite.config.ts and tsconfig.json.
• TypeScript is configured in strict mode with noUnusedLocals and noUnusedParameters enabled.
• _production-archive/ contains older built/static artifacts and is not part of the active source app.
• dist/ is generated output and can be rebuilt from source.
• The landing page includes an <audio> element for background music, but its src is currently empty, so that feature is effectively disabled until an asset URL is supplied.

At the time this README was written, the codebase structure and behavior were reviewed directly from source. There is no automated test suite configured in the repository, so the main verification path is a production build.