slidev-theme-watabegg 1.0.3 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENCE +7 -0
  2. package/README.ja.md +27 -11
  3. package/README.md +37 -19
  4. package/example.md +26 -33
  5. package/global-bottom.vue +1 -1
  6. package/package.json +3 -2
  7. package/styles/layout.css +8 -3
package/LICENCE ADDED
@@ -0,0 +1,7 @@
1
+ Copyright 2025 watabegg
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4
+
5
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.ja.md CHANGED
@@ -7,9 +7,9 @@
7
7
  ## 特徴
8
8
  - 教育特化のミニマルデザイン
9
9
  - 日本語表示最適化 (M PLUS 2) / 等幅 Fira Code
10
- - 自動フッター（`cover` / `image` 以外で日付 + ページ番号）
10
+ - 自動フッター（`cover` / `image` / `image-scroll` 以外で日付 + ページ番号）
11
11
  - ショートカット: Enter (次) / Backspace (前)
12
- - レイアウト: `cover`, `two-cols`, `image`
12
+ - レイアウト: `cover`, `two-cols`, `image`, `image-scroll`, `end`
13
13
  - フロントマター `color` でテーマカラーを `red | yellow | green | blue | purple` から選択
14
14
  - コンポーネント: `QuestionList`, `TextBox`, `KaTexReveal`
15
15
  - 多段ラベル: 丸番号 / カタカナ / ひらがな / 漢数字(1–19) / 英字 / カスタム
@@ -31,16 +31,20 @@ theme: ./
31
31
 
32
32
  ## フロントマター例
33
33
  ```yaml
34
- title: 授業タイトル
34
+ title: Theme Demo
35
35
  subtitle: サブタイトル
36
36
  author: 講師名
37
37
  date: '2025/08/03'
38
38
  color: green # red | yellow | green | blue | purple
39
+ link: 'https://example.com' # フッターリンク（省略可）
40
+ transition: fade
39
41
  ```
40
42
 
41
43
  `color` を省略するとデフォルトの `green` が適用されます。
42
44
 
43
- ![フロントマター例](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/1.png)
45
+ 下図は`blue`指定の例。
46
+
47
+ ![フロントマター例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/0.png)
44
48
 
45
49
  ## レイアウト
46
50
  | 名称 | 用途 | 特徴 |
@@ -48,6 +52,8 @@ color: green # red | yellow | green | blue | purple
48
52
  | cover | 表紙 | グラデーション波 + title/subtitle/author |
49
53
  | two-cols | 2カラム | `::left::` / `::right::` スロット |
50
54
  | image | 背景画像 | `image:` 指定 + `TextBox` で自由配置 |
55
+ | image-scroll | 背景画像（パンとズーム） | `image:` 指定 + 縦長背景 + `TextBox` |
56
+ | end | 終了スライド | シンプルな終了画面 |
51
57
 
52
58
  ### two-cols 例
53
59
  ```markdown
@@ -60,7 +66,7 @@ layout: two-cols
60
66
  右
61
67
  ```
62
68
 
63
- ![two-cols 例](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/3.png)
69
+ ![two-cols 例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/1.png)
64
70
 
65
71
  ### image 例
66
72
  ```markdown
@@ -71,6 +77,16 @@ image: /path/to/bg.jpg
71
77
  <TextBox :x="120" :y="160" :width="360">注釈</TextBox>
72
78
  ```
73
79
 
