slidev-theme-neversink 0.0.0

package/.github/workflows/deploy.yml

@@ -0,0 +1,67 @@
+# Sample workflow for building and deploying a VitePress site to GitHub Pages
+#
+name: Deploy VitePress site to Pages
+
+on:
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
+  push:
+    branches:
+      - main
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      - uses: pnpm/action-setup@v3 # Uncomment this if you're using pnpm
+      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm # or pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: pnpm install # or pnpm install / yarn install / bun install
+      - name: Build with Slidev
+        run: pnpm build
+      - name: Build with VitePress
+        run: pnpm docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.prettierrc

@@ -0,0 +1,15 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": ["example.md", "screenshot.md"],
+      "options": {
+        "parser": "slidev",
+        "plugins": ["prettier-plugin-slidev"]
+      }
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "slidev.force-enabled": true,
+  "slidev.include": ["**/slides.md", "example.md", "screenshot.md"]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Todd Gureckis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# Slidev Theme Neversink
+
+An education/academia oriented [Slidev](https://sli.dev/) theme with some whimsical elements.
+
+Documentation [here](https://gureckis.github.io/slidev-theme-neversink/)
+
+## Installation
+
+```bash
+npm install slidev-theme-neversink
+```
+
+## Usage
+
+Add the theme to the frontmatter of your first slide in `slides.md`:
+
+```md
+---
+theme: neversink
+---
+```
+
+## Features
+
+## Todo list
+
+### Code cleanup
+
+- [x] refactor some of the layout stuff into layoutHelper.ts
+  - [x] two-cols-header
+  - [x] two-cols-footer
+  - [x] top-title
+  - [x] top-title-two-cols
+  - [x] side-title
+  - [x] quote
+  - [x] intro
+  - [x] cover
+- [x] fix <code> bg colors on colored slides
+- [x] add variables to configure things
+- [x] make global-top be a feature of my talks not the theme
+- [x] add a configuration option to global-bottom/slide-bottom for the date or whatever field
+- [x] clean up css classes
+- [ ] dark mode support
+- [ ] publish as a theme
+  - [ ] automate workflow for publishing to npm
+- add docs
+  - [x] vitepress setup published to github pages
+  - [ ] slide types
+  - [ ] add docs on how to customize variables/fonts
+
+### Layouts
+
+- [x] add a 100% full slide slide
+- [x] color side bar left/right
+- [x] two column footer
+- [x] two column (configurable) header
+- [x] four cell grid
+- [x] Add a config way to drop some of the lab/nyu stuff
+- [x] add a way to drop the page numbers
+- [x] color bar top/bottom centering
+- [x] color title page
+- [x] one up with caption below
+- [x] two up with caption below
+- [x] three up across with content option above and below (e.g., three panels of data)
+- [x] top title
+- [x] top title two cols
+- [x] two cols no header
+- [x] credits layout
+- [x] default (with color)
+- [x] sort out the global-top/slide-top thing (waiting for new slidev release)
+- [x] new section (with color)
+- [x] full (with color)
+- [x] quote (better style)
+- [x] scrolling credits slide
+  - [x] create as a layout also
+  - [x] add links and icons
+  - [ ] auto adjust height
+  - [ ] looping is not working
+  - [ ] use a animation library instead of raw request frame
+  - [ ] if in export mode then don't start scrolled down
+  - [ ] add keyboard commands to pause speed up and step forward/backwards in scrolling
+  - [ ] center final page
+
+<img src="/screenshots/credits-light.gif" alt="credits slide example" width="600" class="screenshot mb-10 mt-10"/>
+
+<img src="/screenshots/credits-dark.gif" alt="full slide example" width="600" class="screenshot"/>
+
+### components
+
+- [x] markdown admonitions
+- [x] draggable, custom admonition
+  - [ ] adminition colors for dark/navy/etc...
+- [x] speech bubble
+  - [~x] corner tails (good enough)
+  - [x] text-align
+  - [x] animations
+- [x] post-it note
+  - [ ] prop to toggle if only visible in dev mode (waiting for new slidev release)
+
+### Future ideas
+
+- [ ] dynamic color themes
+- [ ] thought bubble/comic style
+- [ ] tooltip that appears on hover or with a click
+- [ ] spoilers with clicks
+- [ ] spring loaded word cloud
+- [ ] quiz live polls
+- [ ] map
+- [ ] make admonition class be what the markdown processes uses
+- [ ] animations/layouts
+  - [ ] kawaii waving hands
+  - [ ] kawaii raising hands

package/assets/nyu_long_black_on_white.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.73 72">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <rect class="cls-2" x="9.44" y="8" width="47.19" height="58.99"/>
+  <g>
+    <path class="cls-1" d="M72,72H0V0h72v72h0ZM33.5,63.58c.09.5,1.18.75,1.42,0l2.52-19.94h-6.11l2.18,19.94h0ZM39.58,42.19v-3.02h-10.39v3.02h10.39ZM36.59,37.7c13.17.47,14.1-11.53,14.16-16.02,0-.26-.13-.29-.2-.11-.38.94-2.1,4.29-6.85,6.32-4.24,1.82-6.79,5.95-7.23,9.67-.03.09.05.13.12.14ZM35.13,36.83c2.09-10,10.22-10.24,10.95-12.14,1.14-2.96-.94-8.21-1.47-8.83-.05-.07-.12-.03-.15.03-1.11,2.43-2.9,4.73-4.21,5.79-1.84,1.49-8.91,6.73-5.29,15.16.05.1.14.09.17,0ZM33.7,37.23c-4.42-9.43,4.41-15.52,5.85-16.84.21-.19.15-.36.16-.57,0-2.96-1.7-7.77-2.25-8.45-.08-.11-.15-.06-.18.04-.76,2.93-4.78,7.29-5.58,8.24-6.82,8.09-5.26,13.03,1.85,17.68.09.05.2,0,.15-.11ZM31.72,37.55c-7.38-4.41-6.64-10.69-3.58-15.31.07-.1.09-.26.07-.45-.13-1.1-1.32-3.88-1.82-4.63-.13-.2-.24-.18-.25-.05-.04,1.26-1.48,4.41-3.66,8.04-2.33,3.87-2.34,12.25,9.23,12.57.1,0,.14-.1.03-.17Z"/>
+    <g>
+      <polygon class="cls-1" points="90.19 27.87 93.48 27.87 101.09 37.88 101.09 27.87 104.63 27.87 104.63 44.12 101.58 44.12 93.71 33.79 93.71 44.12 90.19 44.12 90.19 27.87 90.19 27.87"/>
+      <polygon class="cls-1" points="110.84 27.87 123.11 27.87 123.11 31.05 114.4 31.05 114.4 34.35 122.06 34.35 122.06 37.53 114.4 37.53 114.4 40.94 123.22 40.94 123.22 44.12 110.84 44.12 110.84 27.87 110.84 27.87"/>
+      <polygon class="cls-1" points="127.47 27.87 131.3 27.87 134.66 38.88 138.31 27.82 141.38 27.82 145.02 38.88 148.39 27.87 152.13 27.87 146.58 44.24 143.47 44.24 139.8 33.61 136.13 44.24 133.02 44.24 127.47 27.87 127.47 27.87"/>
+      <polygon class="cls-1" points="170.96 37.72 164.71 27.87 168.89 27.87 172.77 34.4 176.71 27.87 180.77 27.87 174.53 37.64 174.53 44.12 170.96 44.12 170.96 37.72 170.96 37.72"/>
+      <path class="cls-1" d="M196.4,36.05v-.05c0-2.78-2.04-5.1-4.92-5.1s-4.88,2.27-4.88,5.05v.05c0,2.78,2.04,5.11,4.92,5.11s4.88-2.28,4.88-5.06h0ZM182.86,36.05v-.05c0-4.62,3.64-8.4,8.66-8.4s8.62,3.73,8.62,8.35v.05c0,4.62-3.65,8.41-8.66,8.41s-8.61-3.73-8.61-8.36h0Z"/>
+      <path class="cls-1" d="M212.83,35.77c1.74,0,2.74-.93,2.74-2.3v-.04c0-1.53-1.07-2.32-2.81-2.32h-3.55v4.67h3.62ZM205.64,27.87h7.42c2.08,0,3.68.58,4.74,1.65.91.91,1.4,2.18,1.4,3.71v.05c0,2.63-1.42,4.27-3.48,5.04l3.96,5.8h-4.16l-3.49-5.2h-2.81v5.2h-3.58v-16.25h0Z"/>
+      <polygon class="cls-1" points="224.75 27.87 228.33 27.87 228.33 34.98 234.92 27.87 239.23 27.87 232.62 34.77 239.53 44.12 235.24 44.12 230.2 37.2 228.33 39.16 228.33 44.12 224.75 44.12 224.75 27.87 224.75 27.87"/>
+      <path class="cls-1" d="M253.05,37.16v-9.29h3.58v9.19c0,2.65,1.32,4.02,3.5,4.02s3.51-1.33,3.51-3.9v-9.31h3.58v9.17c0,4.92-2.77,7.33-7.13,7.33s-7.04-2.44-7.04-7.21h0Z"/>
+      <polygon class="cls-1" points="273.18 27.87 276.47 27.87 284.08 37.88 284.08 27.87 287.62 27.87 287.62 44.12 284.58 44.12 276.7 33.79 276.7 44.12 273.18 44.12 273.18 27.87 273.18 27.87"/>
+      <polygon class="cls-1" points="294 27.87 297.58 27.87 297.58 44.12 294 44.12 294 27.87 294 27.87"/>
+      <polygon class="cls-1" points="302.57 27.87 306.52 27.87 310.76 39.31 315.01 27.87 318.87 27.87 312.3 44.24 309.14 44.24 302.57 27.87 302.57 27.87"/>
+      <polygon class="cls-1" points="323.69 27.87 335.96 27.87 335.96 31.05 327.25 31.05 327.25 34.35 334.91 34.35 334.91 37.53 327.25 37.53 327.25 40.94 336.07 40.94 336.07 44.12 323.69 44.12 323.69 27.87 323.69 27.87"/>
+      <path class="cls-1" d="M348.76,35.77c1.74,0,2.73-.93,2.73-2.3v-.04c0-1.53-1.06-2.32-2.8-2.32h-3.56v4.67h3.63ZM341.57,27.87h7.43c2.07,0,3.67.58,4.73,1.65.91.91,1.39,2.18,1.39,3.71v.05c0,2.63-1.41,4.27-3.47,5.04l3.96,5.8h-4.18l-3.48-5.2h-2.82v5.2h-3.57v-16.25h0Z"/>
+      <path class="cls-1" d="M359.56,41.75l2.11-2.53c1.47,1.2,3,1.98,4.86,1.98,1.45,0,2.34-.59,2.34-1.53v-.05c0-.91-.56-1.37-3.27-2.07-3.28-.83-5.39-1.74-5.39-4.97v-.04c0-2.95,2.37-4.9,5.7-4.9,2.36,0,4.38.75,6.03,2.07l-1.86,2.69c-1.44-.99-2.85-1.6-4.23-1.6s-2.09.63-2.09,1.42v.05c0,1.07.7,1.42,3.51,2.13,3.29.86,5.15,2.04,5.15,4.87v.04c0,3.23-2.46,5.05-5.97,5.05-2.46,0-4.94-.86-6.89-2.61h0Z"/>
+      <polygon class="cls-1" points="378.01 27.87 381.59 27.87 381.59 44.12 378.01 44.12 378.01 27.87 378.01 27.87"/>
+      <polygon class="cls-1" points="391.76 31.17 386.82 31.17 386.82 27.87 400.29 27.87 400.29 31.17 395.33 31.17 395.33 44.12 391.76 44.12 391.76 31.17 391.76 31.17"/>
+      <polygon class="cls-1" points="409.92 37.72 403.68 27.87 407.85 27.87 411.73 34.4 415.67 27.87 419.73 27.87 413.49 37.64 413.49 44.12 409.92 44.12 409.92 37.72 409.92 37.72"/>
+    </g>
+  </g>
+</svg>

package/components/Admonition.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'amber-light',
+  },
+  title: {
+    type: String,
+    default: 'Note',
+  },
+  icon: {
+    type: String,
+    default: 'mdi-information-variant-circle-outline',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+
+<template>
+  <div class="markdown-alert markdown-alert-custom" :class="colorscheme">
+    <p class="markdown-alert-title-custom">
+      <span class="font-size-1.3rem"><Icon :icon="props.icon" /></span>&nbsp;&nbsp;{{ props.title }}
+    </p>
+    <p><slot></slot></p>
+  </div>
+</template>
+
+<style scoped>
+.markdown-alert {
+  padding: 8px 16px;
+  margin: 10px;
+  margin-left: 0;
+  margin-top: 2px;
+  margin-bottom: 5px;
+  color: inherit;
+  border-radius: 6px;
+  font-size: 0.75em;
+  width: v-bind(props.width);
+  font-family: var(--neversink-main-font);
+  font-size: 0.85rem;
+}
+
+.markdown-alert p {
+  margin: 0;
+  margin-bottom: 2px;
+}
+.markdown-alert > :first-child {
+  margin-top: 0;
+}
+.markdown-alert > :last-child {
+  margin-bottom: 0;
+}
+.markdown-alert.markdown-alert-custom {
+  background-color: var(--neversink-admon-bg-color);
+  color: var(--neversink-admon-text-color);
+  border: 1px solid var(--neversink-admon-border-color);
+  border-left: 6px solid var(--neversink-admon-border-color);
+}
+.markdown-alert .markdown-alert-title-custom {
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-weight: 700;
+  color: var(--neversink-admon-text-color);
+}
+@media print {
+  .markdown-alert .markdown-alert-title:before {
+    display: none;
+  }
+}
+</style>

package/components/AdmonitionType.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'info',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+})
+
+const admontype = computed(() => {
+  switch (props.type) {
+    case 'important':
+      return {
+        icon: 'mdi-message-alert-outline',
+        title: 'Important',
+        color: 'purple-light',
+      }
+    case 'tip':
+      return {
+        icon: 'mdi-lightbulb-outline',
+        title: 'Tip',
+        color: 'emerald-light',
+      }
+    case 'warning':
+      return {
+        icon: 'mdi-alert-outline',
+        title: 'Warning',
+        color: 'amber-light',
+      }
+    case 'caution':
+      return {
+        icon: 'mdi-alert-octagon-outline',
+        title: 'Caution',
+        color: 'red-light',
+      }
+    case 'info':
+    default:
+      return {
+        icon: 'mdi-information-variant-circle-outline',
+        title: 'Note',
+        color: 'sky-light',
+      }
+  }
+})
+</script>
+
+<template>
+  <Admonition :title="admontype.title" :color="admontype.color" :icon="admontype.icon" :width="width">
+    <slot></slot>
+  </Admonition>
+</template>

