slidev-theme-practicum 0.1.0

package/components/Timeline.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { computed, shallowRef, type ComponentPublicInstance } from 'vue'
+import { createTextFitRuntime, type ThemeTextSize } from '../composables/text-fit-runtime'
+
+const TIMELINE_ACTIVE_YEAR_FALLBACK_SIZE: ThemeTextSize = 9
+
+const props = defineProps({
+  items: {
+    type: Array as () => Array<{ year: string, label: string, active?: boolean }>,
+    required: true,
+  },
+})
+
+const timelineElement = shallowRef<HTMLElement | null>(null)
+const activeYearElement = shallowRef<HTMLElement | null>(null)
+const hasActiveItem = computed(() => props.items.some(item => item.active))
+const activeIndices = computed(() => props.items.flatMap((item, itemIndex) => item.active ? [itemIndex] : []))
+const TIMELINE_ACTIVE_YEAR_MAX_SIZE = computed<ThemeTextSize>(() => 12)
+const textFit = createTextFitRuntime()
+
+function assertSingleActiveItem() {
+  if (activeIndices.value.length > 1)
+    throw new Error('[Timeline] items поддерживает не больше одного active item.')
+}
+
+function setYearElement(element: Element | ComponentPublicInstance | null, isActive?: boolean) {
+  if (!isActive)
+    return
+
+  assertSingleActiveItem()
+  activeYearElement.value = element instanceof HTMLElement ? element : null
+}
+
+function resolveActiveYearBounds() {
+  const timeline = timelineElement.value
+  const activeYear = activeYearElement.value
+  const activeItem = activeYear?.parentElement
+
+  if (!timeline || !activeYear || !activeItem)
+    return null
+
+  const timelineStyle = globalThis.getComputedStyle(timeline)
+  const dotSize = Number.parseFloat(timelineStyle.getPropertyValue('--timeline-dot-size')) || 0
+  const blockHeight = Number.parseFloat(timelineStyle.getPropertyValue('--timeline-block-height')) || 0
+
+  return {
+    width: activeItem.clientWidth,
+    height: Math.max(0, timeline.clientHeight - dotSize - blockHeight),
+  }
+}
+
+const { size: fittedActiveYearSize } = textFit.useElement({
+  target: activeYearElement,
+  enabled: computed(() => {
+    assertSingleActiveItem()
+    return hasActiveItem.value
+  }),
+  fallbackSize: TIMELINE_ACTIVE_YEAR_FALLBACK_SIZE,
+  maxSize: TIMELINE_ACTIVE_YEAR_MAX_SIZE,
+  resolveBounds: resolveActiveYearBounds,
+  watchSources: [
+    () => props.items,
+  ],
+})
+
+const timelineStyle = computed(() => hasActiveItem.value
+  ? {
+      '--theme-timeline-active-year-size': `var(--theme-text-size-${fittedActiveYearSize.value})`,
+      '--theme-timeline-active-year-line': `var(--theme-text-line-${fittedActiveYearSize.value})`,
+    }
+  : {})
+
+function getItemGridStyle(index: number) {
+  const count = props.items.length || 1
+  const activeItemIndices = activeIndices.value
+
+  assertSingleActiveItem()
+
+  if (count === 3 && activeItemIndices.length === 1) {
+    const activeIndex = activeItemIndices[0]
+    const spans = props.items.map((_, itemIndex) => itemIndex === activeIndex ? 6 : 3)
+    const start = spans.slice(0, index).reduce((sum, span) => sum + span, 1)
+
+    return {
+      gridColumn: `${start} / ${start + spans[index]}`,
+    }
+  }
+
+  if (count > 12)
+    throw new Error('[Timeline] items поддерживает не больше 12 событий.')
+
+  const start = Math.floor((index * 12) / count) + 1
+  const end = Math.floor(((index + 1) * 12) / count) + 1
+
+  return {
+    gridColumn: `${start} / ${end}`,
+  }
+}
+</script>
+
+<template>
+  <div ref="timelineElement"
+       class="Timeline"
+       :style="timelineStyle"
+       :class="{ 'Timeline_has_active': hasActiveItem }">
+    <div class="Timeline-Rail" />
+
+    <div v-for="(item, index) in items"
+         :key="`${item.year}-${index}`"
+         class="Timeline-Item"
+         :style="getItemGridStyle(index)"
+         :class="{ 'Timeline-Item_active': item.active }">
+      <div :ref="element => setYearElement(element, item.active)" class="Timeline-Year">{{ item.year }}</div>
+      <div class="Timeline-Dot" />
+      <div class="Timeline-Label">{{ item.label }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.Timeline {
+  --timeline-block-height: calc(var(--theme-cell-height) * 2 + var(--theme-grid-gap));
+  --timeline-dot-size: calc(var(--theme-grid-module) * 4);
+  --theme-timeline-active-year-size: var(--theme-text-size-9);
+  --theme-timeline-active-year-line: var(--theme-text-line-9);
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--theme-grid-columns), minmax(0, 1fr));
+  column-gap: var(--theme-grid-gap);
+  align-items: end;
+  align-content: end;
+  min-height: 100%;
+}
+
+.Timeline-Rail {
+  position: absolute;
+  left: calc(var(--theme-margin-left) * -1);
+  right: calc(var(--theme-margin-right) * -1);
+  bottom: calc(var(--timeline-block-height) + (var(--timeline-dot-size) / 2) - (var(--theme-grid-module) / 2));
+  height: var(--theme-grid-module);
+  background: color-mix(in srgb, var(--theme-text-muted) 28%, transparent);
+}
+
+.Timeline-Item {
+  position: relative;
+  display: grid;
+  grid-template-rows:
+    var(--timeline-block-height)
+    var(--timeline-dot-size)
+    var(--timeline-block-height);
+  min-height: calc((var(--timeline-block-height) * 2) + var(--timeline-dot-size));
+}
+
+.Timeline-Year {
+  min-height: var(--timeline-block-height);
+  display: flex;
+  align-items: flex-end;
+  font-size: var(--theme-text-size-7);
+  line-height: var(--theme-text-line-7);
+  color: var(--theme-text);
+}
+
+.Timeline-Dot {
+  width: var(--timeline-dot-size);
+  height: var(--timeline-dot-size);
+  border: var(--theme-grid-module) solid var(--theme-text);
+  border-radius: 50%;
+  background: var(--theme-bg);
+  align-self: center;
+}
+
+.Timeline-Label {
+  min-height: var(--timeline-block-height);
+  max-width: var(--theme-grid-span-2-width);
+  padding-top: var(--theme-slot-margin-3);
+  color: var(--theme-text-muted);
+  font-size: var(--theme-text-size-2);
+  line-height: var(--theme-text-line-2);
+}
+
+.Timeline_has_active .Timeline-Year {
+  color: var(--theme-text-muted);
+}
+
+.Timeline_has_active .Timeline-Dot {
+  border-color: var(--theme-text-muted);
+}
+
+.Timeline-Item_active .Timeline-Year {
+  color: var(--theme-text);
+  font-size: var(--theme-timeline-active-year-size);
+  line-height: var(--theme-timeline-active-year-line);
+}
+
+.Timeline-Item_active .Timeline-Dot {
+  border-color: var(--theme-text);
+}
+
+.Timeline-Item_active .Timeline-Label {
+  color: inherit;
+}
+</style>

