slidev-theme-watabegg 1.0.0

package/example.md

@@ -0,0 +1,191 @@
+---
+theme: ./
+title: Theme Demo
+subtitle: slidevのテーマ watabeggの紹介
+author: watabegg
+date: '2025/08/03'
+link: 'https://example.com'
+color: blue
+---
+
+# 基本機能とスタイル
+
+このスライドではテーマの基本スタイルをテストします。
+
+- **太字** / *斜体* / `code`
+- 入れ子リスト
+  - 第二階層
+  - もう一つ
+- テーマカラーは frontmatter の `color` で `red | yellow | green | blue | purple` から選択
+
+```ts
+function hello(name: string) {
+  console.log(`Hello, ${name}`)
+}
+```
+
+> ヒント: 最初の h1 は固定ヘッダになります。
+
+---
+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: 'カスタムラベル' }
+  ]"
+  :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
+
+<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="blue">常時表示 (青文字)。</TextBox>
+<TextBox :x="40" :y="20" :width="420" textBg="yellow" v-click="3">最後に表示される黄色背景。</TextBox>
+
+---
+
+# ユーティリティ
+
+普通のテキストと <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 以外) 日付 + ページ番号
+
+---
+
+# まとめ
+
+- レイアウト: cover / two-cols / image
+- コンポーネント: QuestionList / TextBox
+- 自動フッター & 固定ヘッダ
+- ラベルスタイル多彩 & Markdown 埋め込み
+
+ご利用ありがとうございます 🎓
+
+---
+
+# 終了
+
+<div class="text-center mt-16">
+  <div class="text-4xl mb-4">🎓</div>
+  <div class="text-xl opacity-80">slidev-theme-watabegg</div>
+  <div class="text-lg opacity-60 mt-4">watabegg Slidev テーマ</div>
+</div>
+
+---
+layout: image-scroll
+image: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=2400&q=80'
+---
+
+# image-scroll レイアウト
+
+- マウスホイール: 拡大
+- Shift + ホイール: 縮小
+- 左クリックホールド + ドラッグ: 移動
+
+画像を全画面で扱いつつ、ズーム・パンを試せます。
+
+---
+layout: end
+---

package/global-bottom.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { useSlideContext } from '@slidev/client'
+
+import { useActiveThemePalette } from './utils/useThemePalette'
+import getLink from './utils/link'
+
+const { $frontmatter, $nav, $slidev } = useSlideContext()
+
+const link = getLink({
+  frontmatter: $frontmatter,
+  slidevConfigs: $slidev?.configs as Record<string, unknown> | undefined,
+})
+
+const { palette: currentPalette } = useActiveThemePalette(() => $frontmatter.color)
+
+watchEffect(() => {
+  if (typeof document === 'undefined')
+    return
+
+  const palette = currentPalette.value
+  const root = document.documentElement
+
+  root.style.setProperty('--slidev-theme-primary', palette.primary)
+  root.style.setProperty('--cover-gradient-start', palette.gradientStart)
+  root.style.setProperty('--cover-gradient-end', palette.gradientEnd)
+  root.style.setProperty('--cover-accent', palette.accent)
+})
+</script>
+
+<template>
+  <footer 
+    v-if="$nav.currentLayout !== 'cover' && $nav.currentLayout !== 'image'"
+    class="exam-prep-footer"
+  >
+    <div class="footer-left">
+    </div>
+    <div class="footer-right">
+      <span>{{ $nav.currentPage }} / {{ $nav.total }}</span>
+      <a v-if="link" :href="link">ホームに戻る</a>
+      <span v-else>ホームリンク未設定</span>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.exam-prep-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2rem;
+  background: var(--slidev-theme-background);
+  border-top: 1px solid var(--slidev-theme-border);
+  font-size: 0.9rem;
+  color: var(--slidev-theme-text-secondary);
+  z-index: 20;
+}
+
+.footer-left,
+.footer-right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

