@alphacifer/slidev-addon-theme 0.0.1

package/README.md

@@ -0,0 +1,47 @@
+# @alphacifer/slidev-addon-theme
+
+Shared Slidev components and layouts for Alpha presentations.
+
+## Installation
+
+```bash
+pnpm add -D @alphacifer/slidev-addon-theme
+```
+
+```yaml
+---
+addons:
+  - '@alphacifer/slidev-addon-theme'
+---
+```
+
+## Core
+
+- Components: `Date`, `QnA`, `Quote`, `ReflectedTitle`, `Speaker`
+- Layouts: `bg-center`, `table-of-contents`
+
+## Shifting heading
+
+- Component: `TransitionHeading`
+- Layout: `shifting-intro`
+- Utilities: `mergeUno`, `createUnoClassMerger`
+
+## Thanks
+
+- Components: `ThanksContent`, `ThanksOutlineSquare`, `ThanksSquare`
+- Layout: `thanks`
+
+## Preview
+
+```bash
+pnpm --filter @alphacifer/slidev-addon-theme dev
+```
+
+The preview deck is defined in `slides.md` and loads this package locally as a
+Slidev addon.
+
+Build the preview without opening a browser:
+
+```bash
+pnpm --filter @alphacifer/slidev-addon-theme preview:build
+```

package/components/core/Date.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { formatDate } from '@alphacifer/core-utils/dateUtils';
+
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  date: {
+    type: String,
+    required: false,
+  },
+});
+
+const formattedDate = formatDate(props.date, {
+  format: 'dd/MM/yyyy',
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs('slidev-addon-date');
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    Date: {{ formattedDate }}
+  </div>
+</template>

package/components/core/QnA.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  startDelay: {
+    type: Number,
+    default: 11_500,
+  },
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-addon-qna flex items-center gap-8 text-8xl font-bold color-[#2b90b6]',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <span
+      v-motion
+      :initial="{
+        opacity: 0,
+        x: -500,
+        rotate: -360,
+      }"
+      :enter="{
+        opacity: 1,
+        x: 0,
+        rotate: 0,
+        transition: {
+          duration: 800,
+          ease: 'easeOut',
+          delay: 400 + startDelay,
+        }
+      }"
+    >
+      Q
+    </span>
+    <span
+      v-motion
+      :initial="{
+        opacity: 1,
+        y: -1_000
+      }"
+      :enter="{
+        y: [-1_000, 0],
+        transition: {
+          y: {
+            duration: 1_000,
+            type: 'spring',
+            stiffness: 200,
+            damping: 15,
+            delay: 0 + startDelay,
+          }
+        }
+      }"
+    >
+      &
+    </span>
+    <span
+      v-motion
+      :initial="{ opacity: 0, x: 500, rotate: 360 }"
+      :enter="{
+        opacity: 1,
+        x: 0,
+        rotate: 0,
+        transition: {
+          duration: 800,
+          ease: 'easeOut',
+          delay: 600 + startDelay,
+        },
+      }"
+    >
+      A
+    </span>
+  </div>
+</template>

package/components/core/Quote.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { mergeUno } from '../../utils/mergeUno';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  author: {
+    type: String,
+    required: false,
+  },
+  titleClass: {
+    type: String,
+    required: false,
+  },
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-addon-quote flex flex-col',
+);
+const titleClasses = computed(() => {
+  return mergeUno('text-center', props.titleClass);
+});
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <h1 :class="titleClasses">"{{ text }}"</h1>
+    <p v-if="author" class="self-end">— {{ author }}</p>
+  </div>
+</template>

package/components/core/ReflectedTitle.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(`
+  slidev-addon-reflected-title
+  relative
+  text-5xl
+  font-bold
+  tracking-tight
+  !text-[#a5f3fc]
+  after:content-[var(--title)]
+  after:block
+  after:mt-2
+  after:absolute
+  after:text-current
+  after:opacity-60
+  after:text-3xl
+  after:font-light
+  after:tracking-normal
+  after:w-full
+  after:text-center
+  after:overflow-hidden
+  after:mask-[linear-gradient(to_bottom,black_0%,transparent_100%)]
+  after:animate-slide-in-down
+  after:animate-duration-1000
+`);
+</script>
+
+<template>
+  <h1
+    v-bind="forwardedAttrs()"
+    :style="{
+      '--title': `'${title}'`,
+    }"
+    :class="className()"
+  >
+    {{ title }}
+  </h1>
+</template>

