Skip to content

Commit 3cf67ba

Browse files
xkcodingclaude
xkcoding
and
claude
committed
feat: add landing page, PostHog analytics, and CI/CD pipeline
- Astro 5 SSG landing page with React Islands (site/) - i18n support (en/zh) with shared JSON translations - 9 components: Hero, Features, HowItWorks, Showcase, Comparison, FAQ, CTA, Header, Footer - Mock screenshots matching desktop app UI - TW4 dark mode with system preference detection - PostHog analytics for both landing page and desktop app - Super properties: env (development/production), app (landing/desktop) - Events: hero_cta_click, install_tab_switch, button_click, etc. - Shared POSTHOG_KEY via root .env with envDir config - GitHub Actions CI/CD: build on PR, deploy to Cloudflare Pages on push to main Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent b045a28 commit 3cf67ba

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+11174
-22
lines changed

‎.github/workflows/deploy-site.yml‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
name: Deploy Landing Page
2+
3+
on:
4+
push:
5+
branches: [main]
6+
paths:
7+
- "site/**"
8+
- ".github/workflows/deploy-site.yml"
9+
pull_request:
10+
branches: [main]
11+
paths:
12+
- "site/**"
13+
- ".github/workflows/deploy-site.yml"
14+
15+
jobs:
16+
build-and-deploy:
17+
runs-on: ubuntu-latest
18+
permissions:
19+
contents: read
20+
deployments: write
21+
22+
steps:
23+
- name: Checkout
24+
uses: actions/checkout@v4
25+
26+
- name: Setup Node.js
27+
uses: actions/setup-node@v4
28+
with:
29+
node-version: 20
30+
cache: npm
31+
cache-dependency-path: site/package-lock.json
32+
33+
- name: Install dependencies
34+
run: npm ci
35+
working-directory: site
36+
37+
- name: Build
38+
run: npm run build
39+
working-directory: site
40+
env:
41+
POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
42+
43+
- name: Deploy to Cloudflare Pages
44+
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
45+
uses: cloudflare/wrangler-action@v3
46+
with:
47+
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
48+
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
49+
command: pages deploy site/dist --project-name=deeplens

‎openspec/changes/phase6-landing-page/.openspec.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
schema: spec-driven
2+
created: 2026-02-22

