slidev-theme-watabegg 1.1.2 → 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`指定の例。
 
@@ -52,7 +57,7 @@ transition: fade
 | cover | 表紙 | グラデーション波 + title/subtitle/author |
 | two-cols | 2カラム | `::left::` / `::right::` スロット |
 | image | 背景画像 | `image:` 指定 + `TextBox` で自由配置 |
-| image-scroll | 背景画像（パンとズーム） | `image:` 指定 + 縦長背景 + `TextBox` |
+| image-scroll | 背景画像（縦スクロール） | `image:` 指定 + 縦長背景 + `TextBox` |
 | end | 終了スライド | シンプルな終了画面 |
 
 ### two-cols 例
@@ -82,31 +87,27 @@ image: /path/to/bg.jpg
 ---
 layout: image-scroll
 image: /path/to/long-bg.jpg
+imageScroll:
+  offsetY: -120
 ---
 ```
 
 ![image-scroll 例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
 
 image-scroll オプション（frontmatter `imageScroll`）:
-- `fit`: `contain | cover | width | height`（既定 `contain`）
-- `position`: `center | top | bottom | left | right` もしくは組み合わせ（例: `top left`）
-- `offset`: `[x, y]` または `{ x, y }`（px）
+- `offsetY`: 画像の中心からの初期スクロール量（px）
 
 操作:
-- Wheel: 縦パン
-- Shift + Wheel: 横パン
-- Alt + Wheel: 10% ずつ拡大縮小
-- タッチ: ドラッグでパン、ピンチでズーム
+- Wheel / トラックパッド: 縦スクロール
+- タッチ: 縦スクロール
 
-初期フィット/位置の例:
+初期位置の例:
 ```markdown
 ---
 layout: image-scroll
 image: /path/to/long-bg.jpg
 imageScroll:
-  fit: width
-  position: center
-  offset: [0, -120]
+  offsetY: 180
 ---
 ```
 
@@ -122,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)
 
@@ -158,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.
 
@@ -56,7 +61,7 @@ Below: `color: blue` example.
 | cover | Title slide | Gradient wave + title/subtitle/author |
 | two-cols | Two columns | Slots: `::left::` / `::right::` |
 | image | Background image | Use `image:` + absolutely placed `TextBox` |
-| image-scroll | Background image (pan & zoom) | Use `image:` with tall background + `TextBox` |
+| image-scroll | Background image (vertical scroll) | Use `image:` with tall background + `TextBox` |
 | end | Ending slide | Simple finish screen |
 
 ### two-cols Example
@@ -86,31 +91,27 @@ image: /path/to/bg.jpg
 ---
 layout: image-scroll
 image: /path/to/long-bg.jpg
+imageScroll:
+  offsetY: -120
 ---
 ```
 
 ![image-scroll Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
 
 image-scroll options (frontmatter `imageScroll`):
-- `fit`: `contain | cover | width | height` (default `contain`)
-- `position`: `center | top | bottom | left | right` or combined (e.g. `top left`)
-- `offset`: `[x, y]` or `{ x, y }` in px
+- `offsetY`: initial scroll offset from image center in px
 
 Controls:
-- Wheel: pan vertically
-- Shift + Wheel: pan horizontally
-- Alt + Wheel: zoom in/out by 10%
-- Touch: drag to pan, pinch to zoom
+- Wheel / trackpad: vertical scroll
+- Touch: vertical scroll
 
-Example with initial fit/position:
+Example with initial position:
 ```markdown
 ---
 layout: image-scroll
 image: /path/to/long-bg.jpg
 imageScroll:
-  fit: width
-  position: center
-  offset: [0, -120]
+  offsetY: 180
 ---
 ```
 
@@ -127,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)
 
@@ -162,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>