package/components/core/Speaker.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  author: {
+    type: String,
+    required: false,
+    default: 'Alpha',
+  },
+  team: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  date: {
+    type: String,
+    required: true,
+  },
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
+  'slidev-addon-speaker flex absolute bottom-[15px] right-[30px] flex-col',
+  props.team.length ? 'text-left gap-2' : undefined,
+]);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <div v-if="team.length">
+      <div v-for="member in team" :key="member as string">
+        {{ member }}
+      </div>
+    </div>
+    <div v-else>
+      Author: {{ author }}
+    </div>
+    <Date :date="date" />
+  </div>
+</template>

package/components/shifting-heading/TransitionHeading.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  center: {
+    type: Boolean,
+    default: false,
+  },
+  idle: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(`
+  shifting-heading
+  absolute
+  z-1
+  start-[var(--shifting-heading-inline,3.5rem)]
+  top-[var(--shifting-heading-top,2.5rem)]
+  w-max
+  translate-x-0
+  translate-y-0
+  origin-left
+`);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :data-shifting-heading-state="center && !idle ? 'centered' : 'shifted'"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+.shifting-heading {
+  max-width: calc(
+    100% - var(--shifting-heading-inline, 3.5rem) -
+      var(--shifting-heading-inline, 3.5rem)
+  );
+  transition:
+    inset-inline-start var(--shifting-heading-duration, 700ms) ease-in-out,
+    top var(--shifting-heading-duration, 700ms) ease-in-out,
+    transform var(--shifting-heading-duration, 700ms) ease-in-out;
+  will-change: inset-inline-start, top, transform;
+}
+
+.shifting-heading > :is(h1, h2, h3, h4, h5, h6) {
+  max-width: 100%;
+  margin: 0;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
+}
+
+.shifting-heading[data-shifting-heading-state='centered'] {
+  inset-inline-start: 50%;
+  top: 50%;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  transform-origin: center;
+}
+
+:where([dir='rtl'])
+  .shifting-heading[data-shifting-heading-state='centered'] {
+  transform: translate(50%, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shifting-heading {
+    transition-duration: 1ms;
+  }
+}
+</style>

package/components/thanks/ThanksContent.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import type { MotionVariants, Variant } from '@vueuse/motion';
+
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { animation } = defineProps({
+  animation: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const begin = {
+  scale: 1.5,
+  rotate: -50,
+};
+
+const final = {
+  scale: 1,
+  rotate: 45,
+  translateX: '-50%',
+  translateY: '-50%',
+  transition: {
+    mass: 4,
+    damping: 10,
+    stiffness: 20,
+    type: 'spring',
+  },
+};
+
+interface IGetMotionPropsParams {
+  enter: Variant;
+  initial: Variant;
+}
+
+const getMotionProps = ({
+  enter,
+  initial,
+}: IGetMotionPropsParams): MotionVariants<string> => {
+  if (!animation) {
+    const state = {
+      ...enter,
+      transition: {
+        duration: 0,
+      },
+    };
+
+    return {
+      enter: state,
+      initial: state,
+    };
+  }
+
+  return {
+    enter,
+    initial,
+  };
+};
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-addon-thanks-content relative h-full w-full',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <ThanksSquare
+    v-motion
+    v-bind="getMotionProps({
+      enter: {
+        ...final,
+        x: -78,
+        y: 30,
+      },
+      initial: {
+        ...begin,
+        x: 900,
+        y: -100,
+      },
+    })"
+    class="absolute w-[150px] h-[150px] rotate-45 top-[50%] left-[40%] z-10"
+    />
+    <ThanksSquare
+    v-motion
+    v-bind="getMotionProps({
+      initial: {
+        y: -150,
+        opacity: 0,
+      },
+      enter:{
+        x: -50,
+        y: -60,
+        rotate: 45,
+        opacity: 0.4,
+        transition: {
+          delay: 2_500,
+          duration: 700,
+        }
+      },
+    })"
+    class="w-[100px] h-[100px] top-[20%] rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+    />
+    <ThanksSquare
+    v-motion
+    v-bind="getMotionProps({
+      initial: {
+        x: -150,
+        opacity: 0,
+      },
+      enter: {
+        x: -50,
+        y: -65,
+        rotate: 45,
+        opacity: 0.4,
+        transition: {
+          delay: 2_500,
+          duration: 700,
+        }
+      },
+    })"
+    class="w-[100px] h-[100px] top-[45%] rotate-45 left-[22%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+    />
+    <ThanksSquare
+    v-motion
+    v-bind="getMotionProps({
+      initial: {
+        y: 150,
+        opacity: 0,
+      },
+      enter: {
+        x: -50,
+        y: -45,
+        rotate: 45,
+        opacity: 0.4,
+        transition: {
+          delay: 2_500,
+          duration: 700,
+        }
+      },
+    })"
+    class="w-[100px] h-[100px] bottom-0 rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+    />
+    <ThanksOutlineSquare
+    v-motion
+    v-bind="getMotionProps({
+      initial: {
+        ...begin,
+        x: 0,
+        y: -1000,
+      },
+      enter: {
+        ...final,
+        x: -2,
+        y: 72,
+        transition: {
+          delay: 700,
+          duration: 2_000,
+        },
+      },
+    })"
+    class="w-[120px] h-[120px] rotate-45 top-[25%] left-[31%]"
+    />
+    <ThanksOutlineSquare
+    v-motion
+    v-bind="getMotionProps({
+      initial: {
+        ...begin,
+        x: 0,
+        y: 1000,
+      },
+      enter: {
+        ...final,
+        x: -3,
+        y: 45,
+        transition: {
+          delay: 700,
+          duration: 2_000,
+        },
+      },
+    })"
+    class="w-[70px] h-[70px] rotate-45 top-[52%] left-[30%]"
+    />
+    <ThanksOutlineSquare
+    v-motion
+    v-bind="getMotionProps({
+      initial: {
+        ...begin,
+        x: 1000,
+        y: 200,
+      },
+      enter: {
+        ...final,
+        x: -2,
+        y: 72,
+        transition: {
+          delay: 700,
+          duration: 2_000,
+        },
+      },
+    })"
+    class="w-[100px] h-[100px] rotate-45 top-[42%] left-[43%]"
+    />
+
+    <div
+      v-motion
+      v-bind="getMotionProps({
+        initial: {
+          x: -80,
+          opacity: 0,
+        },
+        enter: {
+          x: -130,
+          y: -46,
+          opacity: 1,
+          transition: {
+            delay: 2_800,
+            duration: 1_000,
+          }
+        },
+      })"
+      class="color-[#2b90b6] text-3xl absolute top-[50%] left-[69%] translate-x-[-50%] translate-y-[-50%]"
+    >
+      Thank You
+      <br />
+      for your attention!
+    </div>
+  </div>
+</template>

package/components/thanks/ThanksOutlineSquare.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-addon-thanks-outline-square absolute rounded-2xl border-2 border-color-cyan-500',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  />
+</template>

package/components/thanks/ThanksSquare.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-addon-thanks-square absolute bg-gradient-to-br from-cyan-500 to-blue-500 rounded-3xl',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  />
+</template>

package/layouts/core/bg-center.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { handleBackground } from '@slidev/client';
+import { computed } from 'vue';
+
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { background } = defineProps({
+  background: {
+    default: '',
+  },
+});
+
+const style = computed(() => {
+  return handleBackground(background, true);
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-layout bg-center h-full grid place-content-center',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="style"
+  >
+    <slot />
+  </div>
+</template>