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
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
public/
|
||||||
|
dist/
|
||||||
|
.env
|
||||||
+7
-4
@@ -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"; \
|
||||||
} \
|
} \
|
||||||
|
|||||||
@@ -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/');
|
|
||||||
Vendored
-21
@@ -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>
|
|
||||||
Vendored
-1
@@ -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
@@ -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
@@ -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
@@ -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
|
||||||
|
|||||||
Generated
+1037
-1
File diff suppressed because it is too large
Load Diff
+10
-4
@@ -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
File diff suppressed because one or more lines are too long
@@ -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 |
@@ -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
|
// 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;
|
||||||
|
|||||||
Reference in New Issue
Block a user