‎openspec/changes/phase6-landing-page/design.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
## Context
2+
3+
DeepLens 已完成 CLI + 桌面应用 + MCP Server 的核心功能，但缺少公开展示入口。需要一个产品主页承载品牌展示、功能介绍和下载引导。同时需要埋点追踪用户触达（Landing Page）和桌面端使用情况（Desktop App）。
4+
5+
**约束**:
6+
- Landing Page 位于主仓库 `/site` 目录，独立 package.json
7+
- 部署目标: Cloudflare Pages（免费、全球 CDN）
8+
- 设计由 AI 辅助生成，无独立设计师
9+
- 中英文双语支持
10+
11+
## Goals / Non-Goals
12+
13+
**Goals**:
14+
- 构建 Astro SSG 产品主页，7 个核心板块
15+
- 中英文路由级 i18n
16+
- Cloudflare Pages 部署 + Web Analytics
17+
- Tauri 桌面端 Aptabase 埋点
18+
19+
**Non-Goals**:
20+
- 不做 SEO 深度优化（初期）
21+
- 不做用户系统或后端 API
22+
- 不做 A/B 测试
23+
- 不处理 CI/CD（Phase 7 范围）
24+
25+
## Design
26+
27+
### 技术架构
28+
29+
```
30+
site/ # Landing Page (独立项目)
31+
├── src/
32+
│ ├── pages/
33+
│ │ ├── index.astro # 根路由重定向到 /en/
34+
│ │ ├── en/
35+
│ │ │ └── index.astro # English homepage
36+
│ │ └── zh/
37+
│ │ └── index.astro # 中文首页
38+
│ ├── components/
39+
│ │ ├── Hero.tsx # React Island - Hero 板块
40+
│ │ ├── Showcase.tsx # React Island - 功能演示
41+
│ │ ├── Features.tsx # React Island - 技术亮点
42+
│ │ ├── HowItWorks.tsx # React Island - 上手流程
43+
│ │ ├── Comparison.tsx # React Island - 对比表
44+
│ │ ├── FAQ.tsx # React Island - 常见问题
45+
│ │ ├── CTA.tsx # React Island - 行动号召
46+
│ │ ├── Header.tsx # 导航栏 + 语言切换
47+
│ │ └── Footer.tsx # 页脚
48+
│ ├── layouts/
49+
│ │ └── Layout.astro # 基础布局（含 <head>、主题切换）
50+
│ └── i18n/
51+
│ ├── en.json # 英文文案
52+
│ └── zh.json # 中文文案
53+
├── public/
54+
│ ├── favicon.svg
55+
│ └── images/ # 产品截图、GIF
56+
├── astro.config.mjs
57+
├── tailwind.config.ts
58+
├── tsconfig.json
59+
└── package.json
60+
```
61+
62+
### 技术选型
63+
64+
| 模块 | 选型 | 理由 |
65+
|------|------|------|
66+
| 框架 | Astro 5.x (SSG) | 零 JS 默认、Islands 架构、Cloudflare 原生支持 |
67+
| 样式 | Tailwind CSS 4.x | 与主项目一致，utility-first |
68+
| 交互组件 | React Islands (`client:visible`) | 按需水合，最小 JS 体积 |
69+
| i18n | 路由级（`/en/`, `/zh/`）+ JSON 文案 | 简单直接，不依赖额外库 |
70+
| 部署 | Cloudflare Pages | 免费、全球 CDN、自动 HTTPS |
71+
| 图标 | Lucide React | 轻量、与桌面端一致 |
72+
73+
### i18n 方案
74+
75+
路由级 i18n，不使用额外 i18n 库：
76+
77+
1. 根路由 `/` 重定向到 `/en/`（`<meta http-equiv="refresh">`）
78+
2. 每个语言有独立的 `.astro` 页面文件
79+
3. 文案存储在 `src/i18n/en.json` 和 `src/i18n/zh.json`
80+
4. 页面通过 `import en from '../i18n/en.json'` 获取文案
81+
5. Header 组件提供语言切换按钮，切换时跳转到对应语言路由
82+
83+
### 内容板块设计
84+
85+
| 板块 | 组件 | 水合策略 | 内容要点 |
86+
|------|------|---------|---------|
87+
| **Hero** | `Hero.tsx` | `client:visible` | 核心价值主张 + 产品截图/GIF + 安装命令 |
88+
| **Showcase** | `Showcase.tsx` | `client:visible` | Tab 切换展示 4 个阶段：探索→审查→生成→问答 |
89+
| **Features** | `Features.tsx` | `client:visible` | 6 卡片网格：主动探索、聪明简化、双层查询、MCP 集成、增量更新、双语文档 |
90+
| **How It Works** | `HowItWorks.tsx` | `client:visible` | 4 步流程：安装→选目录→Agent 探索→浏览文档 |
91+
| **Comparison** | `Comparison.tsx` | `client:visible` | 对比表：DeepLens vs DeepWiki（本地 vs 云端、隐私等） |
92+
| **FAQ** | `FAQ.tsx` | `client:visible` | 手风琴展开，5-7 个 Q&A |
93+
| **CTA** | `CTA.tsx` | `client:idle` | 下载按钮（GitHub Release 链接）+ brew 安装命令 |
94+
| **Header** | `Header.tsx` | `client:load` | 导航 + 语言切换 + 主题切换 + GitHub Star |
95+
| **Footer** | `Footer.tsx` | 静态 | 版权 + GitHub / Discord / X 链接 |
96+
97+
### 主题系统
98+
99+
- 使用 Tailwind `dark:` 变体
100+
- `<html>` 添加 `class="dark"` 切换
101+
- 默认跟随系统偏好（`prefers-color-scheme`）
102+
- Header 提供手动切换按钮，偏好存入 `localStorage`
103+
104+
### 埋点设计
105+
106+
#### Landing Page — Cloudflare Web Analytics
107+
108+
在 Layout.astro 的 `<head>` 中注入 Cloudflare beacon script：
109+
```html
110+
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
111+
data-cf-beacon='{"token": "SITE_TOKEN"}'></script>
112+
```
113+
无需额外代码，自动采集 PV/UV/来源/设备/地域。
114+
115+
#### Desktop App — Aptabase
116+
117+
在 Tauri 前端初始化 Aptabase SDK，采集关键事件：
118+
119+
| 事件 | 触发时机 | 属性 |
120+
|------|---------|------|
121+
| `app_launch` | 应用启动 | `version`, `os`, `arch` |
122+
| `project_analyze` | 开始分析 | `language`, `file_count` |
123+
| `project_generate` | 开始生成 | `domain_count` |
124+
| `search_fast` | Fast Search | — |
125+
| `search_deep` | Deep Search | — |
126+
| `mcp_connect` | MCP 连接 | `client_name` |
127+
| `export_static` | 导出站点 | — |
128+
129+
Tauri 后端集成 `tauri-plugin-aptabase`，Cargo.toml 添加依赖。
130+
131+
### 响应式断点
132+
133+
| 断点 | 宽度 | 布局 |
134+
|------|------|------|
135+
| Mobile | < 768px | 单列，Hero 文字居中 |
136+
| Tablet | 768-1024px | 双列 Features |
137+
| Desktop | > 1024px | 三列 Features，Hero 左文右图 |
138+
139+
## Risks
140+
141+
| 风险 | 概率 | 影响 | 缓解 |
142+
|------|------|------|------|
143+
| AI 生成设计质量不达标 | 中 | 首页不专业 | 参考 WorkAny 风格，迭代优化 |
144+
| Astro + React Islands 学习曲线 | 低 | 开发速度 | Astro 文档成熟，Islands 模式简单 |
145+
| Aptabase 插件兼容性 | 低 | 桌面端埋点失败 | 官方 Tauri 2 支持，社区活跃 |
146+
| Cloudflare Pages 构建限制 | 低 | 部署问题 | Astro 原生支持 CF Pages adapter |