80
+ ## image-scroll 例
81
+ ```markdown
82
+ ---
83
+ layout: image-scroll
84
+ image: /path/to/long-bg.jpg
85
+ ---
86
+ ```
87
+
88
+ ![image-scroll 例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
89
+
74
90
  ## コンポーネント
75
91
  ### QuestionList
76
92
  入れ子質問/解答・Markdown 埋め込み・階層別スタイル。
@@ -85,7 +101,7 @@ image: /path/to/bg.jpg
85
101
  デコレータ: `circle | square | paren | dot | q | big-q | none`
86
102
  アイテム内 `label` があればそれを優先表示。
87
103
 
88
- ![QuestionList 例](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/4.png)
104
+ ![QuestionList 例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/3.png)
89
105
 
90
106
  ### TextBox
91
107
  背景画像上などに絶対配置。
@@ -95,12 +111,14 @@ image: /path/to/bg.jpg
95
111
  Props: `x`, `y`, `width`, `height`, `textBg`, `color`, `vClick`
96
112
 
97
113
  ### KaTexReveal
98
- KaTeX API で数式を確実に描画するコンポーネント。`components/*.vue` は Slidev が自動登録するので、そのまま Markdown で利用できます。
114
+ KaTeX API で数式を確実に描画するコンポーネント。
99
115
  ```vue
100
116
  <KaTexReveal formula="\\int_0^{2\\pi} \\sin x\\,dx = 0" block class="text-2xl" />
101
117
  <KaTexReveal formula="E = mc^2" :block="false" v-click="1" />
102
118
  ```
103
- Props: `formula`(必須), `block`(既定 false), `tag`(省略時 `div`/`span` 自動), そのほか `class` や `v-click` など任意の属性も転送。`QuestionList` のアイテムに TeX が含まれる場合もこのコンポーネントで描画されます。
119
+ Props: `formula`(必須), `block`(既定 false), `tag`(省略時 `div`/`span` 自動), そのほか `class` や `v-click` など任意の属性も転送。`QuestionList` のアイテムに TeX が含まれる場合もこのコンポーネントで描画。
120
+
121
+ ![KaTeX 例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/4.png)
104
122
 
105
123
  ## フッター & ショートカット
106
124
  - フッター: (cover/image 以外) `date` + 現在ページ/総ページ
@@ -111,7 +129,7 @@ Props: `formula`(必須), `block`(既定 false), `tag`(省略時 `div`/`span`
111
129
  - `.text-highlight` 行マーカ風ハイライト
112
130
  - `.card` 角丸ボックス + 余白 + 枠線
113
131
 
114
- ![ユーティリティ例](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/7.png)
132
+ ![ユーティリティ例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
115
133
 
116
134
  ## 開発
117
135
  ```bash
@@ -128,5 +146,3 @@ pnpm screenshot
128
146
  **Q. フッターを消したい** → 自作テーマで `global-bottom.vue` を上書きしてください。
129
147
 
130
148
  **Q. 番号開始位置を変えたい** → `:start="[1,'c']"` のように配列で指定。
131
-
132
- 良い授業を！ 🎓
package/README.md CHANGED
@@ -5,19 +5,19 @@
5
5
  English README (Japanese version: see `README.ja.md`).
6
6
 
7
7
  ## Overview
8
- 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.
8
+ 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.
9
9
 
10
10
  ## Features
11
- - Minimal classroom-oriented design
12
- - Japanese font (M PLUS 2) + monospace Fira Code
13
- - Automatic footer (date + current/total page) except on `cover` / `image`
11
+ - Minimal design specialized for teaching
12
+ - Japanese typography (M PLUS 2) + monospace Fira Code
13
+ - Automatic footer (date + current/total page) on all layouts except `cover` / `image` / `image-scroll`
14
14
  - Shortcuts: Enter (next) / Backspace (previous)
15
- - Layouts: `cover`, `two-cols`, `image`
16
- - Frontmatter `color` switch for `red | yellow | green | blue | purple`
15
+ - Layouts: `cover`, `two-cols`, `image`, `image-scroll`, `end`
16
+ - Frontmatter `color` switch: `red | yellow | green | blue | purple`
17
17
  - Components: `QuestionList`, `TextBox`, `KaTexReveal`
18
18
  - Multi-level labels: circled numbers / Katakana / Hiragana / kanji numerals (1–19) / alphabet / custom
19
19
  - Utility classes: `.text-highlight`, `.card`
20
- - Shiki code themes: `vitesse-light` / `vitesse-dark`
20
+ - Shiki themes: `vitesse-light` / `vitesse-dark`
21
21
 
22
22
  ## Install
23
23
  Add to your slide frontmatter:
@@ -35,16 +35,20 @@ theme: ./
35
35
 
36
36
  ## Frontmatter Example
37
37
  ```yaml
38
- title: Class Title
38
+ title: Theme Demo
39
39
  subtitle: Subtitle
40
40
  author: Instructor Name
41
41
  date: '2025/08/03'
42
42
  color: green # red | yellow | green | blue | purple
43
+ link: 'https://example.com' # optional footer link
44
+ transition: fade
43
45
  ```
44
46
 
45
47
  If `color` is omitted, the default `green` palette is used.
46
48
 
47
- ![Frontmatter Example](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/1.png)
49
+ Below: `color: blue` example.
50
+
51
+ ![Frontmatter Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/0.png)
48
52
 
49
53
  ## Layouts
50
54
  | Name | Purpose | Notes |
@@ -52,6 +56,8 @@ If `color` is omitted, the default `green` palette is used.
52
56
  | cover | Title slide | Gradient wave + title/subtitle/author |
53
57
  | two-cols | Two columns | Slots: `::left::` / `::right::` |
54
58
  | image | Background image | Use `image:` + absolutely placed `TextBox` |
59
+ | image-scroll | Background image (pan & zoom) | Use `image:` with tall background + `TextBox` |
60
+ | end | Ending slide | Simple finish screen |
55
61
 
56
62
  ### two-cols Example
57
63
  ```markdown
@@ -64,7 +70,7 @@ Left
64
70
  Right
65
71
  ```
66
72
 
67
- ![two-cols Example](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/3.png)
73
+ ![two-cols Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/1.png)
68
74
 
69
75
  ### image Example
70
76
  ```markdown
@@ -75,9 +81,19 @@ image: /path/to/bg.jpg
75
81
  <TextBox :x="120" :y="160" :width="360">Note</TextBox>
76
82
  ```
77
83
 
84
+ ### image-scroll Example
85
+ ```markdown
86
+ ---
87
+ layout: image-scroll
88
+ image: /path/to/long-bg.jpg
89
+ ---
90
+ ```
91
+
92
+ ![image-scroll Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
93
+
78
94
  ## Components
79
95
  ### QuestionList
80
- Recursive nested lists (questions / answers) with per-level styles and Markdown rendering.
96
+ Nested questions/answers with per-level styles and Markdown rendering.
81
97
  ```vue
82
98
  <QuestionList
83
99
  :items="['First **OK**', { text: 'Second', items: ['Child A','Child B'] }]"
@@ -89,33 +105,35 @@ Counter types: `decimal | hiragana | katakana | kanji | upperalpha | loweralpha
89
105
  Decorators: `circle | square | paren | dot | q | big-q | none`
90
106
  If an item includes a `label`, it overrides the computed label.
91
107
 
92
- ![QuestionList Example](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/4.png)
108
+ ![QuestionList Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/3.png)
93
109
 
94
110
  ### TextBox
95
- Absolutely positioned overlay (useful on `image` layout or for callouts).
111
+ Absolutely positioned overlay (useful on `image` / `image-scroll` or for callouts).
96
112
  ```vue
97
113
  <TextBox :x="100" :y="220" :width="400" textBg="green" v-click="1">Memo</TextBox>
98
114
  ```
99
115
  Props: `x`, `y`, `width`, `height`, `textBg`, `color`, `vClick`
100
116
 
101
117
  ### KaTexReveal
102
- Inline/Block KaTeX renderer component. Slidev auto-registers `components/*.vue`, so you can drop it directly into Markdown.
118
+ KaTeX renderer to ensure math always draws. Slidev auto-registers `components/*.vue`, so drop it directly into Markdown or `QuestionList` items that contain TeX.
103
119
  ```vue
104
120
  <KaTexReveal formula="\\int_0^{2\\pi} \\sin x\\,dx = 0" block class="text-2xl" />
105
121
  <KaTexReveal formula="E = mc^2" :block="false" v-click="1" />
106
122
  ```
107
- 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`.
123
+ Props: `formula` (required), `block` (default `false`), `tag` (auto `div`/`span`), other attrs (`class`, `v-click`, etc.) are forwarded.
124
+
125
+ ![KaTeX Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/4.png)
108
126
 
109
127
  ## Footer & Shortcuts
110
- - Footer (except on cover / image): displays `date` + current / total pages.
128
+ - Footer (except on `cover` / `image` / `image-scroll`): shows `date` + current/total pages.
111
129
  - Enter: next fragment or slide.
112
130
  - Backspace: previous fragment or slide.
113
131
 
114
132
  ## Utility Classes
115
- - `.text-highlight` inline / line-marker style highlight
116
- - `.card` rounded bordered container with padding
133
+ - `.text-highlight` line-marker style highlight
134
+ - `.card` rounded box with padding and border
117
135
 
118
- ![Utility Example](https://raw.githubusercontent.com/watabegg/slidev-exam-prep/refs/heads/main/example/7.png)
136
+ ![Utility Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
119
137
 
120
138
  ## Development
121
139
  ```bash
package/example.md CHANGED
@@ -1,11 +1,12 @@
1
1
  ---
2
2
  theme: ./
3
3
  title: Theme Demo
4
- subtitle: slidevのテーマ watabeggの紹介
4
+ subtitle: slidev-theme-watabeggの紹介
5
5
  author: watabegg
6
6
  date: '2025/08/03'
7
7
  link: 'https://example.com'
8
8
  color: blue
9
+ transition: fade
9
10
  ---
10
11
 
11
12
  # 基本機能とスタイル
@@ -24,7 +25,7 @@ function hello(name: string) {
24
25
  }
25
26
  ```
26
27
 
27
- > ヒント: 最初の h1 は固定ヘッダになります。
28
+ > ヒント: 最初の h1 は`image`, `image-scroll`Layout以外で固定ヘッダになります。
28
29
 
29
30
  ---
30
31
  layout: two-cols
@@ -54,7 +55,7 @@ console.log(doubled)
54
55
 
55
56
  <QuestionList
56
57
  :items="[
57
- '最初の項目 **Markdown OK**',
58
+ '正答のためのリストコンポーネント **Markdown OK**',
58
59
  {
59
60
  text: '2番目 (子を含む)',
60
61
  items: [
@@ -63,7 +64,7 @@ console.log(doubled)
63
64
  { text: 'さらにネスト', items: ['深い1', '深い2'] }
64
65
  ]
65
66
  },
66
- { label: '★', text: 'カスタムラベル' }
67
+ { label: '★', text: 'labelスタイルも複数用意しカスタムも可能。' }
67
68
  ]"
68
69
  :styles="['decimal-circle','katakana-paren','loweralpha-dot']"
69
70
  />
@@ -72,6 +73,8 @@ console.log(doubled)
72
73
 
73
74
  # QuestionList start 指定
74
75
 
76
+ 配列で各階層の開始番号/文字を指定可能。
77
+
75
78
  <QuestionList
76
79
  :items="[
77
80
  { text: '大問1: サブ', items: ['1つ目','2つ目'] },
@@ -85,6 +88,8 @@ console.log(doubled)
85
88
 
86
89
  # KaTeX と QuestionList
87
90
 
91
+ KaTeX コンポーネント `<KaTexReveal>` を QuestionList 内で使用可能。
92
+
88
93
  <KaTexReveal formula="\\int_0^{2\\pi} \\sin x\\,dx = 0" block class="text-2xl" />
89
94
 
90
95
  <KaTexReveal
@@ -126,11 +131,22 @@ layout: image
126
131
  image: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?auto=format&fit=crop&w=2370&q=80'
127
132
  ---
128
133
 
129
- <TextBox :x="80" :y="140" :width="360" v-click="1">**1番目** に表示される注釈。</TextBox>
134
+ <TextBox :x="80" :y="140" :width="360" v-click="1">1番目に表示される注釈。</TextBox>
130
135
  <TextBox :x="200" :y="380" :width="340" textBg="green" v-click="2">背景色付き 2番目。</TextBox>
131
- <TextBox :x="500" :y="120" :width="300" color="blue">常時表示 (青文字)。</TextBox>
136
+ <TextBox :x="500" :y="120" :width="300" color="red">常時表示 (赤文字)。</TextBox>
132
137
  <TextBox :x="40" :y="20" :width="420" textBg="yellow" v-click="3">最後に表示される黄色背景。</TextBox>
133
138
 
139
+ ---
140
+ layout: image-scroll
141
+ image: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=2400&q=80'
142
+ ---
143
+
144
+ - マウスホイール: 拡大
145
+ - Shift + ホイール: 縮小
146
+ - 左クリックホールド + ドラッグ: 移動
147
+
148
+ 画像を全画面で扱いつつ、ズーム・パンを試せます。
149
+
134
150
  ---
135
151
 
136
152
  # ユーティリティ
@@ -150,41 +166,18 @@ image: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?auto=format
150
166
 
151
167
  - Enter: 次のスライド / v-click
152
168
  - Backspace: 前へ戻る
153
- - フッター: (cover / image 以外) 日付 + ページ番号
169
+ - フッター: (cover / image / image-scroll 以外) 日付 + ページ番号
154
170
 
155
171
  ---
156
172
 
157
173
  # まとめ
158
174
 
159
- - レイアウト: cover / two-cols / image
160
- - コンポーネント: QuestionList / TextBox
175
+ - レイアウト: cover / two-cols / image / image-scroll / end
176
+ - コンポーネント: QuestionList / TextBox / KaTexReveal
161
177
  - 自動フッター & 固定ヘッダ
162
178
  - ラベルスタイル多彩 & Markdown 埋め込み
163
179
 
164
- ご利用ありがとうございます 🎓
165
-
166
- ---
167
-
168
- # 終了
169
-
170
- <div class="text-center mt-16">
171
- <div class="text-4xl mb-4">🎓</div>
172
- <div class="text-xl opacity-80">slidev-theme-watabegg</div>
173
- <div class="text-lg opacity-60 mt-4">watabegg Slidev テーマ</div>
174
- </div>
175
-
176
- ---
177
- layout: image-scroll
178
- image: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=2400&q=80'
179
- ---
180
-
181
- # image-scroll レイアウト
182
-
183
- - マウスホイール: 拡大
184
- - Shift + ホイール: 縮小
185
- - 左クリックホールド + ドラッグ: 移動
186
-
187
- 画像を全画面で扱いつつ、ズーム・パンを試せます。
180
+ ご利用ありがとうございます
188
181
 
189
182
  ---
190
183
  layout: end
package/global-bottom.vue CHANGED
@@ -30,7 +30,7 @@ watchEffect(() => {
30
30
 
31
31
  <template>
32
32
  <footer
33
- v-if="$nav.currentLayout !== 'cover' && $nav.currentLayout !== 'image'"
33
+ v-if="$nav.currentLayout !== 'cover' && $nav.currentLayout !== 'image' && $nav.currentLayout !== 'image-scroll'"
34
34
  class="exam-prep-footer"
35
35
  >
36
36
  <div class="footer-left">
package/package.json CHANGED
@@ -1,9 +1,10 @@
1
1
  {
2
2
  "name": "slidev-theme-watabegg",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "type": "module",
5
5
  "author": "watabegg",
6
- "description": "watabeggが使うためのSlidevテーマ",
6
+ "description": "Slidev theme for educational purposes, especially teaching.",
7
+ "license": "MIT",
7
8
  "keywords": [
8
9
  "slidev-theme",
9
10
  "slidev",
package/styles/layout.css CHANGED
@@ -1,6 +1,3 @@
1
- /* Layout-specific styles */
2
-
3
- /* Cover layout */
4
1
  .slidev-layout.cover {
5
2
  @apply h-full grid place-items-center text-center relative;
6
3
  background: #FFFFFF;
@@ -140,3 +137,11 @@
140
137
  padding: 2rem;
141
138
  }
142
139
  }
140
+
141
+ .slidev-layout.end {
142
+ @apply place-items-center;
143
+
144
+ a {
145
+ @apply text-3xl opacity-90 mt-20;
146
+ }
147
+ }