fix: fallback slidev version to 42.5

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@alvarosabu/eslint-config-vue",
+  "rules": {
+    "@typescript-eslint/no-use-before-define": "off"
+  }
+}

components/FancyLink.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
+
 const props = defineProps({
   href: {
     type: String,
@@ -22,8 +23,13 @@ const styles = computed(() => ({
   paddingLeft: '20px',
 }))
 </script>
+
 <template>
-  <a :href="href" class="fancy-link mx-2 text-sm" :style="styles"><slot /></a>
+  <a
+    :href="href"
+    class="fancy-link mx-2 text-sm"
+    :style="styles"
+  ><slot /></a>
 </template>
 
 <style scoped>

components/LayoutFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useNow } from "@vueuse/core";
+import { computed } from 'vue'
+import { useNow } from '@vueuse/core'
 
 defineProps({
   eventLogo: {
@@ -15,23 +15,33 @@ defineProps({
   twitterUrl: {
     type: String,
   },
-});
+})
 
-const { now } = useNow();
+const { now } = useNow()
 
-const date = computed(() => now?.value.toLocaleDateString("en-US"));
+const date = computed(() => now?.value.toLocaleDateString('en-US'))
 </script>
+
 <template>
   <footer
     v-if="eventLogo || twitter"
     class="mt-auto flex justify-between items-center w-full text-primary dark:text-white z-10"
   >
     <div class="mb-0 flex items-center">
-      <a :href="eventUrl" target="_blank"
-        ><img :src="eventLogo" class="h-8 mr-4" alt="Event image" /></a
-      ><span>{{ date }}</span>
+      <a
+        :href="eventUrl"
+        target="_blank"
+      ><img
+        :src="eventLogo"
+        class="h-8 mr-4"
+        alt="Event image"
+      ></a><span>{{ date }}</span>
     </div>
-    <a v-if="twitter" :href="twitterUrl" target="_blank">{{ twitter }}</a>
+    <a
+      v-if="twitter"
+      :href="twitterUrl"
+      target="_blank"
+    >{{ twitter }}</a>
   </footer>
 </template>
 

components/LayoutHeader.vue

@@ -8,6 +8,6 @@
     <img
       :src="$slidev.themeConfigs.logoHeader"
       class="w-16 h-16 object-contain"
-    />
+    >
   </header>
 </template>

components/TheConsole.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 </script>
+
 <template>
   <div class="console bg-primary text-white text-xs pt-6 rounded-md relative">
     <ul class="absolute grid grid-cols-3 gap-3 top-2 left-4">
-      <li class="!m-0 rounded w-2 h-2 bg-red-400 inline-block"></li>
-      <li class="!m-0 rounded w-2 h-2 bg-yellow-300 inline-block"></li>
-      <li class="!m-0 rounded w-2 h-2 bg-green-500 inline-block"></li>
+      <li class="!m-0 rounded w-2 h-2 bg-red-400 inline-block" />
+      <li class="!m-0 rounded w-2 h-2 bg-yellow-300 inline-block" />
+      <li class="!m-0 rounded w-2 h-2 bg-green-500 inline-block" />
     </ul>
     <slot />
   </div>

example.md

@@ -4,6 +4,7 @@ colorSchema: 'auto'
 layout: intro
 # https://sli.dev/custom/highlighters.html
 highlighter: shiki
+title: Slidev Penguin Theme
 themeConfig:
   logoHeader: '/logo.svg'
   eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'
@@ -124,16 +125,16 @@ Use code snippets and get the highlighting directly!
 ```ts
 // main.ts
 
-import { createApp } from 'vue';
-import { createDynamicForms } from '@asigloo/vue-dynamic-forms';
+import { createApp } from 'vue'
+import { createDynamicForms } from '@asigloo/vue-dynamic-forms'
 
 const VueDynamicForms = createDynamicForms({
   // Global Options go here
-});
+})
 
-export const app = createApp(App);
+export const app = createApp(App)
 
-app.use(VueDynamicForms);
+app.use(VueDynamicForms)
 ```
 --- 
 layout: two-cols
@@ -143,16 +144,16 @@ Awiwiiw
 ```ts
 // main.ts
 
-import { createApp } from 'vue';
-import { createDynamicForms } from '@asigloo/vue-dynamic-forms';
+import { createApp } from 'vue'
+import { createDynamicForms } from '@asigloo/vue-dynamic-forms'
 
 const VueDynamicForms = createDynamicForms({
   // Global Options go here
-});
+})
 
-export const app = createApp(App);
+export const app = createApp(App)
 
-app.use(VueDynamicForms);
+app.use(VueDynamicForms)
 ```
 
 ::right::
@@ -180,16 +181,16 @@ Use code snippets and get the highlighting directly into a nice looking window!
 ```ts
 // main.ts
 
-import { createApp } from 'vue';
-import { createDynamicForms } from '@asigloo/vue-dynamic-forms';
+import { createApp } from 'vue'
+import { createDynamicForms } from '@asigloo/vue-dynamic-forms'
 
 const VueDynamicForms = createDynamicForms({
   // Global Options go here
-});
+})
 
-export const app = createApp(App);
+export const app = createApp(App)
 
-app.use(VueDynamicForms);
+app.use(VueDynamicForms)
 ```
 ---
 layout: text-window

global-top.vue

@@ -6,12 +6,19 @@
     class="absolute bottom-0 p-4 mt-auto flex items-center w-full text-primary dark:text-white z-10"
   >
     <div class="mb-0 flex items-center">
-      <a :href="$slidev.themeConfigs.eventUrl" target="_blank"
-        ><img :src="$slidev.themeConfigs.eventLogo" class="h-8 mr-4" alt="Event image"
-      /></a>
+      <a
+        :href="$slidev.themeConfigs.eventUrl"
+        target="_blank"
+      ><img
+        :src="$slidev.themeConfigs.eventLogo"
+        class="h-8 mr-4"
+        alt="Event image"
+      ></a>
     </div>
-    <a v-if="$slidev.themeConfigs.twitter" :href="$slidev.themeConfigs.twitterUrl" target="_blank"
-      ><logos-twitter />{{ $slidev.themeConfigs.twitter }}</a
-    >
+    <a
+      v-if="$slidev.themeConfigs.twitter"
+      :href="$slidev.themeConfigs.twitterUrl"
+      target="_blank"
+    ><logos-twitter />{{ $slidev.themeConfigs.twitter }}</a>
   </footer>
 </template>

layouts/default.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="slidev-layout" :class="{ grid: $attrs.center }">
+  <div
+    class="slidev-layout"
+    :class="{ grid: $attrs.center }"
+  >
     <CornerCurves class="absolute bottom-0 right-0 transform scale-x--100" />
     <div class="my-auto z-10 relative">
       <slot />

layouts/intro.vue

@@ -5,7 +5,10 @@
     <div class="flex flex-col justify-center text-center">
       <slot />
     </div>
-    <AsGraphic type="zigzag" class="absolute top-20 -right-30" />
+    <AsGraphic
+      type="zigzag"
+      class="absolute top-20 -right-30"
+    />
   </div>
 </template>
 

layouts/new-section.vue

@@ -4,7 +4,10 @@
     <div class="flex flex-col justify-center text-center">
       <slot />
     </div>
-    <AsGraphic type="zigzag" class="absolute top-20 -right-30" />
+    <AsGraphic
+      type="zigzag"
+      class="absolute top-20 -right-30"
+    />
   </div>
 </template>
 

layouts/presenter.vue

@@ -5,14 +5,30 @@
         <slot />
       </div>
       <figure class="w-1/2 relative">
-        <AsGraphic type="donut" absolute top-2 left-0 text-secondary-200 />
-        <AsGraphic type="zigzag" absolute bottom-2 right-0 />
+        <AsGraphic
+          type="donut"
+          absolute
+          top-2
+          left-0
+          text-secondary-200
+        />
+        <AsGraphic
+          type="zigzag"
+          absolute
+          bottom-2
+          right-0
+        />
         <img
           :src="$attrs.presenterImage || 'https://anonymous-animals.azurewebsites.net/animal/penguin'"
           class="bg-gray-400 relative important-rounded-full object-cover h-80 w-80 border border-8 border-secondary-400 z-10"
-        />
+        >
       </figure>
     </div>
-    <AsGraphic type="curve-small" absolute bottom-0 right-0 />
+    <AsGraphic
+      type="curve-small"
+      absolute
+      bottom-0
+      right-0
+    />
   </div>
 </template>

layouts/text-image.vue

@@ -1,12 +1,26 @@
 <template>
   <div class="slidev-layout">
-    <div class="grid grid-cols-2" :class="$attrs.reverse ? 'gap-16' : 'gap-8'">
-      <div class="prose pr-16" :class="{ 'order-1': $attrs.reverse }">
+    <div
+      class="grid grid-cols-2"
+      :class="$attrs.reverse ? 'gap-16' : 'gap-8'"
+    >
+      <div
+        class="prose pr-16"
+        :class="{ 'order-1': $attrs.reverse }"
+      >
         <slot name="default" />
       </div>
       <figure class="relative flex flex-col justify-center">
-        <AsGraphic type="zigzag" absolute bottom-4 right-0 />
-        <img :src="$attrs.media" class="rounded-lg shadow-lg object-cover z-10" />
+        <AsGraphic
+          type="zigzag"
+          absolute
+          bottom-4
+          right-0
+        />
+        <img
+          :src="$attrs.media"
+          class="rounded-lg shadow-lg object-cover z-10"
+        >
         <figcaption class="mt-2 text-xs w-full">
           {{ $attrs.caption }}
         </figcaption>

layouts/text-window.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="slidev-layout">
-    <div class="grid grid-cols-2" :class="$attrs.reverse ? 'gap-16' : 'gap-8'">
-      <div class="prose pr-16" :class="{ 'order-1': $attrs.reverse }">
+    <div
+      class="grid grid-cols-2"
+      :class="$attrs.reverse ? 'gap-16' : 'gap-8'"
+    >
+      <div
+        class="prose pr-16"
+        :class="{ 'order-1': $attrs.reverse }"
+      >
         <slot name="default" />
       </div>
       <div class="relative">
@@ -11,7 +17,7 @@
           :class="{ 'left-0': $attrs.reverse }"
         />
         <TheConsole class="rounded-lg shadow-lg object-cover z-10">
-          <slot name="window"></slot>
+          <slot name="window" />
         </TheConsole>
       </div>
     </div>

layouts/two-cols.vue

@@ -5,7 +5,7 @@
         <slot name="default" />
       </div>
       <div class="prose">
-        <slot name="right"></slot>
+        <slot name="right" />
       </div>
     </div>
   </div>

package.json

@@ -1,20 +1,20 @@
 {
   "name": "slidev-theme-penguin",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A Penguin theme for Slidev",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev>",
-  "keywords": [
-    "slidev-theme",
-    "slidev",
-    "slidev-penguin"
-  ],
   "license": "MIT",
   "homepage": "https://penguin-theme.alvarosaburido.dev/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/alvarosaburido/slidev-theme-penguin.git"
   },
   "bugs": "https://github.com/alvarosaburido/slidev-theme-penguin/issues",
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "slidev-penguin"
+  ],
   "slidev": {
     "colorSchema": "both",
     "highlighter": "shiki",
@@ -41,11 +41,12 @@
     "vite-svg-loader": "^4.0.0"
   },
   "devDependencies": {
+    "@alvarosabu/eslint-config-vue": "^0.4.0",
     "@iconify-json/la": "^1.1.5",
     "@iconify-json/logos": "^1.1.34",
     "@iconify-json/simple-icons": "^1.1.66",
     "@release-it/conventional-changelog": "^7.0.0",
-    "@slidev/cli": "0.42.8",
+    "@slidev/cli": "0.42.5",
     "playwright-chromium": "^1.37.0",
     "release-it": "^16.1.5",
     "sass": "^1.65.1"