package/layouts/cover.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="slidev-layout cover" :style="cssVars">
+    <div class="content">
+      <h1 v-if="$frontmatter.title">{{ $frontmatter.title }}</h1>
+      <h2 v-if="$frontmatter.subtitle">{{ $frontmatter.subtitle }}</h2>
+    </div>
+    <div v-if="$frontmatter.date" class="date">
+      {{ $frontmatter.date }}
+    </div>
+    <div v-if="$frontmatter.author" class="author">
+      {{ $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">
+        <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"/>
+            <stop offset="100%" :stop-color="currentPalette.gradientEnd"/>
+          </linearGradient>
+        </defs>
+        <path d="M -1049.6 400 Q -729.6 400 -409.6 550 Q 230.4 850 870.4 550 Q 1190.4 400 1510.4 400 Q 1830.4 400 2150.4 550 Q 2790.4 850 3430.4 550 Q 3750.4 400 4070.4 400 L 1280 0 L 0 0 Z" fill="url(#wave-1754178473929)"></path>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSlideContext } from '@slidev/client'
+
+import { useActiveThemePalette } from '../utils/useThemePalette'
+
+const { $frontmatter } = useSlideContext()
+
+const { palette: currentPalette } = useActiveThemePalette(() => $frontmatter.color)
+
+const cssVars = computed(() => ({
+  '--slidev-theme-primary': currentPalette.value.primary,
+  '--cover-gradient-start': currentPalette.value.gradientStart,
+  '--cover-gradient-end': currentPalette.value.gradientEnd,
+  '--cover-accent': currentPalette.value.accent,
+}))
+</script>
+
+<style scoped>
+.content {
+  z-index: 10;
+  position: relative;
+}
+
+.default {
+  margin-top: 2rem;
+  color: white;
+}
+
+.wave {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

package/layouts/end.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="slidev-layout end">
+    <div class="content">
+      <h1>ご清聴ありがとうございました</h1>
+      <a :href="link">戻る</a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client'
+const { $frontmatter, $slidev } = useSlideContext()
+import getLink from '../utils/link'
+
+const link = getLink({
+  frontmatter: $frontmatter,
+  slidevConfigs: $slidev?.configs as Record<string, unknown> | undefined,
+})
+
+</script>
+
+<style scoped>
+.content {
+  z-index: 10;
+  position: relative;
+}
+
+.default {
+  margin-top: 2rem;
+  color: white;
+}
+
+</style>

package/layouts/image-scroll.vue

@@ -0,0 +1,138 @@
+<template>
+  <div
+    class="slidev-layout image-scroll"
+    ref="wrapperRef"
+    @wheel="onWheel"
+    @mousedown="onMouseDown"
+  >
+    <div class="image-layer" :class="{ 'is-panning': isPanning }">
+      <img
+        v-if="imageSrc"
+        :src="imageSrc"
+        alt="Scrollable background"
+        :style="imageStyle"
+        draggable="false"
+      />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useSlideContext } from '@slidev/client'
+
+const { $frontmatter } = useSlideContext()
+
+const imageSrc = computed(() => $frontmatter.image)
+
+const wrapperRef = ref<HTMLElement | null>(null)
+const scale = ref(1)
+const position = reactive({ x: 0, y: 0 })
+const isPanning = ref(false)
+const lastPointer = reactive({ x: 0, y: 0 })
+
+const MIN_SCALE = 0.4
+const MAX_SCALE = 4
+const ZOOM_STEP = 0.12
+
+const clamp = (val: number, min: number, max: number) => Math.min(max, Math.max(min, val))
+
+const resetTransform = () => {
+  scale.value = 1
+  position.x = 0
+  position.y = 0
+}
+
+const onWheel = (event: WheelEvent) => {
+  if (!imageSrc.value) return
+
+  // Default: wheelで拡大。Shift押下時は縮小方向を優先。
+  const direction = event.shiftKey ? -1 : event.deltaY < 0 ? 1 : -1
+  const next = clamp(scale.value + direction * ZOOM_STEP, MIN_SCALE, MAX_SCALE)
+
+  if (next === scale.value) return
+
+  event.preventDefault()
+  scale.value = next
+}
+
+const onMouseDown = (event: MouseEvent) => {
+  if (!imageSrc.value || event.button !== 0) return
+  isPanning.value = true
+  lastPointer.x = event.clientX
+  lastPointer.y = event.clientY
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+
+const onMouseMove = (event: MouseEvent) => {
+  if (!isPanning.value) return
+  const dx = event.clientX - lastPointer.x
+  const dy = event.clientY - lastPointer.y
+  position.x += dx
+  position.y += dy
+  lastPointer.x = event.clientX
+  lastPointer.y = event.clientY
+  event.preventDefault()
+}
+
+const onMouseUp = () => {
+  isPanning.value = false
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+}
+
+const imageStyle = computed(() => ({
+  transform: `translate(${position.x}px, ${position.y}px) scale(${scale.value})`,
+}))
+
+onMounted(() => {
+  resetTransform()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+})
+
+watch(imageSrc, () => {
+  resetTransform()
+})
+</script>
+
+<style scoped>
+.slidev-layout.image-scroll {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+.image-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  cursor: grab;
+}
+
+.image-layer.is-panning {
+  cursor: grabbing;
+}
+
+.image-layer img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  will-change: transform;
+  transition: transform 80ms ease-out;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  padding: 2rem;
+}
+</style>

package/layouts/image.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="slidev-layout image">
+    <img 
+      v-if="$frontmatter.image" 
+      :src="$frontmatter.image" 
+      class="background-image"
+      alt="Background"
+    />
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client'
+const { $frontmatter } = useSlideContext()
+</script>
+
+<style scoped>
+/* Image layout styles are in the main layout.css */
+</style>

package/layouts/two-cols.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="slidev-layout two-cols">
+    <h1 v-if="$frontmatter.title">{{ $frontmatter.title }}</h1>
+    <div class="slidev-grid-container">
+      <div class="col-left">
+        <slot name="left" />
+      </div>
+      <div class="col-right">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client'
+
+const { $frontmatter } = useSlideContext()
+</script>
+
+<style scoped>
+/* Additional scoped styles if needed */
+</style>

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "slidev-theme-watabegg",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "watabeggが使うためのSlidevテーマ",
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "education",
+    "exam",
+    "teaching"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "slidev build example.md",
+    "dev": "slidev example.md",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png"
+  },
+  "dependencies": {
+    "@slidev/types": "^52.1.0",
+    "katex": "^0.16.25"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^52.1.0",
+    "bumpp": "^10.3.2",
+    "playwright-chromium": "^1.54.2"
+  },
+  "//": "Learn more: https://sli.dev/guide/write-theme.html",
+  "slidev": {
+    "colorSchema": "light",
+    "defaults": {
+      "background": "#FFFFFF",
+      "fonts": {
+        "sans": "M PLUS 2",
+        "mono": "Fira Code"
+      },
+      "lineNumbers": false
+    }
+  }
+}

package/setup/shiki.ts

@@ -0,0 +1,11 @@
+import type { ShikiSetupReturn } from '@slidev/types'
+import { defineShikiSetup } from '@slidev/types'
+
+export default defineShikiSetup((): ShikiSetupReturn => {
+  return {
+    themes: {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light',
+    },
+  }
+})

package/setup/shortcuts.ts

@@ -0,0 +1,18 @@
+import type { NavOperations, ShortcutOptions } from '@slidev/types'
+import { defineShortcutsSetup } from '@slidev/types'
+
+export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
+  return [
+    ...base, // keep the existing shortcuts
+    {
+      key: 'enter',
+      fn: () => nav.next(),
+      autoRepeat: true,
+    },
+    {
+      key: 'backspace',
+      fn: () => nav.prev(),
+      autoRepeat: true,
+    },
+  ]
+})