90 lines
3.7 KiB
Markdown
90 lines
3.7 KiB
Markdown
|
# CLAUDE.md
|
||
|
|
|
||
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
|
|
||
|
|
## Project Overview
|
||
|
|
|
||
|
|
Static website for Vandevliet Aerial Shots (drone videography business), built with plain HTML, SCSS, and vanilla JavaScript. Uses Apache-style Server Side Includes (SSI) via Nginx for templating — there is no backend framework or static site generator.
|
||
|
|
|
||
|
|
## Build & Dev Commands
|
||
|
|
|
||
|
|
Package manager is **pnpm** (v10.11.0).
|
||
|
|
|
||
|
|
```sh
|
||
|
|
pnpm run build # Full build: Sass → PostCSS autoprefixer → Terser JS minify
|
||
|
|
pnpm run css-compile # Sass only
|
||
|
|
pnpm run css-prefix # PostCSS autoprefixer only
|
||
|
|
pnpm run js-minify # Terser JS minify only
|
||
|
|
pnpm run server # Start local Nginx container (docker compose up -d)
|
||
|
|
pnpm start # Build + start server
|
||
|
|
```
|
||
|
|
|
||
|
|
Lint JavaScript:
|
||
|
|
```sh
|
||
|
|
pnpm exec eslint src/js/
|
||
|
|
```
|
||
|
|
|
||
|
|
Local dev server runs at **http://localhost:8080** via Docker (nginx:stable-alpine with SSI enabled).
|
||
|
|
|
||
|
|
## Architecture
|
||
|
|
|
||
|
|
### SSI Templating
|
||
|
|
|
||
|
|
Pages use Nginx SSI directives for composition. Variables are set per page and consumed by shared includes:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!--# set var='title' value='Page Title' -->
|
||
|
|
<!--# set var='description' value='Meta description' -->
|
||
|
|
<!--# include file='/includes/partials/head-content.html' -->
|
||
|
|
```
|
||
|
|
|
||
|
|
### Routing
|
||
|
|
|
||
|
|
Nginx `try_files` resolves URLs without extensions: `/vastgoed` → `pages/vastgoed.html`. The `/includes/` directory is marked `internal` and not directly accessible.
|
||
|
|
|
||
|
|
### Directory Layout
|
||
|
|
|
||
|
|
- `public/` — All served files (HTML pages, compiled assets, static media)
|
||
|
|
- `includes/components/` — Reusable UI components (nav, contact row)
|
||
|
|
- `includes/partials/` — Layout fragments (head, footer)
|
||
|
|
- `includes/pricing/` — Pricing card components
|
||
|
|
- `pages/` — Service sub-pages (routed via Nginx)
|
||
|
|
- `assets/css/` — Compiled CSS (do not edit, generated from src)
|
||
|
|
- `assets/js/` — Compiled JS (do not edit, generated from src)
|
||
|
|
- `assets/static/` — Images, videos, PDFs
|
||
|
|
- `src/scss/styles.scss` — Master stylesheet (imports Bootstrap + custom styles)
|
||
|
|
- `src/js/scripts.js` — All client-side JavaScript
|
||
|
|
|
||
|
|
### Styling
|
||
|
|
|
||
|
|
Bootstrap 5.3.8 customized via SCSS variables. Primary color overridden to `#cc2929`. Custom fonts: Century Gothic (headers) and Eras ITC (subheaders) loaded from `assets/font/`. Notable custom CSS: parallax scrolling, navbar transparency with scroll detection, grayscale image hover effects, anchor link generation.
|
||
|
|
|
||
|
|
### JavaScript
|
||
|
|
|
||
|
|
Single source file (`src/js/scripts.js`) with vanilla ES6+. Handles parallax scrolling, mobile nav collapse, auto-generated anchor links, and scroll-state tracking. No frameworks or module bundler.
|
||
|
|
|
||
|
|
## Code Style
|
||
|
|
|
||
|
|
### JavaScript (ESLint enforced)
|
||
|
|
|
||
|
|
- **Allman brace style** (opening brace on its own line)
|
||
|
|
- 2-space indentation, single quotes, always semicolons
|
||
|
|
- Unix line endings (`\n`), no trailing whitespace, no final newline (`eol-last: ["error", "never"]`)
|
||
|
|
- Arrow functions preferred, `const` preferred, no `var`
|
||
|
|
- Template literals preferred over string concatenation
|
||
|
|
- Trailing commas in multiline constructs (`comma-dangle: always-multiline`)
|
||
|
|
|
||
|
|
### HTML
|
||
|
|
|
||
|
|
- Semantic HTML5 with Schema.org microdata (FAQPage markup)
|
||
|
|
- OpenGraph meta tags on all pages
|
||
|
|
- SSI variables for per-page title/description
|
||
|
|
|
||
|
|
## CI/CD
|
||
|
|
|
||
|
|
GitHub Actions workflow (`.github/workflows/build-and-deploy.yml`) runs `pnpm run build`, appends version query strings for cache busting, minifies HTML, then deploys to Nginx. Version format: `YYMM.DD.HHMMSS`. Git LFS is used for `.mp4` video files.
|
||
|
|
|
||
|
|
## Nginx Config
|
||
|
|
|
||
|
|
Located at `.volumes/nginx/conf/conf.d/default.conf`. SSI is enabled (`ssi on`). The config defines rewrite rules and internal locations — changes here affect routing behavior.
|