Skip to content

Latest commit

 

History

History
1499 lines (1031 loc) · 34.4 KB

example.md

File metadata and controls

1499 lines (1031 loc) · 34.4 KB
colorSchema layout routerMode title theme neversink_string
light
cover
hash
Base Template
./
Neversink Example Deck

Neversink

A Slidev 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 Beamer theme among others.

It is named for the 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.

layout: default

How to install

The theme depends on Slidev. So you need to have that installed first. Then you can install the theme with npm:

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:

---
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:

---
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:

---
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:

---
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). These configure things like alignment, color, and spacing:

---
layout: top-title
color: sky
align: l
---

:: right ::

Slots

The other aspect is slots. Slots are a basic part of Vue.js. 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

---
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:

---
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.

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.

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.

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
<StickyNote color="amber-light" textAlign="left" width="180px" title="Title" v-drag>
  Hello, I'm a **sticky note**.
</StickyNote>

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
<QRCode value="https://gureckislab.org" :size="200" render-as="svg" />

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:

console.log('Hello, World!')

Highlight lines 2 and 3:

function helloworld() {
  console.log('Hello, World!')
  console.log('Hello, World!')
  console.log('Hello, World!')
}

Crazy clicking through

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 🤯

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

console.log('HelloWorld')

You can even run the code in the browser

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 ::

sequenceDiagram
  Alice->John: Hello John, how are you?
  Note over Alice,John: A typical interaction
Loading

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 ::

graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Loading

A mermaid diagram with two circles side by side horizontally with an arrow pointing from the left circle to the right circle

graph LR
A([Circle 1]) --> B((Circle 2))
Loading