build-transparency-dashboard

搭建一个实时公开的“构建看板”（build dashboard），自动展示工作实证——包括提交次数、最近一次提交信息、时间戳等——这些数据从你的私有 GitHub 仓库中拉取，并呈现在一个公开的静态网站上。

适用场景

当满足以下任一需求时，可使用该技能：

• 向社区实时展示你正在交付的内容，每次 Git 推送后自动更新
• 实现“公开构建”（build in public），同时不暴露私有代码仓库
• 集成社区创意看板（ideas board），供用户投票决定下一个要构建的功能
• 为你的产品或项目打造一个专业、美观的 /build 页面

整体模式

私有仓库（你的代码）
  └── GitHub Actions：监听 push 事件 → 执行 update-status.js
        └── 生成 status.json → 提交至公开网站仓库
              └── 公开网站每 60 秒拉取 status.json → 渲染实时统计信息

效果：每次向私有仓库推送代码，都会在几分钟内自动更新你的公开看板。

包含内容

build-transparency-dashboard/
├── SKILL.md                     ← 本文件
├── scripts/
│   ├── update-status.js         ← 基于 git log 生成 status.json
│   └── ideas-api.js             ← 社区创意看板所需的 Express 路由
├── assets/
│   ├── build.html               ← 看板页面模板
│   ├── nav.js                   ← 共享导航栏渲染器（支持配置）
│   ├── nav.css                  ← 导航栏样式
│   └── github-actions.yml       ← GitHub Actions 工作流模板
└── references/
    └── setup-guide.md           ← 分步搭建指南

快速搭建

1. 需自定义的变量

在 assets/build.html 中搜索以下 TODO 标记：

在 assets/github-actions.yml 中设置以下变量：

在 assets/nav.js 中，编辑顶部的配置对象：

const NAV_CONFIG = {
  brand: 'MYAPP',            // 导航栏 Logo 文字
  links: [
    { href: '/', label: 'Home' },
    { href: '/build', label: 'The Build' },
  ],
  badge: { label: '@yourhandle ↗', href: 'https://x.com/yourhandle' },
};

2. 必需的 GitHub Secret

在你的私有仓库中添加 Secret：Settings → Secrets and variables → Actions：

• GH_PAT — 具备 repo 权限的 Personal Access Token（用于向公开网站仓库推送变更）

3. 部署你的公开网站

build.html 是一个独立的静态页面，可部署至任意平台：

• Fly.io：在你的网站仓库中执行 fly launch + fly deploy
• Netlify：拖放上传或关联仓库
• GitHub Pages：推送至 gh-pages 分支
• Vercel：关联仓库，零配置部署

4. 添加 Ideas API（可选）

社区创意看板依赖一个运行中的 API。将 scripts/ideas-api.js 复制到你的后端应用中，并挂载对应路由。该 API 使用扁平化 JSON 文件存储数据，无需数据库。

如不启用此功能：可直接从 build.html 中移除 coin/ideas 相关区块，整个看板仍可作为纯静态页面正常运行。

5. 将工作流添加至你的私有仓库

将 assets/github-actions.yml 复制到私有仓库的 .github/workflows/update-build-status.yml 路径下。推送任意一次提交，工作流即自动触发。

status.json 数据结构

该工作流会生成如下 JSON 文件，并提交至你的公开网站仓库：

{
  "generatedAt": "2026-02-28T21:00:00Z",
  "version": "1.0.0",
  "project": {
    "name": "MyApp",
    "description": "Your project description.",
    "born": "2026-01-01T00:00:00-05:00",
    "status": "building",
    "statusText": "Online · Building"
  },
  "lastCommit": {
    "message": "feat: add dark mode",
    "time": "2026-02-28T20:55:00Z"
  },
  "commitsThisWeek": 12,
  "shipped": [],
  "queue": [],
  "ideas": []
}

设计系统

模板采用以下设计规范：

• Syne（标题字体）+ DM Sans（正文）+ DM Mono（等宽字体 / 标签）
• 暗色主题 — 背景色 #050508，品牌强调色 #7c6eff
• 叠加噪点纹理、动态光球、固定滚动横幅（ticker bar）
• 完全响应式（适配桌面 → 平板 → 移动端）

可通过修改 CSS 自定义属性 --nova / --nova2 替换为你自己的品牌色。

查看真实示例

该模式已实际应用于 novaiok-site.fly.dev/build，即参考实现。

下一步建议阅读的文件

• references/setup-guide.md — 含完整命令的详细分步指南
• assets/build.html — 页面模板（搜索 TODO）
• assets/github-actions.yml — GitHub Actions 工作流定义