slidev-theme-watabegg 1.1.3 → 1.1.4

package/README.ja.md

@@ -2,7 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/slidev-theme-watabegg?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-watabegg)
 
-教育現場（集団授業・試験対策）向けに視認性と操作性を重視した Slidev テーマです。普通に自分用に開発しました。
+watabegg 向けに作っている個人用 Slidev テーマです。日本語表示、構造化されたコンテンツ、キーボード操作を重視しています。
 
 ## 特徴
 - 教育特化のミニマルデザイン
@@ -31,16 +31,21 @@ theme: ./
 
 ## フロントマター例
 ```yaml
+themeConfig:
+  watabegg:
+    color: green
+    link: 'https://example.com'
+
 title: Theme Demo
 subtitle: サブタイトル
 author: 講師名
 date: '2025/08/03'
-color: green # red | yellow | green | blue | purple
-link: 'https://example.com' # フッターリンク（省略可）
+color: blue # スライド単位の上書き（省略可）
+link: 'https://example.com/slide' # スライド単位の上書き（省略可）
 transition: fade
 ```
 
-`color` を省略するとデフォルトの `green` が適用されます。
+`themeConfig.watabegg.color` と `themeConfig.watabegg.link` で deck 全体の既定値を設定できます。スライド側に `color` や `link` があればそちらが優先されます。
 
 下図は`blue`指定の例。
 
@@ -118,7 +123,7 @@ imageScroll:
 ```
 カウンター種別: `decimal | hiragana | katakana | kanji | upperalpha | loweralpha | none`  
 デコレータ: `circle | square | paren | dot | q | big-q | none`  
-アイテム内 `label` があればそれを優先表示。
+アイテム内 `label` があればそれを優先表示。`text` 内の生 HTML はエスケープされ、Markdown リンクも `http` / `https` / `mailto` / `tel` と相対 URL のみ許可されます。
 
 ![QuestionList 例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/3.png)
 
@@ -154,11 +159,14 @@ Props: `formula`(必須), `block`(既定 false), `tag`(省略時 `div`/`span`
 ```bash
 pnpm install
 pnpm dev
+pnpm dev:polling
 pnpm build
 pnpm export
 pnpm screenshot
 ```
 
+Linux で `pnpm dev` が file watcher 上限 (`ENOSPC`) に当たる場合は `pnpm dev:polling` を使用してください。
+
 ## FAQ
 **Q. フォント設定は必要？** → いいえ、テーマ内で Google Fonts を読み込みます。
 

package/README.md

@@ -5,7 +5,7 @@
 English README (Japanese version: see `README.ja.md`).
 
 ## Overview
-Education-focused Slidev theme for exam prep & classroom lessons, optimized for Japanese typography, high readability, structured question hierarchies, and keyboard-centric navigation. Originally built for personal teaching use.
+A personal Slidev theme for watabegg, tuned for Japanese typography, structured content, and keyboard-first navigation.
 
 ## Features
 - Minimal design specialized for teaching
@@ -35,16 +35,21 @@ theme: ./
 
 ## Frontmatter Example
 ```yaml
+themeConfig:
+  watabegg:
+    color: green
+    link: 'https://example.com'
+
 title: Theme Demo
 subtitle: Subtitle
 author: Instructor Name
 date: '2025/08/03'
-color: green # red | yellow | green | blue | purple
-link: 'https://example.com' # optional footer link
+color: blue # optional slide-level override
+link: 'https://example.com/slide' # optional slide-level override
 transition: fade
 ```
 
-If `color` is omitted, the default `green` palette is used.
+`themeConfig.watabegg.color` and `themeConfig.watabegg.link` define deck-level defaults. Slide-level `color` and `link` override them when present.
 
 Below: `color: blue` example.
 
@@ -123,6 +128,7 @@ Nested questions/answers with per-level styles and Markdown rendering.
 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.
+Raw HTML inside `text` is escaped. Markdown links only allow safe protocols (`http`, `https`, `mailto`, `tel`) plus relative URLs.
 
 ![QuestionList Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/3.png)
 
@@ -158,11 +164,14 @@ Props: `formula` (required), `block` (default `false`), `tag` (auto `div`/`span`
 ```bash
 pnpm install
 pnpm dev
