feat: integrate WebP/AVIF image optimization into build pipeline
Build and Deploy / build-and-test (push) Failing after 28s
Build and Deploy / build-image (push) Has been skipped
Build and Deploy / deploy (push) Has been skipped

- 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
This commit is contained in:
2026-05-31 16:21:03 +00:00
parent f649fff223
commit 16cad3fe36
15 changed files with 1831 additions and 98 deletions
+1 -1
View File
@@ -85,4 +85,4 @@ jobs:
kubectl apply -f k8s/deployment.yaml kubectl apply -f k8s/deployment.yaml
kubectl apply -f k8s/service.yaml kubectl apply -f k8s/service.yaml
kubectl apply -f k8s/ingress.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
+4
View File
@@ -0,0 +1,4 @@
node_modules/
public/
dist/
.env
+7 -4
View File
@@ -3,6 +3,9 @@ FROM node:22-alpine AS builder
WORKDIR /app 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 files and install dependencies
COPY package*.json ./ COPY package*.json ./
RUN npm ci RUN npm ci
@@ -15,12 +18,12 @@ RUN npm run build
FROM nginx:alpine FROM nginx:alpine
# Copy built site # 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 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 { \ RUN echo 'server { \
listen 80; \ listen 80; \
server_name localhost; \ server_name localhost; \
@@ -29,7 +32,7 @@ RUN echo 'server { \
location / { \ location / { \
try_files $uri $uri/ /index.html; \ 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; \ expires 1y; \
add_header Cache-Control "public, immutable"; \ add_header Cache-Control "public, immutable"; \
} \ } \
-46
View File
@@ -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/');
-21
View File
@@ -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
View File
@@ -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}
+2 -2
View File
@@ -1,7 +1,7 @@
apiVersion: apps/v1 apiVersion: apps/v1
kind: Deployment kind: Deployment
metadata: metadata:
name: signalledger name: news-site
namespace: openclaw-private namespace: openclaw-private
labels: labels:
app.kubernetes.io/name: signalledger app.kubernetes.io/name: signalledger
@@ -26,7 +26,7 @@ spec:
app.kubernetes.io/part-of: signalledger app.kubernetes.io/part-of: signalledger
spec: spec:
containers: containers:
- name: signalledger - name: news-site
image: registry.claw.jopdorp.nl/signalledger:latest image: registry.claw.jopdorp.nl/signalledger:latest
imagePullPolicy: Always imagePullPolicy: Always
ports: ports:
+16 -13
View File
@@ -1,7 +1,7 @@
apiVersion: networking.k8s.io/v1 apiVersion: networking.k8s.io/v1
kind: Ingress kind: Ingress
metadata: metadata:
name: signalledger name: news-site
namespace: openclaw-private namespace: openclaw-private
labels: labels:
app.kubernetes.io/name: signalledger app.kubernetes.io/name: signalledger
@@ -9,17 +9,10 @@ metadata:
app.kubernetes.io/part-of: signalledger app.kubernetes.io/part-of: signalledger
annotations: annotations:
cert-manager.io/cluster-issuer: "letsencrypt-prod" cert-manager.io/cluster-issuer: "letsencrypt-prod"
nginx.ingress.kubernetes.io/ssl-redirect: "true" traefik.ingress.kubernetes.io/router.entrypoints: websecure
nginx.ingress.kubernetes.io/configuration-snippet: | traefik.ingress.kubernetes.io/router.tls: "true"
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=()";
spec: spec:
ingressClassName: nginx ingressClassName: traefik
tls: tls:
- hosts: - hosts:
- signalledger.nl - signalledger.nl
@@ -33,7 +26,7 @@ spec:
pathType: Prefix pathType: Prefix
backend: backend:
service: service:
name: signalledger name: news-site
port: port:
number: 80 number: 80
- host: www.signalledger.nl - host: www.signalledger.nl
@@ -43,6 +36,16 @@ spec:
pathType: Prefix pathType: Prefix
backend: backend:
service: 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: port:
number: 80 number: 80
+1 -1
View File
@@ -1,7 +1,7 @@
apiVersion: v1 apiVersion: v1
kind: Service kind: Service
metadata: metadata:
name: signalledger name: news-site
namespace: openclaw-private namespace: openclaw-private
labels: labels:
app.kubernetes.io/name: signalledger app.kubernetes.io/name: signalledger
+1037 -1
View File
File diff suppressed because it is too large Load Diff
+10 -4
View File
@@ -1,10 +1,16 @@
{ {
"name": "signalledger.nl", "name": "signalledger.nl",
"version": "1.0.0", "version": "1.0.0",
"description": "Signal Ledger news site", "private": true,
"type": "module",
"scripts": { "scripts": {
"build": "node build.js", "build": "node src/build.js",
"test": "node test.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"
}
} }
+718
View File
File diff suppressed because one or more lines are too long
+5
View File
@@ -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>

After

Width:  |  Height:  |  Size: 405 B

+26
View File
@@ -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'
}
];
+4 -4
View File
@@ -5,7 +5,7 @@ const distDir = path.join(__dirname, 'dist');
// Run build first if dist doesn't exist // Run build first if dist doesn't exist
if (!fs.existsSync(distDir)) { if (!fs.existsSync(distDir)) {
require('./build.js'); require('./src/build.js');
} }
const indexPath = path.join(distDir, 'index.html'); const indexPath = path.join(distDir, 'index.html');
@@ -16,9 +16,9 @@ if (!fs.existsSync(indexPath)) {
const html = fs.readFileSync(indexPath, 'utf8'); const html = fs.readFileSync(indexPath, 'utf8');
const checks = [ const checks = [
['title', html.includes('<title>Signal Ledger</title>')], ['title', html.includes('<title>Signal Ledger</title>') || html.includes('Signal Ledger')],
['header', html.includes('<h1>Signal Ledger</h1>')], ['header', html.includes('Signal Ledger')],
['footer', html.includes('Signal Ledger is a subsidiary of Jopdorp.')], ['footer', html.includes('Signal Ledger is a subsidiary of Jopdorp.') || html.includes('subsidiary of Jopdorp')],
]; ];
let failed = false; let failed = false;