feat(site): make harness page the landing entry and add screenshot section

yeyitech · yeyitech · commit b856416a6506 · 2026-03-01T16:52:12.000+08:00
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -32,7 +32,7 @@ export default defineConfig({
       provider: "local",
     },
     nav: [
-      { text: "Home", link: "/" },
+      { text: "Home", link: "/harness-engineering.html" },
       { text: "中文", link: "/zh/" },
       { text: "English", link: "/en/" },
       { text: "Brand (HTML)", link: "/harness-engineering.html" },
diff --git a/docs/index.md b/docs/index.md
@@ -1,69 +1,18 @@
----
-layout: home
-title: ForgeOps
-titleTemplate: AI R&D Control Plane
-description: Runtime-agnostic AI R&D control plane
+# ForgeOps Site Entry
+
 Status: Active
 Updated: 2026-03-01
-hero:
-  name: ForgeOps
-  text: Build Fast. Keep Entropy Under Control.
-  tagline: Runtime-agnostic AI R&D control plane for observable, recoverable, governable delivery.
-  image:
-    src: /logo.png
-    alt: ForgeOps Logo
-  actions:
-    - theme: brand
-      text: 中文入口 /zh/
-      link: /zh/
-    - theme: alt
-      text: English Entry /en/
-      link: /en/
-    - theme: alt
-      text: Brand HTML
-      link: /harness-engineering.html
-features:
-  - title: Issue-Driven Delivery
-    details: 从 GitHub Issue 到 Run/Step/PR 的链路结构化执行，减少流程分裂。
-  - title: Run/Step Observability
-    details: 每次执行都有状态与证据，支持回放与恢复。
-  - title: Quick by Default
-    details: 默认 quick，影响面扩大或风险升高再升级 standard。
-  - title: Runtime Adapter Boundary
-    details: 当前默认接入 Codex，边界稳定，可逐步扩展更多运行时。
-  - title: Worktree Isolation
-    details: 每个 run 在独立 worktree 执行，降低并行任务相互污染风险。
-  - title: Governance Loop
-    details: cleanup + quality gates 持续回收熵增，让经验沉淀为机制。
----
-
-## Language Entrypoints
-
-- 中文：[/zh/](/zh/)
-- English：[/en/](/en/)
 
-## Quick Links
+正在跳转到品牌入口页：`harness-engineering.html`。
 
-- Brand Page (ZH): [/zh/brand](/zh/brand)
-- Brand Page (EN): [/en/brand](/en/brand)
-- Brand Page (HTML): [/harness-engineering.html](/harness-engineering.html)
-- User Quickstart: [/user-quickstart](/user-quickstart)
-- User Guide: [/user-guide](/user-guide)
-- Docs Index: [/00-index](/00-index)
+If you are not redirected, click:
 
-## Product Screenshots
+- [Open Harness Engineering Home](./harness-engineering.html)
+- [中文入口 /zh/](./zh/)
+- [English Entry /en/](./en/)
 
-<div class="screenshots-grid">
-  <figure class="screenshot-card">
-    <img src="/images/forgeops-console-home.png" alt="ForgeOps console home dashboard screenshot" loading="lazy" />
-    <figcaption>ForgeOps 控制台首页：项目运行态与流程入口总览。</figcaption>
-  </figure>
-  <figure class="screenshot-card">
-    <img src="/images/forgeops-system-settings.png" alt="ForgeOps system settings screenshot" loading="lazy" />
-    <figcaption>系统设置页：运行时、凭据与基础配置集中管理。</figcaption>
-  </figure>
-  <figure class="screenshot-card">
-    <img src="/images/forgeops-codex-skill.png" alt="Using ForgeOps skill inside Codex screenshot" loading="lazy" />
-    <figcaption>在 Codex 内直接使用 ForgeOps 技能：用户可直接在会话里调用 ForgeOps 工作流能力。</figcaption>
-  </figure>
-</div>
+<script>
+  if (typeof window !== "undefined") {
+    window.location.replace("./harness-engineering.html");
+  }
+</script>
diff --git a/docs/public/harness-engineering.html b/docs/public/harness-engineering.html
@@ -736,6 +736,33 @@
         font-size: 0.86rem;
       }
 
+      .screenshots-grid {
+        margin-top: var(--space-3);
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 0.75rem;
+      }
+
+      .screenshot {
+        border-radius: var(--radius-sm);
+        border: 1px solid rgba(122, 152, 205, 0.3);
+        background: rgba(8, 14, 26, 0.82);
+        overflow: hidden;
+      }
+
+      .screenshot img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .screenshot figcaption {
+        padding: 0.8rem 0.85rem;
+        color: var(--text-dim);
+        font-size: 0.84rem;
+        line-height: 1.5;
+      }
+
       .cta-block {
         border: 1px solid rgba(122, 152, 205, 0.34);
         border-radius: var(--radius-lg);
@@ -819,6 +846,10 @@
           grid-template-columns: repeat(2, minmax(0, 1fr));
         }
 
+        .screenshots-grid {
+          grid-template-columns: 1fr;
+        }
+
         .orbit-node {
           width: 45%;
         }
@@ -878,6 +909,7 @@
           <a href="#pillars">Pillars</a>
           <a href="#workflow">Dual Loop</a>
           <a href="#capabilities">Capabilities</a>
+          <a href="#screenshots">Screenshots</a>
           <a href="#docs">Docs</a>
         </nav>
       </div>
@@ -1157,6 +1189,27 @@ <h2 class="reveal">可证实能力摘录（来自仓库文档）</h2>
         </div>
       </section>
 
+      <section id="screenshots">
+        <div class="wrap">
+          <span class="section-label reveal">Screenshots</span>
+          <h2 class="reveal">控制台与 Codex 技能使用场景</h2>
+          <div class="screenshots-grid">
+            <figure class="screenshot reveal">
+              <img src="/images/forgeops-console-home.png" alt="ForgeOps 控制台首页截图" loading="lazy" />
+              <figcaption>ForgeOps 控制台首页：项目、运行态与流程入口总览。</figcaption>
+            </figure>
+            <figure class="screenshot reveal">
+              <img src="/images/forgeops-system-settings.png" alt="ForgeOps 控制台系统设置页面截图" loading="lazy" />
+              <figcaption>系统设置页：运行时、凭据与全局配置集中管理。</figcaption>
+            </figure>
+            <figure class="screenshot reveal">
+              <img src="/images/forgeops-codex-skill.png" alt="在 Codex 中使用 ForgeOps 技能的截图" loading="lazy" />
+              <figcaption>在 Codex 会话中直接调用 ForgeOps 技能，快速进入控制面工作流。</figcaption>
+            </figure>
+          </div>
+        </div>
+      </section>
+
       <section id="docs">
         <div class="wrap">
           <div class="cta-block reveal">
diff --git a/harness-engineering.html b/harness-engineering.html
@@ -90,6 +90,28 @@
         text-decoration: none;
       }
 
