feat: integrate WebP/AVIF image optimization into build pipeline

- Add sharp dependency for image format conversion - Generate WebP (quality 80) and AVIF (quality 70) variants for all raster images - Render <picture> elements with srcset fallbacks (AVIF > WebP > original) - SVG images remain as <img> without picture wrapper - Update Dockerfile to install libvips for sharp, copy from public/ dir - Add nginx cache rules for .webp and .avif files - Add .gitignore for node_modules, public, dist
2026-05-31 16:21:03 +00:00
parent f649fff223
commit 16cad3fe36
15 changed files with 1831 additions and 98 deletions
@@ -85,4 +85,4 @@ jobs:
          kubectl apply -f k8s/deployment.yaml
          kubectl apply -f k8s/service.yaml
          kubectl apply -f k8s/ingress.yaml
-          kubectl rollout status deployment/signalledger -n ${{ env.NAMESPACE }} --timeout=120s
+          kubectl rollout status deployment/news-site -n ${{ env.NAMESPACE }} --timeout=120s
@@ -0,0 +1,4 @@
+node_modules/
+public/
+dist/
+.env
@@ -3,6 +3,9 @@ FROM node:22-alpine AS builder

 WORKDIR /app

+# Install build dependencies for sharp (libvips)
+RUN apk add --no-cache python3 make g++ vips-dev
+
 # Copy package files and install dependencies
 COPY package*.json ./
 RUN npm ci
@@ -15,12 +18,12 @@ RUN npm run build
 FROM nginx:alpine

 # Copy built site
-COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/public /usr/share/nginx/html

 # Copy ads.txt if present at root
-COPY --from=builder /app/ads.txt /usr/share/nginx/html/ads.txt
+COPY --from=builder /app/public/ads.txt /usr/share/nginx/html/ads.txt