package/composables/decor-catalog.mjs

@@ -0,0 +1,339 @@
+const PHOTO_DECOR_SIZES = Object.freeze([
+  { cols: [4, 6], rows: [4, 6], ratio: [0.85, 1.2] },
+  { cols: [5, 12], rows: [3, 8], ratio: [1.15, 4] },
+])
+
+/**
+ * @param {number} number
+ * @param {string[]} meanings
+ * @param {string[]} tones
+ * @param {Partial<import('./image-config.mjs').ImageDataInput>} [image]
+ */
+function photoDecor(number, meanings, tones, image = {}) {
+  return {
+    id: `decor-photo-${String(number).padStart(2, '0')}`,
+    src: `/photos/photo-${number}.png`,
+    sizes: PHOTO_DECOR_SIZES,
+    meanings: ['photo', ...meanings],
+    tones,
+    image: {
+      fit: 'cover',
+      position: 'center',
+      zoom: 1,
+      ...image,
+    },
+  }
+}
+
+export const DEFAULT_DECOR_DATA = Object.freeze([
+  {
+    id: 'decor-cover-band-01',
+    src: '/decor/decor-1.svg',
+    sizes: [{ cols: [3, 8], rows: [2, 5], ratio: [1, 1.5] }],
+    meanings: ['cover', 'hero', 'course'],
+    tones: ['green', 'orange', 'blue'],
+    image: {
+      fit: 'contain',
+      position: 'center',
+      zoom: 1.05,
+    },
+  },
+  {
+    id: 'decor-support-raster-01',
+    src: '/decor/decor-2.png',
+    sizes: [{ cols: [2, 6], rows: [2, 6], ratio: [0.75, 1.2] }],
+    meanings: ['support', 'media'],
+    tones: ['orange', 'light', 'warm'],
+    image: {
+      fit: 'scale-down',
+      position: '100% 50%',
+      anchor: 'right center',
+      backgroundColor: '#f5f5f5',
+    },
+  },
+  {
+    id: 'decor-square-orbit-01',
+    src: '/decor/decor-3.svg',
+    sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
+    meanings: ['qa', 'testing', 'practice'],
+    tones: ['blue', 'orange', 'green'],
+    image: {
+      fit: 'contain',
+      position: 'center',
+      zoom: 1.06,
+    },
+  },
+  {
+    id: 'decor-support-wide-01',
+    src: '/decor/decor-4.svg',
+    sizes: [{ cols: [4, 8], rows: [2, 8], ratio: [1, 4] }],
+    meanings: ['support', 'learning'],
+    tones: ['green', 'blue', 'orange'],
+    image: {
+      fit: 'fill',
+      position: '50% 50%',
+      zoom: 0.9,
+    },
+  },
+  {
+    id: 'decor-support-raster-02',
+    src: '/decor/decor-5.png',
+    sizes: [
+      { cols: 6, rows: 5 },
+      { cols: 6, rows: 6 },
+      { cols: 7, rows: 6 },
+      { cols: 7, rows: 7 },
+    ],
+    meanings: ['support', 'media'],
+    tones: ['orange', 'warm'],
+    image: {
+      fit: 'cover',
+      position: '0% 0%',
+      anchor: 'right top',
+      x: '-15%',
+      y: '26.5%',
+      backgroundColor: 'var(--theme-color-orange-1)',
+    },
+  },
+  {
+    id: 'decor-support-raster-03',
+    src: '/decor/decor-6.png',
+    sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
+    meanings: ['support', 'media'],
+    tones: ['orange', 'warm'],
+    image: {
+      fit: 'contain',
+      position: '50% 50%',
+      backgroundColor: 'var(--theme-color-orange-0)',
+    },
+  },
+  {
+    id: 'decor-media-square-01',
+    src: '/decor/decor-7.png',
+    sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
+    meanings: ['media', 'practice', 'support'],
+    tones: ['blue', 'orange', 'green'],
+    image: {
+      fit: 'contain',
+      position: '50% 50%',
+      zoom: 0.9,
+      backgroundColor: 'var(--theme-color-blue-1)',
+    },
+  },
+  {
+    id: 'decor-cover-vertical-01',
+    src: '/decor/decor-8.svg',
+    sizes: [{ cols: [2, 4], rows: [3, 8], ratio: [0.25, 0.95] }],
+    meanings: ['cover', 'hero', 'course'],
+    tones: ['orange', 'green', 'blue'],
+    image: {
+      fit: 'contain',
+      position: 'center',
+      zoom: 1.08,
+    },
+  },
+  {
+    id: 'decor-cover-ribbon-01',
+    src: '/decor/decor-9.svg',
+    sizes: [{ cols: [4, 8], rows: [2, 4], ratio: [1.4, 4] }],
+    meanings: ['cover', 'hero', 'support'],
+    tones: ['orange', 'blue', 'green'],
+    image: {
+      fit: 'contain',
+      position: '50% 70%',
+      zoom: 1.7,
+    },
+  },
+  {
+    id: 'decor-rules-wide-01',
+    src: '/decor/decor-10.svg',
+    sizes: [{ cols: [4, 12], rows: [3, 6], ratio: [1.4, 4] }],
+    meanings: ['rules', 'webinar', 'qa'],
+    tones: ['green', 'dark', 'blue', 'orange'],
+    image: {
+      fit: 'contain',
+      position: 'left top',
+      anchor: 'left top',
+      x: '50%',
+      y: '12%',
+      zoom: 3,
+      color: 'var(--theme-color-dark-0)',
+      opacity: 1,
+    },
+  },
+  {
+    id: 'decor-agenda-tall-01',
+    src: '/decor/decor-11.svg',
+    sizes: [{ cols: [3, 4], rows: [8, 12], ratio: [0.25, 0.55] }],
+    meanings: ['agenda', 'toc'],
+    tones: ['blue', 'orange', 'green', 'dark'],
+    image: {
+      fit: 'contain',
+      position: 'right center',
+      zoom: 1,
+      opacity: 0.85,
+    },
+  },
+  {
+    id: 'decor-signal-tall-01',
+    src: '/decor/decor-12.svg',
+    sizes: [{ cols: [2, 4], rows: [4, 12], ratio: [0.2, 0.8] }],
+    meanings: ['signal', 'cover', 'hero'],
+    tones: ['blue', 'orange', 'green'],
+    image: {
+      fit: 'cover',
+      position: '50% 50%',
+      zoom: 2,
+    },
+  },
+  {
+    id: 'decor-support-compact-01',
+    src: '/decor/decor-13.svg',
+    sizes: [{ cols: [2, 6], rows: [2, 6], ratio: [0.75, 1.35] }],
+    meanings: ['support', 'practice'],
+    tones: ['green', 'blue', 'orange'],
+    image: {
+      fit: 'contain',
+      position: '50% 50%',
+      zoom: 0.9,
+    },
+  },
+  {
+    id: 'decor-panel-vertical-01',
+    src: '/decor/decor-14.svg',
+    sizes: [{ cols: [3, 5], rows: [4, 7], ratio: [0.45, 0.95] }],
+    meanings: ['support', 'rules', 'qa'],
+    tones: ['orange', 'blue', 'green'],
+    image: {
+      fit: 'contain',
+      position: '100% 50%',
+      anchor: 'right center',
+      x: '3%',
+      zoom: 0.9,
+    },
+  },
+  {
+    id: 'decor-support-wide-02',
+    src: '/decor/decor-15.svg',
+    sizes: [{ cols: [4, 8], rows: [2, 5], ratio: [1.2, 4] }],
+    meanings: ['support', 'learning'],
+    tones: ['orange', 'green', 'blue'],
+    image: {
+      fit: 'contain',
+      position: 'center',
+      zoom: 1,
+    },
+  },
+  {
+    id: 'decor-support-wide-03',
+    src: '/decor/decor-16.svg',
+    sizes: [{ cols: [5, 9], rows: [2, 4], ratio: [1.4, 4.5] }],
+    meanings: ['support', 'learning'],
+    tones: ['blue', 'green', 'orange'],
+    image: {
+      fit: 'contain',
+      position: 'center',
+      zoom: 1,
+    },
+  },
+  {
+    id: 'decor-media-square-02',
+    src: '/decor/decor-17.png',
+    sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
+    meanings: ['media', 'support'],
+    tones: ['green', 'orange', 'blue'],
+    image: {
+      fit: 'contain',
+      position: '50% 50%',
+      zoom: 0.9,
+      backgroundColor: 'var(--theme-color-light-1)',
+    },
+  },
+  {
+    id: 'decor-media-square-03',
+    src: '/decor/decor-18.png',
+    sizes: [{ cols: [3, 6], rows: [3, 6], ratio: [0.75, 1.35] }],
+    meanings: ['media', 'support'],
+    tones: ['orange', 'blue', 'green'],
+    image: {
+      fit: 'cover',
+      position: '50% 46%',
+      x: '-25.5%',
+      zoom: 1.6,
+      backgroundColor: 'var(--theme-color-dark-1)',
+    },
+  },
+  {
+    id: 'decor-support-tall-01',
+    src: '/decor/decor-19.svg',
+    sizes: [{ cols: [3, 5], rows: [3, 9], ratio: [0.35, 1.1] }],
+    meanings: ['support', 'practice'],
+    tones: ['blue', 'orange', 'green'],
+    image: {
+      fit: 'cover',
+      position: '50% 50%',
+    },
+  },
+  photoDecor(
+    1,
+    ['portrait', 'workspace', 'home', 'learning'],
+    ['blue', 'light', 'neutral', 'yellow'],
+    { position: '50% 44%', zoom: 1.06 },
+  ),
+  photoDecor(
+    2,
+    ['portrait', 'workspace', 'learning'],
+    ['blue', 'green', 'dark', 'cool'],
+    { position: '50% 42%', zoom: 1.06 },
+  ),
+  photoDecor(
+    3,
+    ['portrait', 'home', 'learning'],
+    ['orange', 'yellow', 'green', 'dark', 'warm'],
+    { position: '52% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    4,
+    ['portrait', 'workspace', 'learning'],
+    ['blue', 'dark', 'neutral'],
+    { position: '50% 44%', zoom: 1.06 },
+  ),
+  photoDecor(
+    5,
+    ['portrait', 'outdoor', 'learning'],
+    ['blue', 'green', 'light', 'yellow'],
+    { position: '48% 44%', zoom: 1.08 },
+  ),
+  photoDecor(
+    6,
+    ['portrait', 'home', 'learning'],
+    ['green', 'light', 'yellow', 'neutral'],
+    { position: '50% 40%', zoom: 1.04 },
+  ),
+  photoDecor(
+    7,
+    ['portrait', 'home', 'learning'],
+    ['orange', 'blue', 'yellow', 'dark', 'warm'],
+    { position: '50% 0%', zoom: 1.2 },
+  ),
+  photoDecor(
+    8,
+    ['portrait', 'campus', 'learning'],
+    ['orange', 'yellow', 'green', 'neutral', 'warm'],
+    { position: '50% 45%', zoom: 1.06 },
+  ),
+  photoDecor(
+    9,
+    ['portrait', 'home', 'learning'],
+    ['blue', 'light', 'neutral', 'green'],
+    { position: '50% 45%', zoom: 1.05 },
+  ),
+  photoDecor(
+    10,
+    ['portrait', 'home', 'learning'],
+    ['orange', 'yellow', 'dark', 'warm'],
+    { position: '50% 46%', zoom: 1.08 },
+  ),
+])
+
+export const DEFAULT_DECORS = DEFAULT_DECOR_DATA