slidev-theme-practicum 0.1.0 → 0.1.2

package/composables/text-slot-markdown.mjs

@@ -0,0 +1,193 @@
+import { Comment, Fragment, Text as NativeText, isVNode } from 'vue'
+import { dedentMarkdownSource } from './layout-markdown.mjs'
+import { markdownToVnodes } from './markdown-to-vnodes.mjs'
+
+const PASS_THROUGH_BLOCK_TAGS = new Set([
+  'ul',
+  'ol',
+  'blockquote',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'table',
+])
+
+const MARKDOWN_INLINE_PATTERN = /\*\*|__|`|!\[|\[[^\]]+\]\(/
+
+/**
+ * @param {import('vue').VNode | null | undefined} node
+ * @param {string} [separator]
+ * @returns {string}
+ */
+function readVnodePlainText(node, separator = '') {
+  if (!node)
+    return ''
+
+  if (node.type === NativeText)
+    return String(node.children ?? '')
+
+  if (typeof node.children === 'string')
+    return node.children
+
+  if (Array.isArray(node.children)) {
+    return node.children
+      .map(child => isVNode(child) ? readVnodePlainText(child, separator) : String(child ?? ''))
+      .join(separator)
+  }
+
+  return ''
+}
+
+/** @param {import('vue').VNode | null | undefined} node */
+function readPreLikePlainText(node) {
+  return readVnodePlainText(node, '\n')
+}
+
+/** @param {import('vue').VNode | null | undefined} node */
+function isBlankTextNode(node) {
+  return node?.type === NativeText
+    && typeof node.children === 'string'
+    && !node.children.trim()
+}
+
+/** @param {string} source */
+function countOrderedListMarkers(source) {
+  return source.match(/\d+\.\s+/g)?.length ?? 0
+}
+
+/**
+ * @param {string} source
+ */
+function expandInlineOrderedListLines(source) {
+  if (countOrderedListMarkers(source) < 2)
+    return source
+
+  if (source.split(/\r?\n/).filter(line => /^\s*\d+\.\s/.test(line)).length >= 2)
+    return source
+
+  return source.replace(/\s+(?=\d+\.\s+)/g, '\n')
+}
+
+/**
+ * @param {string} source
+ * @returns {string[]}
+ */
+function splitContentLines(source) {
+  return source.trim().split(/\r?\n/).map(line => line.trim()).filter(Boolean)
+}
+
+/**
+ * @param {string} source
+ */
+function looksLikeMarkdown(source) {
+  const trimmed = source.trim()
+
+  if (!trimmed)
+    return false
+
+  if (MARKDOWN_INLINE_PATTERN.test(trimmed))
+    return true
+
+  const lines = splitContentLines(source)
+  const firstLine = lines[0] ?? ''
+
+  if (/^#{1,6}\s/.test(firstLine) || /^>\s/.test(firstLine))
+    return true
+
+  const bulletLines = lines.filter(line => /^[-*+]\s/.test(line))
+  const orderedLines = lines.filter(line => /^\d+\.\s/.test(line))
+
+  if (orderedLines.length >= 2)
+    return true
+
+  if (countOrderedListMarkers(trimmed) >= 2)
+    return true
+
+  if (bulletLines.length >= 2)
+    return true
+
+  if (bulletLines.length === 1 && lines.length === 1)
+    return true
+
+  if (/\n\s*\n/.test(trimmed) && trimmed.split(/\n\s*\n/).map(block => block.trim()).filter(Boolean).length >= 2)
+    return true
+
+  return false
+}
+
+/**
+ * @param {import('vue').VNode[]} nodes
+ * @returns {string | null}
+ */
+function collectMarkdownSource(nodes) {
+  const parts = []
+
+  for (const node of nodes) {
+    if (node.type === Comment || isBlankTextNode(node))
+      continue
+
+    if (node.type === NativeText) {
+      parts.push(String(node.children ?? ''))
+      continue
+    }
+
+    if (node.type === 'pre' || node.type === 'code') {
+      const text = readPreLikePlainText(node)
+
+      if (!text.trim())
+        return null
+
+      parts.push(text)
+      continue
+    }
+
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      const inner = collectMarkdownSource(node.children.filter(isVNode))
+
+      if (inner == null)
+        return null
+
+      parts.push(inner)
+      continue
+    }
+
+    if (typeof node.type === 'string' && PASS_THROUGH_BLOCK_TAGS.has(node.type))
+      return null
+
+    if (node.type === 'p' || node.type === 'div') {
+      const text = readVnodePlainText(node).trim()
+
+      if (text)
+        parts.push(text)
+
+      continue
+    }
+
+    return null
+  }
+
+  const source = dedentMarkdownSource(expandInlineOrderedListLines(parts.join('\n').replace(/\r\n/g, '\n'))).trim()
+
+  return source || null
+}
+
+/**
+ * @param {import('vue').VNode[] | undefined} nodes
+ * @returns {import('vue').VNode[] | null}
+ */
+export function resolveTextSlotMarkdown(nodes) {
+  if (!nodes?.length)
+    return null
+
+  const source = collectMarkdownSource(nodes)
+
+  if (source == null || !looksLikeMarkdown(source))
+    return null
+
+  const parsed = markdownToVnodes(source)
+
+  return parsed.length ? parsed : null
+}

package/composables/text-typography.mjs

@@ -1,5 +1,6 @@
 const NON_BREAKING_SPACE = '\u00a0'
 const RUSSIAN_SPACED_HYPHEN = /(\p{sc=Cyrillic}) - (?=\p{sc=Cyrillic})/gu
+const RUSSIAN_SPACED_EM_DASH = /(\p{sc=Cyrillic}) (?=—)/gu
 const TEXT_NODE_FILTER = 4
 const FILTER_ACCEPT = 1
 const FILTER_REJECT = 2
@@ -94,6 +95,7 @@ export function typographText(value, options = {}) {
   return value
     .replace(serviceWordPattern, `$1${NON_BREAKING_SPACE}`)
     .replace(RUSSIAN_SPACED_HYPHEN, `$1${NON_BREAKING_SPACE}— `)
+    .replace(RUSSIAN_SPACED_EM_DASH, `$1${NON_BREAKING_SPACE}`)
 }
 
 /**

package/composables/theme-assets.mjs

@@ -0,0 +1,60 @@
+const THEME_ASSET_PREFIX = '/theme'
+const THEME_ASSET_ORIGIN = 'https://theme-assets.invalid'
+
+function unsafeThemeAssetPath() {
+  throw new Error('theme asset path содержит небезопасные сегменты')
+}
+
+export function themeAssetPath(path = '') {
+  const source = String(path)
+  const pathPart = source.split(/[?#]/, 1)[0]
+
+  if (pathPart.includes('\\'))
+    unsafeThemeAssetPath()
+
+  const segments = pathPart
+    .replace(/^\/+/, '')
+    .split('/')
+    .filter(Boolean)
+
+  for (const segment of segments) {
+    let decoded = ''
+
+    try {
+      decoded = decodeURIComponent(segment)
+    }
+    catch {
+      unsafeThemeAssetPath()
+    }
+
+    if (decoded === '.' || decoded === '..' || decoded.includes('/') || decoded.includes('\\'))
+      unsafeThemeAssetPath()
+  }
+
+  const normalized = `/${source.replace(/^\/+/, '')}`
+  const normalizedPathPart = normalized.split(/[?#]/, 1)[0]
+  const candidate = normalizedPathPart === THEME_ASSET_PREFIX
+    || normalizedPathPart.startsWith(`${THEME_ASSET_PREFIX}/`)
+    ? normalized
+    : `${THEME_ASSET_PREFIX}${normalized}`
+  const url = new URL(candidate, THEME_ASSET_ORIGIN)
+
+  if (url.pathname !== THEME_ASSET_PREFIX && !url.pathname.startsWith(`${THEME_ASSET_PREFIX}/`))
+    unsafeThemeAssetPath()
+
+  return candidate
+}
+
+/**
+ * @param {number} number
+ */
+export function themePhotoPath(number) {
+  return themeAssetPath(`/photos/photo-${number}.webp`)
+}
+
+/**
+ * @param {string} file
+ */
+export function themeDecorPath(file) {
+  return themeAssetPath(`/decor/${String(file).replace(/^\/+/, '')}`)
+}

package/composables/timeline-grid.ts

@@ -0,0 +1,27 @@
+export interface TimelineGridItem {
+  active?: boolean
+}
+
+export function resolveTimelineItemGridStyle(
+  items: readonly TimelineGridItem[],
+  index: number,
+) {
+  const count = items.length || 1
+  const activeItemIndices = items.flatMap((item, itemIndex) => item.active ? [itemIndex] : [])
+
+  if (count === 3 && activeItemIndices.length === 1) {
+    const activeIndex = activeItemIndices[0]
+    const spans = 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}` }
+}

