@troshab/slidev-theme-troshab 0.1.0

package/fonts/LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/layouts/slide.vue

@@ -0,0 +1,251 @@
+<script setup lang="ts">
+/**
+ * Universal slide layout — 3 modes cover 100% of slide structures.
+ *
+ * mode: fullscreen | split | columns (default: columns)
+ */
+
+import { computed, useSlots } from 'vue'
+
+const props = defineProps<{
+  mode?: 'fullscreen' | 'split' | 'columns'
+  // Fullscreen props
+  align?: 'left' | 'center' | 'right'
+  valign?: 'top' | 'center' | 'bottom'
+  padding?: boolean
+  // Split props
+  split?: [number, number]
+  // Columns props
+  cols?: number | string
+  gap?: '0' | '1' | '2' | '4' | '6' | '8'
+  justify?: 'start' | 'center' | 'end' | 'between' | 'stretch'
+  items?: 'top' | 'center' | 'bottom'
+  titleAlign?: 'left' | 'center' | 'right'
+  colAlign?: string | string[]
+  colBg?: string | string[]
+  colBorder?: boolean | boolean[]
+  // Structural props
+  footnote?: boolean
+}>()
+
+const slots = useSlots()
+const layoutMode = props.mode || 'columns'
+
+// ── Fullscreen helpers ──
+const hasPadding = props.padding !== false
+const hasBg = !!slots.bg
+
+const alignStyle = computed(() => {
+  const h = { left: 'flex-start', center: 'center', right: 'flex-end' }[props.align || 'center']
+  const ta = props.align || 'center'
+  return { alignItems: h, textAlign: ta }
+})
+
+const valignStyle = computed(() => {
+  const v = { top: 'flex-start', center: 'center', bottom: 'flex-end' }[props.valign || 'center']
+  return { justifyContent: v }
+})
+
+// ── Split helpers ──
+const splitSizes = computed(() => props.split || [6, 6])
+
+const splitTemplate = computed(() => {
+  const [l, r] = splitSizes.value
+  return `${(l / 12) * 100}% ${(r / 12) * 100}%`
+})
+
+const leftHasBg = computed(() => !!slots['left-bg'])
+const rightHasBg = computed(() => !!slots['right-bg'])
+const leftHasContent = computed(() => !!slots.left)
+const rightHasContent = computed(() => !!slots.right)
+
+// ── Columns helpers ──
+const colSizes = computed(() => {
+  const raw = props.cols ?? 1
+  if (typeof raw === 'number' || !String(raw).includes('-')) {
+    const n = Number(raw)
+    if (n === 1) return [12]
+    return Array(n).fill(Math.floor(12 / n))
+  }
+  return String(raw).split('-').map(Number)
+})
+
+const colCount = computed(() => colSizes.value.length)
+const isSingleCol = computed(() => colCount.value === 1)
+
+const gapMap: Record<string, string> = {
+  '0': '0rem', '1': '1rem', '2': '2rem', '4': '4rem', '6': '6rem', '8': '8rem',
+}
+
+const justifyMap: Record<string, string> = {
+  start: 'flex-start', center: 'center', end: 'flex-end',
+  between: 'space-between', stretch: 'stretch',
+}
+
+const alignMap: Record<string, string> = {
+  top: 'flex-start', center: 'center', bottom: 'flex-end',
+}
+
+const textAlignMap: Record<string, string> = {
+  left: 'left', center: 'center', right: 'right',
+}
+
+function getArr<T>(prop: T | T[] | undefined, i: number, fb: T): T {
+  if (prop === undefined) return fb
+  if (Array.isArray(prop)) return prop[i] ?? fb
+  return prop
+}
+
+function colStyle(i: number) {
+  const size = colSizes.value[i]
+  const justify = props.justify || 'stretch'
+  const s: Record<string, string> = {}
+
+  if (justify === 'stretch') {
+    s.flex = `${size} 0 0`
+  } else {
+    s.flex = `0 0 calc(${(size / 12) * 100}% - ${gapMap[props.gap || '4']})`
+  }
+
+  s.justifyContent = alignMap[props.items || 'top'] || 'flex-start'
+
+  const ta = getArr(props.colAlign, i, 'left') as string
+  s.textAlign = textAlignMap[ta] || 'left'
+
+  return s
+}
+
+function colClasses(i: number) {
+  const cls: string[] = ['slide-col']
+  const bg = getArr(props.colBg, i, 'none') as string
+  if (bg && bg !== 'none') cls.push(`slide-col-bg-${bg}`)
+  const border = getArr(props.colBorder, i, false) as boolean
+  if (border) cls.push('slide-col-border')
+  return cls
+}
+
+const gridStyle = computed(() => {
+  const s: Record<string, string> = {}
+  s.gap = gapMap[props.gap || '4']
+  const justify = props.justify || 'stretch'
+  if (justify !== 'stretch') s.justifyContent = justifyMap[justify]
+  return s
+})
+</script>
+
+<template>
+  <!-- ════════ FULLSCREEN ════════ -->
+  <div
+    v-if="layoutMode === 'fullscreen'"
+    class="slidev-layout slide-fullscreen"
+    :class="{
+      'slide-no-padding': !hasPadding,
+      'slide-has-bg': hasBg,
+    }"
+  >
+    <!-- Background layer (edge-to-edge) -->
+    <div v-if="hasBg" class="slide-bg">
+      <slot name="bg" />
+    </div>
+
+    <!-- Content layer -->
+    <div
+      class="slide-content"
+      :style="{ ...alignStyle, ...valignStyle }"
+    >
+      <slot />
+    </div>
+
+    <!-- Footer -->
+    <div v-if="$slots.footer" class="slide-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+
+  <!-- ════════ SPLIT ════════ -->
+  <div
+    v-else-if="layoutMode === 'split'"
+    class="slidev-layout slide-split"
+    :style="{ gridTemplateColumns: splitTemplate, gap: gapMap[gap || '0'] }"
+  >
+    <!-- Left panel -->
+    <div class="slide-panel slide-panel-left" :class="{ 'slide-panel-bg-only': leftHasBg && !leftHasContent }">
+      <div v-if="leftHasBg" class="slide-bg">
+        <slot name="left-bg" />
+      </div>
+      <div v-if="leftHasContent" class="slide-panel-content">
+        <slot name="left" />
+      </div>
+    </div>
+
+    <!-- Right panel -->
+    <div class="slide-panel slide-panel-right" :class="{ 'slide-panel-bg-only': rightHasBg && !rightHasContent }">
+      <div v-if="rightHasBg" class="slide-bg">
+        <slot name="right-bg" />
+      </div>
+      <div v-if="rightHasContent" class="slide-panel-content">
+        <slot name="right" />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div v-if="$slots.footer" class="slide-footer" style="grid-column: 1 / -1;">
+      <slot name="footer" />
+    </div>
+  </div>
+
+  <!-- ════════ COLUMNS (default) ════════ -->
+  <div
+    v-else
+    class="slidev-layout slide-columns"
+    :class="{ 'slide-footnote': footnote }"
+  >
+    <!-- Title (multi-col only) -->
+    <div
+      v-if="!isSingleCol && $slots.default"
+      class="slide-title"
+      :style="{ textAlign: textAlignMap[titleAlign || 'left'] }"
+    >
+      <slot />
+    </div>
+
+    <!-- Subtitle -->
+    <div
+      v-if="!isSingleCol && $slots.subtitle"
+      class="slide-subtitle"
+    >
+      <slot name="subtitle" />
+    </div>
+
+    <!-- Single column: default slot is content -->
+    <div v-if="isSingleCol" class="slide-single">
+      <slot />
+    </div>
+
+    <!-- Multi-column grid -->
+    <div
+      v-else
+      class="slide-grid"
+      :style="gridStyle"
+    >
+      <div
+        v-for="i in colCount"
+        :key="i"
+        :class="colClasses(i - 1)"
+        :style="colStyle(i - 1)"
+      >
+        <div v-if="$slots[`col${i}-title`]" class="slide-col-title">
+          <slot :name="`col${i}-title`" />
+        </div>
+        <div v-if="$slots[`col${i}`]" class="slide-col-body">
+          <slot :name="`col${i}`" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div v-if="$slots.footer" class="slide-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@troshab/slidev-theme-troshab",
+  "version": "0.1.0",
+  "description": "A minimal, universal Slidev theme with flexible layouts and ready-to-use slide templates",
+  "author": "troshab",
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "presentation",
+    "slides"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/troshab/slidev-theme-troshab"
+  },
+  "slidev": {
+    "colorSchema": "both",
+    "highlighter": "shiki",
+    "addons": [
+      "slidev-addon-asciinema",
+      "slidev-addon-fancy-arrow"
+    ],
+    "defaults": {
+      "layout": "slide",
+      "transition": "t-fade"
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "slidev": ">=0.50.0"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.4",
+    "slidev-addon-asciinema": "^0.1.11",
+    "slidev-addon-fancy-arrow": "^0.16.0",
+    "slidev-addon-preload-images": "^0.2.0"
+  },
+  "scripts": {
+    "dev": "npx concurrently -n dark,light -c magenta,cyan \"slidev example_dark.md --port 30303\" \"slidev example_white.md --port 31313\"",
+    "dev:dark": "slidev example_dark.md --port 30303",
+    "dev:light": "slidev example_white.md --port 31313",
+    "audit:contrast": "node scripts/contrast-audit.mjs",
+    "audit:typography": "node scripts/typography-audit.mjs",
+    "audit:charts": "node scripts/chart-audit.mjs",
+    "audit:integrity": "node scripts/integrity-audit.mjs",
+    "audit:shiki": "node scripts/shiki-audit.mjs",
+    "audit:all": "node scripts/contrast-audit.mjs && node scripts/shiki-audit.mjs && node scripts/typography-audit.mjs && node scripts/chart-audit.mjs && node scripts/integrity-audit.mjs"
+  },
+  "devDependencies": {
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/ibm-plex-sans": "^5.2.8",
+    "@iconify-json/ph": "^1.2.2",
+    "@slidev/cli": "^0.50.0",
+    "@types/qrcode": "^1.5.5",
+    "css-line-break": "^2.1.0",
+    "fontkit": "^2.0.4",
+    "playwright": "^1.58.1",
+    "playwright-chromium": "^1.58.1",
+    "unocss": "^0.65.0"
+  }
+}

