29 lines
3.8 KiB
Markdown
29 lines
3.8 KiB
Markdown
# Implementation and maintenance
|
||
|
||
The supplied 1200 × 900 PDF and its IDML source define the desktop composition. All original design files are preserved under `design/`. The photographic backdrop and construction tape are extracted together to preserve the print export's crop, tint and shadows. This background stays fixed to the viewport above 1024 px; on smaller screens the background and tape scroll with the page. The logo and Lumios Marker heading retain their original outlines as SVG artwork; all other content is semantic, selectable HTML in `index.html`.
|
||
|
||
CSS lives in `assets/styles.css`; all colors are CSS custom properties. Its link in `index.html` carries a content-hash query parameter; update that value when the CSS changes to avoid stale browser caches. Layout scales with the design above 1024 px. At smaller sizes the type becomes larger and wraps; at 600 px the bank and PayPal details stack in their original reading order. The mobile background separates the supplied tape from the photograph so that it remains above the logo while the photo fills a tall page. `assets/app.mjs` only enhances the IBAN with clipboard support and an accessible selection fallback. Contact and payment links work without JavaScript.
|
||
|
||
## Preview and deployment
|
||
|
||
Requires Node 20.11 or newer. There are no npm dependencies and no third-party page requests.
|
||
|
||
```sh
|
||
npm run build
|
||
python3 -m http.server 8080 --directory dist --bind 127.0.0.1
|
||
```
|
||
|
||
`scripts/build.mjs` copies only explicit public files to `dist/`. Source PDFs, InDesign files, original TIFFs, scripts and documentation are never in the public artifact. `showcase.json` selects `dist` for the existing organization deployer. A push to `showcase/2608_BuB` on `main` deploys to `https://showcase.andrefiedler.de/2608_BuB/`; the `showcase/deploy` commit status reports completion.
|
||
|
||
## Artwork and fonts
|
||
|
||
Generated web assets are committed. Recreate them only when the design changes, using `scripts/prepare-assets.py` with PyMuPDF, Pillow, fontTools (WOFF support) and Poppler's `pdftoppm`. Its PDF object/group assertions deliberately target this exact supplied design. The script downloads the matching [Roboto 3.015 release](https://github.com/googlefonts/roboto-3-classic/releases/tag/v3.015), fixes the width axis to 100, keeps weights 400–700, and subsets Latin and punctuation. The accompanying [OFL license](../assets/fonts/OFL.txt) is bundled. The commercial handwritten font is not distributed; its original supplied heading is retained as outlined artwork.
|
||
|
||
Favicon SVG, ICO, Apple touch icon and manifest icons are derived from the original book-and-cup symbol. The PayPal QR code is extracted from the supplied PDF and reduced to a 64-color PNG; its encoded payload and geometry are preserved and verified by decoding. The social preview is a crop of the supplied design.
|
||
|
||
## Search metadata
|
||
|
||
The document contains German title/description/author information, canonical and social metadata, a local social image, and JSON-LD for the business, website and page. Only facts present in the design are used; no opening hours, ratings or registration details are invented. The canonical and all structured URLs use the requested showcase path. Update these together with `sitemap.xml`, `robots.txt` and the manifest ID when moving to a different domain.
|
||
|
||
The single canonical page is listed in `sitemap.xml`. Submit `https://showcase.andrefiedler.de/2608_BuB/sitemap.xml` in the site's search-engine webmaster accounts when available. The local `robots.txt` is supplied for hosting completeness, but crawlers only use `/robots.txt` at the domain root. The shared host currently has no root robots or sitemap; this permits crawling and does not automatically advertise this sitemap. A host administrator can add this sitemap URL to the shared root robots file. Search indexing itself is outside the deployment workflow.
|