slidev-theme-neversink 0.0.0

package/setup/main.ts

@@ -0,0 +1,45 @@
+import { defineAppSetup } from '@slidev/types'
+// import courseInfoPlugin from '../plugins/courseInfoPlugin'
+// import Cite from '../../src/components/Cite.vue'
+//import Bibliography from '../../src/components/Bibliography'
+//import CreditScroll from '../components/CreditScroll.vue'
+// import Admonition from '../components/Admonition.vue'
+// import AdmonitionType from '../components/AdmonitionType.vue'
+import QrcodeVue from 'qrcode.vue'
+// import SpeechBubble from '../components/SpeechBubble.vue'
+// import StickyNote from '../components/StickyNote.vue'
+
+// // Vue3 Kawaii
+// 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'
+
+// import { GeistSans } from 'geist/font/sans'
+// import { GeistMono } from 'geist/font/mono'
+
+export default defineAppSetup(({ app, router }) => {
+  // app.component('CreditScroll', CreditScroll)
+  // app.component('Admonition', Admonition)
+  // app.component('AdmonitionType', AdmonitionType)
+  app.component('QRCode', QrcodeVue)
+  // app.component('SpeechBubble', SpeechBubble)
+  // app.component('StickyNote', StickyNote)
+  // 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)
+  // Vue App
+  //   app.component('Cite', Cite)
+  //   app.use(courseInfoPlugin)
+})

package/setup/shiki.ts

@@ -0,0 +1,14 @@
+/* ./setup/shiki.ts */
+import { defineShikiSetup } from '@slidev/types'
+
+export default defineShikiSetup(() => {
+  return {
+    themes: {
+      dark: 'slack-dark',
+      light: 'snazzy-light',
+    },
+    transformers: [
+      // ...
+    ],
+  }
+})

package/slide-bottom.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useSlideContext } from '@slidev/client'
+const { $slidev, $frontmatter } = useSlideContext()
+
+//const frontmatter = ref('')
+const fg_default = 'text-neutral-800'
+const bg_default = 'bg-neutral-100'
+const label = ref('')
+const fg = ref(fg_default)
+const bg = ref(bg_default)
+
+function process_colors() {
+  if ($frontmatter.color) {
+    if ($frontmatter.color == 'black') {
+      fg.value = `text-gray-600`
+      bg.value = `bg-gray-100`
+    } else if ($frontmatter.color == 'white') {
+      fg.value = fg_default
+      bg.value = bg_default
+    } else if ($frontmatter.color == 'dark') {
+      fg.value = `text-gray-100`
+      bg.value = `bg-gray-500`
+    } else if ($frontmatter.color == 'navy') {
+      fg.value = `text-gray-300`
+      bg.value = `bg-gray-600`
+    } else if ($frontmatter.color == 'light') {
+      fg.value = `text-neutral-600`
+      bg.value = `bg-neutral-300`
+    } else if ($frontmatter.color.includes('-light')) {
+      const parts = $frontmatter.color.split('-')
+      fg.value = `text-${parts[0]}-100`
+      bg.value = `bg-${parts[0]}-500`
+    } else {
+      fg.value = `text-${$frontmatter.color}-500`
+      bg.value = `bg-${$frontmatter.color}-100`
+    }
+  }
+}
+function checkvars() {
+  if ($frontmatter.slide_info_color === undefined) {
+    // default
+    fg.value = fg_default
+    bg.value = bg_default
+  }
+
+  if ($frontmatter.slide_info_color && $frontmatter.slide_info_color.includes(',')) {
+    // slide info
+    const parts = $frontmatter.slide_info.split(',')
+    fg.value = parts[0]
+    bg.value = parts[1]
+  } else {
+    // slide specific things
+    if ($frontmatter.layout == 'end') {
+      fg.value = `text-neutral-100`
+      bg.value = `bg-neutral-800`
+    } else if ($frontmatter.layout == 'side-title') {
+      // if side title
+      if ($frontmatter.side && ($frontmatter.side == 'right' || $frontmatter.side == 'r')) {
+        process_colors()
+      } else {
+        fg.value = fg_default
+        bg.value = bg_default
+      }
+    } else if (
+      $frontmatter.layout == 'cover' ||
+      $frontmatter.layout == 'intro' ||
+      $frontmatter.layout == 'default' ||
+      $frontmatter.layout == 'section' ||
+      $frontmatter.layout == 'credits' ||
+      $frontmatter.layout == 'full'
+    ) {
+      process_colors()
+    }
+  }
+}
+
+function getlabel() {
+  if ($frontmatter.neversink_slug) {
+    label.value = $frontmatter.neversink_slug
+  } else if ($slidev.configs.neversink_slug) {
+    label.value = $slidev.configs.neversink_slug
+  } else {
+    label.value = ''
+  }
+}
+//watch($slidev.nav, () => checkvars())
+
+onMounted(() => {
+  getlabel()
+  checkvars()
+})
+</script>
+
+<!-- an example footer for pages -->
+<template>
+  <footer v-if="$frontmatter.slide_info !== false" class="absolute bottom-1 right-1 left-0 p-2 pr-3 full-width z-10">
+    <div class="absolute bottom-0 right-0 p-2 pr-2">
+      <span class="pl-3 pr-3 p-2 font-mono font-size-2" :class="fg + ' ' + bg">
+        <mdi-orbit />&nbsp;<span class="fw-bold">{{ label }}</span> | {{ $slidev.nav.currentPage }} of
+        {{ $slidev.nav.total }}
+      </span>
+    </div>
+  </footer>
+</template>
+
+<style scoped></style>