package/scripts/chart-audit.mjs

@@ -0,0 +1,216 @@
+#!/usr/bin/env node
+
+/**
+ * Chart Palette Accessibility Audit for slidev-theme-troshab
+ *
+ * Checks chart colors against backgrounds (WCAG 1.4.11 non-text: 3:1)
+ * and grayscale distinguishability for colorblind/projector scenarios.
+ * Run: node scripts/chart-audit.mjs
+ *
+ * Standards:
+ *   - WCAG 1.4.11: non-text contrast 3:1
+ *   - APCA: non-text Lc 15+
+ *   - Grayscale distinguishability for colorblind accessibility
+ *
+ * Scientific basis:
+ *   - Ware (2012, Information Visualization) — grayscale = universal access
+ *   - Brewer et al. (2003, ColorBrewer) — palette design for colorblind
+ *   - Min luminance gap 0.01 for reliable discrimination (Ware)
+ */
+
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import {
+  contrastRatio, apcaContrast, relativeLuminance,
+  parsePalette, parseSemanticTokens, parseChartTokens,
+  resolveHex, fmt, fmtLc,
+} from './shared/css-utils.mjs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// ---------------------------------------------------------------------------
+// Paths & Parse
+// ---------------------------------------------------------------------------
+
+const colorsPath = resolve(__dirname, '..', 'styles', 'colors.css')
+
+const palette = parsePalette(colorsPath)
+const { light, dark } = parseSemanticTokens(colorsPath)
+const chartTokens = parseChartTokens(colorsPath)
+
+function sem(theme, varName) {
+  return resolveHex(palette, theme === 'light' ? light : dark, varName)
+}
+
+function chartHex(theme, n) {
+  const ref = (theme === 'light' ? chartTokens.light : chartTokens.dark)[n]
+  return ref ? palette[ref] : null
+}
+
+function chartRef(theme, n) {
+  return (theme === 'light' ? chartTokens.light : chartTokens.dark)[n] || '?'
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+let issues = []
+let warns = []
+
+function dualStatus(ratio, minRatio, lc, minLc) {
+  const wcagOk = ratio >= minRatio
+  const apcaOk = Math.abs(lc) >= minLc
+  if (wcagOk && apcaOk) return 'OK'
+  if (!wcagOk) return 'FAIL'
+  return 'WARN'
+}
+
+function statusIcon(s) {
+  if (s === 'FAIL') return '!'
+  if (s === 'WARN') return '~'
+  return ' '
+}
+
+// ===== MAIN =====
+
+console.log('Chart Palette Accessibility Audit - slidev-theme-troshab')
+console.log('='.repeat(76))
+
+// Find how many chart colors we have
+const chartCount = Math.max(
+  ...Object.keys(chartTokens.light).map(Number).filter(n => !isNaN(n)),
+  ...Object.keys(chartTokens.dark).map(Number).filter(n => !isNaN(n)),
+)
+
+// --- Section 1: Chart vs --color-bg (WCAG 1.4.11: 3:1) ---
+
+console.log(`\n1. CHART vs BACKGROUND (WCAG 1.4.11 non-text: 3:1, APCA Lc 15+)`)
+console.log('-'.repeat(76))
+
+for (const theme of ['light', 'dark']) {
+  const bgHex = sem(theme, 'bg')
+  console.log(`\n  ${theme.toUpperCase()} THEME (bg: ${bgHex}):`)
+  for (let i = 1; i <= chartCount; i++) {
+    const hex = chartHex(theme, i)
+    if (!hex || !bgHex) continue
+    const ratio = contrastRatio(hex, bgHex)
+    const lc = apcaContrast(hex, bgHex)
+    const status = dualStatus(ratio, 3.0, lc, 15)
+    const icon = statusIcon(status)
+    const ref = chartRef(theme, i)
+    console.log(`  ${icon} chart-${String(i).padEnd(2)} (${ref.padEnd(14)})  ${fmt(ratio).padStart(8)}  ${fmtLc(lc)}  (${status})`)
+    if (status === 'FAIL') issues.push(`[${theme}] chart-${i} (${ref}) vs bg: ${fmt(ratio)} < 3:1`)
+  }
+}
+
+// --- Section 2: Chart vs --color-bg-soft ---
+
+console.log(`\n\n2. CHART vs SURFACES (bg-soft, WCAG 3:1, APCA Lc 15+)`)
+console.log('-'.repeat(76))
+
+for (const theme of ['light', 'dark']) {
+  const bgHex = sem(theme, 'bg-soft')
+  console.log(`\n  ${theme.toUpperCase()} THEME (bg-soft: ${bgHex}):`)
+  for (let i = 1; i <= chartCount; i++) {
+    const hex = chartHex(theme, i)
+    if (!hex || !bgHex) continue
+    const ratio = contrastRatio(hex, bgHex)
+    const lc = apcaContrast(hex, bgHex)
+    const status = dualStatus(ratio, 3.0, lc, 15)
+    const icon = statusIcon(status)
+    const ref = chartRef(theme, i)
+    console.log(`  ${icon} chart-${String(i).padEnd(2)} (${ref.padEnd(14)})  ${fmt(ratio).padStart(8)}  ${fmtLc(lc)}  (${status})`)
+    if (status === 'FAIL') issues.push(`[${theme}] chart-${i} (${ref}) vs bg-soft: ${fmt(ratio)} < 3:1`)
+  }
+}
+
+// --- Section 3: Grayscale distinguishability ---
+
+// Grayscale distinguishability: OKLCH-generated ramps produce similar luminance
+// per shade level. With 8 colors spread across 4-5 shade tiers, the achievable
+// minimum adjacent gap is ~0.013 (light) and ~0.047 (dark). Thresholds are
+// calibrated to this physical limitation of chromatic palettes.
+console.log(`\n\n3. GRAYSCALE DISTINGUISHABILITY (colorblind / projector)`)
+console.log('   FAIL < 0.01, WARN < 0.018 (luminance difference between any pair)')
+console.log('-'.repeat(76))
+
+const failThreshold = 0.01
+const warnThreshold = 0.018
+
+for (const theme of ['light', 'dark']) {
+  console.log(`\n  ${theme.toUpperCase()} THEME:`)
+
+  // Collect luminances
+  const lums = []
+  for (let i = 1; i <= chartCount; i++) {
+    const hex = chartHex(theme, i)
+    if (!hex) continue
+    lums.push({ n: i, ref: chartRef(theme, i), hex, lum: relativeLuminance(hex) })
+  }
+
+  // Sort by luminance for readability
+  lums.sort((a, b) => a.lum - b.lum)
+
+  console.log('  Luminance order (dark to light):')
+  for (const l of lums) {
+    console.log(`    chart-${String(l.n).padEnd(2)} (${l.ref.padEnd(14)})  L = ${l.lum.toFixed(3)}`)
+  }
+
+  // Check all C(N,2) pairs
+  let pairFails = 0
+  let pairWarns = 0
+  const tooClose = []
+
+  for (let i = 0; i < lums.length; i++) {
+    for (let j = i + 1; j < lums.length; j++) {
+      const diff = Math.abs(lums[i].lum - lums[j].lum)
+
+      if (diff < failThreshold) {
+        tooClose.push({ a: lums[i], b: lums[j], diff, level: 'FAIL' })
+        pairFails++
+      } else if (diff < warnThreshold) {
+        tooClose.push({ a: lums[i], b: lums[j], diff, level: 'WARN' })
+        pairWarns++
+      }
+    }
+  }
+
+  if (tooClose.length === 0) {
+    console.log(`  All ${lums.length * (lums.length - 1) / 2} pairs pass grayscale thresholds     OK`)
+  } else {
+    console.log(`\n  Close pairs:`)
+    for (const p of tooClose) {
+      const icon = p.level === 'FAIL' ? '!' : '~'
+      console.log(`  ${icon} chart-${p.a.n} / chart-${p.b.n}`.padEnd(28) + `  diff = ${p.diff.toFixed(3)}  ${p.level}`)
+      if (p.level === 'FAIL') {
+        issues.push(`[${theme}] chart-${p.a.n} (${p.a.ref}) / chart-${p.b.n} (${p.b.ref}): luminance diff ${p.diff.toFixed(3)} < ${failThreshold}`)
+      } else {
+        warns.push(`[${theme}] chart-${p.a.n} (${p.a.ref}) / chart-${p.b.n} (${p.b.ref}): luminance diff ${p.diff.toFixed(3)} < ${warnThreshold}`)
+      }
+    }
+    console.log(`  ${pairFails} FAIL, ${pairWarns} WARN out of ${lums.length * (lums.length - 1) / 2} pairs`)
+  }
+}
+
+// --- Section 4: Summary ---
+
+console.log('\n' + '='.repeat(76))
+console.log('SUMMARY')
+console.log('='.repeat(76))
+
+if (issues.length === 0 && warns.length === 0) {
+  console.log('\nAll checks passed!')
+} else {
+  if (issues.length > 0) {
+    console.log(`\n${issues.length} FAIL(s):`)
+    issues.forEach((issue, i) => console.log(`  ${i + 1}. ${issue}`))
+  }
+  if (warns.length > 0) {
+    console.log(`\n${warns.length} WARN(s):`)
+    warns.forEach((w, i) => console.log(`  ${i + 1}. ${w}`))
+  }
+}
+
+console.log()
+process.exit(issues.length > 0 ? 1 : 0)