chore: comment legacy api nginx route

ALB sends /api/* to an unreachable backend target group (502 on apex).
Use VITE_API_PREFIX=/apnew with nginx proxy to backend-1 until the listener rule is removed.

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitea/workflows/deploy.yml

@@ -34,7 +34,8 @@ jobs:
       - name: Build
         run: npm run build
         env:
-          VITE_API_URL: https://api.ark-library.com
+          VITE_API_URL: ""
+          VITE_API_PREFIX: "/apnew"
           VITE_DISABLE_ADMIN: "true"
 
       - name: Setup SSH key

deploy/nginx-frontend-locations.inc

@@ -0,0 +1,105 @@
+# Shared SPA locations. Browser calls same-origin /apnew/api/ (VITE_API_PREFIX=/apnew).
+# /apnew/api/ avoids ALB listener rule that sends /api/* to an unreachable backend target group.
+# Nginx proxies internally to ark-library-backend-1 (Tailscale); Host header for backend TLS.
+# Legacy /api/ locations are commented below for reference only.
+gzip on;
+gzip_vary on;
+gzip_proxied any;
+gzip_comp_level 5;
+gzip_types text/plain text/css application/javascript application/json application/xml image/svg+xml;
+gzip_min_length 256;
+
+location ^~ /apnew/api/admin {
+  return 404;
+}
+# Legacy same-origin /api admin block. Disabled while production uses /apnew/api.
+# location ^~ /api/admin {
+#   return 404;
+# }
+location ^~ /admin {
+  return 404;
+}
+
+location ^~ /apnew/api/ {
+  proxy_pass https://100.93.205.19/api/;
+  proxy_http_version 1.1;
+  proxy_ssl_server_name on;
+  proxy_set_header Host api.ark-library.com;
+  proxy_set_header X-Real-IP $remote_addr;
+  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+  proxy_set_header X-Forwarded-Proto $scheme;
+  client_max_body_size 512m;
+  client_body_timeout 600s;
+  proxy_read_timeout 600s;
+  proxy_send_timeout 600s;
+}
+
+# Legacy same-origin /api proxy. Disabled while production uses /apnew/api.
+# location ^~ /api/ {
+#   proxy_pass https://100.93.205.19/api/;
+#   proxy_http_version 1.1;
+#   proxy_ssl_server_name on;
+#   proxy_set_header Host api.ark-library.com;
+#   proxy_set_header X-Real-IP $remote_addr;
+#   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+#   proxy_set_header X-Forwarded-Proto $scheme;
+#   client_max_body_size 512m;
+#   client_body_timeout 600s;
+#   proxy_read_timeout 600s;
+#   proxy_send_timeout 600s;
+# }
+
+location ^~ /uploads/ {
+  proxy_pass https://100.93.205.19/uploads/;
+  proxy_http_version 1.1;
+  proxy_ssl_server_name on;
+  proxy_set_header Host api.ark-library.com;
+  proxy_set_header X-Real-IP $remote_addr;
+  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+  proxy_set_header X-Forwarded-Proto $scheme;
+}
+
+location = /health {
+  default_type text/plain;
+  return 200 "ok\n";
+}
+
+location = /healthz {
+  default_type text/plain;
+  return 200 "ok\n";
+}
+
+location = /index.html {
+  try_files $uri =404;
+  add_header Cache-Control "no-cache, no-store, must-revalidate" always;
+}
+
+# Exact `/` so the HTML shell is never edge-cached without validators (avoids stale index.html → 404 on hashed /index-*.js or /assets/*).
+location = / {
+  try_files /index.html =404;
+  add_header Cache-Control "no-cache, no-store, must-revalidate" always;
+}
+
+location = /assets/logo-primary.webp {
+  try_files $uri =404;
+  add_header Cache-Control "public, max-age=3600, stale-while-revalidate=86400" always;
+}
+location ^~ /assets/ark-library/ {
+  try_files $uri =404;
+  add_header Cache-Control "public, max-age=86400, stale-while-revalidate=604800" always;
+}
+
+location ^~ /assets/ {
+  try_files $uri =404;
+  add_header Cache-Control "public, max-age=31536000, immutable" always;
+}
+
+# Hashed entry chunk at /index-[hash].js (Vite entryFileNames). Do not 308 to /assets — file lives here.
+location ~* ^/index-[A-Za-z0-9_-]+\.(js|mjs)$ {
+  try_files $uri =404;
+  add_header Cache-Control "public, max-age=31536000, immutable" always;
+}
+
+location / {
+  try_files $uri $uri/ /index.html;
+}

deploy/nginx-frontend-native.conf

@@ -0,0 +1,18 @@
+# Native system nginx (not Docker). SPA root: /var/www/ark-library
+# Snippet: /etc/nginx/snippets/ark-library-frontend.inc
+# ALB terminates TLS; apex uses X-Forwarded-Proto so we do not 301-loop behind the LB.
+
+server {
+  listen 80 default_server;
+  listen [::]:80 default_server;
+  server_name ark-library.com www.ark-library.com;
+
+  if ($http_x_forwarded_proto != "https") {
+    return 301 https://$host$request_uri;
+  }
+
+  root /var/www/ark-library;
+  index index.html;
+
+  include /etc/nginx/snippets/ark-library-frontend.inc;
+}

src/api.ts

@@ -1,4 +1,5 @@
-export const apiBase = import.meta.env.VITE_API_URL || "";
+export const apiPrefix = import.meta.env.VITE_API_PREFIX || "";
+export const apiBase = (import.meta.env.VITE_API_URL || "") + apiPrefix;
 
 /** Go JSON encodes nil slices as null — normalize before .map() */
 export function itemsOrEmpty<T>(items: T[] | null | undefined): T[] {

src/components/LatestUpdateRow.tsx

@@ -27,11 +27,11 @@ export function LatestUpdateRow({
           className="h-10 w-10 text-ark-gold"
         />
       </div>
-      <div className="min-w-0 flex-1 py-0.5">
+      <div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
         <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
           {r.title}
         </div>
-        <div className="mt-4 grid gap-1 text-sm text-[#9b9ca6] md:mt-6">
+        <div className="mt-auto grid gap-1 text-sm text-[#9b9ca6]">
           <span>{r.categoryName}</span>
           <span>
             {resourceTypeLabel(t, r.type)}
@@ -58,11 +58,11 @@ export function ComingSoonLatestUpdateRow({ index = 0 }: { index?: number }) {
       <div className="flex shrink-0 items-center justify-center pt-0.5">
         <CategoryIcon iconKey={iconKey} className="h-10 w-10 text-ark-gold" />
       </div>
-      <div className="min-w-0 flex-1 py-0.5">
+      <div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
         <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
           即将到来
         </div>
-        <div className="mt-4 grid gap-1 text-sm text-[#9b9ca6] md:mt-6">
+        <div className="mt-auto grid gap-1 text-sm text-[#9b9ca6]">
           <span>更多内容准备中</span>
           <span>Coming soon</span>
         </div>

src/layouts/PublicLayout.tsx

@@ -79,13 +79,13 @@ export function PublicLayout() {
       <header className="sticky top-0 z-40 border-b border-ark-line bg-ark-nav/98 backdrop-blur-md">
         <div className="mx-auto max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:px-9 xl:px-0">
           {/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
-          <div className="flex h-10 items-center gap-2 lg:gap-4">
+          <div className="flex h-10 items-center gap-2 min-[1200px]:gap-0 lg:gap-4">
             <Link
               to="/"
               className="flex min-w-0 shrink-0 items-center gap-2.5 rounded-sm text-xl font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
             >
               <ArkLogoMark className="h-10 w-10 shrink-0" />
-              <span className="max-w-[7.125rem] truncate text-ark-gold sm:inline">
+              <span className="max-w-[8rem] truncate text-ark-gold sm:inline">
                 {t("brand")}
               </span>
             </Link>

src/pages/Browse.tsx

@@ -53,13 +53,40 @@ export function Browse() {
 
   useEffect(() => {
     setErr(null);
+
+    if (sort === "recommended") {
+      const p = new URLSearchParams();
+      p.set("lang", lang);
+      p.set("limit", "100");
+
+      getJSON<{ items: Resource[] }>(`/api/resources/recommended?${p}`)
+        .then((r) => {
+          const tagLower = tag.toLowerCase();
+          const officialItems = itemsOrEmpty(r.items)
+            .filter((item) => item.isRecommended)
+            .filter((item) => type === "all" || item.type === type)
+            .filter((item) => !resourceLang || item.language === resourceLang)
+            .filter(
+              (item) =>
+                !tagLower ||
+                item.tags?.some(
+                  (itemTag) => itemTag.toLowerCase() === tagLower,
+                ),
+            );
+          setTotal(officialItems.length);
+          setItems(officialItems.slice((page - 1) * limit, page * limit));
+        })
+        .catch((e) => setErr(String(e)));
+      return;
+    }
+
     getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
       .then((r) => {
         setItems(itemsOrEmpty(r.items));
         setTotal(typeof r.total === "number" ? r.total : 0);
       })
       .catch((e) => setErr(String(e)));
-  }, [query]);
+  }, [lang, limit, page, query, resourceLang, sort, tag, type]);
 
   const setPage = (next: number) => {
     const n = new URLSearchParams(sp);

src/pages/Home.tsx

@@ -8,10 +8,7 @@ import {
   ComingSoonLatestUpdateRow,
   LatestUpdateRow,
 } from "../components/LatestUpdateRow";
-import {
+import { RecommendedCard } from "../components/RecommendedCard";
-  ComingSoonRecommendedCard,
-  RecommendedCard,
-} from "../components/RecommendedCard";
 import { SectionHeader } from "../components/SectionHeader";
 import { useI18n } from "../i18n";
 import { categoryCardLines } from "../utils/categoryDisplay";
@@ -23,6 +20,7 @@ export function Home() {
   const [latest, setLatest] = useState<Resource[]>([]);
   const [err, setErr] = useState<string | null>(null);
   const recRowRef = useRef<HTMLDivElement>(null);
+  const [canScrollRec, setCanScrollRec] = useState(false);
 
   useEffect(() => {
     const q = `?lang=${encodeURIComponent(lang)}`;
@@ -42,11 +40,27 @@ export function Home() {
   const iconKeyForResource = (r: Resource) =>
     cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder";
 
+  useEffect(() => {
+    const row = recRowRef.current;
+    if (!row) {
+      setCanScrollRec(false);
+      return;
+    }
+
+    const updateCanScroll = () => {
+      setCanScrollRec(row.scrollWidth > row.clientWidth + 1);
+    };
+
+    updateCanScroll();
+    const resizeObserver = new ResizeObserver(updateCanScroll);
+    resizeObserver.observe(row);
+    return () => resizeObserver.disconnect();
+  }, [rec.length]);
+
   const scrollRec = (dir: 1 | -1) => {
     recRowRef.current?.scrollBy({ left: dir * 280, behavior: "smooth" });
   };
 
-  const recommendedPlaceholderCount = Math.max(0, 5 - rec.length);
   const latestPlaceholderCount = Math.max(0, 5 - latest.length);
 
   if (err) {
@@ -115,28 +129,20 @@ export function Home() {
                 <RecommendedCard r={r} visualIndex={index} />
               </div>
             ))}
-            {Array.from({ length: recommendedPlaceholderCount }).map(
-              (_, index) => (
-                <div
-                  key={`recommended-coming-soon-${index}`}
-                  className="snap-start"
-                >
-                  <ComingSoonRecommendedCard visualIndex={rec.length + index} />
-                </div>
-              ),
-            )}
           </div>
           <div className="h-1 rounded-full bg-black/80 md:hidden">
             <div className="h-full w-24 rounded-full bg-[#353740]" />
           </div>
-          <button
+          {canScrollRec ? (
-            type="button"
+            <button
-            onClick={() => scrollRec(1)}
+              type="button"
-            className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+              onClick={() => scrollRec(1)}
-            aria-label={t("viewAll")}
+              className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-          >
+              aria-label={t("viewAll")}
-            <ChevronRight className="h-5 w-5" />
+            >
-          </button>
+              <ChevronRight className="h-5 w-5" />
+            </button>
+          ) : null}
         </div>
       </section>
 

src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_API_URL: string;
+  readonly VITE_API_PREFIX?: string;
   readonly VITE_WALLETCONNECT_PROJECT_ID: string;
   readonly VITE_ADMIN_UI_PREFIX?: string;
   /** When `"true"`, bundle admin UI only (no public pages); use with `VITE_ADMIN_UI_PREFIX` or default secret prefix. */

vite.config.ts

@@ -1,23 +1,33 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [react()],
+  const env = loadEnv(mode, process.cwd(), "");
-  build: {
+  const apiProxyTarget = env.DEV_API_PROXY_TARGET || "http://127.0.0.1:8080";
-    rollupOptions: {
+
-      output: {
+  return {
-        // Entry script at site root (/index-[hash].js); lazy chunks + CSS stay under /assets/.
+    plugins: [react()],
-        entryFileNames: "[name]-[hash].js",
+    build: {
-        chunkFileNames: "assets/[name]-[hash].js",
+      rollupOptions: {
-        assetFileNames: "assets/[name]-[hash][extname]",
+        output: {
+          // Entry script at site root (/index-[hash].js); lazy chunks + CSS stay under /assets/.
+          entryFileNames: "[name]-[hash].js",
+          chunkFileNames: "assets/[name]-[hash].js",
+          assetFileNames: "assets/[name]-[hash][extname]",
+        },
       },
     },
-  },
+    server: {
-  server: {
+      port: 5173,
-    port: 5173,
+      proxy: {
-    proxy: {
+        "/apnew/api": {
-      "/api": { target: "http://127.0.0.1:8080", changeOrigin: true },
+          target: apiProxyTarget,
-      "/uploads": { target: "http://127.0.0.1:8080", changeOrigin: true },
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/apnew/, ""),
+        },
+        "/api": { target: apiProxyTarget, changeOrigin: true },
+        "/uploads": { target: apiProxyTarget, changeOrigin: true },
+      },
     },
-  },
+  };
 });