homepage/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Personal homepage for vakhrushev.me — a static site built with Astro 5, Tailwind CSS 4, and Vue 3. Russian-language content. All development runs inside Docker containers; npm is not used on the host.

Commands

All commands use Taskfile and run through Docker:

• task build-docker — build the Node Docker image (required first-time setup)
• task install — install npm dependencies (inside Docker)
• task dev — start dev server at http://localhost:4321
• task build-prod — production build (outputs to dist/)
• task deploy — full deploy pipeline: build → Docker nginx image → Ansible to server
• task npm -- <args> — run arbitrary npm commands inside Docker

Architecture

Static site generator: Astro 5 with MDX, Vue, and Sitemap integrations. Tailwind CSS 4 via Vite plugin.

Layouts (three-level hierarchy):

• BaseLayout.astro — HTML shell, meta tags, Google Fonts, Yandex Metrika
• InternalLayout.astro → extends BaseLayout, adds navigation and page container
• ArticleLayout.astro → extends InternalLayout, adds article title and date

Content: Articles live in src/content/articles/ as .md/.mdx files. Date is parsed from filename (YYYY-MM-DD-slug.md), not stored in frontmatter. Schema defined in src/content.config.ts.

Pages: src/pages/ — index, articles list, [slug] dynamic article pages, gallery, 404, RSS feed (rss.xml.ts).

Interactive component: PredictorDemo.vue — Vue 3 island (client:visible) embedded in the predictor article via MDX. Uses @anwinged/predictor package.

Utilities: src/utils/articles.ts — parseDateFromId() extracts date from article filename ID.

Styles: src/styles/global.css — Tailwind 4 with custom theme (PT Serif font, 740px content width, GitHub-inspired colors).

Deployment

Production builds into a Docker nginx image (docker/Dockerfile.nginx.prod), deployed via Ansible from a separate pet-project-server repo. The deploy task tags images with git-hash-timestamp.