slidev-theme-practicum 0.1.4 → 0.3.0

package/scripts/browser-smoke.mjs

@@ -10,8 +10,28 @@ import {
 
 const PROJECT_ROOT = resolve(import.meta.dirname, '..')
 const DIST_DIR = resolve(PROJECT_ROOT, 'dist')
-const REPRESENTATIVE_SLIDES = [1, 9, 15, 20, 32, 40, 41]
+const EXPECTED_DOCUMENT_TITLE = 'Яндекс Практикум — справочная галерея - Slidev'
+const REPRESENTATIVE_SLIDES = [1, 9, 15, 20, 38, 46, 47]
 const VISUAL_ONLY_SLIDES = [17, 18]
+const P0_REGRESSION_SLIDES = [23, 24, 25, 26, 27, 28]
+const P0_FRONTMATTER_TEXT = {
+  23: {
+    selector: '.Slide_variant_comparison-before-after',
+    values: ['«Я просто запомнил формулу»', '«Я выбрал формулу по условию»'],
+  },
+  24: {
+    selector: '.Slide_variant_comparison-stable-variable',
+    values: ['Научиться проверять гипотезу', 'Данные и уровень подсказок'],
+  },
+  25: {
+    selector: '.Slide-StepsGrid_linear',
+    values: ['Назвать цель', 'Дать контекст', 'Показать пример', 'Оставить практику', 'Проверить критерий', 'Закрепить вывод'],
+  },
+  26: {
+    selector: '.Slide-StepsGrid_staggered',
+    values: ['Заметить сбой', 'Повторить шаг', 'Найти правило', 'Изменить подход', 'Записать вывод'],
+  },
+}
 const LIFECYCLE_EVENT = 'practicum:slide-lifecycle'
 const LIFECYCLE_STATE_KEY = '__practicumBrowserLifecycle'
 const THEME_MEDIA = [
@@ -39,6 +59,10 @@ function assertNoDiagnostics(label, diagnostics) {
   )
 }
 
+function normalizeVisibleText(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
 async function settleSlide(page) {
   await page.evaluate(async () => {
     await Promise.race([
@@ -168,6 +192,122 @@ async function assertClosingLayout(slide, slideNumber, expectedTextCount) {
   )
 }
 
+async function assertStaggeredStepsLayout(slide, slideNumber) {
+  const grid = slide.locator('.Slide-StepsGrid_staggered')
+  const cards = grid.locator(':scope > .Slide-Step')
+  const cardCount = await cards.count()
+
+  assert.equal(cardCount, 5, `слайд ${slideNumber}: staggered должен содержать ровно 5 карточек`)
+
+  const [gridBox, cardBoxes, placements] = await Promise.all([
+    grid.boundingBox(),
+    Promise.all(Array.from({ length: cardCount }, (_, index) => cards.nth(index).boundingBox())),
+    cards.evaluateAll(elements => elements.map((element) => {
+      const style = getComputedStyle(element)
+
+      return {
+        columnEnd: style.gridColumnEnd,
+        columnStart: style.gridColumnStart,
+        rowEnd: style.gridRowEnd,
+        rowStart: style.gridRowStart,
+      }
+    })),
+  ])
+
+  assert.ok(gridBox, `слайд ${slideNumber}: не найдена геометрия staggered grid`)
+  assert.ok(cardBoxes.every(Boolean), `слайд ${slideNumber}: не найдена геометрия всех staggered-карточек`)
+  assert.deepEqual(placements, [
+    { columnEnd: '3', columnStart: '1', rowEnd: '2', rowStart: '1' },
+    { columnEnd: '5', columnStart: '3', rowEnd: '2', rowStart: '1' },
+    { columnEnd: '7', columnStart: '5', rowEnd: '2', rowStart: '1' },
+    { columnEnd: '4', columnStart: '2', rowEnd: '3', rowStart: '2' },
+    { columnEnd: '6', columnStart: '4', rowEnd: '3', rowStart: '2' },
+  ], `слайд ${slideNumber}: staggered должен использовать центрированную геометрию 3+2`)
+
+  const boxes = cardBoxes
+  const topY = boxes[0].y
+  const bottomY = boxes[3].y
+
+  assert.ok(
+    boxes.slice(0, 3).every(box => Math.abs(box.y - topY) <= 1),
+    `слайд ${slideNumber}: первые три staggered-карточки должны быть в верхнем ряду`,
+  )
+  assert.ok(
+    boxes.slice(3).every(box => Math.abs(box.y - bottomY) <= 1) && bottomY > topY,
+    `слайд ${slideNumber}: последние две staggered-карточки должны быть в нижнем ряду`,
+  )
+
+  const lowerCenter = (boxes[3].x + boxes[4].x + boxes[4].width) / 2
+  const gridCenter = gridBox.x + gridBox.width / 2
+
+  assert.ok(
+    Math.abs(lowerCenter - gridCenter) <= 1,
+    `слайд ${slideNumber}: нижняя пара staggered не центрирована`,
+  )
+}
+
+async function assertNumberedQuartet(slide, slideNumber) {
+  const markers = slide.locator('.Text_size_4')
+  assert.deepEqual(
+    (await markers.allTextContents()).map(text => text.trim()),
+    ['1', 'Цель', '2', 'Контекст', '3', 'Критерий', '4', 'Обратная связь'],
+    `слайд ${slideNumber}: номер и название каждого факта должны быть plain Text размера 4`,
+  )
+  assert.equal(
+    await slide.locator('.Slide-FactNumber').count(),
+    0,
+    `слайд ${slideNumber}: номера не должны оформляться кружками`,
+  )
+
+  const factTitles = slide.locator('.Text_size_4.Text_align_end')
+  assert.deepEqual(
+    (await factTitles.allTextContents()).map(text => text.trim()),
+    ['Цель', 'Контекст', 'Критерий', 'Обратная связь'],
+    `слайд ${slideNumber}: названия фактов должны быть прижаты к нижнему краю карточки`,
+  )
+  assert.ok(
+    (await factTitles.evaluateAll(elements => elements.every((element) => {
+      const marginTop = Number.parseFloat(getComputedStyle(element).marginTop)
+      return Number.isFinite(marginTop) && marginTop > 0
+    }))),
+    `слайд ${slideNumber}: названия фактов должны быть отодвинуты вниз от номера`,
+  )
+}
+
+async function assertP0FrontmatterText(slide, slideNumber) {
+  const contract = P0_FRONTMATTER_TEXT[slideNumber]
+  if (!contract)
+    return
+
+  assert.equal(
+    await slide.locator(contract.selector).count(),
+    1,
+    `слайд ${slideNumber}: не найден ожидаемый variant/arrangement ${contract.selector}`,
+  )
+
+  const visibleText = await slide.locator('.Text').evaluateAll(elements => elements
+    .filter((element) => {
+      const rect = element.getBoundingClientRect()
+      const style = getComputedStyle(element)
+
+      return rect.width > 0
+        && rect.height > 0
+        && style.display !== 'none'
+        && style.visibility !== 'hidden'
+        && style.opacity !== '0'
+    })
+    .map(element => element.textContent ?? ''))
+  const normalizedVisibleText = visibleText.map(normalizeVisibleText)
+
+  for (const expected of contract.values) {
+    assert.ok(
+      normalizedVisibleText.includes(normalizeVisibleText(expected)),
+      `слайд ${slideNumber}: вложенный текст front matter «${expected}» не виден; `
+      + `видимые Text=${JSON.stringify(normalizedVisibleText)}`,
+    )
+  }
+}
+
 async function inspectSlide(
   page,
   origin,
@@ -222,12 +362,17 @@ async function inspectSlide(
     result.heightOverflow <= 1,
     `слайд ${slideNumber}: вертикальное переполнение ${result.heightOverflow}px`,
   )
-  if (slideNumber === 32)
+  if (slideNumber === 38)
     await assertStrongEmphasis(slide, slideNumber)
-  if (slideNumber === 40)
+  if (slideNumber === 46)
     await assertClosingLayout(slide, slideNumber, 1)
-  if (slideNumber === 41)
+  if (slideNumber === 47)
     await assertClosingLayout(slide, slideNumber, 2)
+  if (slideNumber === 26)
+    await assertStaggeredStepsLayout(slide, slideNumber)
+  if (slideNumber === 28)
+    await assertNumberedQuartet(slide, slideNumber)
+  await assertP0FrontmatterText(slide, slideNumber)
   assertLifecycleTransition(
     beforeLifecycle,
     afterLifecycle,
@@ -387,6 +532,13 @@ export async function runBrowserSmoke() {
         REPRESENTATIVE_SLIDES[index - 1],
         () => inFlightTracker.waitForIdle(),
       )
+      if (index === 0) {
+        assert.equal(
+          await page.title(),
+          EXPECTED_DOCUMENT_TITLE,
+          'первый headmatter title должен задавать служебный HTML title колоды',
+        )
+      }
     }
 
     for (const slideNumber of VISUAL_ONLY_SLIDES) {
@@ -400,6 +552,17 @@ export async function runBrowserSmoke() {
       )
     }
 
+    for (const slideNumber of P0_REGRESSION_SLIDES) {
+      activeSlide = `P0-регрессия: слайд ${slideNumber}`
+      await inspectSlide(
+        page,
+        server.origin,
+        slideNumber,
+        undefined,
+        () => inFlightTracker.waitForIdle(),
+      )
+    }
+
     for (const asset of THEME_MEDIA) {
       activeSlide = `медиа: ${asset.label}`
       await loadThemeImage(page, server.origin, asset)
@@ -413,7 +576,7 @@ export async function runBrowserSmoke() {
     assertNoDiagnostics('неуспешные запросы того же источника', failedRequests)
 
     console.log(
-      `Браузерная проверка: слайды=${REPRESENTATIVE_SLIDES.length + VISUAL_ONLY_SLIDES.length}, `
+      `Браузерная проверка: слайды=${REPRESENTATIVE_SLIDES.length + VISUAL_ONLY_SLIDES.length + P0_REGRESSION_SLIDES.length}, `
       + `ошибкиСтраницы=${pageErrors.length}, ошибкиКонсоли=${consoleErrors.length}, `
       + `ошибочныеОтветы=${failedResponses.length}, активныеЗапросы=${inFlightTracker.size}, `
       + `переполнение=0, медиа=${THEME_MEDIA.length}, переходыЖЦ=${REPRESENTATIVE_SLIDES.length - 1}`,

package/scripts/check-local-layout-variant-build.mjs

@@ -0,0 +1,189 @@
+import assert from 'node:assert/strict'
+import { spawnSync } from 'node:child_process'
+import {
+  cpSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+} from 'node:fs'
+import { join, resolve } from 'node:path'
+import process from 'node:process'
+import { chromium } from 'playwright-chromium'
+import { createStaticDistServer } from './browser-smoke-runtime.mjs'
+
+const PROJECT_ROOT = resolve(import.meta.dirname, '..')
+const FIXTURE_ROOT = join(PROJECT_ROOT, 'tests/fixtures/local-layout-variant-deck')
+const SLIDEV_CLI = join(PROJECT_ROOT, 'node_modules/@slidev/cli/bin/slidev.mjs')
+const consumerParent = join(PROJECT_ROOT, '.slidev')
+mkdirSync(consumerParent, { recursive: true })
+const consumerRoot = mkdtempSync(join(consumerParent, 'layout-variant-consumer-'))
+const deckRoot = join(consumerRoot, 'deck')
+const outputRoot = join(deckRoot, 'dist')
+
+const FRONTMATTER_SLIDES = [
+  {
+    number: 2,
+    selector: '.Slide-StepsGrid_linear',
+    values: ['Найти нужную версию', 'Восстановить контекст', 'Сгенерировать черновик', 'Проверить', 'Исправить', 'Перенести результат'],
+  },
+  {
+    number: 3,
+    selector: '.Slide-StepsGrid_staggered',
+    values: ['Заметить сбой', 'Повторить шаг', 'Найти правило', 'Изменить подход', 'Записать вывод'],
+  },
+  {
+    number: 4,
+    selector: '.Slide_variant_comparison-before-after',
+    values: ['Решение — за человеком', 'Стадия работает сама'],
+  },
+  {
+    number: 5,
+    selector: '.Slide_variant_comparison-stable-variable',
+    values: ['Научиться проверять гипотезу', 'Данные и уровень подсказок'],
+  },
+]
+
+function normalizeVisibleText(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
+function readArtifact(directory) {
+  return readdirSync(directory, { withFileTypes: true })
+    .flatMap((entry) => {
+      const path = join(directory, entry.name)
+      return entry.isDirectory() ? readArtifact(path) : [readFileSync(path)]
+    })
+}
+
+async function inspectRenderedVariant() {
+  const diagnostics = []
+  const server = await createStaticDistServer(outputRoot)
+  const browser = await chromium.launch({ headless: true })
+
+  try {
+    const context = await browser.newContext({ serviceWorkers: 'block' })
+    await context.grantPermissions(['screen-wake-lock'], { origin: server.origin })
+    const page = await context.newPage()
+    page.on('console', (message) => {
+      if (message.type() === 'error')
+        diagnostics.push(message.text())
+    })
+    page.on('pageerror', error => diagnostics.push(error.message))
+
+    await page.goto(`${server.origin}/1`, { waitUntil: 'networkidle' })
+
+    const firstSlide = page.locator('.slidev-page[data-slidev-no="1"]')
+    const badge = firstSlide.locator('.LocalLayoutVariantBadge')
+    await firstSlide.waitFor({ state: 'visible' })
+    await badge.waitFor({ state: 'visible' })
+
+    assert.equal((await badge.textContent())?.trim(), 'Практика')
+    assert.equal((await firstSlide.locator('h1').textContent())?.trim(), 'Что запомнить')
+
+    for (const contract of FRONTMATTER_SLIDES) {
+      await page.goto(`${server.origin}/${contract.number}`, { waitUntil: 'networkidle' })
+      const slide = page.locator(`.slidev-page[data-slidev-no="${contract.number}"]`)
+      await slide.waitFor({ state: 'visible' })
+
+      assert.equal(
+        await slide.locator(contract.selector).count(),
+        1,
+        `слайд ${contract.number}: не найден ${contract.selector}`,
+      )
+
+      const rendered = await slide.locator('.Text').evaluateAll(elements => elements
+        .filter((element) => {
+          const rect = element.getBoundingClientRect()
+          const style = getComputedStyle(element)
+
+          return rect.width > 0
+            && rect.height > 0
+            && style.display !== 'none'
+            && style.visibility !== 'hidden'
+            && style.opacity !== '0'
+        })
+        .map(element => element.textContent ?? ''))
+      const normalized = rendered.map(normalizeVisibleText)
+
+      for (const expected of contract.values) {
+        assert.ok(
+          normalized.includes(normalizeVisibleText(expected)),
+          `слайд ${contract.number}: вложенный текст front matter «${expected}» не виден; `
+          + `видимые Text=${JSON.stringify(normalized)}`,
+        )
+      }
+
+      const overflow = await slide.evaluate(element => ({
+        x: element.scrollWidth - element.clientWidth,
+        y: element.scrollHeight - element.clientHeight,
+      }))
+      assert.ok(overflow.x <= 1, `слайд ${contract.number}: горизонтальное переполнение ${overflow.x}px`)
+      assert.ok(overflow.y <= 1, `слайд ${contract.number}: вертикальное переполнение ${overflow.y}px`)
+    }
+
+    assert.deepEqual(diagnostics, [], diagnostics.join('\n'))
+  }
+  finally {
+    await browser.close()
+    await server.close()
+  }
+}
+
+try {
+  cpSync(FIXTURE_ROOT, deckRoot, { recursive: true })
+  const themeInstallRoot = join(deckRoot, 'node_modules', 'slidev-theme-practicum')
+  const manifest = JSON.parse(readFileSync(join(PROJECT_ROOT, 'package.json'), 'utf8'))
+
+  mkdirSync(themeInstallRoot, { recursive: true })
+  cpSync(join(PROJECT_ROOT, 'package.json'), join(themeInstallRoot, 'package.json'))
+  for (const entry of manifest.files)
+    cpSync(join(PROJECT_ROOT, entry), join(themeInstallRoot, entry), { recursive: true })
+
+  const deckPath = join(deckRoot, 'slides.md')
+  const validation = spawnSync(process.execPath, [
+    join(themeInstallRoot, 'scripts', 'validate-deck.cjs'),
+    deckPath,
+  ], {
+    cwd: deckRoot,
+    encoding: 'utf8',
+  })
+
+  assert.equal(
+    validation.status,
+    0,
+    validation.stderr || validation.stdout || validation.error?.message,
+  )
+
+  const result = spawnSync(process.execPath, [
+    SLIDEV_CLI,
+    'build',
+    deckPath,
+    '--out',
+    outputRoot,
+  ], {
+    cwd: deckRoot,
+    encoding: 'utf8',
+  })
+
+  if (result.error || result.status !== 0) {
+    process.stderr.write(result.stderr || result.stdout || result.error?.message || 'Сборка локального варианта завершилась без диагностики.\n')
+    process.exitCode = result.status || 1
+  }
+  else {
+    const artifact = Buffer.concat(readArtifact(outputRoot)).toString()
+
+    if (!artifact.includes('LocalLayoutVariantBadge')) {
+      console.error('Сборка не содержит локальный компонент, вызванный из варианта презентации.')
+      process.exitCode = 1
+    }
+    else {
+      await inspectRenderedVariant()
+      console.log('Локальный вариант и вложенные поля front matter отрисовались в итоговой сборке установленной темы.')
+    }
+  }
+}
+finally {
+  rmSync(consumerRoot, { recursive: true, force: true })
+}

package/scripts/check-package.mjs

@@ -83,12 +83,28 @@ try {
     if (!files.has('LICENSE'))
       errors.push('package должен содержать LICENSE')
 
-    if (!files.has('skills/slidev-practicum/SKILL.md'))
-      errors.push('package должен содержать skills/slidev-practicum/SKILL.md')
+    for (const skillFile of [
+      'skills/slidev-practicum/SKILL.md',
+      'skills/slidev-practicum/references/deck-project-structure.md',
+      'skills/slidev-practicum/references/contour-illustrations.md',
+      'skills/slidev-practicum/references/photographic-illustrations.md',
+    ]) {
+      if (!files.has(skillFile))
+        errors.push(`package должен содержать ${skillFile}`)
+    }
 
     if (!files.has('example.md'))
       errors.push('package должен содержать example.md как каноническую колоду для авторов')
 
+    for (const runtimeFile of [
+      'composables/local-layout-variant-files.ts',
+      'composables/local-layout-variants.ts',
+      'env.d.ts',
+    ]) {
+      if (!files.has(runtimeFile))
+        errors.push(`package должен содержать контракт локальных вариантов: ${runtimeFile}`)
+    }
+
     const defaultDeckTargets = new Set(
       Object.values(manifest.scripts ?? {})
         .flatMap(script => String(script).match(/\b[\w-]+\.md\b/g) ?? []),

package/scripts/requirements-illustrations.txt

@@ -0,0 +1 @@
+Pillow==12.2.0