ViudiraTech Community Website

ViudiraTech 官方开源社区网站。Vite + Vanilla JavaScript + GitHub API + 可开关的 Backdrop Catalog 风格 SVG Liquid Glass。

设计与内容

• 默认是暖白纸面风格：衬线标题（Noto Serif SC）、无衬线正文、单一陶土色强调色，扁平卡片，没有超大字号。设计 token 在 src/styles/tokens.css，公共页面样式在 src/styles/site.css。
• 组织介绍内容（关注方向、代表项目、技术栈、成员、近况、参与方式）集中在 src/data/organization.js，均取自各仓库 README 与组织主页；Stars、语言、更新时间等实时数据仍来自 GitHub API。
• 页面：首页、项目、关于我们、社区、动态。Liquid UI Lab、折射测试与玻璃设置移到页脚「实验室」。

Liquid Glass 开关

页头右侧的「液态玻璃」开关（移动端在菜单里）和 #/settings 的总开关是同一个偏好（liquid，默认关闭，存于 localStorage）。

• 关闭：平面页头、普通按钮与筛选标签，SVG 玻璃引擎只在实验室页面运行。
• 开启：页头换成共享 LiquidBottomTabs + backplate，按钮由 siteAction() 渲染为共享 LiquidButton（主按钮使用 catalog-button-clay 色调），项目筛选换成 LiquidBottomTabs，背景换成 src/assets/warm-scene.svg 暖色场景，内容卡片变为 CSS 毛玻璃。
• 切换时 main.js 的 remountForGlassMode() 销毁所有玻璃控制器并重新挂载整个外壳；index.html 在首帧前读取偏好，避免闪烁。

架构：Single-Entry SPA

生产环境现在只有一个真正入口：index.html。

站内路由使用 hash SPA，适合 GitHub Pages / 任意静态托管，不依赖服务器 rewrite：

• #/ — 首页
• #/projects — Repository Explorer
• #/about — 关于我们
• #/community — 社区 / 参与方式
• #/activity — GitHub Public Events
• #/glass-ui — Liquid UI Lab
• #/settings — Liquid Glass 设置
• #/glass-test — Liquid Glass 折射测试

projects.html、community.html 等旧文件只作为源码目录下的兼容跳转壳，不再进入 Vite production multi-page build。

SPA 切页只替换 <main>：Header、LiquidBottomTabs、SVG glass controller、Catalog spring scheduler 和 ambient scene 都不会卸载。document.startViewTransition() 只捕获正文，因此 Header 的 lens / indicator / InteractiveHighlight 可以在正文切换期间继续完成动画。

Shared Liquid Bottom Tabs

Header 和 Liquid UI Lab 使用同一个 src/components/liquid-bottom-tabs.js 与同一个 src/animation/catalog-motion.js scheduler。

共享内容包括：

• 64px panel / 56px indicator
• 24 / 24 panel lens
• 10 / 14 indicator lens
• 78 / 56 pressed scale
• panel 4dp damped offset
• velocity deformation
• InteractiveHighlight
• Catalog spring 参数

Header 不创建第二套 tabs。它只给共享组件传导航 items 和较亮的 indicator surface；Catalog demo 保留原版偏黑的 10% idle indicator surface。

Shared Liquid Slider

Liquid UI Lab 与设置页使用同一个 src/components/liquid-slider.js。设置页没有复制 Slider 样式或动画：40×24 thumb、10 / 14 chromatic lens、Catalog spring、速度形变和 InteractiveHighlight 都来自同一个共享组件。

Liquid Glass 设置

#/settings 提供站点液态玻璃总开关、透明度与模糊度两个共享 Liquid Slider，以及阅读底的 Catalog LiquidToggle。50% 对应网站原始材质参数；透明度向右更通透，模糊度 0–100% 对应 0–2× 各 preset 原始 blur。设置持久化到 localStorage。

“易读背景使用完整 Liquid Glass”默认关闭，且只在站点液态玻璃开启时生效：关闭时正文阅读底使用 CSS 毛玻璃；开启时通过公共 readability-glass.js 把这些相同 DOM surface 切换到 readability-full 的完整 SVG lens / blur / depth / highlight / shadow 管线。开启前会调用公共 liquid-dialog.js 显示 Backdrop Catalog 风格确认 Dialog。

设置采用显式 data-glass-settings-scope="site" 作用域；Liquid UI Lab / Glass Test 的控件本身没有该 scope，因此 Catalog 的固定 blur / surface 数据不会被全局设置覆盖。

Liquid Glass

当前运行时使用优化过的 SVG / backdrop-filter 管线，不使用 WebGL：

1. 所有 filter 共用一个隐藏 SVG <defs> root；
2. rounded-rect SDF displacement map 按几何尺寸缓存；
3. 静态 Catalog Button / panel 使用局部背景 sample；
4. Toggle / Slider 空闲时不执行无意义 lens；
5. blur 放在 SVG filter primitive 内，动画时不重写整条 filter string；
6. 屏幕外玻璃通过 IntersectionObserver suspend；
7. SPA 路由只销毁旧 <main> 内的 controller，Header controller 永久保留；
8. displacement map 保持完整分辨率，不通过降采样换性能。

Backdrop Catalog 控件

• LiquidButton：48px；2px blur；12 / 24 lens；InteractiveHighlight 和弹性拖动。
• LiquidToggle：64×28 track + 40×24 thumb；按下进入 5 / 10 chromatic lens。
• LiquidSlider：6px track + 40×24 thumb；10 / 14 chromatic lens；速度形变。
• LiquidBottomTabs：64px panel、4px padding、8px blur、24 / 24 lens；56px indicator。

GitHub 数据

仓库和公开 Activity 从 GitHub API 读取，并带 localStorage cache / stale fallback。SPA 中数据只需加载一次即可在各 route 之间复用，不生成假仓库、假 commit 或假 release。

开发

npm install
npm run dev

Production：

npm run check
npm run build
npm run preview

GitHub Pages

生产构建默认使用相对 base: ./。同一份 dist 可以同时部署到 GitHub Pages 项目子路径（如 /web/）和绑定到根路径的自定义域名。不要在 Pages workflow 中强制 VITE_BASE_PATH=/web/，否则自定义域名根路径会请求错误的 /web/assets/*。

Vite 已改为 single-entry SPA build。Hash routing 不需要 GitHub Pages 提供 history fallback。

Project Drawer

• Drawer 外壳使用单层 CSS 毛玻璃（backdrop-filter: blur() saturate()），不运行 SVG displacement / lens。
• 内部长内容与滚动区域不参与光学滤镜，避免滚动时反复重绘大面积折射。
• Drawer 毛玻璃仍响应设置页的站点透明度与模糊度。
• 关闭按钮继续复用共享 LiquidButton；快速点击会完成可见按压脉冲并等待回弹稳定后再关闭 Drawer。

Background

With Liquid Glass off the backdrop is plain warm paper. With it on, #ambient uses src/assets/warm-scene.svg (soft colour fields plus contour lines) so local-sampled lenses have structure to refract. The Liquid UI Lab canvases keep the fixed Lorem Picsum image ID 1015.

The Projects category selector reuses the same shared LiquidBottomTabs component used by the Header and Liquid UI Lab.