slidev-theme-neversink 0.0.0

package/layoutHelper.ts

@@ -0,0 +1,118 @@
+import type { CSSProperties } from 'vue'
+
+/**
+ * Resolve urls from frontmatter and append with the base url
+ */
+export function resolveAssetUrl(url: string) {
+  if (url.startsWith('/')) return import.meta.env.BASE_URL + url.slice(1)
+  return url
+}
+
+export function handleBackground(background?: string, dim = false): CSSProperties {
+  const isColor = background && ['#', 'rgb', 'hsl'].some((v) => background.indexOf(v) === 0)
+
+  const style = {
+    background: isColor ? background : undefined,
+    color: background && !isColor ? 'white' : undefined,
+    backgroundImage: isColor
+      ? undefined
+      : background
+        ? dim
+          ? `linear-gradient(#0005, #0008), url(${resolveAssetUrl(background)})`
+          : `url("${resolveAssetUrl(background)}")`
+        : undefined,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: 'cover',
+  }
+
+  if (!style.background) delete style.background
+
+  return style
+}
+
+export function compute_alignment(val) {
+  switch (val) {
+    case 'ct':
+      return 'center top'
+    case 'cm':
+      return 'center middle'
+    case 'cb':
+      return 'center bottom'
+    case 'lt':
+      return 'left top'
+    case 'lm':
+      return 'left middle'
+    case 'lb':
+      return 'left bottom'
+    case 'rt':
+      return 'right top'
+    case 'rm':
+      return 'right middle'
+    case 'rb':
+      return 'right bottom'
+    case 'c':
+      return 'center top'
+    case 'l':
+      return 'left top'
+    case 'r':
+      return 'right top'
+    default:
+      return 'error'
+  }
+}
+
+function compute_size(left) {
+  return { l: left, r: 12 - left }
+}
+
+export function compute_column_size(val) {
+  switch (val) {
+    case 'is-1':
+    case 'is-1-11':
+    case 'is-one-twelfth':
+      return compute_size(1)
+    case 'is-2':
+    case 'is-2-10':
+    case 'is-one-sixth':
+      return compute_size(2)
+    case 'is-3':
+    case 'is-3-9':
+    case 'is-one-quarter':
+      return compute_size(3)
+    case 'is-4':
+    case 'is-4-8':
+    case 'is-one-third':
+      return compute_size(4)
+    case 'is-5':
+    case 'is-5-7':
+      return compute_size(5)
+    case 'is-6':
+    case 'is-6-6':
+    case 'is-two-quarters':
+    case 'is-two-fourths':
+    case 'is-one-half':
+    case 'is-half':
+      return compute_size(6)
+    case 'is-7':
+    case 'is-7-5':
+      return compute_size(7)
+    case 'is-8':
+    case 'is-8-4':
+    case 'is-two-thirds':
+      return compute_size(8)
+    case 'is-9':
+    case 'is-9-3':
+    case 'is-three-quarters':
+    case 'three-fourths':
+      return compute_size(9)
+    case 'is-10':
+    case 'is-10-2':
+      return compute_size(10)
+    case 'is-11':
+    case 'is-11-1':
+      return compute_size(11)
+    default:
+      return 'error'
+  }
+}

package/layouts/cover.vue

@@ -0,0 +1,93 @@
+<script setup lang="js">
+import { computed } from 'vue'
+//import { handleBackground } from '../layoutHelper'
+
+const props = defineProps({
+  // background: {
+  //   default: '',
+  // },
+  color: {
+    default: 'white',
+  },
+})
+
+//const style = computed(() => handleBackground(props.background, true))
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+
+<template>
+  <div class="slidev-layout cover h-full slidecolor" :class="colorscheme">
+    <div class="my-auto w-full">
+      <slot />
+    </div>
+    <div class="absolute bottom-10">
+      <slot name="note" />
+    </div>
+  </div>
+</template>
+
+<style>
+/* cover slide type */
+
+.slidev-layout.cover {
+  font-family: var(--neversink-main-font);
+  font-weight: 300;
+}
+
+.slidev-layout.cover strong {
+  font-weight: 500;
+}
+
+.slidev-layout.cover h1 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 3em;
+  line-height: normal;
+  margin-bottom: 0.9rem;
+}
+
+.slidev-layout.cover h2 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 2.5em;
+  line-height: normal;
+  margin-bottom: 0.9rem;
+}
+
+.slidev-layout.cover h3 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 1.9em;
+  line-height: normal;
+  margin-bottom: 0.9rem;
+}
+
+.slidev-layout.cover h1 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+
+.slidev-layout.cover h2 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+
+.slidev-layout.cover h3 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+
+/* this is specific to this instance */
+.slidev-layout.cover h1,
+.slidev-layout.cover h2,
+.slidev-layout.cover h3 {
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--neversink-highlight-color);
+}
+</style>

