slidev-theme-neversink 0.0.0

package/docs/components/stickynote.md

@@ -0,0 +1,54 @@
+# StickyNote
+
+<img src="/screenshots/36.png" alt="stickynotes slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+StickyNotes are a take on the classic computer metaphor of a sticknote. They are often used to provide notes or additional information to the viewer.
+
+## `StickyNote`
+
+The `StickyNote` component is used to create a colored box with an title and content. The StickyNote component has the following props:
+
+- `title` (optional). Default value is ''
+- `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`.
+
+Example:
+
+```md
+<StickyNote color="amber-light" textAlign="left" width="180px" title="Title">
+
+Hello, I'm a **sticky note**.
+</StickyNote>
+```
+
+Renders as:
+<StickyNote color="amber-light" textAlign="left" width="180px" title="Title">
+
+Hello, I'm a **sticky note**.
+</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
+<StickyNote color="amber-light" textAlign="left" width="180px" title="Title" v-drag>
+
+Hello, I'm a **sticky note**.
+</StickyNote>
+```
+
+Another color:
+
+```md
+<StickyNote color="pink-light" textAlign="left" width="180px" title="Title">
+
+Hello, I'm a **sticky note**.
+</StickyNote>
+```
+
+<StickyNote color="pink-light" textAlign="left" width="180px" title="Title">
+
+Hello, I'm a **sticky note**.
+</StickyNote>

package/docs/components.md

@@ -0,0 +1,19 @@
+# Components
+
+Components are add-ons to the theme that can be used to add additional features to your slides. In some cases, they represent simple design elements like StickyNotes that can be added to slides. In other cases they add animations or interactivity to your slides.
+
+The current components are:
+
+- [Admonitions](/components/admonitions) - boxes that can be used to highlight text that includes styling like a title and icon.
+
+- [SpeechBubble](/components/speechbubble) - a speech bubble with configurable position, shape, and color.
+
+- [StickyNote](/components/stickynote) - a sticky note styled element that can be added to slides.
+
+- [CreditScroll](/components/creditscroll) - a scrolling credits slide simliar to the end of a movive.
+
+- [QRCore](/components/qrcode) - a QR code generator that can be used to add QR codes to slides.
+
+- [Kawaii](/components/kawaii) - Modification of select [Vue Kawaii](https://github.com/youngtailors/vue-kawaii) figures that add cute characters to slides.
+
+Most component can just be included in-line in your markdown. However, in some cases it can make sense to position these components using the `v-drag` directive. For example, the `SpeechBubble` component can be positioned using the `v-drag` directive to place it in a specific location on the slide. This can be useful for creating custom layouts or animations. In that case, it makes sense to keep the component in the [default slot](/layouts#slots) of each layout.

package/docs/contributing.md

@@ -0,0 +1,5 @@
+# Contributing
+
+I welcome contributions to this project. However, I have limited time to provide free technical support.
+
+If you have questions or ideas consider opening a [discussion](https://github.com/gureckis/slidev-theme-neversink/discussions) on this repository. If you have a bug report or feature request, please open an [issue](https://github.com/gureckis/slidev-theme-neversink/issues). If you have a code contribution, please open a [pull request](https://github.com/gureckis/slidev-theme-neversink/pulls).

package/docs/customizing.md

@@ -0,0 +1,38 @@
+# Customizing
+
+Generally you can customize this theme following the recommendations of [Slidev](https://sli.dev/custom/directory-structure). But there are a few hints:
+
+## Customizing CSS
+
+To add custom CSS styles to your project simply create a folder in the same files as your slide markdown file (usually `slides.md`) called `styles`.
+
+```sh
+your-slidev/
+  ├── slides.md
+  └── styles/
+      ├── index.ts
+      └── custom.css
+```
+
+in `index.ts` add the following:
+
+```ts
+// styles/index.ts
+
+import './custom.css'
+```
+
+Then add whatever classes you want to `custom.css`.
+
+## Customizing fonts
+
+To customize the fonts used in the theme, you can set the following CSS variables in your `custom.css` file:
+
+```css
+:root {
+  --neversink-title-font: 'Inter', sans-serif;
+  --neversink-main-font: 'Inter', sans-serif;
+  --neversink-mono-font: 'Inter', monospace;
+  --neversink-quote-font: 'Fire Code', monospace;
+}
+```

package/docs/getting-started.md

@@ -0,0 +1,32 @@
+# Getting started with Neversink
+
+The theme depends on Slidev. So you need to have that [installed first](https://sli.dev/guide/install). Then you can install the theme with npm:
+
+```bash
+npm install slidev-theme-neversink
+```
+
+Then create a slidev markdown file (e.g., `slides.md`) and add the theme to the frontmatter of your first slide:
+
+```md
+---
+theme: neversink
+---
+```
+
+Then you are basically ready to go!
+
+If you are new to Slidev highly recommend you check out the [Slidev documentation](https://sli.dev/) before diving in.
+
+## Read on about all the Neversink features
+
+- [Markdown features](markdown.md) - special addons to the Slidev markdown syntax
+- [Color schemes](colors.md) - the color schemes available in Neversink
+- [Branding](branding.md) - how to customize the theme to your brand/logos
+- [Custom layouts](layouts.md) - the custom slide layouts available in Neversink
+- [Components](components.md) - the custom components such as sticky notes and admonitions
+- [Customizing](customizing.md) - how to customize the theme with your own CSS/fonts, etc...
+
+## ... or simply pick a layout to learn how to structure it
+
+<!--@include: ./parts/layoutpicker.md-->

package/docs/index.md

@@ -0,0 +1,19 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: 'Neversink'
+  tagline: An education/academic Slidev theme
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /getting-started
+    - theme: alt
+      text: Example deck
+      link: https://gureckis.github.io/slidev-theme-neversink/example/#1
+      target: '_self'
+    - theme: alt
+      text: GitHub
+      link: https://github.com/gureckis/slidev-theme-neversink
+---

package/docs/layouts/cover.md

@@ -0,0 +1,69 @@
+# `layout: cover`
+
+<img src="/screenshots/2.png" alt="Cover slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+The `layout: cover` layout is presumably the first slide of your presentation. It is a full screen slide with a title and subtitle. The title is displayed in a large font size and the subtitle is displayed in a smaller font size. The title has a line beneath it. The title and subtitle are centered vertically on the slide.
+
+## Frontmatter
+
+- `layout: cover` (required).
+- `color:` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `white`.
+
+Example:
+
+```yaml
+---
+layout: cover
+color: white
+---
+```
+
+## Slots
+
+This `cover` slide has one slot called `:: notes ::` which is optional. This slot is used to add notes to the slide. The notes are displayed in a smaller font size at the bottom of the slide.
+
+## Examples
+
+### Basic example
+
+```md
+---
+layout: cover
+color: light
+---
+
+# This is my slide title
+
+by **My Author**
+
+:: note ::
+
+\* This is a note about the slide.
+```
+
+Renders as:
+
+<img src="/screenshots/2.png" alt="Cover slide example" width="600" class="screenshot"/>
+
+### It's not easy being green
+
+```md
+---
+layout: cover
+color: emerald-light
+---
+
+# It's not easy being green
+
+by **Kermit the Frog**
+
+:: note ::
+
+\* This is emerald, not green.
+```
+
+Renders as:
+
+<img src="/screenshots/3.png" alt="Cover slide example" width="600" class="screenshot"/>

package/docs/layouts/credits.md

@@ -0,0 +1,111 @@
+# `layout: credits`
+
+## Description
+
+The `layout: credits` make a scrolling credits slide simliar to the end of a movive. The slide will automatically scroll the content up the screen. The actual logic for the scrolling is handled by the [CreditScroll component](/components/creditscroll).
+
+## Frontmatter
+
+- `layout: credits` (required).
+- `color:` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `white`.
+- `speed:` (optional) the speed of the scrolling. Default is `0.5`. Higher numbers are faster.
+- `loop:` (optional) if the credits should loop back to the beginning. Default is `false`.
+
+  Example:
+
+```yaml
+---
+layout: credits
+color: light
+speed: 2.0
+loop: true
+---
+```
+
+## Slots
+
+This slide just uses the default slot for the content.
+
+## Examples
+
+### Basic example
+
+```md
+---
+layout: credits
+color: light
+---
+
+<div class="grid text-size-4 grid-cols-3 w-3/4 gap-y-10 auto-rows-min ml-auto mr-auto">
+<div class="grid-item text-center mr-0- col-span-3">
+  
+  This is the `layout: credits` slide.  It's a movie-like scrolling credits!
+</div>
+<div class="grid-item text-center mr-0- col-span-3">
+  <strong>Cast</strong><br> 
+  <span class="font-size-3 mt-0">(In order of appearance)</span>
+</div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Study 1</strong></div>
+<div class="grid-item col-span-2">Person 1 <i>as PhD student</i>&nbsp;<mdi-open-in-new class="font-size-3 mb-0.5" /><br/>Person 2 <i>as Co-PI</i>&nbsp;<mdi-open-in-new class="font-size-3 mb-0.5" /></div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Study 2</strong></div>
+<div class="grid-item col-span-2">Person 3 <i>as Postdoc</i>&nbsp;<mdi-open-in-new class="font-size-3 mb-0.5" /><br/>Person 4 <i>as Co-PI</i>&nbsp;<mdi-open-in-new class="font-size-3 mb-0.5" /></div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Experiments</strong></div>
+<div class="grid-item col-span-2">Smile 🫠</div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Funding</strong></div>
+<div class="grid-item col-span-2">National Science Foundation<br/>
+National Institute of Health</div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Slides</strong></div>
+<div class="grid-item col-span-2">
+Slidev<br/>
+Unocss<br/>
+Figma<br/>
+Vuejs<br/>
+Vite<br/>
+</div>
+<div class="grid-item col-span-3 text-center mt-180px mb-auto font-size-1.5rem"><strong>Questions?</strong></div>
+</div>
+```
+
+Renders as:
+
+### Dark like the movies, and fast
+
+```md
+---
+layout: credits
+color: dark
+speed: 4.0
+loop: true
+---
+
+<div class="grid text-size-4 grid-cols-3 w-3/4 gap-y-10 auto-rows-min ml-auto mr-auto">
+<div class="grid-item text-center mr-0- col-span-3">
+  
+  This is the `layout: credits` slide.  It's a movie-like scrolling credits!
+</div>
+<div class="grid-item text-center mr-0- col-span-3">
+  <strong>Cast</strong><br> 
+  <span class="font-size-3 mt-0">(In order of appearance)</span>
+</div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Study 1</strong></div>
+<div class="grid-item col-span-2">Person 1 <i>as PhD student</i>&nbsp;<mdi-open-in-new class="font-size-3 mb-0.5" /><br/>Person 2 <i>as Co-PI</i>&nbsp;<mdi-open-in-new class="font-size-3 mb-0.5" /></div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Study 2</strong></div>
+<div class="grid-item col-span-2">Person 3 <i>as Postdoc</i>&nbsp;<mdi-open-in-new class="font-size-3 mb-0.5" /><br/>Person 4 <i>as Co-PI</i>&nbsp;<mdi-open-in-new class="font-size-3 mb-0.5" /></div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Experiments</strong></div>
+<div class="grid-item col-span-2">Smile 🫠</div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Funding</strong></div>
+<div class="grid-item col-span-2">National Science Foundation<br/>
+National Institute of Health</div>
+<div class="grid-item text-right mr-4 col-span-1"><strong>Slides</strong></div>
+<div class="grid-item col-span-2">
+Slidev<br/>
+Unocss<br/>
+Figma<br/>
+Vuejs<br/>
+Vite<br/>
+</div>
+<div class="grid-item col-span-3 text-center mt-180px mb-auto font-size-1.5rem"><strong>Questions?</strong></div>
+</div>
+```
+
+Renders as:

package/docs/layouts/default.md

@@ -0,0 +1,88 @@
+# `layout: default`
+
+<img src="/screenshots/6.png" alt="Default slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+The `layout: default` layout is probably the most common slide type. It is a full screen slide with a title and content. The title is displayed in a large font size and the content is displayed in a smaller font size.
+
+## Frontmatter
+
+- `layout: default` (required).
+- `color:` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `white`.
+
+Example:
+
+```yaml
+---
+layout: default
+color: white
+---
+```
+
+## Slots
+
+This `default` slide has no explicitly slots, using only the default slot.
+
+## Examples
+
+### Basic example
+
+```md
+---
+layout: default
+---
+
+# This is the `default` layout
+
+This is kind of the basic slide. The main content is interpreted as
+markdown and rendered in the center of the slide.
+
+Speaking of markdown, you can use markdown to make things **bold** or
+_italic_ or even `code` like `this`. In **Neversink** you can also
+==highlight things using the double equals signs like this== thanks
+to the `markdown-it-mark` plugin.
+
+Of course you can make bullet lists:
+
+- Hi
+- There
+- Bananas
+
+and use all the Slidev [markdown features](https://sli.dev/guide/syntax) like LaTeX math $x^2$, etc...
+```
+
+Renders as:
+
+<img src="/screenshots/6.png" alt="Cover slide example" width="600" class="screenshot"/>
+
+### Dark and stormy
+
+```md
+---
+layout: default
+color: navy
+---
+
+# This is the `default` layout
+
+This is kind of the basic slide. The main content is interpreted as
+markdown and rendered in the center of the slide.
+
+Speaking of markdown, you can use markdown to make things **bold** or
+_italic_ or even `code` like `this`. In **Neversink** you can also
+==highlight things using the double equals signs like this== thanks
+to the `markdown-it-mark` plugin.
+
+Of course you can make bullet lists:
+
+- Hi
+- There
+- Bananas
+
+and use all the Slidev [markdown features](https://sli.dev/guide/syntax) like LaTeX math $x^2$, etc...
+```
+
+Renders as:
+
+<img src="/screenshots/7.png" alt="Cover slide example" width="600" class="screenshot"/>

package/docs/layouts/full.md

@@ -0,0 +1,131 @@
+# `layout: full`
+
+<img src="/screenshots/29.png" alt="full slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+The `layout: full` fill the entire slide except for some margins. This layout is useful for slides that need to display a lot of content or images.
+
+## Frontmatter
+
+- `layout: full` (required).
+- `color:` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `white`.
+  Example:
+
+```yaml
+---
+layout: full
+---
+```
+
+## Slots
+
+This slide just uses the default slot for the content.
+
+## Examples
+
+### Basic example showing some figures
+
+```md
+---
+layout: full
+title: Full Layout - 2 Col Fig
+---
+
+This is an example of using unocss atomic classes to put two figures side by side.
+
+<div class="grid w-full h-fit grid-cols-2 grid-rows-2 mt-10 mb-auto">
+<div class="grid-item grid-col-span-1"><img src="/images/scatter1.svg" /></div>
+<div class="grid-item grid-col-span-1"><img src="/images/scatter1.svg" /></div>
+<div class="grid-item grid-col-span-2 text-center h-fit">
+
+**Figure show this**: this is a two column figure
+
+</div>
+</div>
+```
+
+Renders as:
+
+<img src="/screenshots/29.png" alt="full slide example" width="600" class="screenshot"/>
+
+### Addressable area
+
+```md
+---
+layout: full
+color: neutral
+title: Full Layout
+---
+
+<div class='border-1px v-full h-full p-5'>
+
+This is `layout: full` which fills the whole screen for the most part.
+The grey box is just showing you the full addressable space.
+Full can be useful for arbitrary layouts such as on the next slide which uses
+the `v-drag` directive to position elements.
+
+</div>
+```
+
+Renders as:
+
+<img src="/screenshots/30.png" alt="full slide example" width="600" class="screenshot"/>
+
+### A busy example
+
+```md
+---
+layout: full
+title: Full with Arbitrary Layout
+---
+
+<div class='v-full h-full'>
+
+<SpeechBubble position="l" shape="round"  color='pink-light' v-drag="[555,342,274,58]">
+
+Hello, I'm an **ice cream**!
+</SpeechBubble>
+
+<SpeechBubble position="bl" shape="round"  color='emerald-light' v-drag="[445,258,274,57]">
+
+Hello, I'm **kawaii**.
+</SpeechBubble>
+
+<SpeechBubble position="r" shape="round" animation="float"  color='sky' v-drag="[143,391,274,84]">
+
+I'm v-dragged out and ==floating==.
+</SpeechBubble>
+
+<IceCream :size="150" mood="lovestruck" color="#FDA7DC" v-drag="[439,341,85,150]" />
+
+<div class="tight" v-drag="[143,33,277,214]">
+
+<span class="bg-red-100 text-red-600 p-2 border-l-6 border-2 border-red-200 rounded-lg pl-4 pr-4">Here's a list of somethings</span>
+
+- Novelty bonuses
+- Cumulative prediction error
+- Learning progress
+- Surprise
+- Suspense
+- Information gain
+
+</div>
+
+<div class="tight" v-drag="[461,63,293,148,17]">
+
+<span class="bg-emerald-100 text-emerald-500 p-2 border-l-6 border-2 border-emerald-200 rounded-lg pl-4 pr-4">Here's another list of things</span>
+
+- Structured behaviors
+- Compositional
+- Communicable
+
+</div>
+
+</div>
+```
+
+Renders as:
+
+<img src="/screenshots/31.png" alt="full slide example" width="600" class="screenshot"/>
+```

package/docs/layouts/intro.md

@@ -0,0 +1,63 @@
+# `layout: intro`
+
+<img src="/screenshots/4.png" alt="Cover slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+The `layout: intro` layout is an alternative for the first slide of your presentation. It is a full screen slide with a title and subtitle. The title is displayed in a large font size and the subtitle is displayed in a smaller font size. The title and subtitle are centered vertically on the slide. This isn't so different from `layout: cover` the main difference being the line beneath the title.
+
+## Frontmatter
+
+- `layout:` (required) is always `cover`.
+- `color:` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `white`.
+
+Example:
+
+```yaml
+---
+layout: intro
+color: white
+---
+```
+
+## Slots
+
+This `cover` slide has one slot called `:: notes ::` which is optional. This slot is used to add notes to the slide. The notes are displayed in a smaller font size at the bottom of the slide.
+
+## Examples
+
+```md
+---
+layout: intro
+color: light
+---
+
+# This is my intro slide
+
+by **My Author**
+
+:: note ::
+
+\* This is a note about the slide.
+```
+
+Renders as:
+
+<img src="/screenshots/4.png" alt="Intro slide example" width="600" class="screenshot"/>
+
+```md
+---
+layout: cover
+color: indigo
+---
+
+# This is my intro slide in indigo
+
+by **My Author**
+
+:: note ::
+
+\* This is a note about the slide.
+```
+
+<img src="/screenshots/5.png" alt="Intro slide example" width="600" class="screenshot"/>

package/docs/layouts/quote.md

@@ -0,0 +1,51 @@
+# `layout: quote`
+
+<img src="/screenshots/26.png" alt="quote slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+The `layout: quote` is used when you want to provide a full slide quotation for dramatic effect in your presentation. The quote is displayed in a large font size and the author is displayed in a smaller font size. The quote and author are centered vertically on the slide.
+
+## Frontmatter
+
+- `layout: quote` (required).
+- `color:` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `light`.
+- `quotesize:` (optional) the font size of the quote. Default is `text-2xl`. Based on tailwind sizes.
+- `authorsize:` (optional) the font size of the quote. Default is `text-l`. Based on tailwind sizes.
+- 'author:' (optional) the author of the quote. If not provided, the author will not be displayed.
+
+Example:
+
+```yaml
+---
+layout: quote
+color: sky-light
+quotesize: text-m
+authorsize: text-s
+author: 'Todd Gureckis'
+---
+```
+
+## Slots
+
+This slide just uses the default slot for the quote. Additional formatting can be provided there.
+
+## Examples
+
+### Basic example
+
+```md
+---
+layout: quote
+color: sky-light
+quotesize: text-m
+authorsize: text-s
+author: 'Todd Gureckis'
+---
+
+"This is a quote slide. It has a frontmatter options for the size of the text (`quotesize: text2xl` and `authorsize: text-l`). I feel it is a little uninspired but might save you some time."
+```
+
+Renders as:
+
+<img src="/screenshots/26.png" alt="quote slide example" width="600" class="screenshot"/>