‎openspec/changes/phase6-landing-page/proposal.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
## Why
2+
3+
DeepLens 作为产品缺少公开的展示入口。用户无法快速了解产品价值、功能特性和安装方式。需要一个产品主页来承载品牌展示、功能介绍和下载引导，同时接入统一埋点追踪用户触达和桌面端使用情况。
4+
5+
## What Changes
6+
7+
- **新建 Landing Page**: 基于 Astro (SSG) 构建产品主页，部署在 Cloudflare Pages
8+
- **中英文双语**: 路由级 i18n，支持 `/en/` 和 `/zh/` 路径
9+
- **内容板块**: Hero、Showcase（核心功能演示）、Features（6 大技术亮点）、How It Works（4 步上手）、Comparison（对比 DeepWiki）、FAQ、CTA（下载按钮）、Footer
10+
- **统一埋点**: Landing Page + Desktop App 统一接入 PostHog Cloud，一个 project key 覆盖全端，支持 PV/UV、自定义事件、漏斗分析、CTR 计算
11+
- **设计**: AI 辅助设计生成，深色/浅色主题切换，响应式布局，与桌面应用视觉风格一致
12+
13+
## Capabilities
14+
15+
### New Capabilities
16+
- `landing-page`: Astro SSG 产品主页，包含 Hero/Showcase/Features/How It Works/Comparison/FAQ/CTA/Footer 板块
17+
- `landing-page-i18n`: 中英文路由级 i18n 支持
18+
- `landing-page-analytics`: PostHog Cloud 埋点接入（Landing Page 侧），追踪 PV/UV、按钮点击 CTR、页面漏斗
19+
- `desktop-analytics`: PostHog Cloud 埋点接入（Desktop 侧），追踪关键业务事件 + UI 交互行为
20+
21+
### Modified Capabilities
22+
（无已有 spec 的需求变更）
23+
24+
## Impact
25+
26+
- **新增目录**: `/site`（Astro 项目，独立 package.json）
27+
- **依赖**: astro, tailwindcss, @astrojs/react, posthog-js
28+
- **部署**: Cloudflare Pages，需配置域名和 CI/CD
29+
- **Tauri 改动**: `ui/` 前端需集成 PostHog JS SDK
30+
- **CI**: 后续 Phase 7 会增加 GitHub Actions 构建 `/site`