package/layouts/credits.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  color: {
+    default: 'light',
+  },
+  speed: {
+    default: 0.5,
+  },
+  loop: {
+    default: false,
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+<template>
+  <div class="slidecolor slidev-layout full" :class="colorscheme">
+    <div class="my-auto w-full h-full">
+      <CreditScroll :speed="props.speed" :loop="props.loop">
+        <slot name="default"></slot>
+      </CreditScroll>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.quote {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+}
+</style>

package/layouts/default.vue

@@ -0,0 +1,18 @@
+<script setup lang="js">
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    default: 'white',
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+<template>
+  <div class="slidev-layout default slidecolor" :class="colorscheme">
+    <slot />
+  </div>
+</template>

package/layouts/four-cell.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+const slots = useSlots()
+
+const props = defineProps({
+  rowheight: {
+    default: 'is-one-half',
+  },
+  colwidth: {
+    default: 'is-one-half',
+  },
+  color: {
+    default: 'light,white,white,light',
+  },
+  align: {
+    default: 'lt-lt-lt-lt',
+  },
+})
+
+function compute_size_col(title) {
+  return { l: 'col-span-' + title, r: 'col-span-' + (12 - title) }
+}
+
+function compute_size_row(title) {
+  return { t: 'row-span-' + title, b: 'row-span-' + (12 - title) }
+}
+
+const colw = computed(() => {
+  switch (props.colwidth) {
+    case 'is-1':
+    case 'is-1-11':
+      return compute_size_col(1)
+    case 'is-2':
+    case 'is-2-10':
+      return compute_size_col(2)
+    case 'is-3':
+    case 'is-3-9':
+    case 'is-one-quarter':
+      return compute_size_col(3)
+    case 'is-4':
+    case 'is-4-8':
+    case 'is-one-third':
+      return compute_size_col(4)
+    case 'is-5':
+    case 'is-5-7':
+      return compute_size_col(5)
+    case 'is-6':
+    case 'is-6-6':
+    case 'is-two-quarters':
+    case 'is-two-fourths':
+    case 'is-one-half':
+    case 'is-half':
+      return compute_size_col(6)
+    case 'is-7':
+    case 'is-7-5':
+      return compute_size_col(7)
+    case 'is-8':
+    case 'is-8-4':
+    case 'is-two-thirds':
+      return compute_size_col(8)
+    case 'is-9':
+    case 'is-9-3':
+    case 'is-three-quarters':
+    case 'three-fourths':
+      return compute_size_col(9)
+    case 'is-10':
+    case 'is-10-2':
+      return compute_size_col(10)
+    case 'is-11':
+    case 'is-11-1':
+      return compute_size_col(11)
+    default:
+      return 'error'
+  }
+})
+
+const rowh = computed(() => {
+  switch (props.rowheight) {
+    case 'is-1':
+    case 'is-1-11':
+      return compute_size_row(1)
+    case 'is-2':
+    case 'is-2-10':
+      return compute_size_row(2)
+    case 'is-3':
+    case 'is-3-9':
+    case 'is-one-quarter':
+      return compute_size_row(3)
+    case 'is-4':
+    case 'is-4-8':
+    case 'is-one-third':
+      return compute_size_row(4)
+    case 'is-5':
+    case 'is-5-7':
+      return compute_size_row(5)
+    case 'is-6':
+    case 'is-6-6':
+    case 'is-two-quarters':
+    case 'is-two-fourths':
+    case 'is-one-half':
+    case 'is-half':
+      return compute_size_row(6)
+    case 'is-7':
+    case 'is-7-5':
+      return compute_size_row(7)
+    case 'is-8':
+    case 'is-8-4':
+    case 'is-two-thirds':
+      return compute_size_row(8)
+    case 'is-9':
+    case 'is-9-3':
+    case 'is-three-quarters':
+    case 'three-fourths':
+      return compute_size_row(9)
+    case 'is-10':
+    case 'is-10-2':
+      return compute_size_row(10)
+    case 'is-11':
+    case 'is-11-1':
+      return compute_size_row(11)
+    default:
+      return 'error'
+  }
+})
+
+function compute_alignment(val) {
+  switch (val) {
+    case 'ct':
+      return 'center top'
+    case 'cm':
+      return 'center middle'
+    case 'cb':
+      return 'center bottom'
+    case 'lt':
+      return 'left top'
+    case 'lm':
+      return 'left middle'
+    case 'lb':
+      return 'left bottom'
+    case 'rt':
+      return 'right top'
+    case 'rm':
+      return 'right middle'
+    case 'rb':
+      return 'right bottom'
+    case 'c':
+      return 'center top'
+    case 'l':
+      return 'left top'
+    case 'r':
+      return 'right top'
+    default:
+      return 'error'
+  }
+}
+
+const alignment = computed(() => {
+  const parts = props.align.split('-')
+  return { l: compute_alignment(parts[0]), r: compute_alignment(parts[1]) }
+})
+
+function color(code) {
+  if (code === 'black') {
+    return 'text-white bg-black'
+  }
+  if (code === 'white') {
+    return 'text-black bg-white'
+  }
+  if (code === 'dark') {
+    return 'text-gray-100 bg-gray-800'
+  }
+  if (code === 'light') {
+    return 'text-gray-800 bg-gray-100'
+  }
+
+  if (code.includes('-light')) {
+    const parts = code.split('-')
+    return 'bg-' + parts[0] + '-100 text-' + parts[0] + '-500'
+  } else {
+    return 'text-' + code + '-100 bg-' + code + '-500'
+  }
+}
+
+const cellcolor = computed(() => {
+  const parts = props.color.split(',')
+  return {
+    tl: color(parts[0]),
+    tr: color(parts[1]),
+    bl: color(parts[2]),
+    br: color(parts[3]),
+  }
+})
+</script>
+<template>
+  <div class="grid grid-cols-12 grid-rows-12 w-full h-full auto-rows-fr">
+    <div class="slidev-layout default w-full h-full" :class="colw.l + ' ' + rowh.t + ' ' + cellcolor.tl">
+      <slot name="top-left"></slot>
+    </div>
+    <div class="slidev-layout default w-full h-full" :class="colw.r + ' ' + rowh.t + ' ' + cellcolor.tr">
+      <slot name="top-right"></slot>
+    </div>
+    <div class="slidev-layout default w-full h-full" :class="colw.l + ' ' + rowh.b + ' ' + cellcolor.bl">
+      <slot name="bottom-left"></slot>
+    </div>
+    <div class="slidev-layout default w-full h-full" :class="colw.r + ' ' + rowh.b + ' ' + cellcolor.br">
+      <slot name="bottom-right"></slot>
+    </div>
+  </div>
+</template>

package/layouts/full.vue

@@ -0,0 +1,22 @@
+<script setup lang="js">
+import { computed } from 'vue'
+//import { handleBackground } from '../layoutHelper'
+
+const props = defineProps({
+  // background: {
+  //   default: '',
+  // },
+  color: {
+    default: 'white',
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+<template>
+  <div class="slidev-layout full w-full h-full slidecolor" :class="colorscheme">
+    <slot class="w-full h-full" />
+  </div>
+</template>

package/layouts/intro.vue

@@ -0,0 +1,75 @@
+<script setup lang="js">
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    default: 'white',
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+
+<template>
+  <div class="slidev-layout intro slidecolor" :class="colorscheme">
+    <div class="my-auto">
+      <slot />
+    </div>
+    <div class="absolute bottom-10">
+      <slot name="note" />
+    </div>
+  </div>
+</template>
+
+<style>
+/* intro slide type */
+
+.slidev-layout.intro {
+  font-family: var(--neversink-main-font);
+  font-weight: 300;
+}
+
+.slidev-layout.intro strong {
+  font-weight: 500;
+}
+.slidev-layout.intro h1 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 3em;
+  line-height: 5rem;
+}
+
+.slidev-layout.intro h2 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 2.5em;
+  line-height: 5rem;
+}
+
+.slidev-layout.intro h3 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 1.9em;
+  line-height: 5rem;
+}
+
+.slidev-layout.intro h1 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+
+.slidev-layout.intro h2 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+
+.slidev-layout.intro h3 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+</style>

package/layouts/quote.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  color: {
+    default: 'light',
+  },
+  author: {
+    default: null,
+  },
+  quotesize: {
+    default: 'text-2xl',
+  },
+  authorsize: {
+    default: 'text-l',
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+<template>
+  <div class="slidev-layout quote">
+    <div class="my-auto">
+      <div class="p-5 w-95% ml-auto mr-auto rounded-lg border-1px quotecolor" :class="colorscheme">
+        <div class="leading-normal" :class="quotesize">
+          <slot name="default" /><br />
+          <div v-if="author !== null" class="quote_author" :class="authorsize">- {{ author }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.quotecolor {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+  /* add a drop shadow */
+  box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.quote_author {
+  font-family: var(--neversink-title-font);
+  font-weight: 400;
+  text-align: right;
+}
+
+.slidev-layout.quote {
+  margin-top: 2em;
+  padding-left: 1em;
+}
+
+.slidev-layout.quote p {
+  font-size: 1.5em;
+  font-family: var(--neversink-quote-font);
+  line-height: 1.2em;
+  font-weight: 400;
+  text-align: left;
+}
+</style>