slidev-theme-neversink 0.3.6 → 0.4.1

package/.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "slidev.force-enabled": true,
-  "slidev.include": ["**/slides.md", "example.md", "screenshot.md"]
+  "slidev.include": ["**/slides.md", "example.md", "screenshot.md"],
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

package/README.md

@@ -24,11 +24,11 @@ theme: neversink
 
 ## Features
 
-- [Color schemes](colors.md) - the color schemes available in Neversink
-- [Custom layouts](layouts.md) - the custom slide layouts available in Neversink
-- [Branding](branding.md) - how to customize the theme to your brand/logos
-- [Components](components.md) - the custom components such as sticky notes and admonitions
-- [Markdown features](markdown.md) - special addons to the Slidev markdown syntax
+- [Color schemes](https://gureckis.github.io/slidev-theme-neversink/colors) - the color schemes available in Neversink
+- [Custom layouts](https://gureckis.github.io/slidev-theme-neversink/layouts) - the custom slide layouts available in Neversink
+- [Branding](https://gureckis.github.io/slidev-theme-neversink/branding) - how to customize the theme to your brand/logos
+- [Components](https://gureckis.github.io/slidev-theme-neversink/components) - the custom components such as sticky notes and admonitions
+- [Markdown features](https://gureckis.github.io/slidev-theme-neversink/markdown) - special addons to the Slidev markdown syntax
 
 ## Examples
 

package/components/Admonition.vue

@@ -18,6 +18,16 @@ const props = defineProps({
     type: String,
     default: '100%',
   },
+  custom: {
+    // add a custom class if you want
+    type: String,
+    default: '',
+  },
+  customTitle: {
+    // add a custom class if you want
+    type: String,
+    default: '',
+  },
 })
 
 const colorscheme = computed(() => {
@@ -27,10 +37,10 @@ const colorscheme = computed(() => {
 
 <template>
   <div class="markdown-alert markdown-alert-custom" :class="colorscheme">
-    <p class="markdown-alert-title-custom">
-      <span class="font-size-1.3rem"><Icon :icon="props.icon" /></span>&nbsp;&nbsp;{{ props.title }}
+    <p class="markdown-alert-title-custom" :class="props.customTitle">
+      <span :class="`[font-size-1.3rem, customTitle]`"><Icon :icon="props.icon" /></span>&nbsp;&nbsp;{{ props.title }}
     </p>
-    <p><slot></slot></p>
+    <p :class="props.custom"><slot></slot></p>
   </div>
 </template>
 

package/components/CreditScroll.vue

@@ -5,25 +5,26 @@ import { onSlideEnter, useSlideContext } from '@slidev/client'
 const { $renderContext } = useSlideContext()
 const props = defineProps({
   speed: {
+    type: Number,
     default: 0.5,
   },
   loop: {
+    type: Boolean,
     default: false,
   },
 })
 
 const containerRef = ref(null)
 const scrollPosition = ref(0)
-const isScrolling = ref(false)
 
 let animationFrameId = null
 
 const scroll = () => {
   scrollPosition.value -= props.speed
   if (Math.abs(scrollPosition.value) >= 550) {
-    if (props.loop.value) {
-      console.log('resetting loop', props.loop.value)
+    if (props.loop) {
       resetScroll()
+      animationFrameId = requestAnimationFrame(scroll)
     } else {
       stopScrolling()
       return
@@ -40,34 +41,29 @@ const startScrolling = () => {
 const stopScrolling = () => {
   if (animationFrameId) {
     cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
   }
 }
 
 const resetScroll = () => {
-  scrollPosition.value = 480 //containerRef.value.offsetHeight * 2.5
+  scrollPosition.value = 480
   if (animationFrameId) {
     cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
   }
 }
 
-onMounted(() => {
-  console.log('mounted')
-  // Reset scrolling when entering the slide
-  onSlideEnter(() => {
-    console.log('context ', $renderContext.value)
-    if (['slide', 'presenter'].includes($renderContext.value)) {
-      console.log('onSlideEnter')
-      resetScroll()
-      console.log('starting scrolling')
-      startScrolling()
-    }
-  })
+// Must be called in setup scope
+onSlideEnter(() => {
+  if (['slide', 'presenter'].includes($renderContext.value)) {
+    stopScrolling()
+    resetScroll()
+    startScrolling()
+  }
 })
 
 onUnmounted(() => {
-  if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId)
-  }
+  stopScrolling()
 })
 </script>
 
@@ -81,10 +77,9 @@ onUnmounted(() => {
 
 <style scoped>
 .scroll-container {
-  height: 100vh; /* Use full viewport height */
+  height: 100vh;
   overflow: hidden;
   position: relative;
-  cursor: pointer;
 }
 
 .scroll-content {

package/components/StickyNote.vue

@@ -18,6 +18,26 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  custom: {
+    // add a custom class if you want
+    type: String,
+    default: '',
+  },
+  customTitle: {
+    // add a custom class if you want
+    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(() => {
@@ -38,11 +58,11 @@ const stickyStyles = computed(() => ({
 </script>
 
 <template>
-  <div :class="stickyClasses" :style="stickyStyles">
+  <div v-if="isVisible" :class="stickyClasses" :style="stickyStyles">
     <template v-if="props.title !== ''"
-      ><strong>{{ props.title }}</strong></template
+      ><span :class="props.customTitle">{{ props.title }}</span></template
     >
-    <slot></slot>
+    <div :class="props.custom"><slot></slot></div>
   </div>
 </template>
 
@@ -61,11 +81,4 @@ const stickyStyles = computed(() => ({
   color: var(--text-color);
   border: 0.4px solid var(--border-color);
 }
-.sticky-note strong {
-  display: block;
-  font-size: 0.8rem;
-  font-family: monospace;
-  letter-spacing: 0em;
-  word-spacing: -0.3em;
-}
 </style>

package/docs/.vitepress/config.js

@@ -28,6 +28,7 @@ export default defineConfig({
           { text: 'Getting Started', link: '/getting-started' },
           { text: 'Markdown Features', link: '/markdown' },
           { text: 'Colors Schemes', link: '/colors' },
+          { text: 'Dark Mode', link: '/dark-mode' },
           { text: 'Styling', link: '/styling' },
           { text: 'Branding', link: '/branding' },
           {

package/docs/components/admonitions.md

@@ -16,11 +16,13 @@ The `Admonition` component is used to create a colored box with an icon and a ti
 - `color` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `amber-light`.
 - `width` (optional) the width of the admonition. Default is `100%`.
 - `icon` (optional) the icon to display. Default is `mdi-information-variant-circle-outline`.
+- `custom` (optional) a custom CSS class to apply to the admonition content. Default is empty.
+- `customTitle` (optional) a custom CSS class to apply to the admonition title. Default is empty.
 
 Example:
 
-```md
-<Admonition title="Info" color='teal-light' width="300px">
+```vue
+<Admonition title="Info" color="teal-light" width="300px">
 This is my admonition content.
 </Admonition>
 ```
@@ -30,10 +32,23 @@ Renders as:
 This is my admonition content.
 </Admonition>
 
+You can also add custom CSS classes to style the admonition content and title:
+
+```vue
+<Admonition title="Custom Styled" color="purple-light" custom="text-lg font-bold" customTitle="text-red-500">
+This content has custom styling applied.
+</Admonition>
+```
+
+Renders as:
+<Admonition title="Custom Styled" color='purple-light' custom="text-lg font-bold" customTitle="text-red-500">
+This content has custom styling applied.
+</Admonition>
+
 If you want to position it somewhere arbitrary on the slide add v-drag to the admonition and also set the width to something fixed (e.g., `300px`):
 
-```md
-<Admonition title="V-draggable" color='teal-light' width="300px" v-drag>
+```vue
+<Admonition title="V-draggable" color="teal-light" width="300px" v-drag>
 This is my admonition content.
 </Admonition>
 ```
@@ -47,7 +62,7 @@ The `AdmonitionType` component is used to create a colored box with an icon and
 
 Example:
 
-```md
+```vue
 <AdmonitionType type="info" width="300px">
 This is my info
 </AdmonitionType>
@@ -57,7 +72,7 @@ This is my info
 This is my warning
 </AdmonitionType>
 
-```md
+```vue
 <AdmonitionType type="important" width="300px">
 This is my important
 </AdmonitionType>
@@ -67,7 +82,7 @@ This is my important
 This is my important
 </AdmonitionType>
 
-```md
+```vue
 <AdmonitionType type="tip" width="300px">
 This is my tip
 </AdmonitionType>
@@ -77,7 +92,7 @@ This is my tip
 This is my tip
 </AdmonitionType>
 
-```md
+```vue
 <AdmonitionType type="warning" width="300px">
 This is mywarning
 </AdmonitionType>
@@ -87,7 +102,7 @@ This is mywarning
 This is my  warning
 </AdmonitionType>
 
-```md
+```vue
 <AdmonitionType type="caution" width="300px">
 This is my caution
 </AdmonitionType>
@@ -99,7 +114,7 @@ This is my caution
 
 If you want to position it somewhere arbitrary on the slide add v-drag to the admonition and also set the width to something fixed (e.g., `300px`)
 
-```md
+```vue
 <AdmonitionType type="warning" width="300px" v-drag>
 This is my my warning
 </Admonition>

package/docs/components/arrowdraw.md

@@ -12,8 +12,8 @@ changed according to the [color schemes](/colors) in the theme. The ArrowDraw co
 - `color` (optional) the color of the arrow stroke. Colors are from the themes. The background color is applied as the stroke so `red` is red, `black` is black. Default is 'black'.
 - width (optional) the initial width of the image. Default is 140px
 
-```md
-<ArrowDraw color='red' v-drag/>
+```vue
+<ArrowDraw color="red" v-drag />
 ```
 
 Renders as:

package/docs/components/arrowheads.md

@@ -11,16 +11,16 @@ The ArrowHeads component has the following props:
 - `color` (optional) the color of the arrow stroke. Colors are from the themes. The background color is applied as the stroke so `red` is red, `black` is black. Default is 'black'.
 - width (optional) the initial width of the image. Default is 140px
 
-```md
-<ArrowHeads color='pink' width="300px" v-drag />
+```vue
+<ArrowHeads color="pink" width="300px" v-drag />
 ```
 
 Renders as:
 
 <ArrowHeads color='pink' width="300px"/>
 
-```md
-<ArrowHeads  v-drag />
+```vue
+<ArrowHeads v-drag />
 ```
 
 Renders as:

package/docs/components/box.md

@@ -13,7 +13,7 @@ The `Box` component is used to just draw a rectangle. It has the following props
 - `color` (optional) the color of the shape. It uses the color schemes in the theme. The default is 'white' (which means a black border and white fill).
 - `custom` (optional) any custom classes you want to add to the box. The default is none. For example, opacity only applies to the fill not the border but you can change that using `custom` classes.
 
-```md
+```vue
 <Box v-drag />
 ```
 
@@ -25,29 +25,29 @@ well a box, what did you expect.
 
 But of course you can customise it:
 
-```md
-<Box shape='r-d-8-0' width='200px' custom='m-10 ' />
+```vue
+<Box shape="r-d-8-0" width="200px" custom="m-10 " />
 ```
 
 <Box shape='r-d-8-0' width='200px' custom='m-10 ' />
 
-```md
-<Box shape='f-o-5-0' color='sky-light' custom='m-10' />
+```vue
+<Box shape="f-o-5-0" color="sky-light" custom="m-10" />
 ```
 
 <Box shape='f-o-5-0' color='sky-light' custom='m-10' />
 
 more transparent:
 
-```md
-<Box shape='f-o-5-75' color='sky-light' custom='m-10' />
+```vue
+<Box shape="f-o-5-75" color="sky-light" custom="m-10" />
 ```
 
 <Box shape='f-o-5-75' color='sky-light' custom='m-10' />
 
 If can include text as well using a slot
 
-```md
+```vue
 <Box>Hi there</Box>
 ```
 
@@ -57,8 +57,8 @@ renders as:
 
 You might like to syle it a bit
 
-```md
-<Box custom='pt-10'>Hi there</Box>
+```vue
+<Box custom="pt-10">Hi there</Box>
 ```
 
 <Box custom='p-10'>Hi there</Box>

package/docs/components/creditscroll.md

@@ -1 +1,35 @@
 # CreditScroll
+
+## Description
+
+The `CreditScroll` component creates a scrolling container similar to movie credits. Content placed inside will automatically scroll upward when the slide is entered. This component is used internally by the [`layout: credits`](/layouts/credits) layout, but can also be used standalone.
+
+## Props
+
+- `speed` (optional) controls how fast the content scrolls. Default is `0.5`. Higher numbers scroll faster.
+- `loop` (optional) whether the credits should loop back to the beginning after scrolling completes. Default is `false`.
+
+## Usage
+
+The component uses a default slot for content.
+
+```vue
+<CreditScroll speed="1.0" loop>
+  <div class="text-center">
+    <h2>Credits</h2>
+    <p>Person 1</p>
+    <p>Person 2</p>
+  </div>
+</CreditScroll>
+```
+
+## Behavior
+
+- Scrolling automatically starts when you navigate to the slide
+- Scrolling resets when re-entering the slide
+- If `loop` is `true`, the content will restart from the beginning after completing
+- If `loop` is `false`, scrolling stops when the content has fully scrolled through
+
+## Note
+
+For most use cases, it's easier to use the [`layout: credits`](/layouts/credits) layout which wraps this component and provides frontmatter options for `speed` and `loop`.

package/docs/components/email.md

@@ -10,7 +10,7 @@ The `Email` component formats a email address on (usually) title slides
 
 - `v` (required). The email address
 
-```md
+```vue
 <Email v="todd.gureckis@nyu.edu" />
 ```
 

package/docs/components/kawaii.md

@@ -18,7 +18,7 @@ The character options are `IceCream`, `Backpack`, `Cat`, `Browser`, `Mug`, `Plan
 
 Example:
 
-```md
+```vue
 <IceCream :size="140" mood="sad" color="#FDA7DC" />
 ```
 

package/docs/components/line.md

@@ -15,8 +15,8 @@ The `Line` component is used to just draw a straight line. It has the following
 - `width` (optional) the width of the line (default '2')
 - `color` (optional) the color of the line. Colors can be any of the color schemes. the default is 'black'. The background color of the theme is applied to the stroke of the line so `black` is black line, `red` is red line, `red-light` is a light red line, etc.
 
-```md
-<Line :x1=0 :y1=0 :x2=200 :y2=200 :width=2 color='red' v-drag />
+```vue
+<Line :x1="0" :y1="0" :x2="200" :y2="200" :width="2" color="red" v-drag />
 ```
 
 Renders as:

package/docs/components/qrcode.md

@@ -16,8 +16,8 @@ The `Qr` component is used to create QR code in SVG format. The QRCode component
 
 Example:
 
-```md
-<QRCode value="https://sli.dev" :size="200" render-as="svg"/>
+```vue
+<QRCode value="https://sli.dev" :size="200" render-as="svg" />
 ```
 
 Renders as:

package/docs/components/speechbubble.md

@@ -20,8 +20,8 @@ The `SpeechBubble` component is used to create a colored bubble with a speech bu
 
 Example:
 
-```md
-<SpeechBubble position="r" color='sky' shape="round" maxWidth="300px">
+```vue
+<SpeechBubble position="r" color="sky" shape="round" maxWidth="300px">
 
 Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
 </SpeechBubble>
@@ -33,8 +33,8 @@ Renders as:
 Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
 </SpeechBubble>
 
-```md
-<SpeechBubble position="b" color='sky' shape="round" maxWidth="300px">
+```vue
+<SpeechBubble position="b" color="sky" shape="round" maxWidth="300px">
 
 Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
 </SpeechBubble>
@@ -46,8 +46,8 @@ Renders as:
 Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
 </SpeechBubble>
 
-```md
-<SpeechBubble position="t" color='amber' shape="round" maxWidth="300px">
+```vue
+<SpeechBubble position="t" color="amber" shape="round" maxWidth="300px">
 
 Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
 </SpeechBubble>
@@ -61,8 +61,8 @@ Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
 
 If you want to position it somewhere arbitrary on the slide add v-drag to the admonition and also set the maxWidth to something fixed (e.g., `300px`):
 
-```md
-<SpeechBubble position="t" color='sky' shape="round" maxWidth="300px" v-drag>
+```vue
+<SpeechBubble position="t" color="sky" shape="round" maxWidth="300px" v-drag>
 
 Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
 </SpeechBubble>

package/docs/components/stickynote.md

@@ -14,13 +14,15 @@ The `StickyNote` component is used to create a colored box with an title and con
 - `color` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `amber-light`.
 - `width` (optional) the width of the admonition. Default is `180px`.
 - `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:
 
-```md
+```vue
 <StickyNote color="amber-light" textAlign="left" width="180px" title="Title">
-
-Hello, I'm a **sticky note**.
+  Hello, I'm a **sticky note**.
 </StickyNote>
 ```
 
@@ -30,9 +32,28 @@ Renders as:
 Hello, I'm a **sticky note**.
 </StickyNote>
 
+You can also add custom CSS classes to style the sticky note content and title:
+
+```vue
+<StickyNote
+  color="teal-light"
+  width="200px"
+  title="Custom Styled"
+  custom="text-lg font-bold text-center"
+  customTitle="text-red-500 text-lg"
+>
+  This content has custom styling applied.
+</StickyNote>
+```
+
+Renders as:
+<StickyNote color="teal-light" width="200px" title="Custom Styled" custom="text-lg font-bold text-center" customTitle="text-red-500 text-lg">
+This content has custom styling applied.
+</StickyNote>
+
 If you want to position it somewhere arbitrary on the slide add v-drag to the admonition and also set the width to something fixed (e.g., `300px`):
 
-```md
+```vue
 <StickyNote color="amber-light" textAlign="left" width="180px" title="Title" v-drag>
 
 Hello, I'm a **sticky note**.
@@ -41,10 +62,9 @@ Hello, I'm a **sticky note**.
 
 Another color:
 
-```md
+```vue
 <StickyNote color="pink-light" textAlign="left" width="180px" title="Title">
-
-Hello, I'm a **sticky note**.
+  Hello, I'm a **sticky note**.
 </StickyNote>
 ```
 
@@ -52,3 +72,18 @@ Hello, I'm a **sticky note**.
 
 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`

package/docs/components/thumb.md

@@ -12,24 +12,24 @@ The Thumbs component has the following props:
 - `color` (optional) the color scheme of the thumb. the default is 'white'. The best options tend to be the light colors (e.g., `green-light`, `red-light`, `blue-light`)
 - `width` (optional) the initial width of the image. Default is 140px
 
-```md
-<Thumb color='green-light' width="300px" v-drag />
+```vue
+<Thumb color="green-light" width="300px" v-drag />
 ```
 
 Renders as:
 
 <Thumb color='green-light' width="300px"/>
 
-```md
-<Thumb color="sky-light"  v-drag />
+```vue
+<Thumb color="sky-light" v-drag />
 ```
 
 Renders as:
 
 <Thumb color="sky-light" />
 
-```md
-<Thumb color="red-light" dir='down' v-drag />
+```vue
+<Thumb color="red-light" dir="down" v-drag />
 ```
 
 Renders as: