slidev-theme-watabegg 1.0.0

package/README.ja.md

@@ -0,0 +1,132 @@
+# slidev-theme-watabegg (日本語ドキュメント)
+
+[![NPM version](https://img.shields.io/npm/v/slidev-theme-watabegg?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-watabegg)
+
+教育現場（集団授業・試験対策）向けに視認性と操作性を重視した Slidev テーマです。普通に自分用に開発しました。
+
+## 特徴
+- 教育特化のミニマルデザイン
+- 日本語表示最適化 (M PLUS 2) / 等幅 Fira Code
+- 自動フッター（`cover` / `image` 以外で日付 + ページ番号）
+- ショートカット: Enter (次) / Backspace (前)
+- レイアウト: `cover`, `two-cols`, `image`
+- フロントマター `color` でテーマカラーを `red | yellow | green | blue | purple` から選択
+- コンポーネント: `QuestionList`, `TextBox`, `KaTexReveal`
+- 多段ラベル: 丸番号 / カタカナ / ひらがな / 漢数字(1–19) / 英字 / カスタム
+- ユーティリティ: `.text-highlight`, `.card`
+- Shiki テーマ: vitesse-light / vitesse-dark
+
+## インストール
+```yaml
+---
+theme: slidev-theme-watabegg
+---
+```
+ローカル開発（クローンしたリポジトリで）:
+```yaml
+---
+theme: ./
+---
+```
+
+## フロントマター例
+```yaml
+title: 授業タイトル
+subtitle: サブタイトル
+author: 講師名
+date: '2025/08/03'
+color: green # red | yellow | green | blue | purple
+```
+
+`color` を省略するとデフォルトの `green` が適用されます。
+
+![フロントマター例](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/1.png)
+
+## レイアウト
+| 名称 | 用途 | 特徴 |
+|------|------|------|
+| cover | 表紙 | グラデーション波 + title/subtitle/author |
+| two-cols | 2カラム | `::left::` / `::right::` スロット |
+| image | 背景画像 | `image:` 指定 + `TextBox` で自由配置 |
+
+### two-cols 例
+```markdown
+---
+layout: two-cols
+---
+::left::
+左
+::right::
+右
+```
+
+![two-cols 例](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/3.png)
+
+### image 例
+```markdown
+---
+layout: image
+image: /path/to/bg.jpg
+---
+<TextBox :x="120" :y="160" :width="360">注釈</TextBox>
+```
+
+## コンポーネント
+### QuestionList
+入れ子質問/解答・Markdown 埋め込み・階層別スタイル。
+```vue
+<QuestionList
+  :items="['最初 **OK**', { text: '2番目', items: ['子A','子B'] }]"
+  :styles="['decimal-circle','katakana-paren','loweralpha-dot']"
+  :start="[1,1,'c']"
+/>
+```
+カウンター種別: `decimal | hiragana | katakana | kanji | upperalpha | loweralpha | none`  
+デコレータ: `circle | square | paren | dot | q | big-q | none`  
+アイテム内 `label` があればそれを優先表示。
+
+![QuestionList 例](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/4.png)
+
+### TextBox
+背景画像上などに絶対配置。
+```vue
+<TextBox :x="100" :y="220" :width="400" textBg="green" v-click="1">メモ</TextBox>
+```
+Props: `x`, `y`, `width`, `height`, `textBg`, `color`, `vClick`
+
+### KaTexReveal
+KaTeX API で数式を確実に描画するコンポーネント。`components/*.vue` は Slidev が自動登録するので、そのまま Markdown で利用できます。
+```vue
+<KaTexReveal formula="\\int_0^{2\\pi} \\sin x\\,dx = 0" block class="text-2xl" />
+<KaTexReveal formula="E = mc^2" :block="false" v-click="1" />
+```
+Props: `formula`(必須), `block`(既定 false), `tag`(省略時 `div`/`span` 自動), そのほか `class` や `v-click` など任意の属性も転送。`QuestionList` のアイテムに TeX が含まれる場合もこのコンポーネントで描画されます。
+
+## フッター & ショートカット
+- フッター: (cover/image 以外) `date` + 現在ページ/総ページ
+- Enter: 次のフラグメント/スライド
+- Backspace: 前へ
+
+## ユーティリティクラス
+- `.text-highlight` 行マーカ風ハイライト
+- `.card` 角丸ボックス + 余白 + 枠線
+
+![ユーティリティ例](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/7.png)
+
+## 開発
+```bash
+pnpm install
+pnpm dev
+pnpm build
+pnpm export
+pnpm screenshot
+```
+
+## FAQ
+**Q. フォント設定は必要？** → いいえ、テーマ内で Google Fonts を読み込みます。
+
+**Q. フッターを消したい** → 自作テーマで `global-bottom.vue` を上書きしてください。
+
+**Q. 番号開始位置を変えたい** → `:start="[1,'c']"` のように配列で指定。
+
+良い授業を！ 🎓

package/README.md

@@ -0,0 +1,142 @@
+# slidev-theme-watabegg
+
+[![NPM version](https://img.shields.io/npm/v/slidev-theme-watabegg?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-watabegg)
+
+English README (Japanese version: see `README.ja.md`).
+
+## Overview
+An education-focused Slidev theme for exam preparation & classroom lessons, optimized for Japanese typography, high readability, structured question hierarchies, and keyboard-centric navigation. Originally built for personal teaching use.
+
+## Features
+- Minimal classroom-oriented design
+- Japanese font (M PLUS 2) + monospace Fira Code
+- Automatic footer (date + current/total page) except on `cover` / `image`
+- Shortcuts: Enter (next) / Backspace (previous)
+- Layouts: `cover`, `two-cols`, `image`
+- Frontmatter `color` switch for `red | yellow | green | blue | purple`
+- Components: `QuestionList`, `TextBox`, `KaTexReveal`
+- Multi-level labels: circled numbers / Katakana / Hiragana / kanji numerals (1–19) / alphabet / custom
+- Utility classes: `.text-highlight`, `.card`
+- Shiki code themes: `vitesse-light` / `vitesse-dark`
+
+## Install
+Add to your slide frontmatter:
+```yaml
+---
+theme: slidev-theme-watabegg
+---
+```
+Local development (cloned repository):
+```yaml
+---
+theme: ./
+---
+```
+
+## Frontmatter Example
+```yaml
+title: Class Title
+subtitle: Subtitle
+author: Instructor Name
+date: '2025/08/03'
+color: green # red | yellow | green | blue | purple
+```
+
+If `color` is omitted, the default `green` palette is used.
+
+![Frontmatter Example](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/1.png)
+
+## Layouts
+| Name | Purpose | Notes |
+|------|---------|-------|
+| cover | Title slide | Gradient wave + title/subtitle/author |
+| two-cols | Two columns | Slots: `::left::` / `::right::` |
+| image | Background image | Use `image:` + absolutely placed `TextBox` |
+
+### two-cols Example
+```markdown
+---
+layout: two-cols
+---
+::left::
+Left
+::right::
+Right
+```
+
+![two-cols Example](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/3.png)
+
+### image Example
+```markdown
+---
+layout: image
+image: /path/to/bg.jpg
+---
+<TextBox :x="120" :y="160" :width="360">Note</TextBox>
+```
+
+## Components
+### QuestionList
+Recursive nested lists (questions / answers) with per-level styles and Markdown rendering.
+```vue
+<QuestionList
+  :items="['First **OK**', { text: 'Second', items: ['Child A','Child B'] }]"
+  :styles="['decimal-circle','katakana-paren','loweralpha-dot']"
+  :start="[1,1,'c']"
+/>
+```
+Counter types: `decimal | hiragana | katakana | kanji | upperalpha | loweralpha | none`  
+Decorators: `circle | square | paren | dot | q | big-q | none`  
+If an item includes a `label`, it overrides the computed label.
+
+![QuestionList Example](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/4.png)
+
+### TextBox
+Absolutely positioned overlay (useful on `image` layout or for callouts).
+```vue
+<TextBox :x="100" :y="220" :width="400" textBg="green" v-click="1">Memo</TextBox>
+```
+Props: `x`, `y`, `width`, `height`, `textBg`, `color`, `vClick`
+
+### KaTexReveal
+Inline/Block KaTeX renderer component. Slidev auto-registers `components/*.vue`, so you can drop it directly into Markdown.
+```vue
+<KaTexReveal formula="\\int_0^{2\\pi} \\sin x\\,dx = 0" block class="text-2xl" />
+<KaTexReveal formula="E = mc^2" :block="false" v-click="1" />
+```
+Props: `formula` (required string), `block` (default `false`), `tag` (fallbacks to `div`/`span`), plus any other attrs (`class`, `v-click`, etc.) forwarded to the wrapper. Also consumed by `QuestionList` when an item contains TeX delimiters, `formula`, or `tex: true`.
+
+## Footer & Shortcuts
+- Footer (except on cover / image): displays `date` + current / total pages.
+- Enter: next fragment or slide.
+- Backspace: previous fragment or slide.
+
+## Utility Classes
+- `.text-highlight` inline / line-marker style highlight
+- `.card` rounded bordered container with padding
+
+![Utility Example](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/7.png)
+
+## Development
+```bash
+pnpm install
+pnpm dev
+pnpm build
+pnpm export
+pnpm screenshot
+```
+
+## FAQ
+**Q. Do I need to configure fonts manually?**  
+No. Google Fonts are loaded inside the theme.
+
+**Q. How can I remove the footer?**  
+Override `global-bottom.vue` in your own custom theme.
+
+**Q. How do I change the numbering start?**  
+Use `:start="[1,'c']"` (array per hierarchy level).
+
+## See Also
+Japanese documentation: `README.ja.md`
+
+Happy teaching! 🎓

package/components/KaTexReveal.vue

@@ -0,0 +1,64 @@
+<template>
+  <component
+    :is="resolvedTag"
+    ref="root"
+    v-bind="forwardedAttrs"
+    :class="['katex-reveal', attrs.class]"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUpdated, ref, useAttrs } from 'vue';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+  formula: string;
+  block?: boolean;
+  tag?: string;
+}>(), {
+  block: false,
+  tag: undefined,
+});
+
+const attrs = useAttrs();
+const root = ref<HTMLElement | null>(null);
+
+const forwardedAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs as Record<string, any>;
+  return rest;
+});
+
+const resolvedTag = computed(() => props.tag ?? (props.block ? 'div' : 'span'));
+
+const renderFormula = () => {
+  const target = root.value;
+  if (!target) return;
+
+  if (!props.formula) {
+    target.innerHTML = '';
+    return;
+  }
+
+  try {
+    katex.render(props.formula, target, {
+      displayMode: props.block,
+      throwOnError: false,
+    });
+  } catch (error) {
+    console.warn('[KaTexReveal] failed to render formula', error);
+    target.textContent = props.formula;
+  }
+};
+
+onMounted(renderFormula);
+onUpdated(renderFormula);
+</script>
+
+<style scoped>
+.katex-reveal {
+  vertical-align: middle;
+}
+</style>

package/components/QuestionList.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="question-list" :style="{ '--level': currentLevel }">
+    <div v-for="(item, index) in items" :key="index" class="question-item">
+      <div class="item-content">
+        <span class="item-label" v-html="getLabel(index)"></span>
+        <span v-if="hasRenderableContent(item)" class="item-text">
+          <KaTexReveal
+            v-if="isKatexItem(item)"
+            :formula="getFormula(item)"
+            :block="isBlockFormula(item)"
+            v-bind="getKatexAttrs(item)"
+          />
+          <component v-else :is="renderMarkdown(getItemText(item))" />
+        </span>
+      </div>
+      <div v-if="hasSubItems(item)" class="sub-list" :style="{ marginTop: getItemText(item) ? '1rem' : '0' }">
+        <QuestionList
+          :items="getSubItems(item)"
+          :styles="styles"
+          :level="currentLevel + 1"
+          :start="Array.isArray(start) ? start : []"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import KaTexReveal from './KaTexReveal.vue';
+import { renderMarkdown } from '../utils/render';
+
+const props = withDefaults(defineProps<{
+  items: (string | Record<string, any>)[];
+  styles?: string[];
+  level?: number;
+  start?: (number | string)[];
+}>(), {
+  styles: () => ['decimal-circle', 'katakana-paren', 'lower-alpha-paren', 'decimal-dot'],
+  level: 0,
+  start: () => [],
+});
+
+const currentLevel = computed(() => props.level ?? 0);
+
+const TEX_WRAPPERS = [
+  { start: '$$', end: '$$' },
+  { start: '\\[', end: '\\]' },
+  { start: '\\(', end: '\\)' },
+];
+
+const stripTexDelimiters = (value: string): string => {
+  const trimmed = value.trim();
+  for (const { start, end } of TEX_WRAPPERS) {
+    if (trimmed.startsWith(start) && trimmed.endsWith(end)) {
+      return trimmed.slice(start.length, trimmed.length - end.length).trim();
+    }
+  }
+  return trimmed;
+};
+
+const extractFormulaFromText = (value?: string): string => {
+  if (!value) return '';
+  const trimmed = value.trim();
+  for (const { start, end } of TEX_WRAPPERS) {
+    if (trimmed.startsWith(start) && trimmed.endsWith(end)) {
+      return stripTexDelimiters(trimmed);
+    }
+  }
+  return '';
+};
+
+const hasRenderableContent = (item: string | Record<string, any>): boolean => {
+  if (isKatexItem(item)) return true;
+  return Boolean(getItemText(item).trim());
+};
+
+const normalizedItemType = (item: Record<string, any>): string => {
+  if (typeof item.type !== 'string') return '';
+  return item.type.toLowerCase();
+};
+
+const getFormula = (item: string | Record<string, any>): string => {
+  if (typeof item === 'object') {
+    if (typeof item.formula === 'string' && item.formula.trim()) {
+      return stripTexDelimiters(item.formula);
+    }
+    const hint = item.tex === true || ['katex', 'tex', 'math'].includes(normalizedItemType(item));
+    if (hint && typeof item.text === 'string') {
+      return stripTexDelimiters(item.text);
+    }
+    const extracted = extractFormulaFromText(item.text);
+    return extracted;
+  }
+  return extractFormulaFromText(item) || '';
+};
+
+const isKatexItem = (item: string | Record<string, any>): boolean => {
+  return Boolean(getFormula(item));
+};
+
+const isBlockFormula = (item: string | Record<string, any>): boolean => {
+  if (typeof item === 'object' && typeof item.block === 'boolean') {
+    return item.block;
+  }
+
+  const source = typeof item === 'string'
+    ? item
+    : typeof item.formula === 'string'
+      ? item.formula
+      : typeof item.text === 'string'
+        ? item.text
+        : '';
+  const trimmed = source.trim();
+  if (!trimmed) return true;
+  if (trimmed.startsWith('\\(') && trimmed.endsWith('\\)')) return false;
+  if (trimmed.startsWith('$') && trimmed.endsWith('$') && !trimmed.startsWith('$$')) return false;
+  if (trimmed.startsWith('$$') && trimmed.endsWith('$$')) return true;
+  if (trimmed.startsWith('\\[') && trimmed.endsWith('\\]')) return true;
+  return true;
+};
+
+const reservedItemKeys = new Set(['text', 'items', 'label', 'block', 'type', 'tex', 'formula', 'attrs']);
+
+const getKatexAttrs = (item: string | Record<string, any>): Record<string, any> => {
+  if (typeof item !== 'object') {
+    return {};
+  }
+  if (item.attrs && typeof item.attrs === 'object') {
+    return item.attrs;
+  }
+  const attrs: Record<string, any> = {};
+  Object.keys(item).forEach((key) => {
+    if (!reservedItemKeys.has(key)) {
+      attrs[key] = item[key];
+    }
+  });
+  return attrs;
+};
+
+const getItemText = (item: string | Record<string, any>): string => 
+  (typeof item === 'string' ? item : item.text) || '';
+
+const hasSubItems = (item: string | Record<string, any>): boolean => 
+  typeof item === 'object' && Array.isArray(item.items);
+
+const getSubItems = (item: string | Record<string, any>): any[] => 
+  (typeof item === 'object' && Array.isArray(item.items)) ? item.items : [];
+
+const getLabel = (index: number): string => {
+  const item = props.items[index];
+  // 1. Custom item-specific labels override everything
+  if (typeof item === 'object' && typeof item.label === 'string') {
+    return item.label;
+  }
+
+  const style = props.styles[currentLevel.value] || 'decimal-dot';
+  const [counterType, decoratorType] = style.split('-');
+
+  // 2. Calculate the counter
+  const startIndex = props.start[currentLevel.value] ? (typeof props.start[currentLevel.value] === 'number' ? (props.start[currentLevel.value] as number) - 1 : String(props.start[currentLevel.value]).charCodeAt(0) - 'a'.charCodeAt(0)) : 0;
+  const currentIndex = startIndex + index;
+  
+  let counter = '';
+  switch (counterType) {
+    case 'hiragana':
+      counter = toHiragana(currentIndex); break;
+    case 'katakana':
+      counter = toKatakana(currentIndex); break;
+    case 'kanji':
+      counter = toKanji(currentIndex + 1); break;
+    case 'upperalpha':
+      counter = String.fromCharCode('A'.charCodeAt(0) + currentIndex); break;
+    case 'loweralpha':
+      counter = String.fromCharCode('a'.charCodeAt(0) + currentIndex); break;
+    case 'decimal':
+      counter = (currentIndex + 1).toString(); break;
+    case 'none':
+      return ''; // No label
+    default:
+      counter = (currentIndex + 1).toString();
+  }
+
+  // 3. Apply decorator
+  switch (decoratorType) {
+    case 'circle':
+      return `&#x${(9311 + currentIndex + 1).toString(16)};`; // ①, ②, ...
+    case 'square':
+      return `[${counter}]`;
+    case 'paren':
+      return `(${counter})`;
+    case 'dot':
+      return `${counter}.`;
+    case 'q':
+      return `問${counter}`;
+    case 'big-q':
+      return `大問${counter}`;
+    case 'none':
+      return '';
+    default:
+      return counter;
+  }
+};
+
+// --- Helper functions for counters ---
+const toKatakana = (n: number) => {
+  const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
+  return katakana[n % katakana.length];
+};
+const toHiragana = (n: number) => {
+  const hiragana = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん';
+  return hiragana[n % hiragana.length];
+};
+const toKanji = (n: number) => {
+  const kanji = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
+  if (n <= 10) return kanji[n - 1];
+  // Basic support for > 10
+  if (n <= 19) return '十' + kanji[n - 11];
+  return n.toString(); // Fallback
+};
+
+</script>
+
+<style scoped>
+.question-list {
+  padding-left: calc(var(--level, 0) * 2.5rem);
+}
+.question-item {
+  margin-bottom: 0.6rem;
+}
+.item-content {
+  display: flex;
+  align-items: baseline;
+  line-height: 1.6;
+}
+.item-label {
+  font-weight: bold;
+  color: var(--slidev-theme-primary);
+  margin-right: 0.75em;
+  min-width: 2em; /* Allocate space for label */
+  text-align: right;
+}
+.item-text {
+  flex: 1;
+}
+.item-text :deep(p) {
+  margin: 0;
+}
+.sub-list {
+  margin-top: 1rem;
+}
+</style>