+pnpm dev:polling
 pnpm build
 pnpm export
 pnpm screenshot
 ```
 
+If `pnpm dev` hits Linux file watcher limits (`ENOSPC`), use `pnpm dev:polling`.
+
 ## FAQ
 **Q. Do I need to configure fonts manually?**  
 No. Google Fonts are loaded inside the theme.

package/components/KaTexReveal.vue

@@ -8,53 +8,54 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUpdated, ref, useAttrs } from 'vue';
-import katex from 'katex';
-import 'katex/dist/katex.min.css';
+import { computed, onMounted, onUpdated, ref, useAttrs } from 'vue'
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
 
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<{
-  formula: string;
-  block?: boolean;
-  tag?: string;
+  formula: string
+  block?: boolean
+  tag?: string
 }>(), {
   block: false,
   tag: undefined,
-});
+})
 
-const attrs = useAttrs();
-const root = ref<HTMLElement | null>(null);
+const attrs = useAttrs()
+const root = ref<HTMLElement | null>(null)
 
 const forwardedAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs as Record<string, any>;
-  return rest;
-});
+  const { class: _class, ...rest } = attrs as Record<string, unknown>
+  return rest
+})
 
-const resolvedTag = computed(() => props.tag ?? (props.block ? 'div' : 'span'));
+const resolvedTag = computed(() => props.tag ?? (props.block ? 'div' : 'span'))
 
 const renderFormula = () => {
-  const target = root.value;
-  if (!target) return;
+  const target = root.value
+  if (!target)
+    return
 
   if (!props.formula) {
-    target.innerHTML = '';
-    return;
+    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;
+    console.warn('[KaTexReveal] failed to render formula', error)
+    target.textContent = props.formula
   }
-};
+}
 
-onMounted(renderFormula);
-onUpdated(renderFormula);
+onMounted(renderFormula)
+onUpdated(renderFormula)
 </script>
 
 <style scoped>

package/components/QuestionList.vue

@@ -2,7 +2,7 @@
   <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 class="item-label">{{ getLabel(index) }}</span>
         <span v-if="hasRenderableContent(item)" class="item-text">
           <KaTexReveal
             v-if="isKatexItem(item)"
@@ -10,7 +10,7 @@
             :block="isBlockFormula(item)"
             v-bind="getKatexAttrs(item)"
           />
-          <component v-else :is="renderMarkdown(getItemText(item))" />
+          <span v-else v-html="renderItemText(item)" />
         </span>
       </div>
       <div v-if="hasSubItems(item)" class="sub-list" :style="{ marginTop: getItemText(item) ? '1rem' : '0' }">
@@ -26,198 +26,324 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import KaTexReveal from './KaTexReveal.vue';
-import { renderMarkdown } from '../utils/render';
+import { computed } from 'vue'
+
+import KaTexReveal from './KaTexReveal.vue'
+import { renderInlineMarkdown } from '../utils/render'
+
+type QuestionListItem = string | QuestionListItemObject
+
+interface QuestionListItemObject {
+  attrs?: Record<string, unknown>
+  block?: boolean
+  formula?: string
+  items?: QuestionListItem[]
+  label?: string
+  text?: string
+  tex?: boolean
+  type?: string
+  [key: string]: unknown
+}
+
+type CounterType =
+  | 'decimal'
+  | 'hiragana'
+  | 'katakana'
+  | 'kanji'
+  | 'upperalpha'
+  | 'loweralpha'
+  | 'none'
+
+type DecoratorType =
+  | 'circle'
+  | 'square'
+  | 'paren'
+  | 'dot'
+  | 'q'
+  | 'big-q'
+  | 'none'
 
 const props = withDefaults(defineProps<{
-  items: (string | Record<string, any>)[];
-  styles?: string[];
-  level?: number;
-  start?: (number | string)[];
+  items: QuestionListItem[]
+  styles?: string[]
+  level?: number
+  start?: (number | string)[]
 }>(), {
-  styles: () => ['decimal-circle', 'katakana-paren', 'lower-alpha-paren', 'decimal-dot'],
+  styles: () => ['decimal-circle', 'katakana-paren', 'loweralpha-paren', 'decimal-dot'],
   level: 0,
   start: () => [],
-});
+})
 
-const currentLevel = computed(() => props.level ?? 0);
+const currentLevel = computed(() => props.level ?? 0)
+
+const counterAliases: Record<string, CounterType> = {
+  decimal: 'decimal',
+  hiragana: 'hiragana',
+  katakana: 'katakana',
+  kanji: 'kanji',
+  loweralpha: 'loweralpha',
+  'lower-alpha': 'loweralpha',
+  none: 'none',
+  upperalpha: 'upperalpha',
+  'upper-alpha': 'upperalpha',
+}
+
+const supportedCounters = Object.keys(counterAliases)
+  .sort((left, right) => right.length - left.length)
+
+const supportedDecorators: DecoratorType[] = ['big-q', 'circle', 'square', 'paren', 'dot', 'q', 'none']
+
+const circledNumbers = [
+  '①',
+  '②',
+  '③',
+  '④',
+  '⑤',
+  '⑥',
+  '⑦',
+  '⑧',
+  '⑨',
+  '⑩',
+  '⑪',
+  '⑫',
+  '⑬',
+  '⑭',
+  '⑮',
+  '⑯',
+  '⑰',
+  '⑱',
+  '⑲',
+  '⑳',
+]
 
 const TEX_WRAPPERS = [
   { start: '$$', end: '$$' },
   { start: '\\[', end: '\\]' },
   { start: '\\(', end: '\\)' },
-];
+]
+
+function isObjectItem(item: QuestionListItem): item is QuestionListItemObject {
+  return typeof item === 'object' && item !== null
+}
 
 const stripTexDelimiters = (value: string): string => {
-  const trimmed = value.trim();
+  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.slice(start.length, trimmed.length - end.length).trim()
     }
   }
-  return trimmed;
-};
+  return trimmed
+}
 
 const extractFormulaFromText = (value?: string): string => {
-  if (!value) return '';
-  const trimmed = value.trim();
+  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 stripTexDelimiters(trimmed)
     }
   }
-  return '';
-};
+  return ''
+}
+
+function parseStyle(style: string | undefined): { counterType: CounterType, decoratorType: DecoratorType } {
+  const normalized = style?.trim().toLowerCase() ?? ''
+  if (!normalized)
+    return { counterType: 'decimal', decoratorType: 'dot' }
+
+  if (normalized === 'none')
+    return { counterType: 'none', decoratorType: 'none' }
+
+  const counterKey = supportedCounters.find((candidate) => normalized === candidate || normalized.startsWith(`${candidate}-`))
+  const counterType = counterKey
+    ? counterAliases[counterKey]
+    : 'decimal'
+
+  const rawDecorator = counterKey && normalized.length > counterKey.length
+    ? normalized.slice(counterKey.length + 1)
+    : 'dot'
+
+  const decoratorType = supportedDecorators.includes(rawDecorator as DecoratorType)
+    ? rawDecorator as DecoratorType
+    : 'dot'
+
+  return { counterType, decoratorType }
+}
+
+function getTextContent(item: QuestionListItemObject | string | undefined) {
+  if (typeof item === 'string')
+    return item
+
+  return typeof item?.text === 'string'
+    ? item.text
+    : ''
+}
+
+function getStartIndex(counterType: CounterType, value: number | string | undefined) {
+  if (typeof value === 'number')
+    return value - 1
+
+  if (typeof value === 'string' && value.length > 0) {
+    const firstChar = value[0]
+    if (counterType === 'upperalpha')
+      return firstChar.toUpperCase().charCodeAt(0) - 'A'.charCodeAt(0)
+
+    if (counterType === 'loweralpha')
+      return firstChar.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0)
+  }
 
-const hasRenderableContent = (item: string | Record<string, any>): boolean => {
-  if (isKatexItem(item)) return true;
-  return Boolean(getItemText(item).trim());
-};
+  return 0
+}
+
+const hasRenderableContent = (item: QuestionListItem): 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 normalizedItemType = (item: QuestionListItemObject): string => {
+  if (typeof item.type !== 'string') return ''
+  return item.type.toLowerCase()
+}
 
-const getFormula = (item: string | Record<string, any>): string => {
-  if (typeof item === 'object') {
+const getFormula = (item: QuestionListItem): string => {
+  if (isObjectItem(item)) {
     if (typeof item.formula === 'string' && item.formula.trim()) {
-      return stripTexDelimiters(item.formula);
+      return stripTexDelimiters(item.formula)
     }
-    const hint = item.tex === true || ['katex', 'tex', 'math'].includes(normalizedItemType(item));
+    const hint = item.tex === true || ['katex', 'tex', 'math'].includes(normalizedItemType(item))
     if (hint && typeof item.text === 'string') {
-      return stripTexDelimiters(item.text);
+      return stripTexDelimiters(item.text)
     }
-    const extracted = extractFormulaFromText(item.text);
-    return extracted;
+    return extractFormulaFromText(item.text)
   }
-  return extractFormulaFromText(item) || '';
-};
+  return extractFormulaFromText(item) || ''
+}
 
-const isKatexItem = (item: string | Record<string, any>): boolean => {
-  return Boolean(getFormula(item));
-};
+const isKatexItem = (item: QuestionListItem): boolean => Boolean(getFormula(item))
 
-const isBlockFormula = (item: string | Record<string, any>): boolean => {
-  if (typeof item === 'object' && typeof item.block === 'boolean') {
-    return item.block;
+const isBlockFormula = (item: QuestionListItem): boolean => {
+  if (isObjectItem(item) && typeof item.block === 'boolean') {
+    return item.block
   }
 
-  const source = typeof item === 'string'
-    ? item
-    : typeof item.formula === 'string'
+  const source = isObjectItem(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 {};
+        : ''
+    : item
+  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: QuestionListItem): Record<string, unknown> => {
+  if (!isObjectItem(item)) {
+    return {}
   }
   if (item.attrs && typeof item.attrs === 'object') {
-    return item.attrs;
+    return item.attrs
   }
-  const attrs: Record<string, any> = {};
+  const attrs: Record<string, unknown> = {}
   Object.keys(item).forEach((key) => {
     if (!reservedItemKeys.has(key)) {
-      attrs[key] = item[key];
+      attrs[key] = item[key]
     }
-  });
-  return attrs;
-};
+  })
+  return attrs
+}
 
-const getItemText = (item: string | Record<string, any>): string => 
-  (typeof item === 'string' ? item : item.text) || '';
+const getItemText = (item: QuestionListItem): string => getTextContent(item)
 
-const hasSubItems = (item: string | Record<string, any>): boolean => 
-  typeof item === 'object' && Array.isArray(item.items);
+const hasSubItems = (item: QuestionListItem): boolean => isObjectItem(item) && Array.isArray(item.items)
 
-const getSubItems = (item: string | Record<string, any>): any[] => 
-  (typeof item === 'object' && Array.isArray(item.items)) ? item.items : [];
+const getSubItems = (item: QuestionListItem): QuestionListItem[] =>
+  isObjectItem(item) && 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 item = props.items[index]
+  if (isObjectItem(item) && typeof item.label === 'string') {
+    return item.label
   }
 
-  const style = props.styles[currentLevel.value] || 'decimal-dot';
-  const [counterType, decoratorType] = style.split('-');
+  const { counterType, decoratorType } = parseStyle(props.styles[currentLevel.value])
+  if (counterType === 'none' || decoratorType === 'none')
+    return ''
 
-  // 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 = '';
+  const startIndex = getStartIndex(counterType, props.start[currentLevel.value])
+  const currentIndex = startIndex + index
+
+  let counter = ''
   switch (counterType) {
     case 'hiragana':
-      counter = toHiragana(currentIndex); break;
+      counter = toHiragana(currentIndex)
+      break
     case 'katakana':
-      counter = toKatakana(currentIndex); break;
+      counter = toKatakana(currentIndex)
+      break
     case 'kanji':
-      counter = toKanji(currentIndex + 1); break;
+      counter = toKanji(currentIndex + 1)
+      break
     case 'upperalpha':
-      counter = String.fromCharCode('A'.charCodeAt(0) + currentIndex); break;
+      counter = String.fromCharCode('A'.charCodeAt(0) + currentIndex)
+      break
     case 'loweralpha':
-      counter = String.fromCharCode('a'.charCodeAt(0) + currentIndex); break;
+      counter = String.fromCharCode('a'.charCodeAt(0) + currentIndex)
+      break
     case 'decimal':
-      counter = (currentIndex + 1).toString(); break;
-    case 'none':
-      return ''; // No label
+      counter = (currentIndex + 1).toString()
+      break
     default:
-      counter = (currentIndex + 1).toString();
+      counter = (currentIndex + 1).toString()
   }
 
-  // 3. Apply decorator
   switch (decoratorType) {
     case 'circle':
-      return `&#x${(9311 + currentIndex + 1).toString(16)};`; // ①, ②, ...
+      return circledNumbers[currentIndex] ?? `${counter}.`
     case 'square':
