slidev-theme-kotlin 0.0.9 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # 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

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
@@ -131,6 +184,7 @@ 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
@@ -204,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