slidev-theme-neversink 0.0.0

package/docs/.vitepress/theme/index.js

@@ -0,0 +1,50 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme'
+
+import 'uno.css'
+import './style.css'
+import '../../../styles/colors.css'
+
+import Admonition from '../../../components/Admonition.vue'
+import AdmonitionType from '../../../components/AdmonitionType.vue'
+import StickyNote from '../../../components/StickyNote.vue'
+import QrcodeVue from 'qrcode.vue'
+import SpeechBubble from '../../../components/SpeechBubble.vue'
+
+import Backpack from '../../../components/vue3-kawaii/components/backpack/Backpack.vue'
+import Browser from '../../../components/vue3-kawaii/components/browser/Browser.vue'
+import Cat from '../../../components/vue3-kawaii/components/cat/Cat.vue'
+import CreditCard from '../../../components/vue3-kawaii/components/creditCard/CreditCard.vue'
+import Ghost from '../../../components/vue3-kawaii/components/ghost/Ghost.vue'
+import IceCream from '../../../components/vue3-kawaii/components/iceCream/IceCream.vue'
+import Mug from '../../../components/vue3-kawaii/components/mug/Mug.vue'
+import Planet from '../../../components/vue3-kawaii/components/planet/Planet.vue'
+import SpeechBubbleGuy from '../../../components/vue3-kawaii/components/speechBubble/SpeechBubbleGuy.vue'
+
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+    app.component('Admonition', Admonition)
+    app.component('AdmonitionType', AdmonitionType)
+    app.component('StickyNote', StickyNote)
+    app.component('QRCode', QrcodeVue)
+    app.component('SpeechBubble', SpeechBubble)
+    app.component('BackPack', Backpack)
+    app.component('Browser', Browser)
+    app.component('Cat', Cat)
+    app.component('CreditCard', CreditCard)
+    app.component('Ghost', Ghost)
+    app.component('IceCream', IceCream)
+    app.component('Mug', Mug)
+    app.component('Planet', Planet)
+    app.component('SpeechBubbleGuy', SpeechBubbleGuy)
+  },
+}

package/docs/.vitepress/theme/style.css

@@ -0,0 +1,145 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+  @apply bg-amber-200;
+  @apply text-amber-600;
+
+ */
+
+mark {
+  @apply bg-amber-200;
+  @apply text-amber-600;
+  font-weight: 300;
+  padding-left: 0.4em;
+  padding-right: 0.4em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  border-radius: 0.4em;
+}
+
+.screenshot {
+  border: 0.2px solid;
+  @apply border-gray-700;
+}
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: black;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}

package/docs/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

package/docs/branding.md

