slidev-theme-kotlin 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## 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

@@ -35,6 +35,7 @@ Add the theme to your slides' frontmatter:
 ```yaml
 ---
 theme: kotlin
+transition: view-transition
 ---
 
 # Your Presentation Title
@@ -113,9 +114,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
@@ -134,8 +135,9 @@ This will open the example presentation in your browser with hot-reload enabled.
 │   ├── 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
@@ -143,7 +145,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
 ```

package/components/Kodee.vue

@@ -19,26 +19,27 @@ const props = withDefaults(defineProps<Props>(), {
   scale: undefined,
 })
 
-// Compute image source
-const imageSrc = computed(() => {
-  const variant = props.variant.startsWith('kodee-') ? props.variant : `kodee-${props.variant}`
-  return `theme/${variant}.svg`
-})
+// Bundle mascot assets with the theme instead of relying on Slidev to copy a
+// dependency's public directory into the consuming presentation.
+const kodeeAssets = import.meta.glob('../assets/kodee-*.svg', {
+  eager: true,
+  import: 'default',
+  query: '?url',
+}) as Record<string, string>
 
-const kodeeImage = computed(() => {
-  const base = import.meta.env.BASE_URL || '/'
-  return `${base}${imageSrc.value}`
-})
+const variantName = computed(() =>
+  props.variant.startsWith('kodee-') ? props.variant : `kodee-${props.variant}`,
+)
+
+const kodeeImage = computed(() => kodeeAssets[`../assets/${variantName.value}.svg`])
 
 // Compute size classes and dimensions
 const sizeConfig = computed(() => {
   switch (props.size) {
     case 'large':
-      if (imageSrc.value.endsWith("kodee-wave.svg")) {
-        return {width: '500px', height: '500px'}
-      } else {
-        return {width: '600px', height: '600px'}
-      }
+      return variantName.value === 'kodee-wave'
+        ? {width: '500px', height: '500px'}
+        : {width: '600px', height: '600px'}
     case 'small':
     default:
       return {width: '200px', height: '200px'}
@@ -53,16 +54,15 @@ const positionStyles = computed(() => {
     height: sizeConfig.value.height,
   }
 
-  const src = imageSrc.value
-  console.log(`[DEBUG] Kodee image: encountered ${src}`)
+  const variant = variantName.value
 
   styles.right = '0px'
   if (props.position === 'corner') {
-    if (src.endsWith("kodee-greeting.svg")) {
+    if (variant === 'kodee-greeting') {
       styles.bottom = '-42px'
-    } else if (src.endsWith("kodee-wink.svg")) {
+    } else if (variant === 'kodee-wink') {
       styles.bottom = '-35px'
-    } else if (src.endsWith("kodee-wave.svg")) {
+    } else if (variant === 'kodee-wave') {
       styles.bottom = '-15px'
     } else {
       styles.bottom = '-42px'
@@ -72,11 +72,11 @@ const positionStyles = computed(() => {
     styles.right = '-5%'
     styles.transform = 'translateY(-40%)'
 
-    if (src.endsWith("kodee-greeting.svg")) {
+    if (variant === 'kodee-greeting') {
       styles.top = '13%'
-    } else if (src.endsWith("kodee-wink.svg")) {
+    } else if (variant === 'kodee-wink') {
       styles.top = '10%'
-    } else if (src.endsWith("kodee-wave.svg")) {
+    } else if (variant === 'kodee-wave') {
       styles.top = '16%'
       styles.right = '3%'
     } else {
@@ -95,10 +95,13 @@ const positionStyles = computed(() => {
 const motionConfig = computed(() => {
   const baseScale = props.scale || 1
 
+  // Check if we're in a view transition (Kodee staying the same between slides)
+  const isViewTransitioning = typeof document !== 'undefined' && document.startViewTransition
+
   return {
     initial: {
-      opacity: 0,
-      scale: baseScale * 0.8,
+      opacity: isViewTransitioning ? 1 : 0,
+      scale: baseScale,
     },
     enter: {
       opacity: 1,
@@ -108,13 +111,14 @@ const motionConfig = computed(() => {
         stiffness: 100,
         damping: 15,
         mass: 1,
+        duration: isViewTransitioning ? 0 : undefined,
       },
     },
     leave: {
-      opacity: 0,
-      scale: baseScale * 0.8,
+      opacity: isViewTransitioning ? 1 : 0,
+      scale: baseScale,
       transition: {
-        duration: 300,
+        duration: isViewTransitioning ? 0 : 300,
       },
     },
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-kotlin",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "keywords": [
     "slidev-theme",
@@ -9,11 +9,22 @@
   "engines": {
     "node": ">=18.0.0"
   },
+  "files": [
+    "assets",
+    "components",
+    "layouts",
+    "public",
+    "setup",
+    "styles",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "build": "slidev build example.md",
-    "dev": "slidev example.md --open",
-    "export": "slidev export example.md",
-    "screenshot": "slidev export example.md --format png"
+    "build": "slidev build slides.md",
+    "dev": "slidev slides.md --open",
+    "export": "slidev export slides.md",
+    "screenshot": "slidev export slides.md --format png"
   },
   "dependencies": {
     "@slidev/types": "^52.2.5"

package/styles/layout.css

@@ -13,6 +13,12 @@
 ::view-transition-new(kodee-mascot) {
     animation-duration: 0.5s;
     animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    mix-blend-mode: normal;
+}
+
+::view-transition-group(kodee-mascot) {
+    animation-duration: 0.5s;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .slidev-slide-content {

package/.github/workflows/pages.yml

@@ -1,54 +0,0 @@
-name: Deploy pages
-
-on:
-  workflow_dispatch:
-  push:
-    branches: [main]
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: pages
-  cancel-in-progress: false
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 'lts/*'
-
-      - name: Setup @antfu/ni
-        run: npm i -g @antfu/ni
-
-      - name: Install dependencies
-        run: nci
-
-      - name: Build
-        run: nr build --base /${{github.event.repository.name}}/
-
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-
-      - uses: actions/upload-pages-artifact@v3
-        with:
-          path: dist
-
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    needs: build
-    runs-on: ubuntu-latest
-    name: Deploy
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

package/example.md

@@ -1,220 +0,0 @@
----
-theme: ./
----
-
-# Kodee Magic Move Demo
-
----
-kodee:
-  variant: greeting
-  size: large
-  position: featured
----
-
-# Kodee Magic Move Demo
-
-## Welcome to Kotlin!
-
-Meet Kodee, the Kotlin mascot!
-
-- Kodee appears large on this slide
-- Watch the magic move to the next slide
-- Smooth scale and position animation
-
----
-kodee:
-  variant: greeting
-  size: small
-  position: corner
----
-
-# Details Slide
-
-## Code Example
-
-Here's some Kotlin code with Kodee in the corner:
-
-```kotlin
-fun greet(name: String) {
-    println("Hello, $name!")
-}
-
-fun main() {
-    greet("Kotlin Developer")
-}
-```
-
-Notice how Kodee smoothly transitioned from large to small!
-
----
-kodee:
-  variant: wink
-  size: large
-  position: featured
----
-
-# Different Kodee Variants
-
-You can use different Kodee images:
-
-- `greeting` - Kodee waving hello
-- `wink` - Kodee winking
-- `jumping` - Kodee jumping with joy
-- `sitting` - Kodee sitting down
-- `drinking` - Kodee with a drink
-- And more!
-
----
-kodee:
-  variant: wink
-  size: small
-  position: corner
----
-
-# Minimal Boilerplate
-
-Just add to your slide's frontmatter:
-
-```yaml
----
-kodee:
-  variant: greeting
-  size: large
-  position: featured
----
-```
-
-That's it! Kodee will automatically appear and animate between slides.
-
----
-kodee:
-  variant: wave
-  size: large
-  position: featured
----
-
-# Different Kodee Variants
-
-You can use different Kodee images:
-
-- `greeting` - Kodee waving hello
-- `wink` - Kodee winking
-- `jumping` - Kodee jumping with joy
-- `sitting` - Kodee sitting down
-- `drinking` - Kodee with a drink
-- And more!
-
----
-kodee:
-  variant: wave
-  size: small
-  position: corner
----
-
-# Minimal Boilerplate
-
-Just add to your slide's frontmatter:
-
-```yaml
----
-kodee:
-  variant: greeting
-  size: large
-  position: featured
----
-```
-
-That's it! Kodee will automatically appear and animate between slides.
-
----
-kodee:
-  variant: wave
-  size: small
-  position: corner
----
-
-# IntelliJ like Syntax Highlighting
-
-```kotlin
-interface User {
-    val id: Int
-    val firstName: String
-    val lastName: String
-    val role: String
-}
-
-fun getUser(id: Long): User? = null
-
-fun updateUser(id: Long, update: User?) {
-    if (update == null) return
-    getUser(id)
-}
-```
-
----
-kodee:
-  variant: wave
-  size: small
-  position: corner
----
-
-# Magic Kotlin Code Move
-
-````md magic-move
-```kotlin
-fun updateUser(id: Long, update: User?) {
-}
-```
-
-```kotlin
-fun updateUser(id: Long, update: User?) {
-    if (update == null) return
-    getUser(id)
-}
-```
-````
-
----
-kodee:
-  variant: wave
-  size: small
-  position: corner
----
-
-# Magic move & line highlighting
-
-````md magic-move
-```kotlin
-val plusOne: (Int) -> Int = { it + 1 }
-```
-```kotlin{3}
-val plusOne: (Int) -> Int = { it + 1 }
-
-val sum: (Int, Int) -> Int = { a, b -> a + b }
-```
-
-```kotlin{5}
-val plusOne: (Int) -> Int = { it + 1 }
-
-val sum: (Int, Int) -> Int = { a, b -> a + b }
-
-val plus: (Int, Int) -> Int = Int::plus
-```
-````
-
----
-kodee:
-  variant: wave
-  size: small
-  position: corner
----
-
-# Kotlin code & Rough Notation
-
-```kotlin
-operator fun <span v-mark.underline>Content</span>.unaryPlus(): Unit {
-    <span v-mark.circle>println</span>("Hello, World!")
-}
-```
-
----