slidev-theme-practicum 0.1.0 → 0.1.3

package/composables/decor-catalog.mjs

@@ -1,3 +1,5 @@
+import { themeDecorPath, themePhotoPath } from './theme-assets.mjs'
+
 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] },
@@ -12,7 +14,7 @@ const PHOTO_DECOR_SIZES = Object.freeze([
 function photoDecor(number, meanings, tones, image = {}) {
   return {
     id: `decor-photo-${String(number).padStart(2, '0')}`,
-    src: `/photos/photo-${number}.png`,
+    src: themePhotoPath(number),
     sizes: PHOTO_DECOR_SIZES,
     meanings: ['photo', ...meanings],
     tones,
@@ -28,7 +30,7 @@ function photoDecor(number, meanings, tones, image = {}) {
 export const DEFAULT_DECOR_DATA = Object.freeze([
   {
     id: 'decor-cover-band-01',
-    src: '/decor/decor-1.svg',
+    src: themeDecorPath('decor-1.svg'),
     sizes: [{ cols: [3, 8], rows: [2, 5], ratio: [1, 1.5] }],
     meanings: ['cover', 'hero', 'course'],
     tones: ['green', 'orange', 'blue'],
@@ -40,7 +42,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-raster-01',
-    src: '/decor/decor-2.png',
+    src: themeDecorPath('decor-2.png'),
     sizes: [{ cols: [2, 6], rows: [2, 6], ratio: [0.75, 1.2] }],
     meanings: ['support', 'media'],
     tones: ['orange', 'light', 'warm'],
@@ -53,7 +55,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-square-orbit-01',
-    src: '/decor/decor-3.svg',
+    src: themeDecorPath('decor-3.svg'),
     sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
     meanings: ['qa', 'testing', 'practice'],
     tones: ['blue', 'orange', 'green'],
@@ -65,7 +67,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-wide-01',
-    src: '/decor/decor-4.svg',
+    src: themeDecorPath('decor-4.svg'),
     sizes: [{ cols: [4, 8], rows: [2, 8], ratio: [1, 4] }],
     meanings: ['support', 'learning'],
     tones: ['green', 'blue', 'orange'],
@@ -77,7 +79,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-raster-02',
-    src: '/decor/decor-5.png',
+    src: themeDecorPath('decor-5.png'),
     sizes: [
       { cols: 6, rows: 5 },
       { cols: 6, rows: 6 },
@@ -97,7 +99,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-raster-03',
-    src: '/decor/decor-6.png',
+    src: themeDecorPath('decor-6.png'),
     sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
     meanings: ['support', 'media'],
     tones: ['orange', 'warm'],
@@ -109,7 +111,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-media-square-01',
-    src: '/decor/decor-7.png',
+    src: themeDecorPath('decor-7.png'),
     sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
     meanings: ['media', 'practice', 'support'],
     tones: ['blue', 'orange', 'green'],
@@ -122,7 +124,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-cover-vertical-01',
-    src: '/decor/decor-8.svg',
+    src: themeDecorPath('decor-8.svg'),
     sizes: [{ cols: [2, 4], rows: [3, 8], ratio: [0.25, 0.95] }],
     meanings: ['cover', 'hero', 'course'],
     tones: ['orange', 'green', 'blue'],
@@ -134,7 +136,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-cover-ribbon-01',
-    src: '/decor/decor-9.svg',
+    src: themeDecorPath('decor-9.svg'),
     sizes: [{ cols: [4, 8], rows: [2, 4], ratio: [1.4, 4] }],
     meanings: ['cover', 'hero', 'support'],
     tones: ['orange', 'blue', 'green'],
@@ -146,7 +148,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-rules-wide-01',
-    src: '/decor/decor-10.svg',
+    src: themeDecorPath('decor-10.svg'),
     sizes: [{ cols: [4, 12], rows: [3, 6], ratio: [1.4, 4] }],
     meanings: ['rules', 'webinar', 'qa'],
     tones: ['green', 'dark', 'blue', 'orange'],
@@ -163,7 +165,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-agenda-tall-01',
-    src: '/decor/decor-11.svg',
+    src: themeDecorPath('decor-11.svg'),
     sizes: [{ cols: [3, 4], rows: [8, 12], ratio: [0.25, 0.55] }],
     meanings: ['agenda', 'toc'],
     tones: ['blue', 'orange', 'green', 'dark'],
@@ -176,7 +178,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-signal-tall-01',
-    src: '/decor/decor-12.svg',
+    src: themeDecorPath('decor-12.svg'),
     sizes: [{ cols: [2, 4], rows: [4, 12], ratio: [0.2, 0.8] }],
     meanings: ['signal', 'cover', 'hero'],
     tones: ['blue', 'orange', 'green'],
@@ -188,7 +190,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-compact-01',
-    src: '/decor/decor-13.svg',
+    src: themeDecorPath('decor-13.svg'),
     sizes: [{ cols: [2, 6], rows: [2, 6], ratio: [0.75, 1.35] }],
     meanings: ['support', 'practice'],
     tones: ['green', 'blue', 'orange'],
@@ -200,7 +202,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-panel-vertical-01',
-    src: '/decor/decor-14.svg',
+    src: themeDecorPath('decor-14.svg'),
     sizes: [{ cols: [3, 5], rows: [4, 7], ratio: [0.45, 0.95] }],
     meanings: ['support', 'rules', 'qa'],
     tones: ['orange', 'blue', 'green'],
@@ -214,7 +216,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-wide-02',
-    src: '/decor/decor-15.svg',
+    src: themeDecorPath('decor-15.svg'),
     sizes: [{ cols: [4, 8], rows: [2, 5], ratio: [1.2, 4] }],
     meanings: ['support', 'learning'],
     tones: ['orange', 'green', 'blue'],
@@ -226,7 +228,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-wide-03',
-    src: '/decor/decor-16.svg',
+    src: themeDecorPath('decor-16.svg'),
     sizes: [{ cols: [5, 9], rows: [2, 4], ratio: [1.4, 4.5] }],
     meanings: ['support', 'learning'],
     tones: ['blue', 'green', 'orange'],
@@ -238,7 +240,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-media-square-02',
-    src: '/decor/decor-17.png',
+    src: themeDecorPath('decor-17.png'),
     sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
     meanings: ['media', 'support'],
     tones: ['green', 'orange', 'blue'],
@@ -251,7 +253,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-media-square-03',
-    src: '/decor/decor-18.png',
+    src: themeDecorPath('decor-18.png'),
     sizes: [{ cols: [3, 6], rows: [3, 6], ratio: [0.75, 1.35] }],
     meanings: ['media', 'support'],
     tones: ['orange', 'blue', 'green'],
@@ -265,7 +267,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-tall-01',
-    src: '/decor/decor-19.svg',
+    src: themeDecorPath('decor-19.svg'),
     sizes: [{ cols: [3, 5], rows: [3, 9], ratio: [0.35, 1.1] }],
     meanings: ['support', 'practice'],
     tones: ['blue', 'orange', 'green'],
@@ -277,62 +279,182 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   photoDecor(
     1,
     ['portrait', 'workspace', 'home', 'learning'],
-    ['blue', 'light', 'neutral', 'yellow'],
+    ['orange', 'yellow', 'light', 'neutral', 'warm'],
     { position: '50% 44%', zoom: 1.06 },
   ),
   photoDecor(
     2,
-    ['portrait', 'workspace', 'learning'],
-    ['blue', 'green', 'dark', 'cool'],
+    ['portrait', 'workspace', 'outdoor', 'learning'],
+    ['orange', 'blue', 'green', 'yellow', 'warm'],
     { position: '50% 42%', zoom: 1.06 },
   ),
   photoDecor(
     3,
-    ['portrait', 'home', 'learning'],
-    ['orange', 'yellow', 'green', 'dark', 'warm'],
-    { position: '52% 45%', zoom: 1.04 },
+    ['portrait', 'workspace', 'office', 'learning'],
+    ['orange', 'yellow', 'dark', 'warm', 'neutral'],
+    { position: '50% 44%', zoom: 1.04 },
   ),
   photoDecor(
     4,
-    ['portrait', 'workspace', 'learning'],
-    ['blue', 'dark', 'neutral'],
-    { position: '50% 44%', zoom: 1.06 },
+    ['portrait', 'transit', 'workspace', 'learning'],
+    ['blue', 'green', 'light', 'yellow', 'cool'],
+    { position: '42% 42%', zoom: 1.06 },
   ),
   photoDecor(
     5,
-    ['portrait', 'outdoor', 'learning'],
-    ['blue', 'green', 'light', 'yellow'],
-    { position: '48% 44%', zoom: 1.08 },
+    ['portrait', 'workshop', 'outdoor', 'learning'],
+    ['blue', 'dark', 'cool', 'neutral'],
+    { position: '50% 40%', zoom: 1.08 },
   ),
   photoDecor(
     6,
-    ['portrait', 'home', 'learning'],
-    ['green', 'light', 'yellow', 'neutral'],
-    { position: '50% 40%', zoom: 1.04 },
+    ['portrait', 'workspace', 'home', 'learning'],
+    ['blue', 'dark', 'cool', 'neutral'],
+    { position: '50% 44%', zoom: 1.04 },
   ),
   photoDecor(
     7,
-    ['portrait', 'home', 'learning'],
-    ['orange', 'blue', 'yellow', 'dark', 'warm'],
-    { position: '50% 0%', zoom: 1.2 },
+    ['portrait', 'workspace', 'outdoor', 'learning'],
+    ['green', 'yellow', 'neutral', 'warm'],
+    { position: '50% 45%', zoom: 1.04 },
   ),
   photoDecor(
     8,
-    ['portrait', 'campus', 'learning'],
-    ['orange', 'yellow', 'green', 'neutral', 'warm'],
-    { position: '50% 45%', zoom: 1.06 },
+    ['workspace', 'programming', 'home', 'learning'],
+    ['orange', 'yellow', 'light', 'neutral', 'warm'],
+    { position: '50% 44%', zoom: 1.02 },
   ),
   photoDecor(
     9,
-    ['portrait', 'home', 'learning'],
-    ['blue', 'light', 'neutral', 'green'],
-    { position: '50% 45%', zoom: 1.05 },
+    ['portrait', 'workspace', 'learning'],
+    ['orange', 'yellow', 'light', 'neutral', 'warm'],
+    { position: '50% 44%', zoom: 1.05 },
   ),
   photoDecor(
     10,
-    ['portrait', 'home', 'learning'],
-    ['orange', 'yellow', 'dark', 'warm'],
-    { position: '50% 46%', zoom: 1.08 },
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['orange', 'green', 'yellow', 'warm', 'neutral'],
+    { position: '50% 44%', zoom: 1.05 },
+  ),
+  photoDecor(
+    11,
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['blue', 'dark', 'cool', 'neutral'],
+    { position: '50% 42%', zoom: 1.06 },
+  ),
+  photoDecor(
+    12,
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['green', 'blue', 'yellow', 'cool', 'neutral'],
+    { position: '50% 44%', zoom: 1.06 },
+  ),
+  photoDecor(
+    13,
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['blue', 'light', 'cool', 'neutral'],
+    { position: '50% 43%', zoom: 1.06 },
+  ),
+  photoDecor(
+    14,
+    ['portrait', 'outdoor', 'hero'],
+    ['blue', 'green', 'light', 'cool', 'neutral'],
+    { position: '50% 42%', zoom: 1.05 },
+  ),
+  photoDecor(
+    15,
+    ['portrait', 'outdoor', 'hero'],
+    ['orange', 'blue', 'warm', 'light'],
+    { position: '50% 47%', zoom: 1.04 },
+  ),
+  photoDecor(
+    16,
+    ['portrait', 'outdoor', 'hero'],
+    ['blue', 'dark', 'cool'],
+    { position: '50% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    17,
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['blue', 'green', 'cool', 'neutral'],
+    { position: '50% 44%', zoom: 1.04 },
+  ),
+  photoDecor(
+    18,
+    ['portrait', 'outdoor', 'mobile', 'community'],
+    ['blue', 'green', 'neutral', 'cool'],
+    { position: '50% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    19,
+    ['portrait', 'outdoor', 'learning'],
+    ['blue', 'light', 'cool', 'neutral'],
+    { position: '50% 45%', zoom: 1.06 },
+  ),
+  photoDecor(
+    20,
+    ['group', 'community', 'collaboration'],
+    ['orange', 'warm', 'light', 'neutral'],
+    { position: '50% 45%', zoom: 1.05 },
+  ),
+  photoDecor(
+    21,
+    ['group', 'workspace', 'collaboration', 'learning'],
+    ['orange', 'warm', 'light', 'neutral'],
+    { position: '50% 45%', zoom: 1.03 },
+  ),
+  photoDecor(
+    22,
+    ['group', 'community', 'outdoor'],
+    ['blue', 'green', 'light', 'cool', 'neutral'],
+    { position: '50% 43%', zoom: 1.04 },
+  ),
+  photoDecor(
+    23,
+    ['group', 'community', 'outdoor'],
+    ['blue', 'light', 'cool', 'neutral'],
+    { position: '50% 46%', zoom: 1.04 },
+  ),
+  photoDecor(
+    24,
+    ['group', 'community', 'collaboration'],
+    ['green', 'orange', 'warm', 'light', 'neutral'],
+    { position: '50% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    25,
+    ['group', 'workshop', 'collaboration', 'learning'],
+    ['green', 'orange', 'warm', 'light'],
+    { position: '50% 44%', zoom: 1.03 },
+  ),
+  photoDecor(
+    26,
+    ['group', 'community', 'office', 'collaboration'],
+    ['blue', 'green', 'light', 'neutral', 'cool'],
+    { position: '50% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    27,
+    ['group', 'community', 'mobile', 'outdoor'],
+    ['blue', 'light', 'cool', 'neutral'],
+    { position: '50% 46%', zoom: 1.04 },
+  ),
+  photoDecor(
+    28,
+    ['portrait', 'workspace', 'office', 'learning'],
+    ['light', 'neutral', 'orange', 'warm'],
+    { position: '50% 45%', zoom: 1.05 },
+  ),
+  photoDecor(
+    29,
+    ['portrait', 'outdoor', 'hero'],
+    ['orange', 'blue', 'green', 'warm', 'light'],
+    { position: '50% 45%', zoom: 1.06 },
+  ),
+  photoDecor(
+    30,
+    ['portrait', 'outdoor', 'hero'],
+    ['blue', 'orange', 'cool', 'neutral'],
+    { position: '62% 42%', zoom: 1.08 },
   ),
 ])
 

package/composables/layout-authoring.ts

@@ -10,12 +10,16 @@ import {
 import {
   resolveLayoutSpec,
   resolveLayoutVariant,
+  resolveLayoutRecipe,
+  resolveLayoutSlotProps,
+  THEME_LAYOUT_ROLES,
   type ThemeLayout,
   type ThemeLayoutHeader,
   type ThemeLayoutRole,
+  type ThemeLayoutRecipe,
+  type ThemeLayoutSpec,
   type ThemeLayoutSlotSpec,
-} from './layout-registry'
-import { resolveLayoutRecipe, resolveLayoutSlotProps, THEME_LAYOUT_ROLES, type ThemeLayoutRecipe, type ThemeLayoutSpec } from './layout-recipes'
+} from './layout-recipes'
 import { isBlankTextVNode, isCommentVNode } from './layout-vnode'
 import { createSlotRules, type SlotRules } from './slot-rules'
 import {

package/composables/layout-markdown.mjs

@@ -1,3 +1,36 @@
+const INLINE_WHITESPACE = /[ \t\r\n\f\v]+/g
+
+/**
+ * @param {string} value
+ */
+export function normalizeInlineText(value) {
+  return value.replace(INLINE_WHITESPACE, ' ').trim()
+}
+
+/**
+ * @param {string} source
+ */
+export function dedentMarkdownSource(source) {
+  const lines = String(source ?? '').replace(/\r\n/g, '\n').split('\n')
+  const nonEmpty = lines.filter(line => line.trim())
+
+  if (!nonEmpty.length)
+    return ''
+
+  const minIndent = Math.min(...nonEmpty.map((line) => {
+    const match = line.match(/^(\s*)/)
+    return match ? match[1].length : 0
+  }))
+
+  if (!minIndent)
+    return source.trim()
+
+  return lines
+    .map(line => (line.trim() ? line.slice(minIndent) : line))
+    .join('\n')
+    .trim()
+}
+
 /**
  * @param {unknown} input
  * @returns {{ level: number, text: string } | null}

package/composables/layout-recipes.ts

@@ -167,8 +167,7 @@ export const LAYOUT_RECIPES: ThemeLayoutRecipe[] = [
       content: 'closing',
       aliases: [{ variant: 'closing' }],
       regions: {
-        primary: { area: '4 / 2 / 10 / 12', centered: true },
-        support: '12 / 1 / -1 / 4',
+        primary: { area: '1 / 2 / -1 / 12', centered: true },
       },
     },
   ]),
@@ -177,7 +176,7 @@ export const LAYOUT_RECIPES: ThemeLayoutRecipe[] = [
       content: 'title-supports',
       aliases: [{ variant: 'title-supports' }],
       regions: {
-        primary: '2 / 1 / -1 / 7',
+        primary: { area: '2 / 1 / -1 / 7', marginRight: 4 },
         secondary: '2 / 7 / -1 / -1',
       },
     },
@@ -224,8 +223,8 @@ export const LAYOUT_RECIPES: ThemeLayoutRecipe[] = [
       content: 'agenda',
       aliases: [{ variant: 'agenda' }],
       regions: {
-        primary: { area: '1 / 1 / -1 / 9', margin: 4 },
-        media: '1 / 9 / -1 / -1',
+        primary: { area: '1 / 1 / -1 / 10', margin: 4 },
+        media: '1 / 10 / -1 / -1',
       },
     },
     {
@@ -312,6 +311,30 @@ export const LAYOUT_RECIPES: ThemeLayoutRecipe[] = [
         ],
       },
     },
+    {
+      content: 'facts',
+      aliases: [{ variant: 'facts-duo' }, { variant: 'facts', arrangement: 'duo' }],
+      regions: {
+        primary: { area: '2 / 1 / 6 / -1' },
+        support: [
+          { area: '6 / 1 / -1 / 7', surface: 'light', margin: 3 },
+          { area: '6 / 7 / -1 / -1', surface: 'light', margin: 3 },
+        ],
+      },
+    },
+    {
+      content: 'facts',
+      aliases: [{ variant: 'facts-quartet' }, { variant: 'facts', arrangement: 'quartet' }],
+      regions: {
+        primary: { area: '2 / 1 / 6 / -1' },
+        support: [
+          { area: '6 / 1 / -1 / 4', surface: 'light', margin: 3 },
+          { area: '6 / 4 / -1 / 7', surface: 'light', margin: 3 },
+          { area: '6 / 7 / -1 / 10', surface: 'light', margin: 3 },
+          { area: '6 / 10 / -1 / -1', surface: 'light', margin: 3 },
+        ],
+      },
+    },
     {
       content: 'facts',
       aliases: [{ variant: 'facts-featured' }, { variant: 'facts', arrangement: 'featured' }],
@@ -345,3 +368,26 @@ export function resolveLayoutRecipe(layout: ThemeLayout, variant: string, arrang
 
   return recipe
 }
+
+export function resolveLayoutVariant(layout: ThemeLayout | '', variant: string, arrangement = '') {
+  if (!layout)
+    return variant.trim()
+
+  return resolveLayoutRecipe(layout, variant, arrangement).aliases[0].variant
+}
+
+export function resolveLayoutSpec(layout: ThemeLayout, variant: string) {
+  return normalizeRecipeRegions(resolveLayoutRecipe(layout, variant))
+}
+
+export function resolveLayoutSlotSpec(
+  layout: ThemeLayout,
+  variant: string,
+  role: ThemeLayoutRole,
+  index: number,
+) {
+  const resolved = resolveLayoutSpec(layout, variant).slots[role]?.[index]
+  if (!resolved)
+    fail('Slide', `Variant "${layout}:${variant}" не поддерживает ${role}[${index}].`)
+  return resolved
+}