@@ -0,0 +1,43 @@
+# Branding
+
+## Slide numbers
+
+Neversink provides a simple and color-responsive slide counter in the lower right corner of the slides.
+It will show the current slide number and the total number of slides. In addition it can display a slug or
+string of your choice.
+
+To configure the slug simply add `neversink_slug` to your frontmatter of your entire slug deck. For example:
+
+```yaml
+---
+colorSchema: light
+layout: cover
+title: Base Template
+theme: neversink
+neversink_slug: 'Neversink Example Deck'
+---
+```
+
+If this appears in the frontmatter for the first slide the slug will be set for all slides.
+You can override it on any specific slide by just adding `neversink_slug` to the frontmatter of that slide.
+
+```yaml
+---
+layout: cover
+color: light
+neversink_slug: 'Neversink Example Deck!!!!'
+---
+```
+
+You can hide the slide information on any given slides by setting `slide_info: false` in the front
+matter of that specific slide
+
+```yaml
+---
+layout: cover
+color: light
+slide_info: false
+---
+```
+
+You can of course override the default slide counter by including a custom `slide-bottom.vue` or `global-bottom.vue` in your project folder (see [Slidev docs](https://sli.dev/custom/global-layers))

package/docs/colors.md

@@ -0,0 +1,108 @@
+# Color Schemes
+
+The project uses tailwind-like color schemes arranged in ==monochromatic pairs==.
+Color schemes can be applied to several elements, perhaps most importantly to
+slide [layouts](/layouts).
+
+These boxes show the options and names:
+
+## B&W Schemes
+
+<div class="text-white bg-black pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">black</div>
+<div class="text-black bg-white border-1 border-solid border-black pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">white</div>
+<div class="text-gray-100 bg-gray-800 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">dark</div>
+<div class="text-gray-800 bg-gray-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">light</div>
+
+## Light Schemes
+
+<div class="bg-red-100 text-red-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">red-light</div>
+<div class="bg-orange-100 text-orange-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">orange-light</div>
+<div class="bg-amber-100 text-amber-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">amber-light</div>
+<div class="bg-yellow-100 text-yellow-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">yellow-light</div>
+<div class="bg-lime-100 text-lime-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">lime-light</div>
+<div class="bg-green-100 text-green-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">green-light</div>
+<div class="bg-emerald-100 text-emerald-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">emerald-light</div>
+<div class="bg-teal-100 text-teal-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">teal-light</div>
+<div class="bg-cyan-100 text-cyan-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">cyan-light</div>
+<div class="bg-sky-100 text-sky-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">sky-light</div>
+<div class="bg-blue-100 text-blue-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">blue-light</div>
+<div class="bg-indigo-100 text-indigo-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">indigo-light</div>
+<div class="bg-violet-100 text-violet-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">violet-light</div>
+<div class="bg-purple-100 text-purple-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">purple-light</div>
+<div class="bg-pink-100 text-pink-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">pink-light</div>
+<div class="bg-rose-100 text-rose-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">rose-light</div>
+<div class="bg-fuchsia-100 text-fuchsia-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">fuchsia-light</div>
+<div class="bg-slate-100 text-slate-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">slate-light</div>
+<div class="bg-gray-100 text-gray-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">gray-light</div>
+<div class="bg-zinc-100 text-zinc-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">zinc-light</div>
+<div class="bg-neutral-100 text-neutral-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">neutral-light</div>
+<div class="bg-stone-100 text-stone-500 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">stone-light</div>
+
+## Regular Schemes
+
+<div class="bg-red-500 text-red-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">red</div>
+<div class="bg-orange-500 text-orange-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded  font-size-6 fw-700">orange</div>
+<div class="bg-amber-500 text-amber-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">amber</div>
+<div class="bg-yellow-500 text-yellow-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">yellow</div>
+<div class="bg-lime-500 text-lime-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">lime</div>
+<div class="bg-green-500 text-green-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">green</div>
+<div class="bg-emerald-500 text-emerald-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">emerald</div>
+<div class="bg-teal-500 text-teal-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">teal</div>
+<div class="bg-cyan-500 text-cyan-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">cyan</div>
+
+<div class="bg-sky-500 text-sky-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">sky</div>
+<div class="bg-blue-500 text-blue-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">blue</div>
+<div class="bg-indigo-500 text-indigo-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">indigo</div>
+<div class="bg-violet-500 text-violet-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">violet</div>
+<div class="bg-purple-500 text-purple-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">purple</div>
+<div class="bg-pink-500 text-pink-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">pink</div>
+<div class="bg-rose-500 text-rose-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">rose</div>
+<div class="bg-fuchsia-500 text-fuchsia-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">fuchsia</div>
+<div class="bg-slate-500 text-slate-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">slate</div>
+<div class="bg-gray-500 text-gray-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">gray</div>
+<div class="bg-zinc-500 text-zinc-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">zinc</div>
+<div class="bg-neutral-500 text-neutral-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">neutral</div>
+<div class="bg-stone-500 text-stone-100 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">stone</div>
+
+## Add-ons
+
+These are non-tailwind colors that are used in the project:
+
+<div class="text-gray-300 bg-navy-900 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">navy</div>
+<div class="bg-gray-50 text-navy-900 pt-3 pb-3 pl-3 pr-3 m-1 rounded font-size-6 fw-700">navy-light</div>
+
+## Applying Schemes
+
+Each scheme sets the following CSS vars:
+
+```css
+--neversink-bg-color
+--neversink-bg-code-color
+--neversink-fg-code-color
+--neversink-fg-color
+--neversink-text-color
+--neversink-border-color
+--neversink-highlight-color
+```
+
+which contains values for these options which might go well together in a monochromatic scheme.
+
+To apply the theme to a element you simply add the `neversink-{name}-scheme` class to the element and then add another class which binds the CSS vars as you like.
+
+For example, to apply the `red` scheme from above to a `div` element you would add the following classes:
+
+```html
+<div class="neversink-red-scheme colorbinding">This is a red div</div>
+```
+
+and then define the color binding class
+
+```css
+.colorbinding {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+}
+```
+
+This provides you flexibility in how you decided to bind elements of the color scheme to your elements.

package/docs/components/admonitions.md

@@ -0,0 +1,106 @@
+# Admonitions
+
+<img src="/screenshots/34.png" alt="admonitions slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+Admonitions are a way to provide additional information to the viewer. They are often used to provide warnings, notes, or tips. Admonitions are styled with a colored border and an icon to indicate the type of admonition.
+
+There are two types of Admonitions in this theme:
+
+## `Admonition`
+
+The `Admonition` component is used to create a colored box with an icon and a title. The admonition component has the following props:
+
+- `title` (optional). Default value is 'Note'
+- `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 `100%`.
+- `icon` (optional) the icon to display. Default is `mdi-information-variant-circle-outline`.
+
+Example:
+
+```md
+<Admonition title="Info" color='teal-light' width="300px">
+This is my admonition content.
+</Admonition>
+```
+
+Renders as:
+<Admonition title="Info" color='teal-light' width="300px">
+This is my admonition content.
+</Admonition>
+
+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
+<Admonition title="V-draggable" color='teal-light' width="300px" v-drag>
+This is my admonition content.
+</Admonition>
+```
+
+## `AdmonitionType`
+
+The `AdmonitionType` component is used to create a colored box with an icon and a title. The admonition component has the following props:
+
+- `type` (optional). Default value is 'info'. Available types are `info`, `important`, `tip`, `warning`, `caution`. These choose colors and icons to match the type.
+- `width` (optional) the width of the admonition. Default is `100%`.
+
+Example:
+
+```md
+<AdmonitionType type="info" width="300px">
+This is my info
+</AdmonitionType>
+```
+
+<AdmonitionType type="info" width="300px">
+This is my warning
+</AdmonitionType>
+
+```md
+<AdmonitionType type="important" width="300px">
+This is my important
+</AdmonitionType>
+```
+
+<AdmonitionType type="important" width="300px">
+This is my important
+</AdmonitionType>
+
+```md
+<AdmonitionType type="tip" width="300px">
+This is my tip
+</AdmonitionType>
+```
+
+<AdmonitionType type="tip" width="300px">
+This is my tip
+</AdmonitionType>
+
+```md
+<AdmonitionType type="warning" width="300px">
+This is mywarning
+</AdmonitionType>
+```
+
+<AdmonitionType type="warning" width="300px">
+This is my  warning
+</AdmonitionType>
+
+```md
+<AdmonitionType type="caution" width="300px">
+This is my caution
+</AdmonitionType>
+```
+
+<AdmonitionType type="caution" width="300px">
+This is my caution
+</AdmonitionType>
+
+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
+<AdmonitionType type="warning" width="300px" v-drag>
+This is my my warning
+</Admonition>
+```

package/docs/components/creditscroll.md

@@ -0,0 +1 @@
+# CreditScroll

package/docs/components/kawaii.md

@@ -0,0 +1,26 @@
+# Kawaii
+
+<img src="/screenshots/37.png" alt="kawaii slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+Kawaii are little characters you can include in slides to add a bit of fun/whimsy. Code and illustrations based on [Vue Kawaii](https://github.com/youngtailors/vue-kawaii).
+
+## Kawaii components
+
+The `Qr` component is used to create QR code in SVG format. The QRCode component has the following props:
+
+- `mood` (required). Sets the style of face. Options are `sad`, `shocked`, `happy`, `blissful`, `lovestruck`, `excited`, `ko`. Default is `blissful`.
+- `:size` (required) the width of the character (height adjusts automatically).
+- `:color` (optional) Sets the primary color. Defaults are unique for each character Set using a hex code.
+
+The character options are `IceCream`, `Backpack`, `Cat`, `Browser`, `Mug`, `Planet`, `SpeechBubbleGuy`, and `CreditCard`.
+
+Example:
+
+```md
+<IceCream :size="140" mood="sad" color="#FDA7DC" />
+```
+
+Renders as:
+<IceCream :size="140" mood="blissful" color="#FDA7DC" />

package/docs/components/qrcode.md

@@ -0,0 +1,24 @@
+# QRCode
+
+<img src="/screenshots/38.png" alt="qr code slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+## Description
+
+QRCodes make it easy to share links in your slides without consulting a QR-code generator. They are useful for sharing links to slides, websites, or other resources.
+
+## `QRCode`
+
+The `Qr` component is used to create QR code in SVG format. The QRCode component has the following props:
+
+- `value` (required). The url you want to send people to.
+- `:size` (required) the width/height of the QR code.
+- `render-as` (optional) the type of QR code to render. Default is `svg`. Other options are `canvas` and `img`.
+
+Example:
+
+```md
+<QRCode value="https://sli.dev" :size="200" render-as="svg"/>
+```
+
+Renders as:
+<QRCode value="https://sli.dev" :size="200" render-as="svg"/>

package/docs/components/speechbubble.md

@@ -0,0 +1,69 @@
+# SpeechBubble
+
+<img src="/screenshots/35.png" alt="speechbubbles 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.
+
+## `SpeechBubble`
+
+The `SpeechBubble` component is used to create a colored bubble with a speech bubble tail. The `SpeechBubble` has the following props:
+
+- `position` (optional). Default value is `b`. Options are `t` (top), `b` (bottom), `l` (left), `r` (right), `tl` (top left), `tr` (top right), `bl` (bottom left), `br` (bottom right).
+- `shape` (optional). Default value is `''`. Options are `round` and `circle` which affect the corner radius of the bubble.
+- `animation` (optional). Default value is `''`. Options are `pop` and `float`
+- `color` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `red-light`.
+- `textAlign` (optional) the text alignment of the content. Default is `left`.
+- `maxWidth` (optional) the maximum width of the speech bubble. Default is `100%`.
+- `borderWidth` (optional) the width of the border. Default is `1px`.
+
+Example:
+
+```md
+<SpeechBubble position="r" color='sky' shape="round" maxWidth="300px">
+
+Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
+</SpeechBubble>
+```
+
+Renders as:
+<SpeechBubble position="r" color='sky' shape="round" maxWidth="300px">
+
+Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
+</SpeechBubble>
+
+```md
+<SpeechBubble position="b" color='sky' shape="round" maxWidth="300px">
+
+Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
+</SpeechBubble>
+```
+
+Renders as:
+<SpeechBubble position="b" color='sky' shape="round" maxWidth="300px">
+
+Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
+</SpeechBubble>
+
+```md
+<SpeechBubble position="t" color='amber' shape="round" maxWidth="300px">
+
+Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
+</SpeechBubble>
+```
+
+Renders as:
+<SpeechBubble position="t" color='amber' shape="round" maxWidth="300px">
+
+Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
+</SpeechBubble>
+
+If you want to position it somewhere arbitrary on the slide add v-drag to the admonition and also set the maxWidth to something fixed (e.g., `300px`):
+
+```md
+<SpeechBubble position="t" color='sky' shape="round" maxWidth="300px" v-drag>
+
+Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
+</SpeechBubble>
+```