slidev-theme-neversink 0.3.6 → 0.4.0

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/StickyNote.vue

@@ -18,6 +18,16 @@ 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',
+  },
 })
 
 const colorscheme = computed(() => {
@@ -40,9 +50,9 @@ const stickyStyles = computed(() => ({
 <template>
   <div :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 +71,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/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/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,14 @@ 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`.
 
 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 +31,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 +61,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>
 ```
 

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:

package/docs/styling.md

@@ -60,6 +60,18 @@ If you want to make bullets a little closer together to make spaceadd the `class
 
 Other options are `ns-c-tight` and `ns-c-supertight`.
 
+## Centering content
+
+If you have a div and want to to appear in the center of enclosing element:
+
+```md
+<div class="ns-c-center-item">
+  This is centered
+</div>
+```
+
+This sets the `margin-left` and `margin-right` to `auto` and the `width` to `fit-content`.
+
 ## `v-clicks` faders
 
 If you want to fade out a bullet as you step through, add the `class='ns-c-fader'`

package/example.md

@@ -1006,7 +1006,7 @@ title: Side Title Layout (Another)
 
 :: content ::
 
-This is `layout: side-title` with `side: right` in the front matter.
+This is `layout: side-title` with `side: left` in the front matter.
 
 ```yaml
 side: left
@@ -1121,8 +1121,8 @@ dragPos:
   "'admon'": 55,300,287,106
 ---
 
-<Admonition title="V-draggable" color='teal-light' width="300px" v-drag="[93,303,300,145,-14]">
-If you want to `v-drag` an admonition, you should set the width to a fixed value.
+<Admonition title="draggable admonition" color='teal-light' width="300px" v-drag="[93,303,300,145,-14]">
+If you want to drag an admonition, you should set the width to a fixed value.
 </Admonition>
 
 :: title ::
@@ -1160,7 +1160,7 @@ This is a tip
 This is a tip
 </AdmonitionType>
 
-<AdmonitionType type='caution' >
+<AdmonitionType type='caution' custom="text-lg" customTitle="font-size-6">
 This is warning text
 </AdmonitionType>
 
@@ -1204,16 +1204,29 @@ title: Sticky Notes
 Hello, I'm a **sticky note**.
 </StickyNote>
 
-<StickyNote color="sky-light" textAlign="left" width="180px" title="This is my title" v-drag="[375,306,180,180,-15]">
+<StickyNote color="sky-light" textAlign="left" width="180px" title="This is my title" v-drag="[304,295,180,180,-15]">
 
 Hello, I'm also a **sticky note** but am blue sky title.
 </StickyNote>
 
-<StickyNote color="pink-light" textAlign="left" width="180px"  v-drag="[667,299,185,171,8]">
+<StickyNote color="pink-light" textAlign="left" width="180px"  v-drag="[549,292,185,171,8]">
 
 Hello, I'm also a **sticky note** but I lack a title.
 </StickyNote>
 
+
+<StickyNote color="pink-light" textAlign="left" width="180px"  v-drag="[549,292,185,171,8]">
+
+Hello, I'm also a **sticky note** but I lack a title.
+</StickyNote>
+
+<StickyNote color="emerald-light" textAlign="left" width="180px" title="This is my
+title" customTitle="font-size-6" custom="font-size-2"
+v-drag="[749,292,185,171,-8]">
+
+Hello, I'm also a **sticky note** but I'm customized with a title and a custom class.
+</StickyNote>
+
 # Sticky Notes
 
 - Sticky notes are moveable elements you can use for notes.

package/layouts/full.vue

@@ -17,6 +17,6 @@ const colorscheme = computed(() => {
 </script>
 <template>
   <div class="slidev-layout full w-full h-full slidecolor" :class="colorscheme">
-    <slot class="w-full h-full" />
+    <slot />
   </div>
 </template>

package/layouts/top-title-two-cols.vue

@@ -74,7 +74,7 @@ const colorscheme = computed(() => {
           </div>
         </div>
       </div>
-      <div v-if="$slots.default" class="h-fit w-full">
+      <div v-if="$slots.default" class="slidev-layout default h-fit w-full">
         <slot name="default" />
       </div>
     </div>

package/layouts/top-title.vue

@@ -49,7 +49,7 @@ const colorscheme = computed(() => {
       <div class="slidev-layout toptitle content h-fit w-full">
         <slot name="content" />
       </div>
-      <div v-if="$slots.default" class="slidev-layout default h-fit w-full">
+      <div v-if="$slots.default" class="slidev-layout default h-full w-full">
         <slot name="default" />
       </div>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-neversink",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "author": "gureckis",
   "type": "module",
   "keywords": [
@@ -9,19 +9,19 @@
   ],
   "engines": {
     "node": ">=18.0.0",
-    "slidev": ">=0.49.21"
+    "slidev": ">=52.1.0"
   },
   "dependencies": {
-    "@iconify-json/logos": "^1.1.42",
-    "@iconify-json/mdi": "^1.1.66",
-    "@iconify-json/twemoji": "^1.1.15",
-    "@iconify-json/uim": "^1.1.9",
-    "@iconify/json": "^2.2.221",
-    "@iconify/vue": "^4.1.2",
+    "@iconify-json/logos": "^1.2.9",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/twemoji": "^1.2.4",
+    "@iconify-json/uim": "^1.2.3",
+    "@iconify/json": "^2.2.380",
+    "@iconify/vue": "^4.3.0",
     "@mdit/plugin-sub": "^0.12.0",
-    "@slidev/types": "^0.49.21",
+    "@slidev/types": "^52.1.0",
     "markdown-it-mark": "^4.0.0",
-    "qrcode.vue": "^3.4.1"
+    "qrcode.vue": "^3.6.0"
   },
   "repository": {
     "type": "git",
@@ -36,11 +36,11 @@
     "highlighter": "all"
   },
   "devDependencies": {
-    "pnpm": "^9.6.0",
-    "vitepress": "^1.2.3",
-    "@slidev/cli": "^0.49.21",
-    "playwright-chromium": "^1.45.0",
-    "bumpp": "^9.4.1"
+    "@slidev/cli": "^52.1.0",
+    "bumpp": "^9.11.1",
+    "playwright-chromium": "^1.55.0",
+    "pnpm": "^9.15.9",
+    "vitepress": "^1.6.4"
   },
   "scripts": {
     "build": "slidev build example.md -o docs/public/example --base /slidev-theme-neversink/example/",

package/styles/neversink-c.css

@@ -60,6 +60,12 @@
   align-items: start;
 }
 
+.ns-c-center-item {
+  margin-left: auto;
+  margin-right: auto;
+  width: fit-content;
+}
+
 .ns-c-center {
   justify-content: center; /* Horizontally center the content */
   text-align: center;