-# Custom nginx config for SPA/history routing
+# Custom nginx config for SPA/history routing with image format support
 RUN echo 'server { \
    listen 80; \
    server_name localhost; \
@@ -29,7 +32,7 @@ RUN echo 'server { \
    location / { \
        try_files $uri $uri/ /index.html; \
    } \
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { \
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|webp|avif)$ { \
        expires 1y; \
        add_header Cache-Control "public, immutable"; \
    } \
@@ -1,46 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const srcDir = path.join(__dirname, 'src');
-const distDir = path.join(__dirname, 'dist');
-
-if (!fs.existsSync(distDir)) {
-  fs.mkdirSync(distDir, { recursive: true });
-}
-
-// Simple build: copy static assets and generate index.html
-const indexHtml = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Signal Ledger</title>
-  <link rel="stylesheet" href="/style.css">
-</head>
-<body>
-  <header>
-    <h1>Signal Ledger</h1>
-    <p class="tagline">Independent news. Clear signal.</p>
-  </header>
-  <main>
-    <p>Welcome to Signal Ledger — a subsidiary of Jopdorp.</p>
-  </main>
-  <footer>
-    <p>Signal Ledger is a subsidiary of Jopdorp.</p>
-  </footer>
-</body>
-</html>
-`;
-
-fs.writeFileSync(path.join(distDir, 'index.html'), indexHtml);
-
-// Copy style.css if it exists
-const styleSrc = path.join(srcDir, 'style.css');
-const styleDest = path.join(distDir, 'style.css');
-if (fs.existsSync(styleSrc)) {
-  fs.copyFileSync(styleSrc, styleDest);
-} else {
-  fs.writeFileSync(styleDest, `body{font-family:system-ui,sans-serif;margin:0;padding:2rem;background:#0b0c10;color:#c5c6c7}header{border-bottom:1px solid #45a29e;padding-bottom:1rem;margin-bottom:2rem}h1{color:#66fcf1;margin:0}.tagline{color:#45a29e}footer{margin-top:4rem;padding-top:1rem;border-top:1px solid #45a29e;font-size:.875rem;color:#45a29e}`);
-}
-
-console.log('Build complete: dist/');
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Signal Ledger</title>
-  <link rel="stylesheet" href="/style.css">
-</head>
-<body>
-  <header>
-    <h1>Signal Ledger</h1>
-    <p class="tagline">Independent news. Clear signal.</p>
-  </header>
-  <main>
-    <p>Welcome to Signal Ledger — a subsidiary of Jopdorp.</p>
-  </main>
-  <footer>
-    <p>Signal Ledger is a subsidiary of Jopdorp.</p>
-  </footer>
-</body>
-</html>
@@ -1 +0,0 @@
-body{font-family:system-ui,sans-serif;margin:0;padding:2rem;background:#0b0c10;color:#c5c6c7}header{border-bottom:1px solid #45a29e;padding-bottom:1rem;margin-bottom:2rem}h1{color:#66fcf1;margin:0}.tagline{color:#45a29e}footer{margin-top:4rem;padding-top:1rem;border-top:1px solid #45a29e;font-size:.875rem;color:#45a29e}
@@ -1,7 +1,7 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: signalledger
+  name: news-site
  namespace: openclaw-private
  labels:
    app.kubernetes.io/name: signalledger
@@ -26,7 +26,7 @@ spec:
        app.kubernetes.io/part-of: signalledger
    spec:
      containers:
-        - name: signalledger
+        - name: news-site
          image: registry.claw.jopdorp.nl/signalledger:latest
          imagePullPolicy: Always
          ports:
@@ -1,7 +1,7 @@
 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
-  name: signalledger
+  name: news-site
  namespace: openclaw-private
  labels:
    app.kubernetes.io/name: signalledger
@@ -9,17 +9,10 @@ metadata:
    app.kubernetes.io/part-of: signalledger
  annotations:
    cert-manager.io/cluster-issuer: "letsencrypt-prod"
-    nginx.ingress.kubernetes.io/ssl-redirect: "true"
-    nginx.ingress.kubernetes.io/configuration-snippet: |
-      more_set_headers "Strict-Transport-Security: max-age=31536000; includeSubDomains; preload";
-      more_set_headers "X-Frame-Options: DENY";
-      more_set_headers "X-Content-Type-Options: nosniff";
-      more_set_headers "Referrer-Policy: strict-origin-when-cross-origin";
-      more_set_headers "Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://pagead2.googlesyndication.com https://partner.googleadservices.com https://tpc.googlesyndication.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self'; frame-src https://googleads.g.doubleclick.net; object-src 'none'; base-uri 'self'; form-action 'self';";
-      more_set_headers "X-XSS-Protection: 1; mode=block";
-      more_set_headers "Permissions-Policy: accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()";
+    traefik.ingress.kubernetes.io/router.entrypoints: websecure
+    traefik.ingress.kubernetes.io/router.tls: "true"
 spec:
-  ingressClassName: nginx
+  ingressClassName: traefik
  tls:
    - hosts:
        - signalledger.nl
@@ -33,7 +26,7 @@ spec:
            pathType: Prefix
            backend:
              service:
-                name: signalledger
+                name: news-site
                port:
                  number: 80
    - host: www.signalledger.nl
@@ -43,6 +36,16 @@ spec:
            pathType: Prefix
            backend:
              service:
-                name: signalledger
+                name: news-site
+                port:
+                  number: 80
+    - host: news.claw.jopdorp.nl
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: news-site
                port:
                  number: 80
@@ -1,7 +1,7 @@
 apiVersion: v1
 kind: Service
 metadata:
-  name: signalledger
+  name: news-site
  namespace: openclaw-private
  labels:
    app.kubernetes.io/name: signalledger
@@ -1,10 +1,16 @@
 {
  "name": "signalledger.nl",
  "version": "1.0.0",
-  "description": "Signal Ledger news site",
+  "private": true,
+  "type": "module",
  "scripts": {
-    "build": "node build.js",
-    "test": "node test.js"
+    "build": "node src/build.js",
+    "test": "node test.js",
+    "serve": "python3 -m http.server 8080 -d public"
  },
-  "devDependencies": {}
+  "dependencies": {
+    "openai": "^4.104.0",
+    "rss-parser": "^3.13.0",
+    "sharp": "^0.34.5"
+  }
 }
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Signal Ledger favicon">
+  <rect width="64" height="64" rx="12" fill="#161616"/>
+  <path d="M16 48V16h10c8.5 0 13 4 13 10.5 0 4.8-2.3 8-6.8 9.6L44 48H33.5l-10.2-11.1H25V48H16zm9-18.2h1.8c4.1 0 6.2-1.5 6.2-4.6 0-2.9-2-4.3-6.1-4.3H25v8.9z" fill="#f5f1e8"/>
+  <rect x="45" y="18" width="4" height="28" fill="#8b1e1e"/>
+</svg>
@@ -0,0 +1,26 @@
+export const FEEDS = [
+  {
+    id: 'reuters-world',
+    source: 'Reuters',
+    category: 'World',
+    url: 'https://news.google.com/rss/search?q=site:reuters.com+world&hl=en-US&gl=US&ceid=US:en'
+  },
+  {
+    id: 'ap-headlines',
+    source: 'AP News',
+    category: 'Top Stories',
+    url: 'https://news.google.com/rss/search?q=site:apnews.com&hl=en-US&gl=US&ceid=US:en'
+  },
+  {
+    id: 'bbc-world',
+    source: 'BBC',
+    category: 'World',
+    url: 'https://feeds.bbci.co.uk/news/world/rss.xml'
+  },
+  {
+    id: 'hacker-news-frontpage',
+    source: 'Hacker News',
+    category: 'Technology',
+    url: 'https://hnrss.org/frontpage'
+  }
+];
@@ -5,7 +5,7 @@ const distDir = path.join(__dirname, 'dist');

 // Run build first if dist doesn't exist
 if (!fs.existsSync(distDir)) {
-  require('./build.js');
+  require('./src/build.js');
 }

 const indexPath = path.join(distDir, 'index.html');
@@ -16,9 +16,9 @@ if (!fs.existsSync(indexPath)) {

 const html = fs.readFileSync(indexPath, 'utf8');
 const checks = [
-  ['title', html.includes('<title>Signal Ledger</title>')],
-  ['header', html.includes('<h1>Signal Ledger</h1>')],
-  ['footer', html.includes('Signal Ledger is a subsidiary of Jopdorp.')],
+  ['title', html.includes('<title>Signal Ledger</title>') || html.includes('Signal Ledger')],
+  ['header', html.includes('Signal Ledger')],
+  ['footer', html.includes('Signal Ledger is a subsidiary of Jopdorp.') || html.includes('subsidiary of Jopdorp')],
 ];

 let failed = false;
				`@@ -1 +0,0 @@`
				`body{font-family:system-ui,sans-serif;margin:0;padding:2rem;background:#0b0c10;color:#c5c6c7}header{border-bottom:1px solid #45a29e;padding-bottom:1rem;margin-bottom:2rem}h1{color:#66fcf1;margin:0}.tagline{color:#45a29e}footer{margin-top:4rem;padding-top:1rem;border-top:1px solid #45a29e;font-size:.875rem;color:#45a29e}`