-      return `[${counter}]`;
+      return `[${counter}]`
     case 'paren':
-      return `(${counter})`;
+      return `(${counter})`
     case 'dot':
-      return `${counter}.`;
+      return `${counter}.`
     case 'q':
-      return `問${counter}`;
+      return `問${counter}`
     case 'big-q':
-      return `大問${counter}`;
-    case 'none':
-      return '';
+      return `大問${counter}`
     default:
-      return counter;
+      return counter
   }
-};
+}
+
+const renderItemText = (item: QuestionListItem) => renderInlineMarkdown(getItemText(item))
 
-// --- Helper functions for counters ---
 const toKatakana = (n: number) => {
-  const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
-  return katakana[n % katakana.length];
-};
+  const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン'
+  return katakana[((n % katakana.length) + katakana.length) % katakana.length]
+}
+
 const toHiragana = (n: number) => {
-  const hiragana = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん';
-  return hiragana[n % hiragana.length];
-};
+  const hiragana = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん'
+  return hiragana[((n % hiragana.length) + hiragana.length) % 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
-};
+  const kanji = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
+  if (n <= 0) return n.toString()
+  if (n <= 10) return kanji[n - 1]
+  if (n < 20) return `十${kanji[n - 11]}`
+  return n.toString()
+}
 
 </script>
 
