slidev-theme-neversink 0.0.0

package/docs/layouts/two-cols-title.md

@@ -0,0 +1,273 @@
+# `layout: two-cols-title`
+
+<img src="/screenshots/8.png" alt="two-cols-title slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+The `layout: two-cols-title` layout is among the most common layouts in talks. It has an optional title along the top or bottom of the slide, and then the main section is divided into two columns. Because the spacing and alignment of columns often needs to be adjusted on a case-by-case basis, this layout provides a lot of flexibility by creating a simple design system you can use to fine-tune the two column/title arrangement.
+
+<!--@include: ../parts/columnsystem.md-->
+
+The position of the title on the slide can also be configured. It can be at the top or bottom of the slide, or hidden/missing entirely. The default position is at the top:
+
+<img src="/layouts/two-col-title-titlepos.svg" alt="two-cols-header slide example" width="300" />
+
+A default slot is provided for content that appears before a named slot. This content will appear at the bottom of the slide.
+
+## Frontmatter
+
+- `layout: two-cols-header` (required).
+- `color:` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `white`.
+- `columns:` (optional) gives the width to the left and right column. The default value is `is-one-half`. As described above, the slide is divided into 12 column units. With <code>columns: is-1-11</code> the left column is 1/12 wide and the the right columns is 11/12 wide. The component admits a short hand of only specifying the left column (<code>columns: is-1</code> does the same thing). Here is a full list of the available shorthands:
+
+<div class="ml-auto mr-aut w-full">
+
+| Left:Right Column Size | Frontmatter short names                                                                   |
+| :--------------------- | :---------------------------------------------------------------------------------------- |
+| 1:11                   | `is-1`<br>`is-1-11`<br>`is-one-twelfth`                                                   |
+| 2:10                   | `is-2`<br>`is-2-10`<br>`is-one-sixth`                                                     |
+| 3:9                    | `is-3`<br>`is-3-9`<br>`is-one-quarter`                                                    |
+| 4:8                    | `is-4`<br>`is-4-8`<br>`is-one-third`                                                      |
+| 5:7                    | `is-5`<br>`is-5-7`                                                                        |
+| 6:6                    | `is-6`<br>`is-6-6`<br>`is-two-quarters`<br>`is-two-fourths`<br>`is-one-half`<br>`is-half` |
+| 7:5                    | `is-7`<br>`is-7-5`                                                                        |
+| 8:4                    | `is-8`<br>`is-8-4`<br>`is-two-thirds`                                                     |
+| 9:3                    | `is-9`<br>`is-9-3`<br>`is-three-quarters`<br>`three-fourths`                              |
+| 10:2                   | `is-10`<br>`is-10-2`                                                                      |
+| 11:1                   | `is-11`<br>`is-11-1`                                                                      |
+
+</div>
+
+- `align:` (optional) determines the alignment of the content in different parts of the slides. The options are specified in three parts using [kebab notation](https://www.theserverside.com/definition/Kebab-case). The first segment applies to the title, the second to the left column, and the third to the right column. i.e., `title-left-right`. The first letter of each segment is either `l` for left, `c` for center, or `r` for right. This sets the text alignment of that section. The second letter of the left and right segments are either `t` for top, `m` for middle, or `b` for bottom. This sets the vertical alignment of the content in that column. **The title segment only can configure the `l/c/r` alignment** since it only occupies a narrow band at the top of the slide. The default value is `l-lt-lt` which aligns the content in the title to left margin, the content of the left column to the left, the content in the left column to the top, and the content in the right column to the top.
+- `titlepos:` (optional) is either `t` (top), `b` (bottom), or `n` (none). This determines the position of the title. The default value is `t`.
+
+Example:
+
+```yaml
+---
+layout: two-cols-header
+columns: is-4
+align: c-rm-lt
+color: light
+titlepos: t
+---
+```
+
+## Slots
+
+This `two-cols-title` slide has three name slots which are all optional:
+`:: title ::`, `:: left ::`, and `:: right ::`. In addition, the `:: default ::` slot exits for any content that appears before a named slot. It will appear at the bottom of the slide.
+If the title is not provided the space will be reallocated the columns. If the left or right is not provided the space for them will remain according to `columns:` frontmatter.
+
+A common use case for the default slot is to include things like [StickyNotes](/components/stickynote) in this default section and then use Slidev's `v-drag` directive to move them into position on the slide. An example below make use of this technique.
+
+## Examples
+
+### Basic example
+
+```md
+---
+layout: two-cols-title
+columns: is-6
+align: l-lt-lt
+---
+
+:: title ::
+
+# This is `two-cols-title`
+
+:: left ::
+
+This is a configurable layout which is very common in presentations.
+
+- There are three slots: `:: title ::`, `:: left ::`, and `:: right ::` along with the default which is implicit before any named slots.
+
+- It additionally provides four configuration options in the slide YAML front matter:
+  `color`, `columns`, `align`, and `titlepos`.
+
+- `color` is the color scheme.
+
+- `columns` is the relative spacing given to the left versus right column ([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title)).
+
+:: right ::
+
+- The <code>align</code> parameter determines how the columns look. The notation is for example <code>align: l-cm-cm</code>. The first part is for the header, the second for the left column, the third part is for the right column ([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title)).
+
+- The <code>titlepos</code> parameter determines where the title appears. The options are `t` for top, `b` for bottom, or `n` for none/hidden. The default is `t` ([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title)).
+```
+
+Renders as:
+
+<img src="/screenshots/8.png" alt="two-cols-header slide example" width="600" style="border: 1px solid #ccc;"/>
+
+### Less content on the left now so lets rebalance things
+
+```md
+---
+layout: two-cols-title
+columns: is-3
+align: c-lt-lt
+---
+
+:: title ::
+
+# This is `two-cols-title`
+
+:: left ::
+
+This is a configurable layout which is very common in presentations.
+
+- There are three slots: `:: title ::`, `:: left ::`, and `:: right ::` along with the default which is implicit before any named slots.
+
+:: right ::
+
+- `columns` is the relative spacing given to the left versus right column ([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+
+- The <code>align</code> parameter determines how the columns look. The notation is for example
+  <code>align: l-cm-cm</code>. The first part is for the header, the second for the left column, the third part is for the right column ([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+
+- The <code>titlepos</code> parameter determines where the title appears. The options are `t` for top, `b` for bottom, or `n` for none/hidden. The default is `t`.([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+```
+
+Renders as:
+
+<img src="/screenshots/9.png" alt="two-cols-header slide example" width="600" style="border: 1px solid #ccc;"/>
+
+### Really flexing the layout system now
+
+```md
+---
+layout: two-cols-title
+columns: is-2
+align: r-lt-lt
+color: light
+---
+
+This is the default slot, if you want to use it!
+
+:: title ::
+
+# Another example
+
+:: left ::
+This is the left column it has been shrunk down to 2 units.
+
+:: right ::
+This gave more space to the right column.
+
+- You can put more points
+- You can make them longer
+- You can place more text and images here
+```
+
+<img src="/screenshots/10.png" alt="two-cols-header slide example" width="600" style="border: 1px solid #ccc;"/>
+
+### Using color and the default slot
+
+```md
+---
+layout: two-cols-title
+columns: is-2
+align: c-rm-lt
+color: dark
+---
+
+<StickyNote color="amber-light" textAlign="left" width="180px" title="Hi" v-drag="[689,277,180,180,18]">
+
+Hello, I'm a **sticky note**.
+</StickyNote>
+
+:: title ::
+
+# This is `two-cols-title` with center title
+
+:: left ::
+
+The left column is `rm` which means right-middle.
+
+:: right ::
+
+The right content is left-top aligned `lt`.
+
+The sticky note appears in the `:: default ::` slot and then used v-drag to move it into position.
+```
+
+<img src="/screenshots/11.png" alt="two-cols-header slide example" width="600" style="border: 1px solid #ccc;"/>
+
+### Moving the title to the bottom
+
+```md
+---
+layout: two-cols-title
+columns: is-3
+align: r-lt-lt
+titlepos: b
+---
+
+:: title ::
+
+# This is `two-cols-title`
+
+:: left ::
+
+This is a configurable layout which is very common in presentations.
+
+- There are three slots: `:: title ::`, `:: left ::`, and `:: right ::` along with the default which is implicit before any named slots.
+
+:: right ::
+
+- The <code>align</code> parameter determines how the columns look. The notation is for example
+  <code>align: l-cm-cm</code>. The first part is for the header, the second for the left column, the third part is for the right column ([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+
+- The <code>titlepos</code> parameter determines where the title appears. The options are `t` for top, `b` for bottom, or `n` for none/hidden. The default is `t`.([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+```
+
+<img src="/screenshots/12.png" alt="two-cols-header slide example" width="600" style="border: 1px solid #ccc;"/>
+
+### No title
+
+```md
+---
+layout: two-cols-title
+columns: is-3
+align: r-lt-lt
+---
+
+:: left ::
+
+This is a configurable layout which is very common in presentations.
+
+- There are three slots: `:: title ::`, `:: left ::`, and `:: right ::` along with the default which is implicit before any named slots.
+
+:: right ::
+
+- The <code>align</code> parameter determines how the columns look. The notation is for example
+  <code>align: l-cm-cm</code>. The first part is for the header, the second for the left column, the third part is for the right column ([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+
+- The <code>titlepos</code> parameter determines where the title appears. The options are `t` for top, `b` for bottom, or `n` for none/hidden. The default is `t`.([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+```
+
+<img src="/screenshots/13.png" alt="two-cols-header slide example" width="600" style="border: 1px solid #ccc;"/>
+
+### Title is back but no left column (just spaced for it)
+
+```md
+---
+layout: two-cols-title
+columns: is-3
+align: r-lt-lt
+---
+
+:: title ::
+
+# This is `two-cols-title`
+
+:: right ::
+
+- The <code>align</code> parameter determines how the columns look. The notation is for example
+  <code>align: l-cm-cm</code>. The first part is for the header, the second for the left column, the third part is for the right column ([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+
+- The <code>titlepos</code> parameter determines where the title appears. The options are `t` for top, `b` for bottom, or `n` for none/hidden. The default is `t`.([see docs](https://gureckis.github.io/slidev-theme-neversink/layouts/two-cols-title))
+```
+
+<img src="/screenshots/14.png" alt="two-cols-header slide example" width="600" style="border: 1px solid #ccc;"/>

package/docs/layouts.md

@@ -0,0 +1,92 @@
+# Layouts
+
+Layouts are the building blocks of your slides. They define the structure of your slides and how the content is displayed. This theme comes with a set of predefined layouts that you can use to create your slides.
+Many of these build upon the default layouts provided by Slidev, adding additional parameters to customize the structure of the slide. The goal is to save you time and effort designing custom layouts in CSS/HTML.
+
+## Key components of layouts
+
+Layouts have two key components: **frontmatter** (which is YAML metadata at the top of the slide) and the content of the slide which are known as **slots**.
+
+### Frontmatter
+
+The frontmatter is used to specify the type of the slide as well as provide parameters to the layout (see [Slidev docs](https://sli.dev/guide/syntax#frontmatter-layouts)). The frontmatter is a YAML block at the top of the slide that specifies the layout type and any parameters that the layout requires. An example might look like this
+
+```md
+---
+layout: top-title
+color: sky
+align: lt
+---
+```
+
+This frontmatter specifies that the slide should use the `top-title` layout, that the color should be `sky`, and that the alignment should be `lt`. The frontmatter is optional and if not provided the slide will use the [`default`](/layouts/default) layout. Not all options are necessary for each layout. The documentation of which frontmatter parameters is used in each layout is detailed below.
+
+### Slots
+
+Slots are the content of the slide. They are the text, images, and other elements that you want to display on the slide. The slots are written in Markdown and are placed below the frontmatter. Slots are a basic part of [Vue.js](https://vuejs.org/guide/components/slots.html). In Slidev slots are specified using a special syntax of `:: slot-name ::` where `slot-name` is the name of the slot.
+
+All layouts have one "default" slot (named default, but it doesn't have to be labeled). Some layouts have additional slots that you can use to customize the slide. The documentation of which slots are used in each layout is detailed below.
+
+An example of a slide with several slots might look like this.
+
+```md
+---
+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!
+```
+
+Here, we are using the `two-cols-title` layout, which has three named slots: `title`, `left`, and `right` in addition to the `default` slot given to every slide. In this example, the `title` slot is used to specify the title of the slide, and the `left` and `right` slots are used to specify the content of the left and right columns, respectively. Slot definitions end when the next one begins, so the `title` slot ends when the `left` slot begins. Any Markdown content that appears before the first named slot is assigned to the `default` slot. If there are no named slots, all content is assigned to the `default` slot.
+
+## Specific Layouts
+
+In the following section, we detail specific layouts that are available in this theme. Each layout is described in terms of its frontmatter, slots, and examples of how to use it.
+
+- [`layout: cover`](layouts/cover.md)
+- [`layout: intro`](layouts/intro.md)
+- [`layout: default`](layouts/default.md)
+- [`layout: two-cols-title`](layouts/two-cols-title.md)
+- [`layout: top-title`](layouts/top-title.md)
+- [`layout: top-title-two-cols`](layouts/top-title-two-cols.md)
+- [`layout: side-title`](layouts/side-title.md)
+- [`layout: quote`](layouts/quote.md)
+- [`layout: section`](layouts/section.md)
+- [`layout: full`](layouts/full.md)
+- [`layout: credits`](layouts/credits.md)
+
+In addition to these custom layouts, you can still access default Slidev layouts. For example, in cases where the layout name is not mentioned you can access the basic versions [described here](https://sli.dev/builtin/layouts).
+
+For example,
+
+- [`layout: image-left`](https://sli.dev/builtin/layouts#image-left)
+- [`layout: image-right`](https://sli.dev/builtin/layouts#image-right)
+- [`layout: image`](https://sli.dev/builtin/layouts#image)
+- [`layout: iframe-left`](https://sli.dev/builtin/layouts#iframe-left)
+- [`layout: iframe-right`](https://sli.dev/builtin/layouts#iframe-right)
+- [`layout: iframe`](https://sli.dev/builtin/layouts#iframe)
+- [`layout: none`](https://sli.dev/builtin/layouts#none)
+- [`layout: end`](https://sli.dev/builtin/layouts#end)
+- [`layout: fact`](https://sli.dev/builtin/layouts#fact)
+
+All act in the same ways as the default Slidev theme currently. One limitation is that these layouts
+cannot be customized by the Neversink [color schemes](/colors). In future will make themed versions of these.
+
+## Don't know what it is called? Pick your layout
+
+<!--@include: ./parts/layoutpicker.md-->

package/docs/markdown-examples.md

@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

package/docs/markdown.md

@@ -0,0 +1,87 @@
+# Markdown Features
+
+## In-line HTML/CSS
+
+You can include in-line HTML/CSS in markdown files. One trick to know though is that the markdown preprocessor needs a blank line before and after the HTML/CSS block. For example, this will not work:
+
+```md
+<div class='something'>
+Make this **bold** using markdown.
+</div>
+```
+
+Instead you have to write it like
+
+```md
+<div class='something'>
+
+Make this **bold** using markdown.
+
+</div>
+```
+
+With the new before the markdown text begins.
+
+This is also true around [slots in layouts](/layouts#slots).
+
+So
+
+```md
+:: left ::
+This is **markdown**
+```
+
+will not work but
+
+```md
+:: left ::
+
+This is **markdown**
+```
+
+is good.
+
+## Highlight
+
+You can highlight text
+
+```md
+This is my ==highlighted text==.
+```
+
+Using the `==` syntax. Like ==this==.
+
+## Icon link
+
+Drops the underline styling from icons.
+
+```
+<a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>
+```
+
+## Tight bullets
+
+If you want to make bullets a little closer together to make spaceadd the `class='tight'`
+
+```md
+<div class="tight">
+
+- Hi
+- There
+- I need space
+</div>
+```
+
+## V-click faders
+
+If you want to fade out a bullet as you step through, add the `class='fader'`
+
+```md
+<v-clicks at="+0" class="fader">
+
+- This one appears immediately on slide load
+- This is a second click
+- This is a third click
+
+</v-clicks>
+```

package/docs/parts/columnsystem.md

@@ -0,0 +1,18 @@
+In the conception of this design system, the two columns of the main content of the slide share 12 equally spaced units. Frontmatter determines how many of those 12 units are allocated to each column.
+<img src="/layouts/two-col-title-12row.svg" alt="two-cols-header slide example" width="600" />
+
+For example, if `columns: is-6` is specified in the frontmatter, the left column will be allocated 6 units and the right column will be allocated 6 units like this:
+
+<img src="/layouts/two-col-title-is-6.svg" alt="two-cols-header slide example" width="600" />
+
+If `columns: is-4` is specified, the left column will be allocated 4 units and the right column will be allocated 8 units like this:
+
+<img src="/layouts/two-col-title-is-4.svg" alt="two-cols-header slide example" width="600" />
+
+You can bump the width of the columns quickly to fit your content.
+
+The alignment of the content in each column is also configurable. Content can be vertically aligned to the top, middle, or bottom of the slide. In addition the content can be horizontally aligned to the left, center, or right aligned within the column:
+
+<img src="/layouts/two-col-title-align.svg" alt="two-cols-header slide example" width="300" />
+
+The title which can only be left, center, or right aligned because it occupies a narrow band on the slide.

package/docs/parts/layoutpicker.md

@@ -0,0 +1,73 @@
+<div class="grid w-full grid-cols-2">
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/cover">
+            <img src="/screenshots/2.png" alt="cover slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/intro">
+            <img src="/screenshots/5.png" alt="intro slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/default">
+            <img src="/screenshots/6.png" alt="default slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/two-cols-header">
+            <img src="/screenshots/8.png" alt="two-col-header slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/top-title">
+            <img src="/screenshots/15.png" alt="top-title slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/top-title-two-cols">
+            <img src="/screenshots/18.png" alt="top-title-two-cols slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/side-title">
+            <img src="/screenshots/22.png" alt="side-title slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/quote">
+            <img src="/screenshots/26.png" alt="quote slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/section">
+            <img src="/screenshots/27.png" alt="section slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="layouts/full">
+            <img src="/screenshots/29.png" alt="section slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="components/admonitions">
+            <img src="/screenshots/34.png" alt="admonition slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="components/stickynote">
+            <img src="/screenshots/36.png" alt="stickynote slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="components/qrcode">
+            <img src="/screenshots/38.png" alt="stickynote slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+    <div class="grid-item grid-col-span-1">
+        <a href="components/speechbubble">
+            <img src="/screenshots/35.png" alt="speechbubble slide example" width="300" class="screenshot mb-10 mt-10"/>
+        </a>
+    </div>
+
+</div>