slidev-theme-practicum 0.2.0 → 0.4.0

package/scripts/check-typography.mjs

@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, resolve } from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { parseArgs } from 'node:util'
+import { parseSync } from '@slidev/parser'
+import { createStaticDistServer } from './browser-smoke-runtime.mjs'
+import { inspectRenderedTypography } from './typography-browser.mjs'
+
+function loadChromium(deckPath) {
+  // В установленной теме Playwright может принадлежать проекту самой колоды.
+  const require = createRequire(import.meta.url)
+  try {
+    return require('playwright-chromium').chromium
+  }
+  catch {
+    try {
+      return createRequire(deckPath)('playwright-chromium').chromium
+    }
+    catch {
+      throw new Error('Для браузерной проверки установите в проект колоды playwright-chromium: npm install -D playwright-chromium')
+    }
+  }
+}
+
+export async function checkTypography({ deckPath, distDir }) {
+  const absolutePath = resolve(deckPath)
+  const slides = parseSync(readFileSync(absolutePath, 'utf8'), absolutePath).slides
+  const hashRouter = slides[0]?.frontmatter.routerMode === 'hash'
+  if (slides.some(slide => slide.frontmatter.src))
+    throw new Error('Браузерная проверка пока требует колоду без включений src. Соберите слайды в один Markdown-файл и повторите проверку его сборки.')
+  const chromium = loadChromium(absolutePath)
+  const issues = []
+  let browser
+  let server
+  let textCount = 0
+  try {
+    server = await createStaticDistServer(resolve(distDir))
+    browser = await chromium.launch({ args: ['--force-color-profile=srgb'] })
+    const context = await browser.newContext({
+      colorScheme: 'light',
+      reducedMotion: 'reduce',
+      serviceWorkers: 'block',
+      viewport: { width: 1280, height: 720 },
+    })
+    await context.grantPermissions(['screen-wake-lock'], { origin: server.origin })
+    const page = await context.newPage()
+    page.setDefaultTimeout(15_000)
+    let currentSlide = 1
+    page.on('pageerror', error => issues.push({ page: currentSlide, code: 'browser-error', message: error.message }))
+    for (let index = 0; index < slides.length; index += 1) {
+      const slideNumber = index + 1
+      currentSlide = slideNumber
+      try {
+        if (!hashRouter || index === 0)
+          await page.goto(`${server.origin}/${hashRouter ? '#/' : ''}${slideNumber}`, { waitUntil: 'domcontentloaded' })
+        else
+          await page.evaluate(number => window.location.hash = `#/${number}`, slideNumber)
+        const slide = page.locator(`.slidev-page[data-slidev-no="${slideNumber}"]`)
+        await slide.waitFor({ state: 'visible' })
+        if (!await slide.locator('.Slide').count())
+          throw new Error('В сборке не найден слайд темы Practicum. Проверьте соответствие файла колоды и каталога сборки.')
+        const result = await inspectRenderedTypography(slide)
+        textCount += result.textCount
+        issues.push(...result.issues.map(issue => ({ page: slideNumber, ...issue })))
+      }
+      catch (error) {
+        issues.push({ page: slideNumber, code: 'render-error', message: error.message })
+      }
+    }
+  }
+  finally {
+    await browser?.close()
+    await server?.close()
+  }
+  return { issues, slideCount: slides.length, textCount }
+}
+
+async function main() {
+  const { values, positionals } = parseArgs({
+    allowPositionals: true,
+    options: {
+      dist: { type: 'string' },
+      help: { type: 'boolean', short: 'h' },
+    },
+  })
+  if (values.help) {
+    console.log('Использование: slidev-practicum-check-typography [slides.md] [--dist dist]\n'
+      + 'Проверяет типографику показанных слайдов готовой сборки. Сначала соберите эту же колоду через slidev build.')
+    return
+  }
+  if (positionals.length > 1)
+    throw new Error('Укажите один файл колоды.')
+  const deckPath = resolve(positionals[0] ?? 'example.md')
+  const result = await checkTypography({ deckPath, distDir: values.dist ?? resolve(dirname(deckPath), 'dist') })
+  for (const issue of result.issues)
+    console.error(`Слайд ${issue.page}: ${issue.message}${issue.hint ? `\n  ${issue.hint}` : ''}`)
+  console.log(`Типографика: слайды=${result.slideCount}, текстовые фрагменты=${result.textCount}, нарушения=${result.issues.length}`)
+  process.exitCode = result.issues.length ? 1 : 0
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(resolve(process.argv[1])).href) {
+  main().catch((error) => {
+    console.error(error.message)
+    process.exitCode = 1
+  })
+}

