@alphacifer/slidev-addon-theme 0.0.1

package/layouts/core/table-of-contents.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  maxDepth: {
+    type: [Number, String],
+    default: 1,
+  },
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-layout default toc-layout',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <slot>
+      <h1>Table of Contents</h1>
+    </slot>
+    <Toc :maxDepth="maxDepth" />
+  </div>
+</template>

package/layouts/shifting-heading/shifting-intro.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client';
+import { computed, Fragment, isVNode, useSlots, type VNode } from 'vue';
+
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const slots = useSlots();
+const { $clicks } = useSlideContext();
+
+function flattenTopLevel(nodes: VNode[]): VNode[] {
+  return nodes.flatMap((node) => {
+    if (node.type === Fragment && Array.isArray(node.children))
+      return flattenTopLevel(node.children.filter(isVNode));
+
+    return node;
+  });
+}
+
+const nodes = computed(() => {
+  const children = flattenTopLevel(slots.default?.() ?? []);
+  const titleIndex = children.findIndex((node) => node.type === 'h1');
+
+  return {
+    title: titleIndex >= 0 ? children[titleIndex] : null,
+    contents:
+      titleIndex >= 0
+        ? children.filter((_, index) => index !== titleIndex)
+        : children,
+  };
+});
+
+const isRevealed = computed(() => !nodes.value.title || $clicks.value > 0);
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-layout shifting-intro-layout relative',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <TransitionHeading
+      v-if="nodes.title"
+      :center="!isRevealed"
+      :idle="isRevealed"
+    >
+      <component :is="nodes.title" />
+    </TransitionHeading>
+
+    <VClickGap
+      v-if="nodes.title"
+      :size="1"
+    />
+
+    <div
+      class="shifting-intro-content"
+      :class="{ 'is-revealed': isRevealed }"
+      :aria-hidden="!isRevealed"
+      :inert="!isRevealed || undefined"
+    >
+      <component
+        :is="content"
+        v-for="(content, index) in nodes.contents"
+        :key="content.key ?? index"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.shifting-intro-content {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding-top: var(--shifting-heading-content-offset, 4.25rem);
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity var(--shifting-content-exit-duration, 250ms) ease-out,
+    visibility 0s linear var(--shifting-content-exit-duration, 250ms);
+}
+
+.shifting-intro-content.is-revealed {
+  visibility: visible;
+  opacity: 1;
+  transition:
+    opacity var(--shifting-content-duration, 700ms) ease-out
+      var(--shifting-content-delay, 450ms),
+    visibility 0s linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shifting-intro-content,
+  .shifting-intro-content.is-revealed {
+    transition-duration: 1ms;
+    transition-delay: 0ms;
+  }
+}
+
+@media print {
+  .shifting-heading,
+  .shifting-intro-content,
+  .shifting-intro-content.is-revealed {
+    transition: none;
+  }
+}
+</style>

package/layouts/thanks/thanks.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'slidev-layout thanks relative',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <ThanksContent />
+  </div>
+</template>

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@alphacifer/slidev-addon-theme",
+  "version": "0.0.1",
+  "description": "All Slidev addons for Alpha presentations",
+  "type": "module",
+  "keywords": [
+    "slidev-addon",
+    "slidev"
+  ],
+  "files": [
+    "components",
+    "layouts",
+    "utils",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "Alpha",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zgid123/alpha-dx.git",
+    "directory": "packages/slidev-addon-theme"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@slidev/client": ">=52.18.0",
+    "vue": "^3.5.40"
+  },
+  "dependencies": {
+    "@vueuse/motion": "3.0.3",
+    "@alphacifer/core-utils": "^0.0.10"
+  },
+  "devDependencies": {
+    "@slidev/client": "52.19.0",
+    "@slidev/cli": "52.19.0",
+    "@slidev/theme-seriph": "0.25.0",
+    "vue": "3.5.40"
+  },
+  "scripts": {
+    "dev": "slidev slides.md --open",
+    "preview:build": "slidev build slides.md"
+  }
+}

package/utils/mergeUno/classifyLayout.ts