@@ -237,7 +363,7 @@ const toKanji = (n: number) => {
   font-weight: bold;
   color: var(--slidev-theme-primary);
   margin-right: 0.75em;
-  min-width: 2em; /* Allocate space for label */
+  min-width: 2em;
   text-align: right;
 }
 .item-text {

package/components/TextBox.vue

@@ -88,22 +88,22 @@ const computedClasses = computed(() => {
 
 /* Text color variants */
 .text-blue {
-  color: #3b82f6 !important;
+  color: #3b82f6;
 }
 
 .text-green {
-  color: #10b981 !important;
+  color: #10b981;
 }
 
 .text-red {
-  color: #ef4444 !important;
+  color: #ef4444;
 }
 
 .text-purple {
-  color: #8b5cf6 !important;
+  color: #8b5cf6;
 }
 
 .text-orange {
-  color: #f97316 !important;
+  color: #f97316;
 }
 </style>

package/global-bottom.vue

@@ -1,18 +1,26 @@
 <script setup lang="ts">
-import { watchEffect } from 'vue'
-import { useSlideContext } from '@slidev/client'
+import { computed, watchEffect } from 'vue'
+import { useNav, useSlideContext } from '@slidev/client'
 
 import { useActiveThemePalette } from './utils/useThemePalette'
 import getLink from './utils/link'
 
-const { $frontmatter, $nav, $slidev } = useSlideContext()
+const { $nav, $slidev } = useSlideContext()
+const { currentSlideRoute } = useNav()
 
-const link = getLink({
-  frontmatter: $frontmatter,
+const currentFrontmatter = computed<Record<string, unknown>>(
+  () => currentSlideRoute.value.meta?.slide?.frontmatter ?? {},
+)
+
+const link = computed(() => getLink({
+  frontmatter: currentFrontmatter.value,
   slidevConfigs: $slidev?.configs as Record<string, unknown> | undefined,
-})
+}))
 
-const { palette: currentPalette } = useActiveThemePalette(() => $frontmatter.color)
+const { palette: currentPalette } = useActiveThemePalette({
+  slidevConfigs: $slidev?.configs as Record<string, unknown> | undefined,
+  slideValue: () => currentFrontmatter.value.color,
+})
 
 watchEffect(() => {
   if (typeof document === 'undefined')

package/layouts/cover.vue

@@ -11,7 +11,15 @@
       {{ $frontmatter.author }}
     </div>
     <div class="wave">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 700" width="100%" height="100%" preserveAspectRatio="none">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1280 700"
+        width="100%"
+        height="100%"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+        focusable="false"
+      >
         <defs>
           <linearGradient id="wave-1754178473929" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="700" y2="700" gradientTransform="scale(1.83, 1)">
             <stop offset="0%" :stop-color="currentPalette.gradientStart"/>
@@ -30,9 +38,12 @@ import { useSlideContext } from '@slidev/client'
 
 import { useActiveThemePalette } from '../utils/useThemePalette'
 
-const { $frontmatter } = useSlideContext()
+const { $frontmatter, $slidev } = useSlideContext()
 
-const { palette: currentPalette } = useActiveThemePalette(() => $frontmatter.color)
+const { palette: currentPalette } = useActiveThemePalette({
+  slidevConfigs: $slidev?.configs as Record<string, unknown> | undefined,
+  slideValue: () => $frontmatter.color,
+})
 
 const cssVars = computed(() => ({
   '--slidev-theme-primary': currentPalette.value.primary,

package/layouts/image-scroll.vue

@@ -32,7 +32,9 @@ import { useSlideContext } from '@slidev/client'
 
 const { $frontmatter } = useSlideContext()
 
-const imageSrc = computed(() => $frontmatter.image)
+const imageSrc = computed(() => typeof $frontmatter.image === 'string'
+  ? $frontmatter.image
+  : '')
 
 const wrapperRef = ref<HTMLElement | null>(null)
 const scrollerRef = ref<HTMLElement | null>(null)

package/layouts/image.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="slidev-layout image">
-    <img 
-      v-if="$frontmatter.image" 
-      :src="$frontmatter.image" 
+    <img
+      v-if="imageSrc"
+      :src="imageSrc"
       class="background-image"
       alt="Background"
     />
@@ -13,8 +13,14 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useSlideContext } from '@slidev/client'
+
 const { $frontmatter } = useSlideContext()
+
+const imageSrc = computed(() => typeof $frontmatter.image === 'string'
+  ? $frontmatter.image
+  : '')
 </script>
 
 <style scoped>

package/package.json

@@ -1,38 +1,67 @@
 {
   "name": "slidev-theme-watabegg",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
+  "packageManager": "pnpm@11.1.3",
   "author": "watabegg",
-  "description": "Slidev theme for educational purposes, especially teaching.",
+  "description": "A personal Slidev theme for watabegg.",
   "license": "MIT",
+  "homepage": "https://github.com/watabegg/slidev-theme-watabegg#readme",
+  "bugs": {
+    "url": "https://github.com/watabegg/slidev-theme-watabegg/issues"
+  },
   "keywords": [
     "slidev-theme",
     "slidev",
-    "education",
-    "exam",
-    "teaching"
+    "watabegg",
+    "personal-theme"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.12.0",
+    "slidev": ">=52.15.2"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/watabegg/slidev-theme-watabegg"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "components",
+    "layouts",
+    "setup",
+    "styles",
+    "utils",
+    "global-bottom.vue"
+  ],
   "scripts": {
     "build": "slidev build example.md",
     "dev": "slidev example.md",
+    "dev:polling": "CHOKIDAR_USEPOLLING=1 slidev example.md",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "lint": "biome lint .",
+    "format": "biome format --write .",
+    "format:check": "biome format .",
+    "check": "pnpm typecheck && pnpm lint && pnpm format:check && pnpm build && pnpm pack --dry-run",
+    "audit:prod": "pnpm audit --prod --audit-level=high",
     "export": "slidev export example.md",
     "screenshot": "slidev export example.md --format png"
   },
   "dependencies": {
-    "@slidev/types": "^52.1.0",
-    "katex": "^0.16.25"
+    "@slidev/types": "^52.15.2",
+    "katex": "^0.16.47",
+    "marked": "^18.0.4"
   },
   "devDependencies": {
-    "@slidev/cli": "^52.1.0",
-    "bumpp": "^10.3.2",
-    "playwright-chromium": "^1.54.2"
+    "@biomejs/biome": "^2.4.15",
+    "@slidev/cli": "^52.15.2",
+    "@slidev/client": "^52.15.2",
+    "bumpp": "^11.1.0",
+    "playwright-chromium": "^1.60.0",
+    "typescript": "^6.0.3",
+    "vue": "^3.5.34",
+    "vue-tsc": "^3.3.1"
   },
   "//": "Learn more: https://sli.dev/guide/write-theme.html",
   "slidev": {
@@ -46,4 +75,4 @@
       "lineNumbers": false
     }
   }
-}
+}

package/styles/globals.css.d.ts

@@ -0,0 +1,3 @@
+declare const css: string
+
+export default css

package/styles/layout.css.d.ts

@@ -0,0 +1,3 @@
+declare const css: string
+
+export default css

package/utils/colors.ts

@@ -43,8 +43,7 @@ export const themePalettes: Record<ThemeColorKey, ThemePalette> = {
 }
 
 export function resolveThemeColor(rawValue: unknown): ThemeColorKey {
-  if (typeof rawValue !== 'string')
-    return defaultThemeColor
+  if (typeof rawValue !== 'string') return defaultThemeColor
 
   const normalized = rawValue.trim().toLowerCase() as ThemeColorKey
   return normalized in themePalettes ? normalized : defaultThemeColor
@@ -54,4 +53,3 @@ export function getThemePalette(rawValue: unknown): ThemePalette {
   const key = resolveThemeColor(rawValue)
   return themePalettes[key]
 }
-

package/utils/link.ts

@@ -1,3 +1,6 @@
+import { toSafeUrl } from './safeUrl'
+import { getWatabeggThemeConfig } from './themeConfig'
+
 const getLink = ({
   frontmatter,
   slidevConfigs,
@@ -5,13 +8,13 @@ const getLink = ({
   frontmatter: Record<string, unknown>
   slidevConfigs: Record<string, unknown> | undefined
 }) => {
-  if (typeof frontmatter.link === 'string' && frontmatter.link.length > 0)
-    return frontmatter.link
-  
-  const globalLink = slidevConfigs?.['link']
-  return typeof globalLink === 'string' && globalLink.length > 0
-    ? globalLink
-    : undefined
+  const frontmatterLink = toSafeUrl(frontmatter.link)
+  if (frontmatterLink) return frontmatterLink
+
+  const themeConfigLink = toSafeUrl(getWatabeggThemeConfig(slidevConfigs).link)
+  if (themeConfigLink) return themeConfigLink
+
+  return toSafeUrl(slidevConfigs?.link)
 }
 
-export default getLink
+export default getLink

package/utils/render.ts

@@ -1,5 +1,43 @@
-import { marked } from 'marked';
+import { Marked } from 'marked'
 
-export const renderMarkdown = (text: string) => ({
-  template: `<div class="inline-block">${marked.parse(text)}</div>`
-});
+import { toSafeUrl } from './safeUrl'
+
+function escapeHtml(value: string) {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+const inlineMarkdown = new Marked({
+  async: false,
+  gfm: true,
+  renderer: {
+    image(token) {
+      const src = toSafeUrl(token.href)
+      const alt = escapeHtml(token.text)
+      const title =
+        typeof token.title === 'string' && token.title ? ` title="${escapeHtml(token.title)}"` : ''
+
+      if (!src) return alt
+
+      return `<img src="${escapeHtml(src)}" alt="${alt}"${title}>`
+    },
+    link(token) {
+      const href = toSafeUrl(token.href)
+      const text = this.parser.parseInline(token.tokens)
+      const title =
+        typeof token.title === 'string' && token.title ? ` title="${escapeHtml(token.title)}"` : ''
+
+      if (!href) return text
+
+      return `<a href="${escapeHtml(href)}"${title} rel="noopener noreferrer">${text}</a>`
+    },
+  },
+})
+
+export function renderInlineMarkdown(text: string) {
+  return inlineMarkdown.parseInline(escapeHtml(text))
+}

package/utils/safeUrl.ts

@@ -0,0 +1,27 @@
+const SAFE_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:'])
+
+function isRelativeUrl(value: string) {
+  return (
+    value.startsWith('#') ||
+    value.startsWith('/') ||
+    value.startsWith('./') ||
+    value.startsWith('../') ||
+    value.startsWith('?')
+  )
+}
+
+export function toSafeUrl(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined
+
+  const trimmed = value.trim()
+  if (!trimmed) return undefined
+
+  if (isRelativeUrl(trimmed)) return trimmed
+
+  try {
+    const url = new URL(trimmed)
+    return SAFE_PROTOCOLS.has(url.protocol) ? url.toString() : undefined
+  } catch {
+    return undefined
+  }
+}

package/utils/themeConfig.ts

@@ -0,0 +1,18 @@
+export interface WatabeggThemeConfig {
+  color?: unknown
+  link?: unknown
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+export function getWatabeggThemeConfig(
+  slidevConfigs: Record<string, unknown> | undefined,
+): WatabeggThemeConfig {
+  const themeConfig = slidevConfigs?.themeConfig
+  if (!isRecord(themeConfig)) return {}
+
+  const watabegg = themeConfig.watabegg
+  return isRecord(watabegg) ? watabegg : {}
+}

package/utils/useThemePalette.ts

@@ -1,26 +1,22 @@
-import { computed, ref, watchEffect } from 'vue'
+import { computed } from 'vue'
 
 import {
   defaultThemeColor,
+  getThemePalette,
   resolveThemeColor,
-  themePalettes,
   type ThemeColorKey,
   type ThemePalette,
 } from './colors'
-
-const activeColorKey = ref<ThemeColorKey>(defaultThemeColor)
+import { getWatabeggThemeConfig } from './themeConfig'
 
 function normalizeColor(value: unknown): ThemeColorKey | undefined {
-  if (value === undefined)
-    return undefined
+  if (value === undefined) return undefined
 
-  if (value === null)
-    return defaultThemeColor
+  if (value === null) return defaultThemeColor
 
   if (typeof value === 'string') {
     const trimmed = value.trim()
-    if (!trimmed)
-      return defaultThemeColor
+    if (!trimmed) return defaultThemeColor
 
     return resolveThemeColor(trimmed)
   }
@@ -28,22 +24,22 @@ function normalizeColor(value: unknown): ThemeColorKey | undefined {
   return defaultThemeColor
 }
 
-export function useActiveThemePalette(source: () => unknown) {
-  watchEffect(() => {
-    const normalized = normalizeColor(source())
-    if (normalized !== undefined)
-      activeColorKey.value = normalized
+export function useActiveThemePalette({
+  slidevConfigs,
+  slideValue,
+}: {
+  slidevConfigs?: Record<string, unknown>
+  slideValue: () => unknown
+}) {
+  const colorKey = computed<ThemeColorKey>(() => {
+    const frontmatterColor = normalizeColor(slideValue())
+    if (frontmatterColor !== undefined) return frontmatterColor
+
+    const themeConfigColor = normalizeColor(getWatabeggThemeConfig(slidevConfigs).color)
+    return themeConfigColor ?? defaultThemeColor
   })
 
-  const palette = computed<ThemePalette>(() => themePalettes[activeColorKey.value])
+  const palette = computed<ThemePalette>(() => getThemePalette(colorKey.value))
 
-  return {
-    palette,
-    colorKey: computed(() => activeColorKey.value),
-  }
+  return { palette, colorKey }
 }
-
-export function getActiveThemePalette(): ThemePalette {
-  return themePalettes[activeColorKey.value]
-}
-

package/example.md

@@ -1,197 +0,0 @@
----
-theme: ./
-title: Theme Demo
-subtitle: slidev-theme-watabeggの紹介
-author: watabegg
-date: '2025/08/03'
-link: 'https://example.com'
-color: blue
-transition: fade
----
-
-# 基本機能とスタイル
-
-このスライドではテーマの基本スタイルをテストします。
-
-- **太字** / *斜体* / `code`
-- 入れ子リスト
-  - 第二階層
-  - もう一つ
-- テーマカラーは frontmatter の `color` で `red | yellow | green | blue | purple` から選択
-
-```ts
-function hello(name: string) {
-  console.log(`Hello, ${name}`)
-}
-```
-
-> ヒント: 最初の h1 は`image`, `image-scroll`Layout以外で固定ヘッダになります。
-
----
-layout: two-cols
-title: 2カラムレイアウト
----
-
-::left::
-### 左側
-- ポイント1
-- ポイント2
-- ポイント3
-
-固定ヘッダとフッターの余白を意識した構造。
-
-::right::
-### 右側
-```js
-const nums = [1,2,3]
-const doubled = nums.map(n=>n*2)
-console.log(doubled)
-```
-図表 / コード / 説明などを分割表示。
-
----
-
-# QuestionList 基本
-
-<QuestionList
-  :items="[
-    '正答のためのリストコンポーネント **Markdown OK**',
-    {
-      text: '2番目 (子を含む)',
-      items: [
-        { label: 'A', text: 'A の内容'},
-        { label: 'B', text: 'B の内容'},
-        { text: 'さらにネスト', items: ['深い1', '深い2'] }
-      ]
-    },
-    { label: '★', text: 'labelスタイルも複数用意しカスタムも可能。' }
-  ]"
-  :styles="['decimal-circle','katakana-paren','loweralpha-dot']"
-/>
-
----
-
-# QuestionList start 指定
-
-配列で各階層の開始番号/文字を指定可能。
-
-<QuestionList
-  :items="[
-    { text: '大問1: サブ', items: ['1つ目','2つ目'] },
-    { text: '大問2: サブ', items: ['A','B','C'] }
-  ]"
-  :styles="['decimal-q','hiragana-paren']"
-  :start="[1,1]"
-/>
-
----
-
-# KaTeX と QuestionList
-
-KaTeX コンポーネント `<KaTexReveal>` を QuestionList 内で使用可能。
-
-<KaTexReveal formula="\\int_0^{2\\pi} \\sin x\\,dx = 0" block class="text-2xl" />
-
-<KaTexReveal
-  formula="E = mc^2"
-  :block="false"
-  class="text-primary font-bold"
-  v-click="1"
-/>
-
----
-layout: center
----
-
-# KaTeX と Markdown の混在
-
-<QuestionList
-  :items="[
-    {
-      label: '①',
-      text: 'Markdownと **KaTeX** を混在',
-      items: [
-        { formula: 'a^2 + b^2 = c^2', block: true, class: 'text-lg text-center', tex: true },
-        { text: '$$\\frac{d}{dx} \\sin x = \\cos x$$' }
-      ]
-    },
-    {
-      label: '②',
-      formula: '\\sum_{k=1}^n k = \\frac{n(n+1)}{2}',
-      block: false,
-      class: 'text-xl'
-    }
-  ]"
-  :styles="['decimal-circle','loweralpha-paren']"
-  :start="[1]"
-/>
-
----
-layout: image
-image: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?auto=format&fit=crop&w=2370&q=80'
----
-
-<TextBox :x="80" :y="140" :width="360" v-click="1">1番目に表示される注釈。</TextBox>
-<TextBox :x="200" :y="380" :width="340" textBg="green" v-click="2">背景色付き 2番目。</TextBox>
-<TextBox :x="500" :y="120" :width="300" color="red">常時表示 (赤文字)。</TextBox>
-<TextBox :x="40" :y="20" :width="420" textBg="yellow" v-click="3">最後に表示される黄色背景。</TextBox>
-
----
-layout: image-scroll
-image: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=2400&q=80'
-imageScroll:
-  offsetY: -120
----
-
-## image-scroll: 縦長画像を「横幅フィット＋縦スクロール」で表示
-
-- 画像はスライド幅に合わせて表示
-- 縦方向はホイール / タッチでスクロール
-- `offsetY` で初期位置を調整（中心からのpx）
-
-ここでは `offsetY: -120` で少し上寄せしています。
-
----
-layout: image-scroll
-image: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2400&q=80'
----
-
-## offsetY の例（中心から上へ 300px）
-
-背景の見せたい位置が決まっているときに便利です。
-
----
-
-# ユーティリティ
-
-普通のテキストと <span class="text-highlight">ハイライト</span>。
-
-<div class="card mt-8" v-click="1">
-  <h3>カードスタイル</h3>
-  <p>重要事項をまとめるのに便利です。</p>
-</div>
-
----
-
-# フッターとショートカット
-
-このテーマでは Enter / Backspace キーで進行を制御できます。
-
-- Enter: 次のスライド / v-click
-- Backspace: 前へ戻る
-- フッター: (cover / image / image-scroll 以外) 日付 + ページ番号
-
----
-
-# まとめ
-
-- レイアウト: cover / two-cols / image / image-scroll / end
-- コンポーネント: QuestionList / TextBox / KaTexReveal
-- 自動フッター & 固定ヘッダ
-- ラベルスタイル多彩 & Markdown 埋め込み
-
-ご利用ありがとうございます
-
----
-layout: end
----