opswarden-git/opswarden-website

GitHub: opswarden-git/opswarden-website

OpsWarden 官网是基于 Next.js 构建的静态营销落地页,用于展示 AI SRE 平台产品并引导用户进入应用程序。

Stars: 0 | Forks: 0

OpsWarden

OpsWarden — 网站

Website CI License: Apache 2.0 Status: wip

Next.js React TypeScript Tailwind CSS Lucide

- [简介](#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, 偏差过滤, 安全插件, 官网, 自动化攻击, 落地页