slidev-theme-kotlin 0.0.8 → 0.10.0

package/CHANGELOG.md

@@ -0,0 +1,42 @@
+# Changelog
+
+## 0.10.0
+
+### Added
+
+- Bundle `DrawnAnnotation`, a click-aware, Rough.js-powered annotation component for marking elements or exact code text with circles, underlines, boxes, and strike-throughs.
+- Support leader lines, target marks, automatic non-overlapping labels, sequential nested reveals, temporary click ranges, and Magic Move-aware tracking.
+- Add complete component documentation and interactive examples to the theme showcase.
+
+### Packaging
+
+- Add `roughjs` as a runtime dependency required by `DrawnAnnotation`.
+
+## 0.0.10
+
+### Added
+
+- Allow decks to enable Kodee once with `themeConfig.kodee`. A shared per-slide layer supports every layout: regular slides use a small bottom-right mascot, while cover and intro layouts use a large featured mascot.
+- Support concise per-slide overrides such as `kodee: wink` and `kodee: false`, while retaining the full object configuration.
+- Implement the documented `medium` Kodee size.
+- Bundle `DrawnAnnotation`, a click-aware, Rough.js-powered annotation component for marking elements or exact code text with circles, underlines, boxes, and strike-throughs.
+- Support leader lines, target marks, automatic non-overlapping labels, sequential nested reveals, temporary click ranges, and Magic Move-aware tracking.
+- Add complete component documentation and interactive examples to the theme showcase.
+
+### Packaging
+
+- Add `roughjs` as a runtime dependency required by `DrawnAnnotation`.
+
+## 0.0.9
+
+### Fixed
+
+- Bundle Kodee SVG variants with the theme instead of serving them from the theme package's `public/` directory.
+
+  Previously, `Kodee.vue` generated runtime URLs such as `/theme/kodee-welcome.svg` and relied on Slidev to copy a consuming theme's `public/` directory into the presentation output. That copying behavior did not work with newer Slidev/Vite versions (including Slidev 52.19 and Vite 8), so consumer builds omitted `dist/theme/kodee-*.svg`; Kodee images then returned 404s in the browser.
+
+  Kodee assets now live in `assets/` and are imported by Vite at build time. Consumer presentations receive emitted, fingerprinted asset URLs, independent of Slidev's theme-public-directory copying behavior.
+
+### Packaging
+
+- Added an npm `files` allowlist so the bundled mascot assets are always included in the published theme package.

package/README.md

@@ -12,6 +12,7 @@ This theme provides a professional presentation template tailored for Kotlin dev
 - **Multiple Layouts**: Pre-built layouts including default, cover, and intro
 - **Kotlin Branding**: Official Kotlin logos for both light and dark modes
 - **JetBrains Fonts**: Uses Inter for sans-serif and JetBrains Mono for code
+- **Drawn annotations**: Click-aware, hand-drawn marks, labels, and connectors for elements and code
 
 ## Requirements
 
@@ -43,7 +44,25 @@ transition: view-transition
 
 ### Using Kodee Mascot
 
-Add Kodee to any slide by including the `kodee` configuration in the slide's frontmatter:
+Enable Kodee once for the whole deck with `themeConfig`:
+
+```yaml
+---
+theme: kotlin
+themeConfig:
+  kodee: greeting
+---
+```
+
+Kodee then uses layout-aware defaults: `small` in the bottom-right corner on regular slides, and `large`/`featured` on `cover` and `intro` slides. Override only the variant when a slide needs a different expression:
+
+```yaml
+---
+kodee: wink
+---
+```
+
+Use `kodee: false` to hide the mascot on one slide. The original object form remains available when you need complete control:
 
 ```yaml
 ---
@@ -52,8 +71,6 @@ kodee:
   size: large
   position: featured
 ---
-
-# Your Slide Content
 ```
 
 #### Kodee Configuration Options
@@ -72,13 +89,13 @@ kodee:
   - `tiny` - Tiny Kodee
 
 - **size**: Control Kodee's size
