xfy
8bdc3553bd
several bugs found via in-browser debugging, all in lightbox.js + the
blur-up CSS:
1. DOMRect attribute mismatch: getBoundingClientRect returns .width/
.height, but code read .w/.h -> NaN transforms. map rectOf() to a
uniform {x,y,w,h}.
2. zoom scale base was the huge original natural size (2942px), so the
centered state collapsed to a tiny scale and the open animation ran
backwards (shrink). base the scale on originRect instead: first
frame is the in-article image at scale 1, centered state scales to
target.w/originRect.w. open is always grow, close always shrink.
3. scroll-to-close fired on a phantom scroll jump: the oversized
original img (layout size = naturalW) expanded the document's
scrollable area. set img layout size explicitly and add
overflow:hidden on the (position:fixed) overlay so the img cannot
expand the body.
4. first open animation jumped from the wrong position: a single rAF
was not enough to commit the no-transition first frame. use a forced
reflow (offsetHeight) + double-rAF before starting the transition.
5. blur-up full layer stuck at opacity 0 until a forced reflow (opening
the lightbox) repainted it. drop the opacity transition on .blur-img-
full and set opacity:1 from JS on load (deterministic, no repaint
race). mark the container .is-loaded and hide the placeholder via
the container class.
6. a 16px grey gap above in-article images: .md-content img { margin:
1rem 0 } applied to the absolute .blur-img-full too, pushing it
down. reset margin:0 / max-width:none on the blur-up img layers.
Yggdrasil
基于 Dioxus 0.7 的全栈博客系统，Rust 单一代码库同时编译为 WASM 前端和原生服务端。
技术栈
- 框架: Dioxus 0.7 (fullstack)
- 数据库: PostgreSQL + tokio-postgres
- 样式: Tailwind CSS v4
- 密码: Argon2
- 会话: UUID token + cookie
功能
- 邮箱注册 / 登录（单管理员模式，首次注册后关闭）
- 会话管理与自动过期清理
- 暗色 / 亮色主题切换
- 后台文章撰写（Tiptap Markdown 编辑器）
- 文章归档与标签浏览
开发
依赖 Rust 1.95+、wasm32 目标、dx CLI、tailwindcss CLI v4 和 PostgreSQL。
# 配置数据库
DATABASE_URL=postgres://postgres:postgres@localhost:5432/yggdrasil
# 运行迁移（自动创建数据库并按顺序执行 migrations/ 下所有 SQL）
./migrate.sh
# 启动开发服务器
make dev
构建
make build