‎openspec/changes/phase6-landing-page/specs/desktop-analytics/spec.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Desktop Analytics
2+
3+
## ADDED Requirements
4+
5+
### R1: PostHog Integration
6+
7+
- 使用 `posthog-js` SDK（Tauri WebView 直接使用 Web SDK）
8+
- 与 Landing Page 共用同一个 PostHog Cloud project key
9+
- Project key 通过环境变量注入（`VITE_POSTHOG_KEY`）
10+
- API host: `https://us.i.posthog.com`（或 EU `https://eu.i.posthog.com`）
11+
12+
### R2: Event Schema — 业务事件
13+
14+
| 事件名 | 触发时机 | 属性 | 类型 |
15+
|--------|---------|------|------|
16+
| `app_launch` | 应用启动 | `version`, `os`, `arch` | 自动 |
17+
| `project_analyze` | 开始分析项目 | `language`, `file_count` | 手动 |
18+
| `project_generate` | 开始生成文档 | `domain_count` | 手动 |
19+
| `search_fast` | Fast Search 查询 | — | 手动 |
20+
| `search_deep` | Deep Search 查询 | — | 手动 |
21+
| `mcp_connect` | MCP 客户端连接 | `client_name` | 手动 |
22+
| `export_static` | 导出静态站点 | — | 手动 |
23+
| `update_check` | 检查更新 | `current_version` | 手动 |
24+
| `update_install` | 安装更新 | `new_version` | 手动 |
25+
26+
### R3: Event Schema — UI 交互事件
27+
28+
| 事件名 | 触发时机 | 属性 |
29+
|--------|---------|------|
30+
| `button_click` | 关键按钮点击 | `name`, `page` |
31+
| `tab_switch` | Tab/面板切换 | `from`, `to` |
32+
| `page_view` | 页面/视图切换 | `view_name` |
33+
34+
### R4: Event Tracking Integration Points
35+
36+
- `app_launch`: 在 React App 组件 `useEffect` 中调用 `posthog.capture()`
37+
- `project_analyze` / `project_generate`: 在 SSE 事件流开始时发送
38+
- `search_fast` / `search_deep`: 在搜索 API 调用前发送
39+
- `mcp_connect`: 在 MCP server 接受连接时发送
40+
- `export_static`: 在导出命令执行时发送
41+
- `button_click`: 通过统一的事件追踪 hook 或 wrapper 组件采集
42+
- `page_view`: PostHog 自动采集（SPA 模式下通过 `posthog.capture('$pageview')` 手动触发）
43+
44+
### R5: PostHog 配置
45+
46+
```typescript
47+
posthog.init(POSTHOG_KEY, {
48+
api_host: 'https://us.i.posthog.com',
49+
autocapture: false, // 关闭自动采集，仅手动上报
50+
capture_pageview: false, // SPA 手动控制 pageview
51+
capture_pageleave: true, // 页面离开事件
52+
persistence: 'localStorage', // Tauri WebView 无 Cookie
53+
disable_session_recording: true, // 不录制会话，仅事件追踪
54+
});
55+
```
56+
57+
### R6: Privacy
58+
59+
- PostHog Cloud 不收集 PII（配置 `disable_session_recording: true`）
60+
- 不使用 Cookie（`persistence: 'localStorage'`）
61+
- 免费额度: 1M 事件/月
62+
- 可通过 PostHog 后台配置数据保留策略
63+
64+
### R7: Development Mode
65+
66+
- 开发环境通过 `posthog.opt_out_capturing()` 禁用上报
67+
- 通过 `import.meta.env.DEV` 判断环境

