Repository navigation
feat: Excalidraw embed + bidirectional blog-link cards - #111
Merged
Merged
Conversation
Add :::excalidraw (static preview + pan-zoom toolbar + /_media source URL) and :::blog-link (build-time slug metadata, square-rounded author avatar). Demo both in the MD custom styles post; document module ownership.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Format the new plugins, viewer CSS, image-interactions, and tests so CI format check passes. Extend blog-content-publisher skill with :::excalidraw / :::blog-link placement, preview, and reciprocal-link authoring notes; tighten 项目解析 wording.
Satisfy eslint no-useless-assignment after Format CI passed.
MIRROR_EXTENSIONS error text dropped「的媒体」; keep assertion flexible.
Replace SVG/PNG-preview-primary viewer with a viewMode canvas island (like Shiro). Embed allows single-finger pan + pinch; expand locks single-finger pan, keeps pinch, and shows an inverse zoom bar. Download uses static /_media URLs; preview image is optional fallback.
Pin @excalidraw/excalidraw@0.17 (same as Shiro), viewMode+zenMode, hide leftover editor chrome, use 16:9 landscape footprint (max ~500px), restore zoom%/reset/download toolbars above canvas, sync fonts to /excalidraw-assets via media-sync.
Rewrite canvas/viewer/CSS to match Shiro Excalidraw.tsx (viewMode+zen, h-[500px], native pinch/zoom pill, no pointer capture hacks). Keep dialog expand instead of mobile blob:, add static /_media download. Zoom bar starts full-width at fit and shortens when zooming in. Add subtle light/dark shadows on :::blog-link cards.
Hide all native Excalidraw chrome. Custom bottom-right pill with even icons (−/%/+/reset/expand/download). Card uses ~16:10 with max-height min(42vh,420px). Expand dialog keeps L–R zoom bar, download, and single-finger pan lock.
Toolbar ± now sets zoom with scroll offsets so the viewport-center scene point stays fixed (plain updateScene zoom was origin-anchored and drifted). Drop expand panLocked so one-finger/mouse pan + pinch match the embed. SPEC wording updated.
Aspect 16/9 (ref ~871×490); desktop max-height min(36vh, 490px); mobile ≤640px min(28vh, 240px); pill inset 7px. Docs/demo copy aligned. Zoom-center and expand pan unchanged.
Bare `16:9` was parsed as text directive `:9`, rendering as 16<9>. Use ratio character 16∶9 in the custom-styles demo copy.
Replace incorrect sceneX/sceneY scroll rewrite with Excalidraw-native viewport-center formula (scroll += c * (1/next - 1/prev)). Enable detectScroll so embed pinch offsets stay fresh. Align pill and expand zoom-bar clamps with library getNormalizedZoom (0.1–30).
Capture scene-space content center after fitToContent and zoom multiplicatively (×1.2/÷1.2) while forcing that anchor back to the viewport center, matching innei-style “always same center” expectation.
Replace the mounted editor with a lazy exporter and a centered custom viewport, and keep the original source download. Also resolve nested blog links, reject unusable drawing libraries, and stop Bilibili autoplay.
Keep both unreleased changelog entries and the shared lockfile entry so the drawing viewer and comments can land together.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
:::excalidraw：用 React 岛接官方@excalidraw/excalidraw（viewMode）渲染.excalidraw；预览图改为可选降级，不再当主展示。/_media/…/*.excalidraw（不用永久blob:）。:::blog-link{slug}：构建期标题／描述；圆角方头像；双向靠两边手写卡片。image-layout-demo.md；文档与blog-content-publisherskill 已同步。Verify
pnpm format/pnpm check/pnpm build（Node ≥22）Review notes