package/styles/base.css

@@ -0,0 +1,240 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@50;100;200;300;400;500;600;700;800;900&display=swap');
+
+:root {
+  --neversink-title-font: 'Inter', sans-serif;
+  --neversink-main-font: 'Inter', sans-serif;
+  --neversink-mono-font: 'Inter', monospace;
+  --neversink-quote-font: 'Fire Code', monospace;
+  @apply neversink-white-scheme; /* apply the default white scheme everywhere */
+}
+
+/* layout specific customizations are shared in the layout file (e.g., layouts/cover.vue) */
+
+/* sets the default font */
+#page-root {
+  font-family: var(--neversink-main-font);
+  font-weight: 400;
+  letter-spacing: 0.015em;
+}
+
+/* binds variable to the color of a slide*/
+.slidecolor {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+}
+
+/* adjust default bullets */
+.slidev-layout li {
+  margin-bottom: 1em;
+  line-height: 1.5em;
+}
+
+/* adds a modifier class which reduces the space between bullets */
+.tight li {
+  line-height: 1em;
+  margin-bottom: 0.5em;
+}
+
+/* change the bold and strong fonts */
+.slidev-layout strong,
+.slidev-layout b {
+  font-family: var(--neversink-main-font);
+  font-weight: 700;
+}
+
+.slidev-code-wrapper {
+  width: 100%;
+}
+
+/* the highlighted terms from markdown highlighter == == */
+.slidev-layout 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;
+}
+
+/* inlight code blocks */
+.slidev-layout :not(pre) > code {
+  font-size: 0.9em;
+  background: var(--neversink-bg-code-color);
+  border-radius: var(--slidev-code-radius);
+  color: var(--neversink-fg-code-color);
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  font-weight: 300;
+}
+
+/* for links that are icons.  removes underlining which is default for links in markdown parser */
+.iconlink a {
+  border-style: none !important;
+  border-bottom: none !important;
+}
+
+/* default layout */
+
+.my-auto p {
+  margin: 0;
+  padding: 0;
+}
+
+.slidev-layout {
+  margin-top: 0px;
+  padding-top: 1.8rem;
+}
+
+.slidev-layout p:first-child {
+  padding-top: 0;
+  margin-top: 0.5rem;
+}
+
+.slidev-layout h1 {
+  font-weight: 600;
+  font-size: 1.7em;
+  padding-bottom: 0;
+  font-family: var(--neversink-title-font);
+  margin-bottom: 0;
+}
+
+.slidev-layout h2 {
+  font-weight: 600;
+  font-size: 1.5em;
+  padding-bottom: 0;
+  font-family: var(--neversink-title-font);
+  margin-bottom: 0;
+}
+
+.slidev-layout h4 {
+  font-weight: 600;
+  font-size: 1.2em;
+  padding-bottom: 0;
+  font-family: var(--neversink-title-font);
+  margin-bottom: 0;
+}
+
+.slidev-layout h1 + p,
+.slidev-layout h2 + p,
+.slidev-layout h3 + p {
+  opacity: 0.9;
+  margin-top: 1.5em;
+}
+
+.slidev-layout h1 + ul,
+.slidev-layout h2 + ul,
+.slidev-layout h3 + ul {
+  margin-top: 1.5em;
+}
+
+/* columns stuff */
+.warning {
+  color: red;
+}
+.error {
+  font-size: 0.9em;
+}
+
+.left {
+  justify-content: left; /* Left align the content */
+  text-align: left;
+  align-items: start;
+}
+
+.center {
+  justify-content: center; /* Horizontally center the content */
+  text-align: center;
+  align-items: center;
+}
+
+.right {
+  justify-content: right; /* Right align the content */
+  text-align: right;
+  align-items: end;
+}
+
+.top {
+  margin-top: 0;
+  margin-bottom: auto;
+}
+.middle {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.bottom {
+  margin-top: auto;
+  margin-bottom: 0;
+}
+
+/* a new tight bullet list */
+/* .tight {
+  margin-top: 1em;
+} */
+
+.bwimg {
+  filter: grayscale(100%) contrast(150%) brightness(120%);
+  display: inline;
+}
+
+img {
+  display: inline;
+}
+
+/* customize the v-clicks */
+.slidev-vclick-target {
+  transition: opacity 100ms ease;
+}
+
+.slidev-vclick-hidden {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.fader .slidev-vclick-prior {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+html.dark {
+  /* dark mode css here */
+  .lectureno {
+    background-color: #9a9a9a;
+    color: hsl(0, 0%, 100%);
+    opacity: 1;
+  }
+
+  .invert {
+    filter: invert(1);
+  }
+
+  .slidev-layout {
+    color: #d0d0d0;
+  }
+}
+
+html:not(.dark) {
+  /* light mode css here */
+  .lectureno {
+    background-color: #e1e1e1;
+    color: #000;
+    opacity: 1;
+  }
+}
+
+/* credits */
+
+.fullpage {
+  height: 100vh;
+  display: flex;
+}
+
+/* markdown-it-footnotes */
+.footnotes-sep {
+  visibility: hidden;
+}

package/styles/bubbles.css

@@ -0,0 +1,4 @@
+.speech-bubble p {
+  margin-top: 0;
+  margin-bottom: 0;
+}

package/styles/colors.css

@@ -0,0 +1,12 @@
+/* used just to bring the unocss colos styles forward.  probably can replace with var and @apply */
+.bg-navy-900 {
+  background: #2a373a;
+}
+
+.color-navy-900 {
+  color: #2a373a;
+}
+
+.text-navy-900 {
+  color: #2a373a;
+}

package/styles/index.ts

@@ -0,0 +1,11 @@
+// styles/index.ts
+import '@slidev/client/styles/layouts-base.css' // base theme layouts
+import './layouts.css' // default theme layouts
+import './bubbles.css'
+import './stickynote.css'
+import './base.css'
+import './colors.css'
+
+// import './code.css'
+// import './layout.css'
+// import './custom.css'

package/styles/layouts.css

@@ -0,0 +1,76 @@
+.slidev-layout {
+  h1 + p {
+    @apply -mt-2 opacity-50 mb-4;
+  }
+
+  p + h2, ul + h2, table + h2 {
+    @apply mt-10;
+  }
+
+  h1 {
+    @apply text-4xl mb-4 -ml-[0.05em];
+  }
+
+  h2 {
+    @apply text-3xl;
+  }
+
+  h3 {
+    @apply text-2xl;
+  }
+
+  h4 {
+    @apply text-xl;
+  }
+
+  h5 {
+    @apply text-base;
+  }
+
+  h6 {
+    @apply text-sm pt-1 uppercase tracking-widest font-500 -ml-[0.05em];
+  }
+
+  h6:not(.opacity-100) {
+    @apply opacity-40;
+  }
+}
+
+.slidev-layout.cover,
+.slidev-layout.intro {
+  @apply h-full grid;
+
+  h1 {
+    @apply text-6xl leading-20;
+  }
+}
+
+
+.slidev-layout.fact {
+  @apply text-center grid h-full;
+  h1 {
+    @apply text-8xl font-700;
+  }
+  h1 + p {
+    @apply font-700 text-2xl;
+  }
+}
+.slidev-layout.statement {
+  @apply text-center grid h-full;
+
+  h1 {
+    @apply text-6xl font-700;
+  }
+}
+.slidev-layout.quote {
+  @apply grid h-full;
+
+  h1 + p {
+    @apply mt-2;
+  }
+}
+.slidev-layout.section {
+  h1 {
+    @apply text-6xl font-500 leading-20;
+  }
+}

package/styles/stickynote.css

@@ -0,0 +1,4 @@
+.sticky-note p {
+  margin-top: 0;
+  margin-bottom: 0;
+}