diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index eef527d1a0438..587f987df357c 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -461,7 +461,7 @@ jobs: test -f website/build/docs/apisix/plugins/cors/index.md grep -q 'index.md' website/build/llms.txt test -f website/build/img/integrations/icon-prometheus.svg - test -f website/build/img/architecture.svg + test -f website/build/img/architecture.png - name: Generate final sitemaps run: | diff --git a/next/README.md b/next/README.md index 5b25b40b8df50..6f1caeafbbdfa 100644 --- a/next/README.md +++ b/next/README.md @@ -19,6 +19,7 @@ Prototype rebuild of [apisix.apache.org](https://apisix.apache.org) as a **fully - `src/pages/` — routes; `/zh/**` mirrors are thin wrappers passing `locale="zh"`. - `scripts/generate-sitemaps.mjs` — emits `sitemap.xml` + `zh/sitemap.xml` post-build. - `scripts/check-parity.mjs` — asserts every URL in the live sitemaps exists in `dist/` (exact, case-sensitive string comparison). +- `scripts/architecture/`: source for the homepage architecture diagram. `arch.html` is the drawing (absolutely-positioned boxes plus an SVG wire layer); `bash scripts/architecture/render.sh` shoots it in headless Chrome at 2x and overwrites `public/img/architecture.png`. Edit the HTML and re-render; the PNG is generated output. ## Build diff --git a/next/public/img/architecture.png b/next/public/img/architecture.png new file mode 100644 index 0000000000000..0c1b5c87cde9e Binary files /dev/null and b/next/public/img/architecture.png differ diff --git a/next/public/img/architecture.svg b/next/public/img/architecture.svg deleted file mode 100644 index 169949b76a6a8..0000000000000 --- a/next/public/img/architecture.svg +++ /dev/null @@ -1 +0,0 @@ -Apache APISIXRate limitAuthSecurityLoggingCustom plugin... ...Client/ServiceApache Skywalking Grafana...PrometheusPARTNERPRIVATEPUBLICetcdetcdetcdControl Plane (CP)Manager APIDashboardData Plane (DP) \ No newline at end of file diff --git a/next/scripts/architecture/arch.html b/next/scripts/architecture/arch.html new file mode 100644 index 0000000000000..c9e4c80534675 --- /dev/null +++ b/next/scripts/architecture/arch.html @@ -0,0 +1,219 @@ + + +Apache APISIX architecture diagram (source) + + + +
+
+
+ +
Data plane
+
Control plane
+ + +
Client / service
+ +
+
Apache APISIXHot-reloadable plugin pipeline
+
+
Rate limit
+
Auth
+
Security
+
Logging
+
Tracing
+
Traffic split
+
Transformation
+
Custom plugin
+
100+ more
+
+
+ +
Partner APIs
+
Private APIs
+
Public APIs
+ + +
Admin
+ +
+
DashboardConfigure routes and plugins
+
Manager API
+
+ +
+
etcd clusterConfiguration store
+
+
etcd
+
etcd
+
etcd
+
+
+ +
+
ObservabilityMetrics, traces, and logs
+
+
Apache SkyWalking
+
Prometheus
+
Grafana
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/next/scripts/architecture/render.sh b/next/scripts/architecture/render.sh new file mode 100755 index 0000000000000..5d125ab5270a3 --- /dev/null +++ b/next/scripts/architecture/render.sh @@ -0,0 +1,81 @@ +#!/usr/bin/env bash +# Re-render public/img/architecture.png from arch.html. +# +# Usage: bash scripts/architecture/render.sh +# Requires: Google Chrome (override with CHROME=/path/to/chrome) +# +# arch.html is authored at 1200x738 CSS px and shot at 2x, so the PNG is +# 2400x1476. Keep that in sync with the width/height on the in +# src/components/HomePage.astro if you change the canvas size. +# +# The diagram uses the system sans stack, so text metrics follow whatever the +# rendering machine has installed. Re-render on macOS to match the committed +# PNG; elsewhere expect small label-width shifts. +set -euo pipefail + +ROOT="$(cd "$(dirname "$0")/../.." && pwd)" +SRC="$ROOT/scripts/architecture/arch.html" +OUT="$ROOT/public/img/architecture.png" + +CHROME="${CHROME:-/Applications/Google Chrome.app/Contents/MacOS/Google Chrome}" +if [ ! -x "$CHROME" ]; then + echo "Chrome not found at: $CHROME (set CHROME=/path/to/chrome)" >&2 + exit 1 +fi + +TMP="$(mktemp -d)" +trap 'rm -rf "$TMP"' EXIT + +SHOT="$TMP/shot.png" + +# A throwaway profile plus the no-networking flags keep Chrome off the network, +# which it otherwise hits on startup for first-run and component-update chores. +"$CHROME" \ + --headless \ + --disable-gpu \ + --hide-scrollbars \ + --no-first-run \ + --no-default-browser-check \ + --disable-background-networking \ + --disable-component-update \ + --disable-extensions \ + --user-data-dir="$TMP/profile" \ + --force-device-scale-factor=2 \ + --window-size=1200,738 \ + --virtual-time-budget=3000 \ + --default-background-color=ffffffff \ + --screenshot="$SHOT" \ + "file://$SRC" /dev/null 2>&1 & +CHROME_PID=$! + +# Chrome writes the shot and then can sit there instead of exiting (seen under +# sandboxed shells), so wait on the file rather than on the process. +for _ in $(seq 1 60); do + if [ -s "$SHOT" ]; then + sleep 1 # let the last write land before we read it + break + fi + kill -0 "$CHROME_PID" 2>/dev/null || break + sleep 1 +done +kill "$CHROME_PID" 2>/dev/null || true +wait "$CHROME_PID" 2>/dev/null || true + +if [ ! -s "$SHOT" ]; then + echo "Chrome produced no screenshot" >&2 + exit 1 +fi + +# Flat fills and text palette-reduce cleanly: the raw shot is ~200 KB, 256-color +# ~70 KB. Either optimizer is fine; without one the raw shot still works. +# magick's -quality 95 is zlib level 9 + adaptive filtering, worth ~50 KB here. +if command -v pngquant >/dev/null 2>&1; then + pngquant --quality 80-98 --speed 1 --force --output "$OUT" "$SHOT" +elif command -v magick >/dev/null 2>&1; then + magick "$SHOT" -strip -colors 256 -depth 8 -quality 95 "PNG8:$OUT" +else + echo "no pngquant/magick, writing the unoptimized shot" >&2 + cp "$SHOT" "$OUT" +fi + +echo "wrote $OUT ($(wc -c <"$OUT" | tr -d ' ') bytes)" diff --git a/next/src/components/HomePage.astro b/next/src/components/HomePage.astro index af32921b4e81d..20f25131980c7 100644 --- a/next/src/components/HomePage.astro +++ b/next/src/components/HomePage.astro @@ -196,7 +196,7 @@ const SOFTWARE_APPLICATION_SCHEMA = { 'Requests flow through a hot-reloadable plugin pipeline; etcd distributes configuration across the cluster in real time, with no restarts.', '请求流经可热加载的插件流水线；etcd 将配置实时分发到整个集群，无需重启。')}

- {t(locale, + {t(locale,
{t(locale, 'Apache APISIX is based on NGINX and etcd. Compared with traditional API Gateways, APISIX has features like dynamic routing and hot-loading plugins, etc.', 'Apache APISIX 基于 NGINX 与 etcd，相较于传统的 API 网关，它提供了动态路由、插件热加载等诸多能力。')}
diff --git a/next/src/styles/global.css b/next/src/styles/global.css index e5fbdf11c0ede..0ae6f21604820 100644 --- a/next/src/styles/global.css +++ b/next/src/styles/global.css @@ -382,11 +382,12 @@ section.endcta.alt { background: transparent; padding: 4rem 1rem 0; } .arch-visual { max-width: 980px; margin: 2rem auto 0; background: #fff; border: 1px solid rgba(16,24,39,.06); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 12px 32px rgb(0 0 0 / 10%); } .arch-visual img { width: 100%; max-width: 100%; height: auto; display: block; margin-inline: auto; } .arch-visual figcaption { max-width: 34rem; margin: 1rem auto 0; text-align: center; font-size: .95rem; color: var(--color-text-soft); } -/* On phones the 1713px-wide diagram would shrink below legibility (~14%); - let it pan horizontally at >=37% scale instead. */ +/* The diagram is authored 1200 CSS px wide (exported at 2x). On phones let it + pan horizontally rather than shrink past the point where labels stop being + readable; 720px is the narrowest that still holds the plugin grid legible. */ @media (max-width: 700px) { .arch-visual { overflow-x: auto; -webkit-overflow-scrolling: touch; } - .arch-visual img { min-width: 640px; } + .arch-visual img { min-width: 720px; } } .pillar-section { background: #fff8f6; } .pillar-section + .pillar-section { border-top: 1px solid #f2e8e4; } diff --git a/website/i18n/zh/code.json b/website/i18n/zh/code.json index cb0c70542bce7..8bd000d11840b 100644 --- a/website/i18n/zh/code.json +++ b/website/i18n/zh/code.json @@ -107,18 +107,6 @@ "message": "阅读博客", "description": "Read Blog" }, - "architecture.component.title.name": { - "message": "适用于超大规模、复杂的业务系统", - "description": "Building for large-scale, high value systems" - }, - "architecture.component.title.subtitle": { - "message": "Apache APISIX 作为云原生架构的开源 API 网关，可以为海量 API 和微服务提供安全可靠的动态、高性能、可扩展的管理平台。", - "description": "Apache APISIX lets you build Cloud-Native Microservices API gateways, delivering the ultimate performance, security, open source and scalable platform for all your APIs and microservices." - }, - "architecture.component.card.caption": { - "message": "Apache APISIX 基于 NGINX 与 etcd，相较于传统的 API 网关，它提供了动态路由、插件热加载等诸多能力。", - "description": "Apache APISIX is based on NGINX and etcd. Compared with traditional API gateways, APISIX has dynamic routing and hot-loading plugins" - }, "features.component.why.title": { "message": "为什么选择 APISIX API 网关？" }, diff --git a/website/src/assets/images/PatternGrouped-min.svg b/website/src/assets/images/PatternGrouped-min.svg deleted file mode 100644 index 567e4f74b293b..0000000000000 --- a/website/src/assets/images/PatternGrouped-min.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/src/assets/images/infographs/Architecture-min.svg b/website/src/assets/images/infographs/Architecture-min.svg deleted file mode 100644 index 169949b76a6a8..0000000000000 --- a/website/src/assets/images/infographs/Architecture-min.svg +++ /dev/null @@ -1 +0,0 @@ -Apache APISIXRate limitAuthSecurityLoggingCustom plugin... ...Client/ServiceApache Skywalking Grafana...PrometheusPARTNERPRIVATEPUBLICetcdetcdetcdControl Plane (CP)Manager APIDashboardData Plane (DP) \ No newline at end of file