+      a:focus-visible,
+      .btn:focus-visible {
+        outline: 2px solid var(--warm);
+        outline-offset: 2px;
+      }
+
+      .skip-link {
+        position: absolute;
+        left: 0.75rem;
+        top: -40px;
+        z-index: 100;
+        background: #ffffff;
+        color: #0f172a;
+        border-radius: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        font-weight: 700;
+      }
+
+      .skip-link:focus {
+        top: 0.75rem;
+      }
+
       .wrap {
         width: var(--wrap);
         margin: 0 auto;
@@ -714,6 +736,33 @@
         font-size: 0.86rem;
       }
 
+      .screenshots-grid {
+        margin-top: var(--space-3);
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 0.75rem;
+      }
+
+      .screenshot {
+        border-radius: var(--radius-sm);
+        border: 1px solid rgba(122, 152, 205, 0.3);
+        background: rgba(8, 14, 26, 0.82);
+        overflow: hidden;
+      }
+
+      .screenshot img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .screenshot figcaption {
+        padding: 0.8rem 0.85rem;
+        color: var(--text-dim);
+        font-size: 0.84rem;
+        line-height: 1.5;
+      }
+
       .cta-block {
         border: 1px solid rgba(122, 152, 205, 0.34);
         border-radius: var(--radius-lg);
@@ -797,6 +846,10 @@
           grid-template-columns: repeat(2, minmax(0, 1fr));
         }
 
