Update CLAUDE.md: local images, favicons, Matomo, Maps
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
48
CLAUDE.md
48
CLAUDE.md
@@ -13,15 +13,21 @@ Requires Node.js and Google Chrome installed locally. Close the PDF in any viewe
|
|||||||
```
|
```
|
||||||
node generate-pdf.js
|
node generate-pdf.js
|
||||||
```
|
```
|
||||||
The script uses `puppeteer-core` with the system Chrome at `C:\Program Files\Google\Chrome\Application\chrome.exe`. If Chrome moves, update `executablePath` in `generate-pdf.js`.
|
The script uses `puppeteer-core` with the system Chrome at `C:\Program Files\Google\Chrome\Application\chrome.exe`. If Chrome moves, update `executablePath` in `generate-pdf.js` and `generate-favicons.js`.
|
||||||
|
|
||||||
|
### Regenerate favicons
|
||||||
|
```
|
||||||
|
node generate-favicons.js
|
||||||
|
```
|
||||||
|
Reads `favicon.svg` and exports `favicon-16x16.png`, `favicon-32x32.png`, and `apple-touch-icon.png` via puppeteer. Run this whenever `favicon.svg` changes.
|
||||||
|
|
||||||
### Build and run via Docker
|
### Build and run via Docker
|
||||||
```
|
```
|
||||||
docker compose up --build -d # build image and start on port 3080
|
docker compose up --build -d # build image and start on port 8082
|
||||||
docker compose down # stop
|
docker compose down # stop
|
||||||
```
|
```
|
||||||
|
|
||||||
### Install Node deps (only needed to regenerate the PDF locally)
|
### Install Node deps (only needed to regenerate the PDF or favicons locally)
|
||||||
```
|
```
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
@@ -29,27 +35,37 @@ npm install
|
|||||||
## Architecture
|
## Architecture
|
||||||
|
|
||||||
```
|
```
|
||||||
index.html ← entire website (HTML + CSS + JS, no external assets)
|
index.html ← entire website (HTML + CSS + JS)
|
||||||
infosheet-template.html ← HTML source rendered to PDF by Puppeteer
|
images/ ← all portfolio photos, self-hosted (15 JPEGs)
|
||||||
generate-pdf.js ← Node script: opens template in Chrome → exports A4 PDF
|
favicon.svg ← master favicon (M monogram, green #99cc00 bg)
|
||||||
|
favicon-16x16.png ← ┐
|
||||||
|
favicon-32x32.png ← ├ generated from favicon.svg via generate-favicons.js
|
||||||
|
apple-touch-icon.png ← ┘
|
||||||
|
infosheet-template.html ← HTML source rendered to PDF by Puppeteer
|
||||||
|
generate-pdf.js ← Node script: opens template in Chrome → exports A4 PDF
|
||||||
|
generate-favicons.js ← Node script: renders favicon.svg → PNG at 3 sizes
|
||||||
marszalek-architekten-infosheet.pdf ← pre-generated output; committed to repo
|
marszalek-architekten-infosheet.pdf ← pre-generated output; committed to repo
|
||||||
nginx.conf ← serves index.html + PDF; sets caching & download headers
|
nginx.conf ← caching, gzip, PDF download header
|
||||||
Dockerfile ← nginx:alpine, copies index.html + PDF + nginx.conf
|
Dockerfile ← nginx:alpine; copies all static assets
|
||||||
docker-compose.yml ← single service, host port 3080 → container port 80
|
docker-compose.yml ← single service, host port 8082 → container port 80
|
||||||
```
|
```
|
||||||
|
|
||||||
### PDF workflow
|
### PDF workflow
|
||||||
`infosheet-template.html` is a self-contained 2-page A4 HTML document styled for print (mm units, `print-color-adjust: exact`, `page-break-after: always` between pages). `generate-pdf.js` loads it via a `file:///` URL in headless Chrome, waits 1.5 s for Google Fonts, then calls `page.pdf()`. The output PDF is committed directly — Docker does **not** regenerate it at build time.
|
`infosheet-template.html` is a self-contained 2-page A4 HTML document (mm units, `print-color-adjust: exact`, `page-break-after: always` between pages). `generate-pdf.js` loads it via a `file:///` URL in headless Chrome, waits 1.5 s for Google Fonts, then calls `page.pdf()`. The output PDF is committed — Docker does **not** regenerate it at build time.
|
||||||
|
|
||||||
### Website structure
|
### Website structure
|
||||||
`index.html` is a single-page site with five anchor-linked sections: `#home` (hero), `#projekte` (portfolio grid with JS category filter), `#leistungen` (services), `#ueber-uns` (team), `#kontakt` (contact + download banner). All portfolio images load directly from the original WordPress CDN at `marszalekarchitekten.at`. Google Fonts (Cormorant Garamond + Inter) are loaded from `fonts.googleapis.com`.
|
`index.html` is a single-page site with five anchor-linked sections: `#home` (hero), `#projekte` (portfolio grid with JS category filter), `#leistungen` (services), `#ueber-uns` (team), `#kontakt` (contact + Google Maps iframe + PDF download banner). Portfolio images are served from the local `images/` folder — **do not revert to the WordPress CDN URLs**, as the WordPress server blocks hotlinking on mobile. Google Fonts (Cormorant Garamond + Inter) are the only remaining external dependency.
|
||||||
|
|
||||||
|
### Third-party integrations
|
||||||
|
- **Analytics**: Matomo at `analytics.stranto.com`, site ID `3` — snippet is in `<head>` of `index.html`.
|
||||||
|
- **Map**: Google Maps iframe embed (no API key) in the `#kontakt` section, centred on `48.1176923, 16.2631144` (Elisabethstraße 14, Perchtoldsdorf).
|
||||||
|
|
||||||
### Brand colours
|
### Brand colours
|
||||||
- Green accent: `#99cc00` (matches original site — used in nav bar and PDF header)
|
- Green accent: `#99cc00` — nav bar background, PDF header, favicon background
|
||||||
- Near-black: `#0f0f0f`
|
- Near-black: `#0f0f0f` — body text, footer, favicon M lettermark
|
||||||
- The green is defined in `index.html` as the nav `background` and hardcoded in `infosheet-template.html` as `--green: #99cc00`.
|
- Grey-mid: `#999` — used for secondary labels; defined as `--grey-mid` in `index.html`
|
||||||
|
|
||||||
## Deployment (Portainer)
|
## Deployment (Portainer)
|
||||||
Add a stack pointing at `https://git.stranto.com/cgasser/web_marszalekarchitekten`, branch `master`. Portainer pulls the repo and runs `docker compose up`. The site is available on the host at port **8082**.
|
Stack points at `https://git.stranto.com/cgasser/web_marszalekarchitekten`, branch `master`. Site is available on the host at port **8082**.
|
||||||
|
|
||||||
When content changes: edit `index.html` and/or `infosheet-template.html`, regenerate the PDF locally with `node generate-pdf.js`, commit both, and redeploy the stack in Portainer.
|
When content changes: edit `index.html` and/or `infosheet-template.html`, regenerate the PDF with `node generate-pdf.js`, commit all changed files, and redeploy the stack in Portainer.
|
||||||
|
|||||||
Reference in New Issue
Block a user