package/components/CreditScroll.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { onSlideEnter, useSlideContext } from '@slidev/client'
+
+const { $renderContext } = useSlideContext()
+const props = defineProps({
+  speed: {
+    default: 0.5,
+  },
+  loop: {
+    default: false,
+  },
+})
+
+const containerRef = ref(null)
+const scrollPosition = ref(0)
+const isScrolling = ref(false)
+
+let animationFrameId = null
+
+const scroll = () => {
+  scrollPosition.value -= props.speed
+  if (Math.abs(scrollPosition.value) >= 550) {
+    if (props.loop.value) {
+      console.log('resetting loop', props.loop.value)
+      resetScroll()
+    } else {
+      stopScrolling()
+      return
+    }
+  } else {
+    animationFrameId = requestAnimationFrame(scroll)
+  }
+}
+
+const startScrolling = () => {
+  animationFrameId = requestAnimationFrame(scroll)
+}
+
+const stopScrolling = () => {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+}
+
+const resetScroll = () => {
+  scrollPosition.value = 480 //containerRef.value.offsetHeight * 2.5
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+}
+
+onMounted(() => {
+  console.log('mounted')
+  // Reset scrolling when entering the slide
+  onSlideEnter(() => {
+    console.log('context ', $renderContext.value)
+    if (['slide', 'presenter'].includes($renderContext.value)) {
+      console.log('onSlideEnter')
+      resetScroll()
+      console.log('starting scrolling')
+      startScrolling()
+    }
+  })
+})
+
+onUnmounted(() => {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+})
+</script>
+
+<template>
+  <div class="scroll-container" ref="containerRef">
+    <div class="scroll-content" :style="{ transform: `translateY(${scrollPosition}px)` }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scroll-container {
+  height: 100vh; /* Use full viewport height */
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+}
+
+.scroll-content {
+  position: absolute;
+  width: 100%;
+}
+</style>