codeurjc-slidev

Collection of themes, layouts, addons, and hacks for creating Slidev presentations in the CodeURJC group.

Includes a custom drag-and-drop layout editor that lets you visually arrange slide elements (title bar, logo, red bar, content area) and persist layouts to .vue files via a Vite dev server middleware.

Features

• Custom Slidev layouts with draggable overlays (red bar, logo, title, content)
• Layout editor integrated into Slidev's built-in SideEditor panel
• Drag/resize slide elements with undo support
• Save layouts as new .vue files or overwrite the current one
• Urjc-themed UnoCSS preset (urjc-red, urjc-green colors)
• Unit tests (Vitest) and e2e tests (Playwright)

Stack

• 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

Getting started

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)

Project structure

codeurjc-slidev/
├── slides.md                 # Presentation source
├── layouts/default.vue       # Slide layout with editor overlays
├── composables/useEditor.ts  # Layout editor state (drag, resize, undo)
├── _override/SideEditor.vue  # Custom layout tab in Slidev's SideEditor
├── setup/global-top.vue      # Slidev setup component
├── vite.config.ts            # Vite transform + save-layout middleware
├── e2e/                      # E2e test environment
│   ├── slides.md             # Test presentation (standalone copy)
│   ├── vite.config.ts        # E2e-specific Vite config
│   └── layouts/default.vue   # Symlink to root layouts/default.vue
├── tests/                    # Playwright e2e tests
└── composables/__tests__/    # Vitest unit tests

Development

1. Edit the layout (layouts/default.vue) or composable (composables/useEditor.ts)
2. Write/update tests (composables/__tests__/ for unit, tests/ for e2e)
3. Run pnpm test && pnpm test:e2e
4. Commit: git add -A && git commit -m "message"

The e2e test environment in e2e/ uses symlinks to keep files in sync with the root project. The only unique file is e2e/vite.config.ts which provides the same transform and save-layout middleware scoped to the e2e directory. All test modifications are restored by afterAll hooks.