---
colorSchema: light
layout: cover
routerMode: hash
title: Base Template
theme: ./
neversink_string: "Neversink Example Deck"
---
# Neversink
A [Slidev](https://sli.dev) theme designed by **Todd Gureckis**
_New York University_
---
layout: side-title
color: amber
align : rm-lm
---
:: title ::
# Slidev Neversink Theme
:: content ::
Neversink is theme for education and academic presentations. It is designed to be bright, flat, minimal, and easy to read. It is based on the default Slidev theme but with some additional features and color schemes that have reference in the [metropolis](https://github.com/matze/mtheme) Beamer theme among others.
It is named for the [Neversink River](https://en.wikipedia.org/wiki/Neversink_River) for absolutely no discernable reason.
---
layout: default
---
# Why use it?
- Neversink has several configurable ==layouts== that build upon the Slidev defaults and which make it easier to quickly throw together common slide layouts without having to write a lot of custom CSS/HTML.
- It has a variety of ==color themes== to choose from that make your visual identity more coherent.
- It also has some whimsical elements like movie-style scrolling credits, animated speech bubbles, and admonitions that make your presentations more memorable.
- It strives to be well documented and easy to use!
You can find the source code on [GitHub](http://github.com/gureckis/slidev-theme-neversink).
---
layout: default
---
# How to install
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!
---
layout: default
---
# Color schemes
Let's start with colors.
The project uses tailwind-like color schemes arranged in ==monochromatic pairs==. These boxes show the options and names:
**B&W**:
black
white
dark
light
**Light**:
slate-light
gray-light
zinc-light
neutral-light
stone-light
red-light
orange-light
amber-light
yellow-light
lime-light
green-light
emerald-light
teal-light
cyan-light
sky-light
blue-light
indigo-light
violet-light
purple-light
pink-light
rose-light
fuchsia-light
navy-light
**Regular**:
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
navy
sky
blue
indigo
violet
purple
pink
rose
fuchsia
---
layout: default
---
# Color schemes
In many parts of the theme you can use the color schemes to help choose matching colors for your slides. For example, we can make a slide with a sticky note using the `rose-light` color scheme, the `sky` color scheme, or the `amber-light` color scheme:
Hello, I'm a **redish sticky note** using `rose-light`.
Hello, I'm a **blueish sticky note** using `sky`.
Hello, I'm a **yellowish sticky note** using `amber-light`.
---
layout: side-title
color: emerald-light
align: rm-lm
titlewidth: is-3
---
Don't worry if you don't understand all the details, yet we are still talking about **color schemes**.
:: title ::
# Color schemes
:: content ::
Or we can use the `emerald-light` scheme in a slide layout to set the overall color and style of a slide with a matching sticky note:
```md
---
layout: side-title
color: emerald-light
align: rm-lm
titlewidth: is-3
---
```
---
layout: top-title
color: amber
align: l
---
:: title ::
# Layouts
:: content ::
The theme includes many layouts. Layouts set the overall structure of the page. For example, this slide is using the `top-title` layout with the `amber` color scheme. You can see the frontmatter for this slide below:
```md
---
layout: top-title
color: amber
align: l
---
```
The previous slide used the `side-title` layout with the `emerald-light` color scheme. You can see the frontmatter for that slide below:
```md
---
layout: side-title
color: emerald-light
align: rm-lm
titlewidth: is-3
---
```
---
layout: top-title-two-cols
color: amber-light
align: l-lt-lt
---
:: title ::
# Two things about layouts
:: left ::
There are two important parts of slides to know about.
## Frontmatter
First is **frontmatter**, which are configuration options
that appear at the start of each slide (see [Slidev docs](https://sli.dev/guide/syntax#frontmatter-layouts)). These configure things like
alignment, color, and spacing:
```md
---
layout: top-title
color: sky
align: l
---
```
:: right ::
# Slots
The other aspect is **slots**. Slots are a basic part of [Vue.js](https://vuejs.org/guide/components/slots.html). In Slidev slots can be marked using `:: slotname ::` and then filled in with content. For example, the `:: left ::` and `:: right ::` slots on this slide are filled with content.
Slots effectively help you map parts of your slide to different parts of a layout. The most common case is to say which content appears in the left column and which appears in the right column. But different layouts can have different slots and different content.
---
layout: top-title
color: amber-light
align: lt
---
:: title ::
# Available Layouts
:: content ::
The available layouts in **Neversink** currently are:
- `cover`
- `intro`
- `default`
- `section`
- `quote`
- `full`
- `credits`
- `two-cols-title`
- `top-title`
- `top-title-two-cols`
- `side-title`
- `image-right`
- `image-left`
- `image`
- `iframe-right`
- `iframe-left`
- `iframe`
- `none`
- `end`
- `fact`
We will step through these one by one showing several examples
and how to configure the frontmatter for each.
---
layout: cover
---
# This is the `cover` layout
**Todd Gureckis**
_New York University_
:: note ::
\* Optional `:: note ::` slot for mentioning ==notes== at the bottom.
---
layout: cover
color: dark
---
# This is the `cover` layout
**Todd Gureckis**
_New York University_
:: note ::
\* Here we set `color: dark` in the frontmatter.
---
layout: cover
color: amber
---
# This is the `cover` layout
**Todd Gureckis**
_New York University_
:: note ::
\* Here we set `color: amber` in the frontmatter.
---
layout: cover
color: amber-light
---
# This is the `cover` layout
**Todd Gureckis**
_New York University_
:: note ::
\* Here we set `color: amber-light` in the frontmatter. Notice how the color scheme brings along many of the elements on the page.
---
layout: cover
color: pink
---
### This is the `cover` layout with a longer title for your talk you just use more `#`s
**Todd Gureckis**
_New York University_
:: note ::
\* Here we set `color: pink` in the frontmatter. Different choices convey a different vibe for the intro of your talk. There's lots of choices available.
---
layout: intro
color: emerald-light
---
# This is the `intro` layout
**Todd Gureckis**
_New York University_
This is like the cover slide but with a little less decoration.
It also has a frontmatter option of `color: emerald-light`.
---
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
Also there's a little helper class `ns-c-tight` you can add to make the bullet spacing a bit tighter:
- Hi
- There
- I need space
---
layout: default
color: sky
---
# The `default` layout
The default layout also has an optional `color` option in the frontmatter.
For example this is
```md
---
layout: default
color: sky
---
```
---
layout: default
color: light
---
# The `default` layout
Things don't have to be so dramatic. For more conservative presentations you can use color schemes like `light`:
```md
---
layout: default
color: light
---
```
And of course you don't have to change the color scheme every slide!
---
layout: section
---
# The `section` layout
This is a section slide. It can be use to make a noticable point or break between sections.
---
layout: section
color: navy
---
# The `section` layout
It has a `hr` which is color matched to the color scheme. For example, this slide is using the `navy` color scheme and the line is white.
---
layout: section
color: indigo
---
# The `section` layout
This is `color: indigo` and the line and font is a light indigo shade.
---
layout: section
color: navy
---
# The `section` layout
You can use HTML and inline CSS to modify the look and feel.
---
layout: quote
color: sky-light
quotesize: text-sm
authorsize: text-sm
author: "Todd Gureckis"
---
"This is a quote slide. It has a frontmatter option of `quote` which is the text that appears in the quote box and `author` and options for the size of the text(`quotesize: text-2xl` and `authorsize: text-l`). I feel it is a little uninspired but might save you some time."
---
layout: full
title: Full Layout
---
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.
---
layout: full
title: Full with Arbitrary Layout
---
Hello, I'm an **ice cream**!
Hello, I'm **kawaii**.
I'm v-dragged out and ==floating==.
Here's a list of somethings
- Novelty bonuses
- Cumulative prediction error
- Learning progress
- Surprise
- Suspense
- Information gain
Here's another list of things
- Structured behaviors
- Compositional
- Communicable
---
layout: full
title: Full Layout - 2 Col Fig
---
This is an example of using unocss atomic classes to put two figures side by side.
**Figure show this**: this is a two column figure
---
layout: full
title: Full Layout - 3 Col Fig
---
This is an example of using unocss atomic classes to put three figures side by side.
**Figure show this**: this is a three column figure
---
layout: credits
color: light
---
This is the `layout: credits` slide. It's a movie-like scrolling credits!
Cast
(In order of appearance)
Study 1
Person 1 as PhD student
Person 2 as Co-PI
Study 2
Person 3 as Postdoc
Person 4 as Co-PI
Experiments
Smile ðŸ«
Funding
National Science Foundation
National Institute of Health
Slides
Slidev
Unocss
Figma
Vuejs
Vite
Questions?
---
layout: credits
color: navy
speed: 4.0
loop: true
---
This one has `speed: 4.0` and `loop: true` in the front matter
Cast
(In order of appearance)
Study 1
Person 1 as PhD student
Person 2 as Co-PI
Study 2
Person 3 as Postdoc
Person 4 as Co-PI
Experiments
Smile ðŸ«
Funding
National Science Foundation
National Institute of Health
Slides
Slidev
Unocss
Figma
Vuejs
Vite
Questions?
---
layout: image-left
image: /images/photo.png
class: mycoolclass
---
# Image left
This is the `layout: image-left` layout.
---
layout: image-right
image: /images/photo2.png
slide_info: false
class: mycoolclass
---
# Image right
This is the `layout: image-right` layout.
---
layout: image
image: /images/photo.png
title: Image Layout
---
---
layout: iframe-left
title: iframe Left Layout
# the web page source
url: https://gureckislab.org
# a custom class name to the content
class: my-cool-content-on-the-right
---
# This is a website on the left
This is useful for showing a website but loads live on the web so requires and internet connection.
---
layout: iframe-right
title: iframe Right Layout
# the web page source
url: https://gureckislab.org
# a custom class name to the content
class: my-cool-content-on-the-right
slide_info: false
---
# This is a website on the right
This is useful for showing a website but loads live on the web so requires and internet connection.
---
layout: iframe
title: iframe Layout
# the web page source
url: https://gureckislab.org
slide_info: false
---
---
layout: two-cols-title
columns: is-6
align: l-lt-lt
title: Two Cols Title - Header (Info)
---
:: title ::
# `two-cols-title`
:: left ::
This is `layout: two-cols-title`.
- There are three slots: `:: title ::`, `:: left ::`, and `:: right ::` along with the default which is implicit before any named slots.
- It additionally provides three configuration options in the slide YAML front matter:
`color`, `columns` and `align`.
:: right ::
- `color` is the color scheme.
- `columns` is the relative spacing given to the left versus right column. The overall space is divided into 12 columns. Instructions like `is-5` will give 5 units to the left and 7 to the right.
- The align parameter determines how the columns look. The notation is for example
align: l-cm-cm. The first part is for the header, the second for the left column, the third part is for the right column. The first letter is (c for center, l for left, r for right), the second letter
is vertical alignment (t for top, m for middle, b for bottom). Only c/l/r works for the header.
---
layout: two-cols-title
columns: is-2
align: l-lt-lt
title: Two Cols Title - Header (is-2)
---
:: title ::
:: left ::
:: right ::
---
layout: two-cols-title
columns: is-4
align: l-lt-lt
title: Two Cols Title - Header (is-4)
---
:: title ::
:: left ::
:: right ::
---
layout: two-cols-title
columns: is-6
align: l-lt-lt
title: Two Cols Title - Header (is-6)
---
:: title ::
:: left ::
:: right ::
---
layout: two-cols-title
columns: is-8
align: l-lt-lt
title: Two Cols Title - Header (is-8)
---
:: title ::
:: left ::
:: right ::
---
layout: two-cols-title
columns: is-10
align: l-lt-lt
title: Two Cols Title - Header (is-10)
---
:: title ::
:: left ::
:: right ::
---
layout: two-cols-title
columns: is-10
align: l-lt-lt
titlepos: b
title: Two Cols Title - Footer (is-10)
---
:: title ::
:: left ::
:: right ::
---
layout: two-cols-title
columns: is-4
align: l-lt-lt
titlepos: b
title: Two Cols Title - no title (is-4)
---
:: left ::
:: right ::
---
layout: side-title
side: l
color: violet
titlewidth: is-4
align: rm-lm
title: Side Title Layout (Another)
---
:: title ::
# `side-title`
#
:: content ::
This is `layout: side-title` with `side: right` in the front matter.
```yaml
side: left
color: violet
titlewidth: is-4
align: rm-lm
```
---
layout: side-title
side: r
color: pink-light
titlewidth: is-6
align: lm-lb
title: Side Title Layout (Another)
---
:: title ::
# `side-title`
#
:: content ::
This is `layout: side-title` with `side: right` in the front matter.
```yaml
side: right
color: pink-light
titlewidth: is-6
align: lm-lb
```
---
layout: top-title
color: violet
align: l
title: Top Title (Another)
---
:: title ::
# `top-title`: A variation with different parameters
:: content ::
Todd has used this navy color on many projects in the past. This is a top title layout.
I sort of like the `###` font style the best.
```yaml
layout: top-title
color: violet
titlewidth: is-2
align: lm
```
---
layout: top-title-two-cols
color: navy
columns: is-6
align: l-lt-lt
title: Top Title (Another)
---
:: title ::
### `top-title-two-cols`: A variation with two columns
:: left ::
- This is the left column
- This is a nice way to add color and distinction to a slide
- Options are `columns` which is the size of the left column, `color` (default `light`), and `align` which is the alignment of the title and columns (e.g., `l-lt-lt`)
:: right ::
- This is the right column
- This is a nice way to add color and distinction to a slide
---
layout: default
---
# Extras
In addition to these custom layouts, the **Neversink** theme includes a few custom components that can be used in your slides. These include sticky notes, speech bubbles, cute icons, QR codes, and more. The next few slides walks through them:
- admonitions
- sticky notes
- speech bubbles
- cute icons
- QR codes
---
layout: two-cols-title
columns: is-6
title: Admonitions
dragPos:
admon: Left,Top,Width,Height,Rotate
"'admon'": 55,300,287,106
---
If you want to `v-drag` an admonition, you should set the width to a fixed value.
:: title ::
# Admonitions
:: left ::
- Admonitions are boxes that you can use to call out things.
This is my admon message
:: right ::
This is note text
This is important text
This is a tip
This is a tip
This is warning text
---
layout: two-cols-title
columns: is-6
title: Bubbles
---
Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
:: title ::
# Bubbles
:: left ::
- Bubbles are moveable elements that act as speech bubbles
- They can be configured for where you want the arrow to point
- The can be move around if you enable `v-drag` on the element
:: right ::
Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
---
layout: default
title: Sticky Notes
---
Hello, I'm a **sticky note**.
Hello, I'm also a **sticky note** but am blue sky title.
Hello, I'm also a **sticky note** but I lack a title.
# Sticky Notes
- Sticky notes are moveable elements you can use for notes.
- Syntax is
```js
Hello, I'm a **sticky note**.
```
---
layout: default
title: Kawaii 1
---
# Kawaii
- Kawaii is a Japanese term that means cute
---
layout: default
title: QR Codes
---
# In-line QR Codes
- Send people to a url with a easy to configure QR code
```vue
```
Result:
---
layout: default
title: Lines
---
# Lines
---
layout: side-title
side: left
color: violet
titlewidth: is-4
align: rm-lt
title: Code Example
---
Slidev is great at code formatting!
:: title ::
# Code
:: content ::
Plain javascript:
```js
console.log('Hello, World!')
```
Highlight lines 2 and 3:
```ts {2,3}
function helloworld() {
console.log('Hello, World!')
console.log('Hello, World!')
console.log('Hello, World!')
}
```
Crazy clicking through
```ts {2,3|5|all}
function helloworld() {
console.log('Hello, World!')
console.log('Hello, World!')
console.log('Hello, World!')
console.log('Hello, World!')
console.log('Hello, World!')
console.log('Hello, World!')
}
```
---
layout: side-title
side: left
color: violet
titlewidth: is-4
align: rm-lt
title: Code Example
---
:: title ::
# Code
More cool code stuff
:: content ::
Scrollable with clicks 🤯
```ts {2|3|7|12}{maxHeight:'100px'}
function helloworld() {
console.log('Hello, World 1!')
console.log('Hello, World 2!')
console.log('Hello, World 3!')
console.log('Hello, World 4!')
console.log('Hello, World 5!')
console.log('Hello, World 6!')
console.log('Hello, World 7!')
console.log('Hello, World 8!')
console.log('Hello, World 9!')
console.log('Hello, World 10!')
console.log('Hello, World 11!')
}
```
You can even edit the code in the browser
```ts {monaco}
console.log('HelloWorld')
```
You can even run the code in the browser
```ts {monaco-run} {showOutputAt:'+1'}
function distance(x: number, y: number) {
return Math.sqrt(x ** 2 + y ** 2)
}
console.log(distance(3, 4))
```
---
layout: side-title
side: left
color: lime
titlewidth: is-4
align: rm-lt
title: LaTeX Example
---
:: title ::
# LaTeX Equations
Yeah it does this fine
:: content ::
Inline equations: $\sqrt{3x-1}+(1+x)^2$
Block rendering:
$$
\begin{array}{c}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{array}
$$
Line highlighting with clicks!
$$
{1|3|all}
\begin{array}{c}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{array}
$$
---
layout: side-title
side: left
color: sky
titlewidth: is-4
align: rm-cm
title: Mermaid Example
---
:: title ::
# Mermaid Diagrams
Everyone is talking about this
:: content ::
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```
---
layout: side-title
side: left
color: sky
titlewidth: is-4
align: rm-cm
title: Mermaid Example
---
:: title ::
# Mermaid Diagrams
Everyone is talking about this
:: content ::
```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
A mermaid diagram with two circles side by side horizontally with an arrow pointing from the left circle to the right circle
```mermaid {theme: 'neutral', scale: 0.8}
graph LR
A([Circle 1]) --> B((Circle 2))
```