@@ -0,0 +1,245 @@
+import type { IClassifyUtilityParams, TUtilityConflictKeys } from './types';
+
+const DISPLAY_VALUES = new Set([
+  'block',
+  'contents',
+  'flow-root',
+  'flex',
+  'grid',
+  'hidden',
+  'inline',
+  'inline-block',
+  'inline-flex',
+  'inline-grid',
+  'list-item',
+  'table',
+  'table-caption',
+  'table-cell',
+  'table-column',
+  'table-column-group',
+  'table-footer-group',
+  'table-header-group',
+  'table-row',
+  'table-row-group',
+]);
+
+const POSITION_VALUES = new Set([
+  'absolute',
+  'fixed',
+  'relative',
+  'static',
+  'sticky',
+]);
+
+const SPACING_SIDES: Readonly<Record<string, readonly string[]>> = {
+  '': ['top', 'right', 'bottom', 'left'],
+  b: ['bottom'],
+  e: ['inline-end'],
+  l: ['left'],
+  r: ['right'],
+  s: ['inline-start'],
+  t: ['top'],
+  x: ['left', 'right'],
+  y: ['top', 'bottom'],
+};
+
+function directionKeys(property: string, direction: string): string[] {
+  return (SPACING_SIDES[direction] ?? []).map((side) => `${property}-${side}`);
+}
+
+export function classifyLayout({
+  utility,
+}: IClassifyUtilityParams): TUtilityConflictKeys {
+  if (DISPLAY_VALUES.has(utility)) {
+    return ['display'];
+  }
+
+  if (POSITION_VALUES.has(utility)) {
+    return ['position'];
+  }
+
+  const spacing = utility.match(/^([mp])([trblesxy]?)-/);
+
+  if (spacing) {
+    const property = spacing[1] === 'm' ? 'margin' : 'padding';
+    return directionKeys(property, spacing[2] || '');
+  }
+
+  if (utility.startsWith('inset-x-')) {
+    return ['left', 'right'];
+  }
+
+  if (utility.startsWith('inset-y-')) {
+    return ['top', 'bottom'];
+  }
+
+  if (utility.startsWith('inset-')) {
+    return ['top', 'right', 'bottom', 'left'];
+  }
+
+  if (/^(?:top|right|bottom|left|start|end)-/.test(utility)) {
+    return [utility.slice(0, utility.indexOf('-'))];
+  }
+
+  if (/^(?:size)-/.test(utility)) {
+    return ['width', 'height'];
+  }
+
+  if (/^(?:w|min-w|max-w)-/.test(utility)) {
+    return [utility.slice(0, utility.indexOf('-'))];
+  }
+
+  if (/^(?:h|min-h|max-h)-/.test(utility)) {
+    return [utility.slice(0, utility.indexOf('-'))];
+  }
+
+  if (utility.startsWith('z-')) {
+    return ['z-index'];
+  }
+
+  if (utility.startsWith('opacity-')) {
+    return ['opacity'];
+  }
+
+  if (utility.startsWith('overflow-x-')) {
+    return ['overflow-x'];
+  }
+
+  if (utility.startsWith('overflow-y-')) {
+    return ['overflow-y'];
+  }
+
+  if (utility.startsWith('overflow-')) {
+    return ['overflow-x', 'overflow-y'];
+  }
+
+  if (utility.startsWith('overscroll-x-')) {
+    return ['overscroll-x'];
+  }
+
+  if (utility.startsWith('overscroll-y-')) {
+    return ['overscroll-y'];
+  }
+
+  if (utility.startsWith('overscroll-')) {
+    return ['overscroll-x', 'overscroll-y'];
+  }
+
+  if (/^flex-(?:row|row-reverse|col|col-reverse)$/.test(utility)) {
+    return ['flex-direction'];
+  }
+
+  if (/^flex-(?:wrap|wrap-reverse|nowrap)$/.test(utility)) {
+    return ['flex-wrap'];
+  }
+
+  if (/^flex-(?:grow|shrink)(?:-|$)/.test(utility)) {
+    return [utility.startsWith('flex-grow') ? 'flex-grow' : 'flex-shrink'];
+  }
+
+  if (utility.startsWith('flex-')) {
+    return ['flex'];
+  }
+
+  if (utility.startsWith('basis-')) {
+    return ['flex-basis'];
+  }
+
+  if (utility.startsWith('order-')) {
+    return ['order'];
+  }
+
+  if (utility.startsWith('grid-cols-')) {
+    return ['grid-template-columns'];
+  }
+
+  if (utility.startsWith('grid-rows-')) {
+    return ['grid-template-rows'];
+  }
+
+  if (utility.startsWith('col-span-') || utility.startsWith('col-auto')) {
+    return ['grid-column'];
+  }
+
+  if (utility.startsWith('col-start-')) {
+    return ['grid-column-start'];
+  }
+
+  if (utility.startsWith('col-end-')) {
+    return ['grid-column-end'];
+  }
+
+  if (utility.startsWith('row-span-') || utility.startsWith('row-auto')) {
+    return ['grid-row'];
+  }
+
+  if (utility.startsWith('row-start-')) {
+    return ['grid-row-start'];
+  }
+
+  if (utility.startsWith('row-end-')) {
+    return ['grid-row-end'];
+  }
+
+  if (utility.startsWith('grid-flow-')) {
+    return ['grid-auto-flow'];
+  }
+
+  if (utility.startsWith('auto-cols-')) {
+    return ['grid-auto-columns'];
+  }
+
+  if (utility.startsWith('auto-rows-')) {
+    return ['grid-auto-rows'];
+  }
+
+  if (utility.startsWith('gap-x-')) {
+    return ['column-gap'];
+  }
+
+  if (utility.startsWith('gap-y-')) {
+    return ['row-gap'];
+  }
+
+  if (utility.startsWith('gap-')) {
+    return ['column-gap', 'row-gap'];
+  }
+
+  if (utility.startsWith('justify-items-')) {
+    return ['justify-items'];
+  }
+
+  if (utility.startsWith('justify-self-')) {
+    return ['justify-self'];
+  }
+
+  if (utility.startsWith('justify-')) {
+    return ['justify-content'];
+  }
+
+  if (utility.startsWith('items-')) {
+    return ['align-items'];
+  }
+
+  if (utility.startsWith('content-')) {
+    return ['align-content'];
+  }
+
+  if (utility.startsWith('self-')) {
+    return ['align-self'];
+  }
+
+  if (utility.startsWith('place-content-')) {
+    return ['place-content'];
+  }
+
+  if (utility.startsWith('place-items-')) {
+    return ['place-items'];
+  }
+
+  if (utility.startsWith('place-self-')) {
+    return ['place-self'];
+  }
+
+  return null;
+}

