OpsWarden — 网站

- [简介](#introduction) — 本仓库是什么 - [范围](#scope) — 包含什么，以及刻意不包含什么 - [工作原理](#how-it-works) — 安装并在本地运行 - [架构](#architecture) — 单个落地页，各部分的位置 - [设计](#design) — 共享的 OpsWarden 视觉语言 - [贡献](#contributing) — 工作流程 - 关联仓库：[`opswarden-app`](https://github.com/opswarden-git/opswarden)（产品）和 [`opswarden-ops`](https://github.com/opswarden-git/opswarden-ops)（基础设施） ## 简介 **OpsWarden — 网站** 是 OpsWarden 的**公共营销界面**：即 介绍该产品（与 **AI SRE** 调查代理进行实时 **Incident** 和 **Release** 协调）的落地页，并引导访客进入应用程序以进行**登录**或**注册**。 它与**产品**（`opswarden-app`）以及**云/运维 层**（`opswarden-ops`）相**分离**，并且**刻意保持精简**：没有业务逻辑，没有 API， 没有数据。它只负责渲染、解释，并交接给应用程序。所有的产品 行为都存在于服务端的 `opswarden-app` 中（Rust/Axum，六边形架构）；本仓库 仅负责显示和转发。 ## 范围 **包含在此处** - 单个落地页（hero 部分 + 可通过锚点访问的 `About` / `Install` / `Ressources` / `Community` 部分） - 玻璃态顶部栏（logo + `Log in` / `Sign Up`）和玻璃态页脚 - 共享的 OpsWarden 视觉语言：Inter 字体、渐变背景、统一的 `.glass` 表面、金色点缀 —— 没有边框，没有业务逻辑 **刻意不包含在此处** - 身份验证、会话、RBAC、incident、release、WebSockets → `opswarden-app` - Kubernetes / Terraform / DOKS / Traefik 部署 → `opswarden-ops` ## 工作原理 ### 安装 ``` # 1. Clone git clone https://github.com/opswarden-git/opswarden-website.git # HTTPS git clone git@github.com:opswarden-git/opswarden-website.git # SSH cd opswarden-website # 2. 安装 dependencies npm install # 3. 运行 dev server npm run dev -- -p 3002 # http://localhost:3002 ``` ### 项目一览 ``` opswarden-website/ ├── src/ │ ├── app/ │ │ ├── layout.tsx # root layout: Inter font, Header + Footer, gradient bg │ │ ├── page.tsx # single landing — hero + About/Install/Ressources/Community │ │ ├── globals.css # Tailwind v4 theme + .glass surface + page gradient │ │ └── icon.png # favicon │ ├── components/ │ │ └── layout/ │ │ ├── Header.tsx # glass top bar (logo + Log in / Sign Up) │ │ └── Footer.tsx # glass footer (Explore / Account / Connect) │ └── lib/ │ └── utils.ts # cn() helper (clsx + tailwind-merge) ├── public/assets/ # brand kit (hero icon, logos) ├── next.config.ts ├── package.json └── README.md ``` ### 构建 ``` npm run build # production build npm run start # serve the build npm run lint # ESLint ``` ## 架构 这里有意**不设应用架构** —— 该网站只是一个 静态渲染的 Next.js App Router 路由。 ``` layout.tsx (Header + Footer + fonts + bg) -> page.tsx (hero + sections) | anchors (#about / #install / #ressources / #community) | Header / Footer -> hand-off to opswarden-app (Log in / Sign Up) ``` - **页面所在位置**：`src/app/page.tsx`（单个落地页，部分锚点）。 - **界面外壳所在位置**：`src/components/layout/`（`Header`、`Footer`）。 - **视觉语言所在位置**：`src/app/globals.css`（主题 token、 `.glass` 表面、页面渐变）—— 见[设计](#design)。 ## 设计 该网站共享 OpsWarden 的视觉语言，使得营销界面与 产品感觉像是一个系统： - **字体**：Inter（标题 + 正文），通过 `next/font` 引入。 - **背景**：全局应用的单个微妙渐变 —— 在 网站和应用程序中保持统一。 - **表面**：一种 `.glass` 材质（半透明填充 + `backdrop-blur`，无 边框），用于页眉、页脚和面板 —— 更亮、一致的界面外壳。 - **点缀**：单一的黄金色调；除此之外是克制的深色调色板。 ## 贡献 基于主干的开发流程：短生命周期的分支（`feat/`、`fix/`、`chore/`、`docs/`）， 约定式提交，压缩合并至受保护的 `main` 分支。保持网站精简 —— 没有业务逻辑，没有 API 调用；产品行为应放在 `opswarden-app` 中。 提交 PR 前：确保 `npm run lint` 和 `npm run build` 成功通过。 ## 许可证 OpsWarden 在 **Apache License 2.0** 下发布。参见 [LICENSE](LICENSE)。

标签：React, SRE, Syscalls, Tailwind CSS, TypeScript, 偏差过滤, 安全插件, 官网, 自动化攻击, 落地页