Mirror full Frontend structure under web_site/Frontend

Author: huayuankou9-arch

web_site/Frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals"]
+}

web_site/Frontend/.github/workflows/deploy.yml

@@ -0,0 +1,58 @@
+name: Deploy Next.js site to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build static export
+        run: npm run build
+
+      - name: Ensure custom domain CNAME
+        run: echo "webcompass.ai" > out/CNAME
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

web_site/Frontend/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+out
+.env*
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*

web_site/Frontend/README.md

@@ -0,0 +1,88 @@
+# WebCompass Frontend
+
+Academic project page for **WebCompass: A Unified Multimodal Benchmark and Evaluation Framework for Web Coding**.
+
+Production deployment target:
+
+- GitHub Pages (custom domain + project subpath)
+- URL: `https://webcompass.ai/WebCompass/`
+- Base path: `/WebCompass`
+
+## Tech Stack
+
+- Next.js (App Router)
+- TypeScript
+- Tailwind CSS
+- shadcn/ui-style base components (`components/ui/*`)
+- Framer Motion
+- lucide-react
+- Recharts
+
+## Local Development
+
+```bash
+npm install
+npm run dev
+```
+
+Local URL: `http://localhost:3000`
+
+## Production Build (Static Export)
+
+```bash
+npm run build
+```
+
+This project uses Next.js static export (`output: "export"`) and generates deployable static files in `out/`.
+
+## GitHub Pages Deployment
+
+Deployment is automated by GitHub Actions:
+
+- Workflow file: `.github/workflows/deploy.yml`
+- Trigger: push to `main` or `master`
+- Flow:
+1. Install dependencies
+2. Build static site
+3. Upload Pages artifact (`out/`)
+4. Deploy with `actions/deploy-pages`
+
+After each push, the site updates at:
+`https://webcompass.ai/WebCompass/`
+
+## Figure-Source Consistency (LaTeX whitelist)
+
+The frontend only renders figures that are referenced in LaTeX files under `../Paper/sec`.
+
+- Extraction script: `scripts/extract-used-figures.mjs`
+- Output whitelist: `data/usedFigures.json`
+
+Run:
+
+```bash
+npm run sync:figures
+npm run build
+```
+
+Figure rendering in `data/figures.ts` is filtered by this whitelist, and missing secondary assets are suppressed from the gallery.
+
+## Deployment-specific Notes
+
+- `next.config.js` applies static export + repo base path in production.
+- Metadata and OG paths are generated with `/WebCompass` in production.
+- Local `npm run dev` remains normal (no base path in development).
+
+## Project Structure
+
+```text
+Frontend/
+  .github/workflows/deploy.yml
+  app/
+  components/
+  data/
+  lib/
+  public/
+  scripts/
+  styles/
+```
+

web_site/Frontend/app/globals.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "../styles/theme.css";
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeLegibility;
+}
+
+.bg-grid {
+  background-image: linear-gradient(to right, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
+  background-size: 36px 36px;
+}

web_site/Frontend/app/layout.tsx

@@ -0,0 +1,68 @@
+import type { Metadata } from "next";
+import { IBM_Plex_Sans, JetBrains_Mono } from "next/font/google";
+
+import "./globals.css";
+
+const ibmPlexSans = IBM_Plex_Sans({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-sans"
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-mono"
+});
+
+const productionOrigin = "https://webcompass.ai";
+const productionPath = "/WebCompass/";
+const productionUrl = `${productionOrigin}${productionPath}`;
+const siteUrl = process.env.NODE_ENV === "production" ? productionUrl : "http://localhost:3000/";
+const ogImagePath = "/WebCompass/og-image.svg";
+const faviconPath = "/WebCompass/favicon.svg";
+const paperTitle = "WebCompass: Towards Holistic Evaluation of Web Coding for Multimodal Code Models";
+
+export const metadata: Metadata = {
+  title: paperTitle,
+  description:
+    "WebCompass: Towards Holistic Evaluation of Web Coding for Multimodal Code Models.",
+  metadataBase: new URL(process.env.NODE_ENV === "production" ? productionOrigin : "http://localhost:3000"),
+  alternates: {
+    canonical: process.env.NODE_ENV === "production" ? productionPath : "/"
+  },
+  openGraph: {
+    title: paperTitle,
+    description: "Towards Holistic Evaluation of Web Coding for Multimodal Code Models",
+    url: siteUrl,
+    siteName: "WebCompass",
+    images: [
+      {
+        url: ogImagePath,
+        width: 1200,
+        height: 630,
+        alt: "WebCompass Project Page"
+      }
+    ],
+    locale: "en_US",
+    type: "website"
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: paperTitle,
+    description: "Towards Holistic Evaluation of Web Coding for Multimodal Code Models",
+    images: [ogImagePath]
+  },
+  icons: {
+    icon: faviconPath
+  }
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${ibmPlexSans.variable} ${jetbrainsMono.variable} font-sans antialiased`}>{children}</body>
+    </html>
+  );
+}
+