-  - `small` - 200x200px (default)
-  - `large` - 600x600px (500x500px for wave variant)
-  - `medium` - TODO: Not yet implemented
+  - `small` - 200x200px (regular-layout default)
+  - `medium` - 320x320px
+  - `large` - 600x600px (500x500px for wave variant; cover/intro default)
 
 - **position**: Control Kodee's placement
-  - `corner` - Bottom right corner (default)
-  - `featured` - Prominently displayed on slide
+  - `corner` - Bottom right corner (regular-layout default)
+  - `featured` - Prominently displayed (cover/intro default)
   - `custom` - Use with `x` and `y` coordinates
 
 #### Custom Positioning
@@ -96,6 +113,42 @@ kodee:
 ---
 ```
 
+### Using DrawnAnnotation
+
+`<DrawnAnnotation>` is auto-registered for every deck using the theme. It can mark an element with a selector or exact text inside a Shiki or Magic Move code block, then connect that mark to a label or another element.
+
+````md
+<DrawnAnnotation type="circle" text="fun main" label="program entry point" :on="1">
+
+```kotlin
+fun main() = println("Hello, Kotlin!")
+```
+
+</DrawnAnnotation>
+````
+
+The full prop reference, timing behavior, and troubleshooting guide are in [`components/README.md`](components/README.md). The bundled [`slides.md`](slides.md) includes working examples of code annotations, connectors, labels, sequential reveals, and Magic Move integration.
+
+#### IntelliJ formatting
+
+IntelliJ recognizes only the first YAML block in a Markdown file as frontmatter. To keep later Slidev frontmatter intact when using **Reformat Code**, enable formatter tags and stop formatting after the deck headmatter:
+
+```ini
+# .editorconfig
+[*.md]
+ij_formatter_tags_enabled = true
+```
+
+```md
+---
+theme: kotlin
+---
+
+<!-- @formatter:off -->
+```
+
+The theme's example deck includes this guard.
+
 ## Development
 
 ### Available Scripts
@@ -114,9 +167,9 @@ npm run export
 npm run screenshot
 ```
 
-### Running the Example
+### Running the Slides
 
-The repository includes `example.md` demonstrating all theme features:
+The repository includes `slides.md`, a compact presentation demonstrating the theme's layouts, Kotlin highlighting, Kodee animations, magic moves, and click animations:
 
 ```bash
 npm run dev
@@ -131,12 +184,14 @@ This will open the example presentation in your browser with hot-reload enabled.
 ├── components/          # Vue components
 │   ├── Kodee.vue       # Main Kodee mascot component with animations
 │   └── KodeeWrapper.vue # Wrapper component for Kodee integration
+├── slide-bottom.vue     # Per-slide Kodee layer shared by every layout
 ├── layouts/            # Slidev layout templates
 │   ├── cover.vue       # Cover slide layout
 │   ├── default.vue     # Default slide layout
 │   └── intro.vue       # Introduction slide layout
+├── assets/             # Bundled theme assets
+│   └── kodee-*.svg     # Kodee mascot variants (11 variants)
 ├── public/             # Static assets
-│   ├── kodee-*.svg     # Kodee mascot variants (11 variants)
 │   └── kotlin-logo*.svg # Kotlin logos (light/dark modes)
 ├── setup/              # Slidev setup files
 │   └── shiki.ts        # Syntax highlighting configuration for Kotlin
@@ -144,7 +199,7 @@ This will open the example presentation in your browser with hot-reload enabled.
 │   ├── index.ts        # Style entry point
 │   └── layout.css      # Layout styles
 ├── debug.js            # Utility script for enumerating Shiki Kotlin tokens
-├── example.md          # Example presentation demonstrating theme features
+├── slides.md           # Example presentation used for local development and GitHub Pages
 ├── package.json        # Package configuration and dependencies
 └── LICENSE             # Apache License 2.0
 ```
@@ -203,6 +258,7 @@ layout: cover
 
 ### Runtime Dependencies
 - `@slidev/types` (^52.2.5) - Slidev type definitions
+- `roughjs` (^4.6.6) - Hand-drawn SVG paths for `DrawnAnnotation`
 
 ### Development Dependencies
 - `@slidev/cli` (^52.2.5) - Slidev command-line interface