feat: sticky notes can be dev-mode only for personal notes

Closes #4

Author: gureckis

components/StickyNote.vue

@@ -28,6 +28,16 @@ const props = defineProps({
     type: String,
     default: 'block text-xs font-mono tracking-normal font-bold',
   },
+  devOnly: {
+    // only show in dev mode (useful for notes that shouldn't appear in exports)
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isVisible = computed(() => {
+  if (!props.devOnly) return true
+  return import.meta.env.DEV
 })
 
 const colorscheme = computed(() => {
@@ -48,7 +58,7 @@ const stickyStyles = computed(() => ({
 </script>
 
 <template>
-  <div :class="stickyClasses" :style="stickyStyles">
+  <div v-if="isVisible" :class="stickyClasses" :style="stickyStyles">
     <template v-if="props.title !== ''"
       ><span :class="props.customTitle">{{ props.title }}</span></template
     >

docs/components/stickynote.md

@@ -16,6 +16,7 @@ The `StickyNote` component is used to create a colored box with an title and con
 - `textAlign` (optional) the text alignment of the content. Default is `left`.
 - `custom` (optional) a custom CSS class to apply to the sticky note content. Default is empty.
 - `customTitle` (optional) a custom CSS class to apply to the sticky note title. Default is `block text-xs font-mono tracking-normal font-bold`.
+- `devOnly` (optional) when set to `true`, the sticky note will only be visible in development mode and will be hidden in production builds and exports. This is useful for personal notes or reminders that shouldn't appear in the final presentation. Default is `false`.
 
 Example:
 
@@ -71,3 +72,18 @@ Another color:
 
 Hello, I'm a **sticky note**.
 </StickyNote>
+
+## Dev-Only Notes
+
+Use the `devOnly` prop to create sticky notes that only appear during development. These are perfect for speaker notes, reminders, or TODOs that you don't want in your exported presentation:
+
+```vue
+<StickyNote color="amber-light" width="180px" title="Note to self" devOnly>
+  Remember to add more examples here before the talk!
+</StickyNote>
+```
+
+When `devOnly` is set to `true`:
+
+- The sticky note is visible when running `slidev dev`
+- The sticky note is **hidden** when running `slidev build` or `slidev export`

example.md

@@ -1238,6 +1238,30 @@ Hello, I'm also a **sticky note** but I'm customized with a title and a custom c
 </StickyNote>
 ```
 
+---
+layout: default
+title: Dev-Only Sticky Notes
+---
+
+# Dev-Only Sticky Notes
+
+<StickyNote color="rose-light" textAlign="left" width="200px" title="Dev Note" devOnly v-drag="[650,150,200,200]">
+
+This note only appears in **dev mode**! It won't show in exports or production builds.
+</StickyNote>
+
+Use the `devOnly` prop to create sticky notes that only appear during development. These are perfect for speaker notes, reminders, or TODOs that you don't want in your final presentation.
+
+```vue
+<StickyNote color="rose-light" title="Dev Note" devOnly>
+  This note only appears in dev mode!
+</StickyNote>
+```
+
+When `devOnly` is set to `true`:
+- Visible when running `slidev dev`
+- Hidden when running `slidev build` or `slidev export`
+
 ---
 layout: default
 title: Kawaii 1