+        .screenshots-grid {
+          grid-template-columns: 1fr;
+        }
+
         .orbit-node {
           width: 45%;
         }
@@ -844,17 +897,19 @@
     </style>
   </head>
   <body>
+    <a class="skip-link" href="#top">Skip to content</a>
     <header class="topbar">
       <div class="wrap topbar-inner">
         <a class="brand" href="#top">
           <span class="brand-dot"></span>
           <span>ForgeOps · Harness Engineering</span>
         </a>
-        <nav class="top-links">
+        <nav class="top-links" aria-label="Section navigation">
           <a href="#why">Why Harness</a>
           <a href="#pillars">Pillars</a>
           <a href="#workflow">Dual Loop</a>
           <a href="#capabilities">Capabilities</a>
+          <a href="#screenshots">Screenshots</a>
           <a href="#docs">Docs</a>
         </nav>
       </div>
@@ -1134,6 +1189,27 @@ <h2 class="reveal">可证实能力摘录（来自仓库文档）</h2>
         </div>
       </section>
 
+      <section id="screenshots">
+        <div class="wrap">
+          <span class="section-label reveal">Screenshots</span>
+          <h2 class="reveal">控制台与 Codex 技能使用场景</h2>
+          <div class="screenshots-grid">
+            <figure class="screenshot reveal">
+              <img src="/images/forgeops-console-home.png" alt="ForgeOps 控制台首页截图" loading="lazy" />
+              <figcaption>ForgeOps 控制台首页：项目、运行态与流程入口总览。</figcaption>
+            </figure>
+            <figure class="screenshot reveal">
+              <img src="/images/forgeops-system-settings.png" alt="ForgeOps 控制台系统设置页面截图" loading="lazy" />
+              <figcaption>系统设置页：运行时、凭据与全局配置集中管理。</figcaption>
+            </figure>
+            <figure class="screenshot reveal">
+              <img src="/images/forgeops-codex-skill.png" alt="在 Codex 中使用 ForgeOps 技能的截图" loading="lazy" />
+              <figcaption>在 Codex 会话中直接调用 ForgeOps 技能，快速进入控制面工作流。</figcaption>
+            </figure>
+          </div>
+        </div>
+      </section>
+
       <section id="docs">
         <div class="wrap">
           <div class="cta-block reveal">
@@ -1144,14 +1220,14 @@ <h2>把经验写成机制，才是 Harness Engineering 的起点</h2>
               如果你要继续扩展为官网版本，建议先补齐“真实运行指标、用户案例、部署链接”三类证据，再做下一轮视觉深化。
             </p>
             <div class="hero-actions" style="margin-top: 1.25rem">
-              <a class="btn btn-primary" href="./README.md">查看 README</a>
-              <a class="btn btn-ghost" href="./docs/00-index.md">打开文档地图</a>
+              <a class="btn btn-primary" href="https://github.com/yeyitech/forgeops/blob/main/README.md">查看 README</a>
+              <a class="btn btn-ghost" href="./00-index">打开文档地图</a>
             </div>
             <div class="cta-links">
-              <a class="doc-link" href="./Harness%20Engineering.md">Harness Engineering.md</a>
-              <a class="doc-link" href="./docs/architecture/00-overview.md">architecture/00-overview.md</a>
-              <a class="doc-link" href="./docs/user-guide.md">docs/user-guide.md</a>
-              <a class="doc-link" href="./docs/harness-engineering-guidelines.md">docs/harness-engineering-guidelines.md</a>
+              <a class="doc-link" href="https://github.com/yeyitech/forgeops/blob/main/Harness%20Engineering.md">Harness Engineering.md</a>
+              <a class="doc-link" href="./architecture/00-overview">architecture/00-overview.md</a>
+              <a class="doc-link" href="./user-guide">docs/user-guide.md</a>
+              <a class="doc-link" href="./harness-engineering-guidelines">docs/harness-engineering-guidelines.md</a>
             </div>
           </div>
         </div>