package/components/TextBox.vue

@@ -0,0 +1,109 @@
+<template>
+  <div 
+    class="textbox"
+    :class="computedClasses"
+    :style="computedStyles"
+    v-click="vClick"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  color?: string
+  textBg?: string
+  vClick?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  x: 0,
+  y: 0,
+  width: 300,
+  height: undefined,
+  color: undefined,
+  textBg: undefined,
+  vClick: undefined
+})
+
+const computedStyles = computed(() => ({
+  left: `${props.x}px`,
+  top: `${props.y}px`,
+  width: `${props.width}px`,
+  ...(props.height && { height: `${props.height}px` })
+}))
+
+const computedClasses = computed(() => {
+  const classes: string[] = []
+
+  if (props.textBg) {
+    classes.push(`bg-${props.textBg}`)
+  }
+  
+  if (props.color) {
+    classes.push(`text-${props.color}`)
+  }
+  
+  return classes
+})
+</script>
+
+<style scoped>
+  .textbox {
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0);
+    padding: 0.6rem;
+    border-radius: 0.5rem;
+  }
+  
+  .bg-green {
+    background: rgba(76, 175, 80);
+    color: white;
+  }
+
+  .bg-blue {
+    background: rgba(33, 150, 243);
+    color: white;
+  }
+
+  .bg-red {
+    background: rgba(244, 67, 54);
+    color: white;
+  }
+
+  .bg-yellow {
+    background: rgba(255, 193, 7);
+    color: #333;
+  }
+
+  .bg-white {
+    background: rgba(255, 255, 255);
+  }
+
+/* Text color variants */
+.text-blue {
+  color: #3b82f6 !important;
+}
+
+.text-green {
+  color: #10b981 !important;
+}
+
+.text-red {
+  color: #ef4444 !important;
+}
+
+.text-purple {
+  color: #8b5cf6 !important;
+}
+
+.text-orange {
+  color: #f97316 !important;
+}
+</style>