Neversink Slidev Theme

vue3-kawaii

vue3-kawaii is a collection of Vue components designed to render cute characters. It is a Vue 3 port of the original react-kawaii library. While the original library was built for Vue 2 and is no longer updated, this version has been updated to be compatible with Vue 3.

Slots allow you to place content into specific areas of a layout. Every slide has a default slot (the content appearing before any named slot). For layouts with multiple areas, use the :: slot-name :: syntax to define where content should go.

Slot definitions end when the next slot begins. Any Markdown content appearing before the first named slot is automatically assigned to the default slot.

---
layout: two-cols-title
columns: is-6
align: l-lt-lt
title: Two Cols Title
---

This is in the default slot

:: title ::

# My slide title

:: left ::

This is the left column slot!

:: right ::

This is the right column slot!

A simple layout used to create section breaks or noticeable points in a presentation.

---
layout: section
color: navy
---

# Section Title

The v-drag directive allows you to position elements at specific coordinates on a slide, which is particularly useful when using layout: full. This enables creating custom, non-linear layouts where elements like speech bubbles, images, or text blocks are placed precisely.

To use it, pass an array of numbers to the directive: v-drag="[x, y, width, height, rotation]".

Note: When using v-drag with components like Admonition, it is recommended to set a fixed width to ensure consistent positioning.

<SpeechBubble 
  position="l" 
  shape="round" 
  color='pink-light' 
  v-drag="[555,342,274,58]"
>
  Hello, I'm an **ice cream**!
</SpeechBubble>

A specialized layout for displaying quotes.

Configuration options:

• color: Color scheme.
• quotesize: Text size for the quote (e.g., text-m).
• authorsize: Text size for the author (e.g., text-s).
• author: The name of the author to display.

---
layout: quote
color: sky-light
quotesize: text-m
authorsize: text-s
author: 'Todd Gureckis'
---

"This is a quote."

The CreditScroll component follows these lifecycle and behavior rules:

• Automatic Start: Scrolling begins automatically as soon as the slide is entered.
• Reset on Entry: The scroll position resets whenever you re-enter the slide.
• Looping: If loop is set to true, the content restarts from the beginning after finishing the scroll. If loop is false, the scrolling stops once the content has fully scrolled through.

Note: For most use cases, it is recommended to use the layout: credits layout instead. The layout wraps this component and allows you to configure speed and loop via Slidev frontmatter.

You can still use standard Slidev built-in layouts (like image-left, image-right, image, iframe-left, iframe-right, iframe, none, end, or fact).

Note: These standard layouts cannot be customized by Neversink color schemes at this time.

You can configure the alignment of content within the columns using frontmatter settings.

Vertical Alignment: Content can be aligned to the top, middle, or bottom of the slide.

Horizontal Alignment: Content within a column can be aligned to the left, center, or right.

Note: The slide title is restricted to left, center, or right alignment as it occupies a narrow band across the top of the slide.

These layouts are designed for slides where the title is positioned at the top.

• top-title: A standard top-aligned title layout. Supports color, titlewidth, and align (e.g., l or lm).
• top-title-two-cols: A variation of the top-title layout that also provides two columns (:: left :: and :: right ::). Supports columns, color, and align.

layout: top-title-two-cols
color: navy
columns: is-6
align: l-lt-lt
title: Top Title Layout

The Neversink theme includes the markdown-it-mark plugin, allowing you to highlight text using double equals signs (==text==).

==highlight things using the double equals signs like this==

The align property uses a two-part kebab-case string to control the alignment of the columns. Each part consists of a horizontal alignment character (l=left, c=center, r=right) and a vertical alignment character (t=top, m=middle, b=bottom).

Example: align: lt-lb means the first column is Left-Top and the second column is Left-Bottom.

If you set align: auto, it automatically adjusts based on the side property:

• If side: l: uses rm-lt (Right-Middle for title, Left-Top for content).
• If side: r: uses lt-lm (Left-Top for title, Middle-Left for content).

Components are add-ons for the neversink theme that provide additional features, design elements, animations, or interactivity. Most components can be used directly in your Markdown files by including their component tags in-line.

For components that require specific positioning (like SpeechBubble), you can use the v-drag directive to place them at precise locations on a slide. When using v-drag for positioning, it is recommended to keep the component in the default slot of your layout.

<!-- Example of in-line usage (generic) -->
<StickyNote>Important note!</StickyNote>

<!-- Example of positioning with v-drag (generic) -->
<SpeechBubble v-drag>Hello!</SpeechBubble>