diff --git a/Dockerfile b/Dockerfile index 0d939a2..db72f75 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,6 +4,13 @@ WORKDIR /app COPY package.json ./ RUN npm install COPY . . +# Selbst gehostete Bilder: Unsplash-Assets zur Build-Zeit holen und ins eigene Image backen +# (kein Client-Hotlink zu Unsplash -> DSGVO-freundlich). Credits: /bildnachweis +RUN apk add --no-cache curl && mkdir -p public/img \ + && curl -fsSL "https://images.unsplash.com/photo-1649711895336-20ff39db62f8?w=1680&q=72&fm=jpg&fit=crop&auto=format" -o public/img/hero-klima.jpg \ + && curl -fsSL "https://images.unsplash.com/photo-1752218804012-3e7db92274ec?w=1000&q=72&fm=jpg&fit=crop&auto=format" -o public/img/alarm-phone.jpg \ + && curl -fsSL "https://images.unsplash.com/photo-1583444012262-00185bf33cc6?w=160&h=160&q=72&fm=jpg&fit=crop&auto=format" -o public/img/brand-water.jpg \ + && for f in hero-klima alarm-phone brand-water; do test -s "public/img/$f.jpg" || (echo "FEHLT: $f" && exit 1); done RUN npm run build # --- Serve stage --- diff --git a/package-lock.json b/package-lock.json index b28d729..383b91e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ "@fontsource/fraunces": "^5.0.0", "@fontsource/public-sans": "^5.0.0", "astro": "^5.7.0", - "maplibre-gl": "^4.7.1" + "maplibre-gl": "^4.7.1", + "playwright": "1.48" } }, "node_modules/@astrojs/compiler": { @@ -4185,6 +4186,50 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/playwright": { + "version": "1.48.2", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.2.tgz", + "integrity": "sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==", + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.48.2" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.48.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.2.tgz", + "integrity": "sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==", + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/postcss": { "version": "8.5.15", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz", diff --git a/package.json b/package.json index 90ccf96..c914232 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,11 @@ "preview": "astro preview" }, "dependencies": { - "astro": "^5.7.0", + "@astrojs/sitemap": "^3.2.0", "@fontsource/fraunces": "^5.0.0", "@fontsource/public-sans": "^5.0.0", + "astro": "^5.7.0", "maplibre-gl": "^4.7.1", - "@astrojs/sitemap": "^3.2.0" + "playwright": "1.48" } -} \ No newline at end of file +} diff --git a/shot.mjs b/shot.mjs new file mode 100644 index 0000000..cd1322e --- /dev/null +++ b/shot.mjs @@ -0,0 +1,17 @@ +import { chromium } from 'playwright'; +const B='http://l6yk2n8ol78okigxileeyxjt.46.224.49.66.sslip.io/'; +const b=await chromium.launch(); +for(const [w,h,tag] of [[390,844,'mobile'],[1280,900,'desktop']]){ + const p=await b.newPage({viewport:{width:w,height:h},deviceScaleFactor:2}); + await p.goto(B,{waitUntil:'networkidle',timeout:30000}).catch(()=>{}); + await p.waitForTimeout(2500); + await p.screenshot({path:`/tmp/kf/shot-${tag}.png`}); + // check header overflow on mobile + if(tag==='mobile'){ + const o=await p.evaluate(()=>{const n=document.querySelector('header nav');return {scrollW:n.scrollWidth,clientW:n.clientWidth,docOverflow:document.documentElement.scrollWidth>window.innerWidth+1};}); + console.log('mobile nav scrollW',o.scrollW,'clientW',o.clientW,'pageHorizOverflow',o.docOverflow); + } + await p.close(); +} +await b.close(); +console.log('done'); diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 14dc18d..f7cf6f9 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -24,7 +24,7 @@ import '../styles/global.css'; .brandmark{border-radius:8px;object-fit:cover;flex:0 0 auto;box-shadow:0 1px 2px rgba(20,40,60,.18)}
- Kühlfinder + Kühlfinder
))} -

Hinweis: Aktuell werden die Bilder über das Unsplash-CDN eingebunden. Für eine vollständig DSGVO-konforme, selbst gehostete Variante können die Dateien lokal unter /public/img/ abgelegt und von dort ausgeliefert werden.

+

Hinweis: Die Bilder werden selbst gehostet (ausgeliefert von dieser Domain unter /img/) – es findet kein Hotlink zu Unsplash statt. Die Originale stammen von Unsplash unter der kostenlosen Unsplash-Lizenz.