add claude
This commit is contained in:
parent
dea75dcaf8
commit
6c3ae5da84
@ -8,7 +8,9 @@
|
||||
"Bash(curl -sLo vineyard-hills.jpg \"https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=82\")",
|
||||
"Bash(curl -sLo news-catena.jpg \"https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80\")",
|
||||
"Bash(curl -sLo news-italy.jpg \"https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80\")",
|
||||
"Bash(awk '{print $5, $9}')"
|
||||
"Bash(awk '{print $5, $9}')",
|
||||
"Bash(curl -sLo /Users/lexx/Projects/2026/dp-trade-UI-kit/src/js/analytics.js \"https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js\")",
|
||||
"Bash(python3 -c \"import json,sys; d=json.load\\(sys.stdin\\); print\\(json.dumps\\(d.get\\('scripts',{}\\),indent=2\\)\\); print\\('deps:',list\\(d.get\\('dependencies',{}\\).keys\\(\\)\\)\\); print\\('devDeps:',list\\(d.get\\('devDependencies',{}\\).keys\\(\\)\\)\\)\")"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
112
CLAUDE.md
112
CLAUDE.md
@ -10,27 +10,32 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
|
||||
|
||||
Static HTML/CSS UI-kit and page prototypes for **DP Trade** — a B2B wine wholesale catalog (wine-dp-trade.ru). The output of this project is handed off to **WordPress/Elementor** for production deployment. See `docs/elementor-token-handoff.md` for the full Elementor migration guide.
|
||||
|
||||
Design audit and V2 requirements are documented in `docs/design-audit-followup.md`.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
# Dev server (11ty with live reload)
|
||||
npm run dev # http://localhost:8080
|
||||
# Dev server (11ty with live reload) — port 8088 per .claude/launch.json
|
||||
npm run dev
|
||||
|
||||
# Production build → _site/
|
||||
npm run build
|
||||
```
|
||||
|
||||
Dev server config is also saved in `.claude/launch.json` for use with `preview_start`.
|
||||
Dev server config is saved in `.claude/launch.json` for use with `preview_start`. The named config is `"11ty dev server (live reload)"` on port 8088.
|
||||
|
||||
No test or lint tooling exists — the only npm scripts are `dev` and `build`, and the sole dependency is `@11ty/eleventy`. `npm run dev` runs `eleventy --serve`; the port is not hardcoded in the script and comes from `.claude/launch.json` (8088). Eleventy config lives in `.eleventy.js` (ESM `export default`).
|
||||
|
||||
## Architecture
|
||||
|
||||
### CSS layer (single dependency direction)
|
||||
|
||||
```
|
||||
css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows)
|
||||
↓
|
||||
css/site.css ← all page styles, imports tokens.css
|
||||
css/ui-kit.css ← design system showcase styles, standalone
|
||||
src/css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows)
|
||||
↓
|
||||
src/css/site.css ← all page styles (references ../assets/images/ for backgrounds)
|
||||
src/css/ui-kit.css ← design system showcase, standalone
|
||||
src/css/v2.css ← V2 design overrides, loaded on every page after site.css
|
||||
```
|
||||
|
||||
Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.css`.
|
||||
@ -41,60 +46,99 @@ Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.cs
|
||||
src/
|
||||
_includes/
|
||||
layouts/
|
||||
base.njk ← HTML shell: <head>, fonts, CSS link, <body class="{{ bodyClass }}">
|
||||
default.njk ← base + header partial + footer partial (used by all site pages)
|
||||
ui-kit.njk ← base only, no header/footer (used by ui-kit page)
|
||||
base.njk ← HTML shell: <head>, CSS links, analytics, design-switcher.js
|
||||
default.njk ← base + header + footer (used by all site pages)
|
||||
ui-kit.njk ← base only, no header/footer
|
||||
partials/
|
||||
header.njk ← full site header with mega-menu nav
|
||||
footer.njk ← full site footer
|
||||
css/ ← passthrough copy → _site/css/
|
||||
assets/ ← passthrough copy → _site/assets/
|
||||
header.njk ← mega-menu nav — edit here, propagates to all pages
|
||||
footer.njk ← footer — edit here, propagates to all pages
|
||||
css/ ← passthrough → _site/css/
|
||||
js/ ← passthrough → _site/js/
|
||||
assets/ ← passthrough → _site/assets/
|
||||
fonts/ ← passthrough → _site/fonts/ (all WOFF2, local, no CDN)
|
||||
*.njk ← one file per page
|
||||
```
|
||||
|
||||
### Page front matter
|
||||
### Pages
|
||||
|
||||
Every page declares layout, title, optional bodyClass, and permalink:
|
||||
| Permalink | Source |
|
||||
|---|---|
|
||||
| `/` | `index.njk` |
|
||||
| `/catalog.html` | `catalog.njk` |
|
||||
| `/product.html` | `product.njk` |
|
||||
| `/about.html` | `about.njk` |
|
||||
| `/contacts.html` | `contacts.njk` |
|
||||
| `/contacts-auth.html` | `contacts-auth.njk` |
|
||||
| `/news-villa-raiano.html` | `news-villa-raiano.njk` |
|
||||
| `/news-villa-raiano-v2.html` | `news-villa-raiano-v2.njk` |
|
||||
| `/article-guidelines.html` | `article-guidelines.njk` |
|
||||
| `/bottle-cards.html` | `bottle-cards.njk` |
|
||||
| `/product-card-white.html` | `product-card-white.njk` |
|
||||
| `/ui-kit.html` | `ui-kit.njk` (layout: ui-kit, css: ui-kit) |
|
||||
|
||||
Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines.
|
||||
|
||||
### Page front matter
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "DP Trade — Catalog"
|
||||
layout: default # or "ui-kit" for the design system page
|
||||
bodyClass: compact-type # omit if not needed
|
||||
permalink: /catalog.html # keeps flat output, preserves relative CSS paths
|
||||
layout: layouts/default # or "layouts/ui-kit" for the design system page
|
||||
bodyClass: compact-type # omit if not needed
|
||||
permalink: /catalog.html # keeps flat output, preserves relative CSS paths
|
||||
---
|
||||
```
|
||||
|
||||
Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines.
|
||||
The `ui-kit` page uses `layout: ui-kit` and `css: ui-kit` (links `ui-kit.css` instead of `site.css`).
|
||||
|
||||
### CSS paths
|
||||
|
||||
All CSS and JS paths in `base.njk` are **relative** (`css/site.css`, `js/inspector.js`). This works both with the 11ty dev server and when opening `_site/` files directly via `file://`.
|
||||
All CSS, JS, and image paths in `base.njk` are **relative**. CSS background-images in `site.css` reference `../assets/images/` (relative to `_site/css/`). HTML templates reference `assets/images/` (relative to `_site/` root). This works with the 11ty dev server and when opening `_site/` via `file://`.
|
||||
|
||||
### Design tokens
|
||||
All images and fonts are local — no external CDN dependencies.
|
||||
|
||||
Key CSS custom properties defined in `css/tokens.css`:
|
||||
### Design tokens (V1 baseline)
|
||||
|
||||
Key CSS custom properties in `src/css/tokens.css`:
|
||||
|
||||
- Colors: `--color-primary-wine-100` (#4b0f24), `--color-accent-gold` (#b9965b), `--color-accent-blue` (#1f3476)
|
||||
- Fonts: `--font-heading` (Montserrat 800), `--font-body` (Inter), `--font-heading-classic` (Playfair Display)
|
||||
- Container: `--container: 1240px`
|
||||
|
||||
When adding new tokens, add to `tokens.css` and mirror to the Elementor CSS layer in `docs/elementor-token-handoff.md` (Section 6).
|
||||
When adding tokens, add to `tokens.css` and mirror to `docs/elementor-token-handoff.md` (Section 6).
|
||||
|
||||
### V2 design system
|
||||
|
||||
V2 is a progressive enhancement overlay triggered by `data-design-version="v2"` on `<html>`. Preference is stored in `localStorage` (`dp-design-version`). The toggle button (`design-toggle__btn`) appears in the main nav and UI-kit sidebar.
|
||||
|
||||
**How V2 works:**
|
||||
- `src/css/tokens.css` — overrides under `:root[data-design-version="v2"]`: burgundy `#7D021D`, warm bg `#FFFDFA`, card bg `#F5F0E8`, Cormorant Garamond + Manrope fonts
|
||||
- `src/css/v2.css` — scoped rules under `[data-design-version="v2"]` removing uppercase, reducing weights, styling breadcrumbs, outlined CTAs, editorial typography
|
||||
- `src/js/design-switcher.js` — applies the attribute on load and on toggle; also injects split phone/email fields and form success state on contacts page
|
||||
|
||||
Breadcrumbs on `product.html` are static markup tagged `data-v2-only="breadcrumbs"` — hidden in V1 via CSS, no JS needed.
|
||||
|
||||
### Responsive breakpoints
|
||||
|
||||
Defined at the bottom of `css/site.css`:
|
||||
Defined at the bottom of `src/css/site.css`:
|
||||
|
||||
- `@media (max-width: 1080px)` — tablet
|
||||
- `@media (max-width: 720px)` — mobile
|
||||
|
||||
### JS utilities
|
||||
|
||||
| File | Purpose |
|
||||
|---|---|
|
||||
| `src/js/design-switcher.js` | V1/V2 toggle, localStorage persistence, V2 DOM enhancements |
|
||||
| `src/js/inspector.js` | Click-to-inspect overlay: shows computed styles and resolved design tokens (`--color-*`, `--font-*`, etc.) for any element. Toggle with Alt+I. |
|
||||
| `src/js/analytics.js` | Privacy-friendly Plausible analytics (local copy) |
|
||||
|
||||
## Key files
|
||||
|
||||
| File | Purpose |
|
||||
| ----------------------------------- | ------------------------------------------------------------ |
|
||||
| `css/tokens.css` | Single source of truth for all design values |
|
||||
| `docs/elementor-token-handoff.md` | Guide for migrating tokens/components to WordPress Elementor |
|
||||
| `.claude/launch.json` | Dev server configurations |
|
||||
| `src/_includes/partials/header.njk` | Mega-menu navigation — edit here, propagates to all pages |
|
||||
| `src/_includes/partials/footer.njk` | Footer — edit here, propagates to all pages |
|
||||
| File | Purpose |
|
||||
|---|---|
|
||||
| `src/css/tokens.css` | Single source of truth for all design values |
|
||||
| `src/css/v2.css` | V2 editorial design overrides |
|
||||
| `docs/design-audit-followup.md` | Designer audit breakdown and V2 implementation plan |
|
||||
| `docs/elementor-token-handoff.md` | Migration guide to WordPress/Elementor |
|
||||
| `.claude/launch.json` | Dev server config for preview_start |
|
||||
| `src/_includes/partials/header.njk` | Mega-menu navigation |
|
||||
| `src/_includes/partials/footer.njk` | Site footer |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user