package/utils/mergeUno/classifySimple.ts

@@ -0,0 +1,42 @@
+import type { IClassifyUtilityParams, TUtilityConflictKeys } from './types';
+
+const SIMPLE_PREFIXES: ReadonlyArray<readonly [string, string]> = [
+  ['accent-', 'accent-color'],
+  ['appearance-', 'appearance'],
+  ['aspect-', 'aspect-ratio'],
+  ['backdrop-', 'backdrop-filter'],
+  ['blur-', 'filter:blur'],
+  ['brightness-', 'filter:brightness'],
+  ['caption-', 'caption-side'],
+  ['caret-', 'caret-color'],
+  ['columns-', 'columns'],
+  ['contrast-', 'filter:contrast'],
+  ['cursor-', 'cursor'],
+  ['decoration-', 'text-decoration'],
+  ['drop-shadow-', 'filter:drop-shadow'],
+  ['fill-', 'fill'],
+  ['grayscale-', 'filter:grayscale'],
+  ['hue-rotate-', 'filter:hue-rotate'],
+  ['list-', 'list-style'],
+  ['object-', 'object-fit-position'],
+  ['outline-', 'outline'],
+  ['pointer-events-', 'pointer-events'],
+  ['resize-', 'resize'],
+  ['saturate-', 'filter:saturate'],
+  ['select-', 'user-select'],
+  ['sepia-', 'filter:sepia'],
+  ['stroke-', 'stroke'],
+  ['table-', 'table-layout'],
+];
+
+export function classifySimple({
+  utility,
+}: IClassifyUtilityParams): TUtilityConflictKeys {
+  for (const [prefix, key] of SIMPLE_PREFIXES) {
+    if (utility.startsWith(prefix)) {
+      return [key];
+    }
+  }
+
+  return null;
+}