package/scripts/requirements-illustrations.txt

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

package/scripts/test-typography.mjs

@@ -0,0 +1,89 @@
+import assert from 'node:assert/strict'
+import { spawnSync } from 'node:child_process'
+import { mkdirSync, mkdtempSync, rmSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import { chromium } from 'playwright-chromium'
+import { checkTypography } from './check-typography.mjs'
+import { collectRenderedTypography, inspectRenderedTypography } from './typography-browser.mjs'
+
+const root = resolve(import.meta.dirname, '..')
+const deckPath = join(root, 'tests/fixtures/typography-deck.md')
+mkdirSync(join(root, '.slidev'), { recursive: true })
+const workRoot = mkdtempSync(join(root, '.slidev/typography-test-'))
+
+async function checkDom() {
+  const browser = await chromium.launch()
+  try {
+    const page = await browser.newPage()
+    await page.setContent(`
+      <style>
+        .Slot-Content { width: 600px; height: 400px; }
+        .Text { font-size: 24px; color: rgb(0, 0, 0); }
+      </style>
+      <div class="slidev-layout">
+        <div class="Header" style="font-size: 9px">Служебная шапка 2026</div>
+        <div class="Slot"><div class="Slot-Content">
+          <div class="Text">Первый <span style="color: #000">тот же цвет</span><span style="color: color(srgb 0 0 0)">цвет sRGB</span></div>
+          <div class="Text" style="font-size: 40px">Заголовок</div>
+          <data class="Text" style="font-size: 60px">42</data>
+          <div class="Logo" style="font-size: 1px">Логотип</div>
+          <svg><text style="font-size: 2px">Иллюстрация</text></svg>
+          <div style="opacity: 0"><span style="font-size: 3px">Скрытый текст</span></div>
+        </div></div>
+      </div>`)
+    const slide = page.locator('.slidev-layout')
+    assert.deepEqual((await inspectRenderedTypography(slide)).issues, [])
+    const visible = await slide.evaluate(collectRenderedTypography)
+    assert.deepEqual(visible.texts.map(text => text.text), ['Первый', 'тот же цвет', 'цвет sRGB', 'Заголовок', '42'])
+    assert.equal(new Set(visible.texts.map(text => text.color)).size, 1)
+
+    await page.locator('.Text span').last().evaluate((element) => {
+      element.style.color = 'color(srgb 1 0 0)'
+    })
+    assert.ok((await inspectRenderedTypography(slide)).issues.some(issue => issue.code === 'slot-colors'))
+
+    await page.locator('.Slot-Content').evaluate((content) => {
+      const timelineLabel = document.createElement('span')
+      timelineLabel.textContent = '2026'
+      timelineLabel.style.fontSize = '16px'
+      content.append(timelineLabel)
+    })
+    assert.ok((await inspectRenderedTypography(slide)).issues.some(issue => issue.code === 'text-sizes'))
+
+    await page.locator('.Text').first().evaluate((element) => {
+      element.setAttribute('data-text-color', 'text-muted')
+      element.style.transform = 'translateX(650px)'
+    })
+    const violations = (await inspectRenderedTypography(slide)).issues.map(issue => issue.code)
+    assert.ok(violations.includes('muted-text'))
+    assert.ok(violations.includes('text-overflow'))
+  }
+  finally {
+    await browser.close()
+  }
+}
+
+try {
+  const build = spawnSync(process.execPath, [
+    join(root, 'node_modules/@slidev/cli/bin/slidev.mjs'),
+    'build', deckPath, '--out', workRoot,
+  ], { cwd: root, encoding: 'utf8', timeout: 120_000, stdio: ['ignore', 'pipe', 'pipe'] })
+  assert.equal(build.status, 0, build.stderr || build.stdout)
+  const { issues, slideCount } = await checkTypography({ deckPath, distDir: workRoot })
+  assert.equal(slideCount, 9)
+  const codes = page => issues.filter(issue => issue.page === page).map(issue => issue.code)
+  for (const page of [1, 3, 8])
+    assert.deepEqual(codes(page), [], JSON.stringify(issues.filter(issue => issue.page === page)))
+  assert.ok(codes(2).includes('text-sizes'))
+  assert.ok(codes(4).includes('muted-text'))
+  assert.ok(codes(5).includes('text-overflow'))
+  assert.ok(codes(6).includes('number-sizes'))
+  assert.ok(codes(7).includes('slot-colors'))
+  assert.ok(codes(9).includes('text-overflow'), JSON.stringify(issues.filter(issue => issue.page === 9)))
+  assert.equal(issues.some(issue => ['render-error', 'browser-error'].includes(issue.code)), false, JSON.stringify(issues))
+  await checkDom()
+  console.log('Типографика: проверены 9 слайдов с явной разметкой и Markdown, цвета, исключения и геометрия DOM.')
+}
+finally {
+  rmSync(workRoot, { recursive: true, force: true })
+}

package/scripts/trace-line-art.py

@@ -0,0 +1,422 @@
+#!/usr/bin/env python3
+"""Очищает контурный PNG и трассирует его в SVG с currentColor."""
+
+from __future__ import annotations
+
+import argparse
+import math
+import sys
+from collections import defaultdict
+from html import escape
+from pathlib import Path
+
+try:
+    from PIL import Image
+except ImportError as error:
+    raise SystemExit(
+        "Для трассировки нужен Pillow: установите пакет в используемое Python-окружение"
+    ) from error
+
+
+Point = tuple[int, int]
+Edge = tuple[Point, Point]
+
+
+def parse_arguments() -> argparse.Namespace:
+    parser = argparse.ArgumentParser(
+        add_help=False,
+        description=(
+            "Выделяет чёрный контур по альфа-каналу или яркости, сохраняет "
+            "очищенный PNG и строит SVG из замкнутых путей."
+        )
+    )
+    parser._positionals.title = "позиционные аргументы"
+    parser._optionals.title = "параметры"
+    parser.add_argument(
+        "-h",
+        "--help",
+        action="help",
+        help="показать эту справку и выйти",
+    )
+    parser.add_argument("source", type=Path, help="Исходный PNG")
+    parser.add_argument(
+        "output_prefix",
+        type=Path,
+        help="Путь результата без расширения, например public/illustrations/axe",
+    )
+    parser.add_argument("--title", required=True, help="Русское название для <title>")
+    parser.add_argument(
+        "--threshold",
+        type=int,
+        default=128,
+        help="Порог яркости для непрозрачного исходника, 0–255; по умолчанию 128",
+    )
+    parser.add_argument(
+        "--alpha-threshold",
+        type=int,
+        default=128,
+        help="Порог альфа-канала для прозрачного исходника, 0–255; по умолчанию 128",
+    )
+    parser.add_argument(
+        "--small-span",
+        type=int,
+        default=260,
+        help="Максимальный размах малого контура; по умолчанию 260",
+    )
+    parser.add_argument(
+        "--small-tolerance",
+        type=float,
+        default=1.05,
+        help="Допуск упрощения малого контура; по умолчанию 1.05",
+    )
+    parser.add_argument(
+        "--large-tolerance",
+        type=float,
+        default=2.4,
+        help="Допуск упрощения крупного контура; по умолчанию 2.4",
+    )
+    return parser.parse_args()
+
+
+def create_mask(
+    image: Image.Image,
+    luminance_threshold: int,
+    alpha_threshold: int,
+) -> tuple[list[list[bool]], bool]:
+    rgba = image.convert("RGBA")
+    width, height = rgba.size
+    alpha_minimum, _ = rgba.getchannel("A").getextrema()
+    use_alpha = alpha_minimum < 255
+    pixels = rgba.load()
+    mask_flat: list[bool] = []
+
+    for y in range(height):
+        for x in range(width):
+            red, green, blue, alpha = pixels[x, y]
+            if use_alpha:
+                mask_flat.append(alpha >= alpha_threshold)
+            else:
+                luminance = round(0.2126 * red + 0.7152 * green + 0.0722 * blue)
+                mask_flat.append(luminance < luminance_threshold)
+
+    mask = [
+        mask_flat[row_start : row_start + width]
+        for row_start in range(0, width * height, width)
+    ]
+    return mask, use_alpha
+
+
+def save_clean_png(mask: list[list[bool]], output_path: Path) -> None:
+    height = len(mask)
+    width = len(mask[0])
+    result = Image.new("RGBA", (width, height))
+    result.putdata(
+        [
+            (0, 0, 0, 255 if is_ink else 0)
+            for row in mask
+            for is_ink in row
+        ]
+    )
+    output_path.parent.mkdir(parents=True, exist_ok=True)
+    result.save(output_path)
+
+
+def perpendicular_distance(point: Point, start: Point, end: Point) -> float:
+    if start == end:
+        return math.dist(point, start)
+    x, y = point
+    x1, y1 = start
+    x2, y2 = end
+    numerator = abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1)
+    return numerator / math.hypot(y2 - y1, x2 - x1)
+
+
+def simplify_open(points: list[Point], tolerance: float) -> list[Point]:
+    if len(points) <= 2:
+        return points
+
+    start = points[0]
+    end = points[-1]
+    maximum_distance = 0.0
+    split_index = 0
+
+    for index in range(1, len(points) - 1):
+        distance = perpendicular_distance(points[index], start, end)
+        if distance > maximum_distance:
+            maximum_distance = distance
+            split_index = index
+
+    if maximum_distance <= tolerance:
+        return [start, end]
+
+    left = simplify_open(points[: split_index + 1], tolerance)
+    right = simplify_open(points[split_index:], tolerance)
+    return left[:-1] + right
+
+
+def simplify_closed(points: list[Point], tolerance: float) -> list[Point]:
+    if len(points) < 5:
+        return points
+
+    first = min(range(len(points)), key=lambda index: (points[index][1], points[index][0]))
+    anchor = points[first]
+    second = max(range(len(points)), key=lambda index: math.dist(points[index], anchor))
+
+    if first > second:
+        first, second = second, first
+
+    first_arc = points[first : second + 1]
+    second_arc = points[second:] + points[: first + 1]
+    simplified = (
+        simplify_open(first_arc, tolerance)[:-1]
+        + simplify_open(second_arc, tolerance)[:-1]
+    )
+
+    deduplicated: list[Point] = []
+    for point in simplified:
+        if not deduplicated or point != deduplicated[-1]:
+            deduplicated.append(point)
+    return deduplicated
+
+
+def build_edges(mask: list[list[bool]]) -> set[Edge]:
+    height = len(mask)
+    width = len(mask[0])
+    edges: set[Edge] = set()
+
+    for y, row in enumerate(mask):
+        for x, is_ink in enumerate(row):
+            if not is_ink:
+                continue
+            if y == 0 or not mask[y - 1][x]:
+                edges.add(((x, y), (x + 1, y)))
+            if x == width - 1 or not mask[y][x + 1]:
+                edges.add(((x + 1, y), (x + 1, y + 1)))
+            if y == height - 1 or not mask[y + 1][x]:
+                edges.add(((x + 1, y + 1), (x, y + 1)))
+            if x == 0 or not mask[y][x - 1]:
+                edges.add(((x, y + 1), (x, y)))
+
+    return edges
+
+
+def edge_direction(edge: Edge) -> int:
+    (x1, y1), (x2, y2) = edge
+    direction = (x2 - x1, y2 - y1)
+    return {(1, 0): 0, (0, 1): 1, (-1, 0): 2, (0, -1): 3}[direction]
+
+
+def trace_contours(edges: set[Edge]) -> list[list[Point]]:
+    outgoing: dict[Point, set[Edge]] = defaultdict(set)
+    for edge in edges:
+        outgoing[edge[0]].add(edge)
+
+    contours: list[list[Point]] = []
+    turn_priority = {1: 0, 0: 1, 3: 2, 2: 3}
+
+    while edges:
+        first_edge = min(edges)
+        start = first_edge[0]
+        current = first_edge
+        contour = [start]
+
+        while current in edges:
+            edges.remove(current)
+            outgoing[current[0]].discard(current)
+            endpoint = current[1]
+            contour.append(endpoint)
+
+            if endpoint == start:
+                break
+
+            candidates = [candidate for candidate in outgoing[endpoint] if candidate in edges]
+            if not candidates:
+                break
+
+            incoming_direction = edge_direction(current)
+            current = min(
+                candidates,
+                key=lambda candidate: turn_priority[
+                    (edge_direction(candidate) - incoming_direction) % 4
+                ],
+            )
+
+        if len(contour) >= 8 and contour[-1] == start:
+            contours.append(contour[:-1])
+
+    return contours
+
+
+def contour_area(points: list[Point]) -> float:
+    return 0.5 * abs(
+        sum(
+            x1 * y2 - x2 * y1
+            for (x1, y1), (x2, y2) in zip(points, points[1:] + points[:1])
+        )
+    )
+
+
+def contour_span(points: list[Point]) -> int:
+    xs = [point[0] for point in points]
+    ys = [point[1] for point in points]
+    return max(max(xs) - min(xs), max(ys) - min(ys))
+
+
+def format_number(value: float) -> str:
+    rounded = round(value, 1)
+    return str(int(rounded)) if rounded.is_integer() else str(rounded)
+
+
+def is_corner(
+    previous: Point,
+    current: Point,
+    following: Point,
+    threshold_degrees: float,
+) -> bool:
+    incoming = (current[0] - previous[0], current[1] - previous[1])
+    outgoing = (following[0] - current[0], following[1] - current[1])
+    incoming_length = math.hypot(*incoming)
+    outgoing_length = math.hypot(*outgoing)
+    if incoming_length == 0 or outgoing_length == 0:
+        return True
+    cosine = max(
+        -1.0,
+        min(
+            1.0,
+            (incoming[0] * outgoing[0] + incoming[1] * outgoing[1])
+            / (incoming_length * outgoing_length),
+        ),
+    )
+    return math.acos(cosine) > math.radians(threshold_degrees)
+
+
+def path_data(contour: list[Point]) -> str:
+    count = len(contour)
+    span = contour_span(contour)
+    corner_threshold = 100 if span <= 120 else 48
+    corners = [
+        is_corner(
+            contour[(index - 1) % count],
+            contour[index],
+            contour[(index + 1) % count],
+            corner_threshold,
+        )
+        for index in range(count)
+    ]
+
+    if any(corners):
+        start_index = corners.index(True)
+        contour = contour[start_index:] + contour[:start_index]
+        corners = corners[start_index:] + corners[:start_index]
+        first = contour[0]
+        commands = [f"M{format_number(first[0])} {format_number(first[1])}"]
+
+        for index in range(1, count):
+            current = contour[index]
+            following = contour[(index + 1) % count]
+            if corners[index]:
+                commands.append(
+                    f"L{format_number(current[0])} {format_number(current[1])}"
+                )
+            else:
+                midpoint = (
+                    (current[0] + following[0]) / 2,
+                    (current[1] + following[1]) / 2,
+                )
+                commands.append(
+                    "Q"
+                    f"{format_number(current[0])} {format_number(current[1])} "
+                    f"{format_number(midpoint[0])} {format_number(midpoint[1])}"
+                )
+        commands.append(f"L{format_number(first[0])} {format_number(first[1])}")
+    else:
+        first_midpoint = (
+            (contour[0][0] + contour[1][0]) / 2,
+            (contour[0][1] + contour[1][1]) / 2,
+        )
+        commands = [
+            f"M{format_number(first_midpoint[0])} {format_number(first_midpoint[1])}"
+        ]
+        for index in range(1, count + 1):
+            current = contour[index % count]
+            following = contour[(index + 1) % count]
+            midpoint = (
+                (current[0] + following[0]) / 2,
+                (current[1] + following[1]) / 2,
+            )
+            commands.append(
+                "Q"
+                f"{format_number(current[0])} {format_number(current[1])} "
+                f"{format_number(midpoint[0])} {format_number(midpoint[1])}"
+            )
+
+    commands.append("Z")
+    return "".join(commands)
+
+
+def save_svg(
+    contours: list[list[Point]],
+    width: int,
+    height: int,
+    title: str,
+    output_path: Path,
+) -> None:
+    paths = "\n    ".join(path_data(contour) for contour in contours)
+    svg = f"""<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {width} {height}" fill="none" color="#111111">
+  <title>{escape(title)}</title>
+  <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="
+    {paths}
+  "/>
+</svg>
+"""
+    output_path.parent.mkdir(parents=True, exist_ok=True)
+    output_path.write_text(svg, encoding="utf-8")
+
+
+def main() -> None:
+    arguments = parse_arguments()
+    if not 0 <= arguments.threshold <= 255:
+        raise SystemExit("--threshold должен быть в диапазоне 0–255")
+    if not 0 <= arguments.alpha_threshold <= 255:
+        raise SystemExit("--alpha-threshold должен быть в диапазоне 0–255")
+
+    image = Image.open(arguments.source)
+    width, height = image.size
+    mask, used_alpha = create_mask(
+        image,
+        arguments.threshold,
+        arguments.alpha_threshold,
+    )
+    png_output = arguments.output_prefix.with_suffix(".png")
+    svg_output = arguments.output_prefix.with_suffix(".svg")
+    save_clean_png(mask, png_output)
+
+    contours = [
+        contour
+        for contour in trace_contours(build_edges(mask))
+        if contour_area(contour) >= 3
+    ]
+    simplified = [
+        simplify_closed(
+            contour,
+            arguments.small_tolerance
+            if contour_span(contour) <= arguments.small_span
+            else arguments.large_tolerance,
+        )
+        for contour in contours
+    ]
+    save_svg(simplified, width, height, arguments.title, svg_output)
+
+    source_mode = "альфа-канал" if used_alpha else f"яркость < {arguments.threshold}"
+    vertex_count = sum(len(contour) for contour in simplified)
+    print(
+        f"Готово: {png_output}, {svg_output}; "
+        f"маска: {source_mode}; контуров: {len(contours)}; вершин: {vertex_count}"
+    )
+
+
+if __name__ == "__main__":
+    try:
+        main()
+    except OSError as error:
+        raise SystemExit(f"Ошибка обработки изображения: {error}") from error