package/composables/typescript-require.cjs

@@ -0,0 +1,29 @@
+const { readFileSync } = require('node:fs')
+const ts = require('typescript')
+
+/** @typedef {NodeJS.Module & { _compile(source: string, filename: string): void }} CompilableModule */
+
+let registered = false
+
+function registerTypeScript() {
+  if (registered)
+    return
+
+  require.extensions['.ts'] = (module, filename) => {
+    const compilableModule = /** @type {CompilableModule} */ (module)
+    const source = readFileSync(filename, 'utf8')
+    const { outputText } = ts.transpileModule(source, {
+      compilerOptions: {
+        module: ts.ModuleKind.CommonJS,
+        target: ts.ScriptTarget.ES2022,
+      },
+      fileName: filename,
+    })
+
+    compilableModule._compile(outputText, filename)
+  }
+
+  registered = true
+}
+
+module.exports = { registerTypeScript }

package/composables/validate-deck-layouts.cjs

@@ -0,0 +1,277 @@
+const { readFileSync } = require('node:fs')
+const { isAbsolute, join, resolve } = require('node:path')
+const { parseSync } = require('@slidev/parser')
+const { createCommentVNode, createTextVNode, createVNode } = require('vue')
+const { registerTypeScript } = require('./typescript-require.cjs')
+const { extractDeckLiveStructure } = require('./deck-slot-markup.cjs')
+const { markdownToVnodes } = require('./markdown-to-vnodes.cjs')
+
+/** @typedef {import('@slidev/types').SourceSlideInfo} SourceSlideInfo */
+/** @typedef {import('./layout-recipes').ThemeLayout} ThemeLayout */
+/** @typedef {import('./layout-recipes').ThemeLayoutRole} ThemeLayoutRole */
+/** @typedef {{ role: string, hasCoordinates: boolean, label: string }} ExplicitSlotIntent */
+/**
+ * @typedef {(
+ *   | { kind: 'comment' }
+ *   | { kind: 'text', content: string }
+ *   | { kind: 'element', tag: string, props: Record<string, unknown>, children: DeckLiveNode[] }
+ * )} DeckLiveNode
+ */
+/** @typedef {{ index: number, page: number, layout: string, variant: string, title: string, label: string }} SlideReference */
+/** @typedef {SlideReference & { message: string, hint?: string }} DeckValidationIssue */
+
+const THEME_ROOT = join(__dirname, '..')
+/** @type {Set<ThemeLayout>} */
+const THEME_LAYOUTS = new Set(['cover', 'message', 'explainer', 'collection'])
+
+/** @param {...string} segments */
+function themePath(...segments) {
+  return join(THEME_ROOT, ...segments)
+}
+
+/**
+ * @param {string} value
+ * @returns {value is ThemeLayout}
+ */
+function isThemeLayout(value) {
+  return THEME_LAYOUTS.has(/** @type {ThemeLayout} */ (value))
+}
+
+registerTypeScript()
+
+const { compileLayoutAuthoring } = require(themePath('composables/layout-authoring.ts'))
+const { hasLayoutShorthand } = require(themePath('composables/layout-shorthands.ts'))
+const {
+  resolveLayoutSlotSpec,
+  resolveLayoutVariant,
+} = require(themePath('composables/layout-recipes.ts'))
+const { createSlotRules } = require(themePath('composables/slot-rules.ts'))
+
+/** @returns {Record<string, import('vue').Component>} */
+function stubComponents() {
+  /** @param {string} name */
+  const named = name => ({ name })
+  return {
+    Image: named('Image'),
+    Person: named('Person'),
+    Slot: named('Slot'),
+    Text: named('Text'),
+    Timeline: named('Timeline'),
+  }
+}
+
+function stripAuthorNotes(content = '') {
+  return String(content).replace(/<!--[\s\S]*?-->/g, '').trim()
+}
+
+/**
+ * @param {DeckLiveNode} node
+ * @param {ReturnType<typeof stubComponents>} components
+ * @returns {import('vue').VNode}
+ */
+function liveNodeToVNode(node, components) {
+  if (node.kind === 'comment')
+    return createCommentVNode()
+
+  if (node.kind === 'text')
+    return createTextVNode(node.content)
+
+  const component = components[node.tag] ?? node.tag
+  return createVNode(
+    component,
+    node.props,
+    node.children.map(child => liveNodeToVNode(child, components)),
+  )
+}
+
+/**
+ * @param {ExplicitSlotIntent[]} intents
+ * @param {{ Slot: import('vue').Component, layout: ThemeLayout, variant: string }} input
+ */
+function validateExplicitSlotIntents(intents, input) {
+  const slotRules = createSlotRules({ Slot: input.Slot })
+  const roleIndices = new Map()
+
+  for (const intent of intents) {
+    const node = createVNode(input.Slot, {
+      role: intent.role,
+      label: intent.label,
+      area: intent.hasCoordinates ? 'explicit' : '',
+    })
+    slotRules.assertLayoutChild(node, {
+      label: `${input.layout}:${input.variant}`,
+    })
+
+    const index = roleIndices.get(intent.role) ?? 0
+    resolveLayoutSlotSpec(
+      input.layout,
+      input.variant,
+      /** @type {ThemeLayoutRole} */ (intent.role),
+      index,
+    )
+    roleIndices.set(intent.role, index + 1)
+  }
+}
+
+/**
+ * @param {SourceSlideInfo} slide
+ * @param {number} index
+ * @returns {SlideReference}
+ */
+function slideRef(slide, index) {
+  const layout = String(slide.frontmatter?.layout ?? '').trim()
+  const variant = String(slide.frontmatter?.variant ?? '').trim()
+  const title = String(slide.title || slide.content?.match(/^#\s+(.+)/m)?.[1] || '').trim()
+  return {
+    index,
+    page: index + 1,
+    layout,
+    variant,
+    title: title.slice(0, 80),
+    label: `${layout}:${variant || '-'}`,
+  }
+}
+
+/**
+ * @param {string} deckPath
+ * @returns {Promise<DeckValidationIssue[]>}
+ */
+async function validateDeckLayouts(deckPath) {
+  const absolutePath = isAbsolute(deckPath) ? deckPath : resolve(deckPath)
+  const source = readFileSync(absolutePath, 'utf8')
+  const deck = parseSync(source, absolutePath)
+  const components = stubComponents()
+  /** @type {DeckValidationIssue[]} */
+  const issues = []
+
+  for (const [index, slide] of deck.slides.entries()) {
+    const layout = String(slide.frontmatter?.layout ?? '').trim()
+    if (!isThemeLayout(layout))
+      continue
+
+    const rawVariant = String(slide.frontmatter?.variant ?? '').trim()
+    const arrangement = String(slide.frontmatter?.arrangement ?? '').trim()
+    const ref = slideRef(slide, index)
+    /** @type {string} */
+    let variant
+
+    try {
+      variant = resolveLayoutVariant(layout, rawVariant, arrangement)
+    }
+    catch (error) {
+      const hint = error && typeof error === 'object' && 'hint' in error ? error.hint : undefined
+      issues.push({
+        ...ref,
+        message: error instanceof Error ? error.message : String(error),
+        hint: typeof hint === 'string' ? hint : undefined,
+      })
+      continue
+    }
+
+    const shorthandKey = `${layout}:${variant}`
+
+    let liveStructure
+    try {
+      liveStructure = extractDeckLiveStructure(slide.content ?? '')
+    }
+    catch (error) {
+      const hint = error && typeof error === 'object' && 'hint' in error ? error.hint : undefined
+      issues.push({
+        ...ref,
+        message: error instanceof Error ? error.message : String(error),
+        hint: typeof hint === 'string' ? hint : undefined,
+      })
+      continue
+    }
+
+    if (liveStructure.intents.length) {
+      try {
+        compileLayoutAuthoring({
+          props: {
+            layout,
+            variant: rawVariant,
+            arrangement,
+            mode: slide.frontmatter?.mode,
+            tone: slide.frontmatter?.tone ?? '',
+          },
+          frontmatter: slide.frontmatter ?? {},
+          children: liveStructure.children.map(node => liveNodeToVNode(node, components)),
+          components,
+          defaultTone: 'blue',
+        })
+        validateExplicitSlotIntents(liveStructure.intents, {
+          Slot: components.Slot,
+          layout,
+          variant,
+        })
+      }
+      catch (error) {
+        const hint = error && typeof error === 'object' && 'hint' in error ? error.hint : undefined
+        issues.push({
+          ...ref,
+          message: error instanceof Error ? error.message : String(error),
+          hint: typeof hint === 'string' ? hint : undefined,
+        })
+      }
+      continue
+    }
+
+    if (!hasLayoutShorthand(shorthandKey) && layout !== 'cover')
+      continue
+
+    const content = stripAuthorNotes(slide.content ?? '')
+
+    try {
+      compileLayoutAuthoring({
+        props: {
+          layout,
+          variant: rawVariant,
+          arrangement,
+          mode: slide.frontmatter?.mode,
+          tone: slide.frontmatter?.tone ?? '',
+        },
+        frontmatter: slide.frontmatter ?? {},
+        children: markdownToVnodes(content),
+        components,
+        defaultTone: 'blue',
+      })
+    }
+    catch (error) {
+      const hint = error && typeof error === 'object' && 'hint' in error ? error.hint : undefined
+      issues.push({
+        ...ref,
+        message: error instanceof Error ? error.message : String(error),
+        hint: typeof hint === 'string' ? hint : undefined,
+      })
+    }
+  }
+
+  return issues
+}
+
+/**
+ * @param {DeckValidationIssue[]} issues
+ * @param {string} [deckPath]
+ */
+function formatDeckLayoutIssues(issues, deckPath = 'deck') {
+  if (!issues.length)
+    return ''
+
+  const body = issues.map((issue) => {
+    const lines = [
+      `Слайд ${issue.page} (${issue.label})${issue.title ? `: «${issue.title}»` : ''}`,
+      `  ${issue.message}`,
+    ]
+    if (issue.hint)
+      lines.push(`  Подсказка: ${issue.hint}`)
+    lines.push('  См. example.md в slidev-theme-practicum (заметки «Контракт»).')
+    return lines.join('\n')
+  }).join(`\n\n${'—'.repeat(40)}\n\n`)
+
+  return `${body}\n\nКолода: ${deckPath}\n`
+}
+
+module.exports = {
+  formatDeckLayoutIssues,
+  validateDeckLayouts,
+}

package/decor-library.md

@@ -7,4 +7,6 @@ themeConfig:
   debugGrid: false
 ---
 
+<!-- Встроенные файлы предпросмотра загружаются по префиксу /theme. -->
+
 <DecorLibrary />