‎openspec/changes/phase6-landing-page/specs/landing-page-analytics/spec.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Landing Page Analytics
2+
3+
## ADDED Requirements
4+
5+
### R1: PostHog Integration
6+
7+
- 在 Layout.astro 的 `<head>` 中注入 PostHog snippet
8+
- 与 Desktop App 共用同一个 PostHog Cloud project key
9+
- Project key 通过环境变量注入（`PUBLIC_POSTHOG_KEY`）
10+
- 开发环境不加载（通过 `import.meta.env.PROD` 判断）
11+
12+
### R2: Auto-collected Metrics
13+
14+
PostHog 自动采集（无需额外代码）：
15+
- 页面浏览量（PV / $pageview）
16+
- 独立访客（UV / distinct_id）
17+
- 流量来源（$referrer, $referring_domain）
18+
- 设备类型和浏览器（$browser, $device_type, $os）
19+
- 地域分布（基于 GeoIP）
20+
21+
### R3: Custom Events — 按钮点击追踪
22+
23+
| 事件名 | 触发时机 | 属性 |
24+
|--------|---------|------|
25+
| `cta_click` | CTA 按钮点击（下载/安装） | `button_name`, `position` |
26+
| `nav_click` | 导航链接点击 | `target`, `source_section` |
27+
| `lang_switch` | 语言切换 | `from_lang`, `to_lang` |
28+
| `faq_toggle` | FAQ 展开/折叠 | `question_id`, `action` |
29+
30+
### R4: Funnel Analysis
31+
32+
PostHog 后台配置漏斗：
33+
- **下载漏斗**: Hero View → Features Scroll → CTA Click → GitHub Release
34+
- **语言偏好**: Landing → Lang Switch → Page Browse
35+
36+
### R5: PostHog 配置
37+
38+
```html
39+
<script>
40+
!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey identify setPersonProperties".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
41+
posthog.init('PUBLIC_POSTHOG_KEY', {
42+
api_host: 'https://us.i.posthog.com',
43+
person_profiles: 'anonymous',
44+
});
45+
</script>
46+
```
47+
48+
> 注: `PUBLIC_POSTHOG_KEY` 在构建时通过 Astro 环境变量替换。
49+
50+
### R6: Privacy
51+
52+
- 使用 `person_profiles: 'anonymous'` — 不创建用户画像
53+
- 不使用 Cookie consent banner（PostHog anonymous 模式无需）
54+
- 符合 GDPR
55+
- 免费额度: 1M 事件/月（与 Desktop 共享）

‎openspec/changes/phase6-landing-page/specs/landing-page-i18n/spec.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Landing Page i18n
2+
3+
## ADDED Requirements
4+
5+
### R1: Routing Strategy
6+
7+
- 路由级 i18n：`/en/` 和 `/zh/`
8+
- 根路由 `/` 重定向到 `/en/`（使用 `<meta http-equiv="refresh">` 或 Astro redirect）
9+
- 每个语言有独立的 `.astro` 页面文件
10+
11+
### R2: Content Management
12+
13+
- 文案存储在 `src/i18n/en.json` 和 `src/i18n/zh.json`
14+
- 页面通过 import 获取对应语言文案
15+
- JSON 结构按板块组织（hero、features、faq 等）
16+
17+
### R3: Language Switcher
18+
19+
- Header 组件提供语言切换按钮（EN / 中文）
20+
- 切换时跳转到对应语言路由（保持同一页面位置）
21+
- 当前语言高亮显示
22+
23+
### R4: Content Localization
24+
25+
- 所有 UI 文案完整翻译
26+
- 产品截图/GIF 可按语言差异化（可选）
27+
- SEO meta tags 按语言设置（title、description、og:locale）

0 commit comments

Comments
 (0)