Collection of themes, layouts, addons, and hacks for creating Slidev presentations in the CodeURJC group. Includes a custom layout editor that lets you drag/resize slide elements (red bar, logo, title, content) and save layouts via a Vite dev server middleware.
Architecture:
slides.md— presentation source (REST API in React topic)layouts/default.vue— reusable slide layout with draggable element overlayscomposables/useEditor.ts— singleton state for element positions, undo, drag/resize, and save_override/SideEditor.vue— custom Slidev SideEditor override with a "Layout" tabvite.config.ts— Vite transform hook that injects the SideEditor override;/api/save-layoutmiddleware that persists layout CSS variables
- Framework: Vue 3 + TypeScript
- Presentation: Slidev 52
- Styling: UnoCSS
- Unit tests: Vitest 4 + jsdom +
@testing-library/vue - E2e tests: Playwright 1.61 (
@playwright/test), Chromium - Package manager: pnpm
pnpm install
pnpm dev # start slidev dev server (port 3030)
pnpm build # build static slides
pnpm export # export to PDF
pnpm test # run unit tests (vitest)
pnpm test:e2e # run e2e tests (playwright, auto-starts server)- Unit tests (
vitest):pnpm test— runscomposables/__tests__/*.spec.tsin jsdom - E2e tests (
playwright):pnpm test:e2e— runstests/*.spec.tsagainst a Chromium browser
The e2e webServer in playwright.config.ts auto-starts Slidev on port 3030 using e2e/slides.md as entry. The e2e/ directory contains symlinks to the root files (slides.md, layouts/default.vue, composables/useEditor.ts, _override/SideEditor.vue, public/) and its own vite.config.ts. Symlinks keep the e2e environment in sync with the root project, but e2e/vite.config.ts is not a symlink — it's a standalone copy (with adjusted __dirname paths) that must be manually kept in sync with root vite.config.ts whenever the /api/save-layout middleware or its VAR_MAP changes, or e2e tests will silently exercise stale save/restore logic. All test modifications are restored by afterAll hooks.
- Implement feature (edit composables, layouts, or override components)
- Write/update tests (
composables/__tests__/for unit,tests/for e2e) pnpm test && pnpm test:e2egit add -A && git commit -m "message"