package/utils/mergeUno/classifyTypography.ts

@@ -0,0 +1,96 @@
+import type { IClassifyUtilityParams, TUtilityConflictKeys } from './types';
+
+const TEXT_ALIGNMENTS = new Set([
+  'text-center',
+  'text-end',
+  'text-justify',
+  'text-left',
+  'text-right',
+  'text-start',
+]);
+
+const FONT_SIZES = /^(?:xs|sm|base|lg|xl|\d+xl)$/;
+
+function classifyText(utility: string): string[] {
+  if (TEXT_ALIGNMENTS.has(utility)) {
+    return ['text-align'];
+  }
+
+  if (/^text-(?:ellipsis|clip)$/.test(utility)) {
+    return ['text-overflow'];
+  }
+
+  if (/^text-(?:wrap|nowrap|balance|pretty)$/.test(utility)) {
+    return ['text-wrap'];
+  }
+
+  if (/^text-opacity-/.test(utility)) {
+    return ['text-opacity'];
+  }
+
+  const value = utility.slice(5);
+
+  if (FONT_SIZES.test(value)) {
+    return ['font-size', 'line-height'];
+  }
+
+  if (/^\[(?:[-+]?\d|length:|size:)/.test(value)) {
+    return ['font-size', 'line-height'];
+  }
+
+  return ['text-color'];
+}
+
+export function classifyTypography({
+  utility,
+}: IClassifyUtilityParams): TUtilityConflictKeys {
+  if (utility.startsWith('font-')) {
+    if (/^font-(?:sans|serif|mono|\[)/.test(utility)) {
+      return ['font-family'];
+    }
+
+    return ['font-weight'];
+  }
+
+  if (utility.startsWith('text-')) {
+    return classifyText(utility);
+  }
+
+  if (utility.startsWith('leading-')) {
+    return ['line-height'];
+  }
+
+  if (utility.startsWith('tracking-')) {
+    return ['letter-spacing'];
+  }
+
+  if (/^(?:italic|not-italic)$/.test(utility)) {
+    return ['font-style'];
+  }
+
+  if (/^(?:uppercase|lowercase|capitalize|normal-case)$/.test(utility)) {
+    return ['text-transform'];
+  }
+
+  if (utility.startsWith('indent-')) {
+    return ['text-indent'];
+  }
+
+  if (utility.startsWith('align-')) {
+    return ['vertical-align'];
+  }
+
+  if (utility.startsWith('whitespace-')) {
+    return ['white-space'];
+  }
+
+  if (utility.startsWith('break-')) {
+    return ['word-break'];
+  }
+
+  if (utility.startsWith('hyphens-')) {
+    return ['hyphens'];
+  }
+
+  return null;
+}

package/utils/mergeUno/classifyUtility.ts

@@ -0,0 +1,36 @@
+import { classifyLayout } from './classifyLayout';
+import { classifySimple } from './classifySimple';
+import { classifyTypography } from './classifyTypography';
+import { classifyVisual } from './classifyVisual';
+
+interface IClassifyUtilityParams {
+  readonly rawUtility: string;
+}
+
+export function classifyUtility({
+  rawUtility,
+}: IClassifyUtilityParams): readonly string[] {
+  const utility = rawUtility.startsWith('-') ? rawUtility.slice(1) : rawUtility;
+
+  const arbitraryProperty = utility.match(/^\[([^:]+):.+\]$/);
+
+  if (arbitraryProperty) {
+    return [`property:${arbitraryProperty[1]}`];
+  }
+
+  const conflictKeys =
+    classifyLayout({
+      utility,
+    }) ??
+    classifyTypography({
+      utility,
+    }) ??
+    classifyVisual({
+      utility,
+    }) ??
+    classifySimple({
+      utility,
+    });
+
+  return conflictKeys ?? [`token:${utility}`];
+}