Overview
The gryt.chat marketing site and blog — Vite, React, and MDX
The Gryt site (packages/site) is the public-facing website at gryt.chat. It serves the landing page, feature overview, and blog.
Stack
- Vite for bundling and dev server
- React 19 with React Router for SPA routing
- MDX for blog posts (via
@mdx-js/rollupwith remark plugins) - Radix UI for accessible primitives (Dialog, Navigation Menu, Tooltip)
- CSS Modules for scoped styling with CSS custom properties
Project structure
site/
├── content/
│ └── blog/ # MDX blog posts
├── public/ # Static assets (images, videos, logo)
├── src/
│ ├── components/ # Navbar, Footer, Hero, Lightbox, etc.
│ ├── lib/
│ │ └── blog.ts # Blog post loader (Vite glob import)
│ ├── pages/ # Route components (BlogIndex, BlogPost, Home)
│ └── index.css # Global styles and CSS variables
└── vite.config.tsGetting started
cd packages/site
npm install
npm run devOpen http://localhost:5173.
Build
npm run build # production bundle → dist/
npm run preview # preview the production build locally