Wings / FLYCRAN

FLYCRAN 的个人主页：前端架构、Developer Experience 与前端基础设施。

页面结构与视觉已完成，简历和部分个人信息仍待补充。

开发

astro dev --background
astro dev status
astro dev logs
astro dev stop

生产构建：

bun run build
bun run preview

质量检查：

bun run typecheck   # astro check，全量类型检查
bun run lint        # Biome lint，规则使用 recommended
bun run check       # 类型检查 + biome check --fix（会改动文件）

Biome 固定为 2.5.15，配置由 biome init 生成，未改动推荐规则。

同步掘金文章

bun run sync:writing

脚本会拉取掘金最新的 8 篇文章，写入 src/data/writing.ts，页面只读取生成后的数据。

自动同步

GitHub Actions 工作流 .github/workflows/sync-juejin.yml 会在每周一自动同步掘金文章，也支持在 Actions 页面手动触发。同步后如果 src/data/writing.ts 有变化，会自动 commit 并 push。

定时工作流只会从仓库默认分支运行；如果当前站点分支还不是默认分支，需要合并后再启用定时同步。

源码定位

已接入 code-inspector-plugin。开发模式下按住 Option + Shift（macOS）或 Alt + Shift（Windows/Linux）并点击页面元素，会打开编辑器对应源码位置。

配置在 astro.config.mjs 的 vite.plugins，仅在开发模式生效；如果编辑器没有被自动识别，可以在插件参数里指定 editor。

部署

已添加 netlify.toml：使用 bun run build 构建，发布目录为 dist，并将旧站的 /article、/project、/admin 等路由重定向到当前页面锚点。

页面

• /：首页（单页叙事：首屏、作品、关于、技术写作、联系）

结构

src/
├── pages/index.astro          # 首页
├── layouts/Layout.astro       # HTML 壳、字体、主题初始化
├── components/
│   ├── Crane.tsx              # 纸鹤（React + Motion）
│   ├── Crane.module.css
│   ├── ThemeBookmark.tsx      # 夜页书签（React + Motion）
│   ├── CodeTabs.astro         # profile.ts / now.ts / principles.ts
│   ├── ProjectCard.astro      # 项目卡（服务端渲染介绍内容）
│   ├── ProjectDemo.astro      # demo 注册与懒加载
│   ├── SmartUnitDemo.tsx      # smart-unit demo
│   ├── GravityDemo.tsx        # 贡献图动画 demo
│   └── RtkEndpointsDemo.tsx   # RTK Query 跳转 demo
├── data/site.ts               # 资料、项目、平台、文章
└── styles/
    ├── base.css               # reset、toast、reveal
    └── paper.css              # 纸上飞行视觉系统

技术

• Astro 静态输出，默认零框架运行时。
• 项目介绍、标题、摘要、标签和链接由 Astro 服务端渲染，保证 SEO。
• 项目演示区是 React 岛，使用 client:visible 懒加载；smart-unit demo 直接使用 smart-unit 包。
• 纸鹤、夜页书签使用 React + motion；其余交互为原生 TypeScript：代码 tab、导航高亮、滚动 reveal、WebView 倾斜。
• 代码高亮使用 Shiki 在构建时生成，代码内容维护在 src/data/profileCode.ts。
• 标题与正文字体自托管：Noto Serif SC / Noto Sans SC；等宽字体使用系统内置。
• 无数据库、无后台、无 Supabase。

待办

• 补齐简历 PDF、联系方式等个人信息。
• 补齐项目案例详情、简历 PDF 和联系方式。
• 统一响应式细节。
• 多语言切换与时区自动识别（最后一轮）。