slidev-theme-gtlabo 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 mksmkss
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.md

@@ -0,0 +1,298 @@
+# Slidev Theme GTlabo
+
+[![NPM version](https://img.shields.io/npm/v/@mksmkss/slidev-theme-gtlabo?color=3AB9D4&label=)](https://www.npmjs.com/package/@mksmkss/slidev-theme-gtlabo)
+
+学術発表やプレゼンテーション用に設計されたSlidev用カスタムテーマ。引用管理、数式表示、階層リストなどの機能を提供します。
+
+## Install
+
+```bash
+npm install @mksmkss/slidev-theme-gtlabo
+```
+Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
+
+<pre><code>
+---
+theme: <b>gtlabo</b>
+---
+</code></pre>
+
+Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
+
+## Layouts
+
+This theme provides the following layouts:
+
+> TODO:
+
+## Components
+
+このテーマは以下のコンポーネントを提供します：
+
+### 1. Citation コンポーネント
+インライン引用と参考文献の管理を行います。
+
+```vue
+<Citation id="reference-key" />
+```
+
+**機能:**
+- インライン引用番号の表示（`[1]`形式）
+- 画面下部に現在のページの引用情報を表示
+- 引用番号の自動管理
+- 複数ページにわたる引用の追跡
+
+**使用例:**
+```markdown
+この技術について<Citation id="smith2023" />の研究が参考になります。
+```
+
+### 2. CitationListPage コンポーネント
+参考文献一覧ページを生成します。
+
+```vue
+<CitationListPage />
+```
+
+**機能:**
+- 全ての参考文献を一覧表示
+- 学術スタイルでの引用フォーマット
+- DOI、URL、ISSN等の情報表示
+- ソート機能（キー、著者、年別）
+
+**プロパティ:**
+- `style`: 引用スタイル（`academic`、`ieee`、`apa`）
+- `sortBy`: ソート基準（`key`、`author`、`year`）
+
+### 3. Header コンポーネント
+プレゼンテーションのヘッダー部分を管理します。
+
+```vue
+<Header 
+  :chapter-data="{ title: 'セクションタイトル' }"
+  chapter="section1"
+  current-section="intro"
+/>
+```
+
+**機能:**
+- 章・セクションの進捗表示
+- 現在位置の可視化
+- ページ番号表示
+- 動的なプログレスバー
+
+**プロパティ:**
+- `chapter`: 章のキー
+- `chapterData`: 章の情報オブジェクト
+- `currentSection`: 現在のセクション
+- `currentChapter`: 現在の章
+
+
+### 4. MathText コンポーネント
+数式とテキストを統合表示します。
+
+```vue
+<MathText 
+  text="これは数式 $x^2 + y^2 = z^2$ を含むテキストです。"
+  container-tag="p"
+  :simple="false"
+  :disable-markdown="false"
+/>
+```
+
+**機能:**
+- LaTeX数式の自動レンダリング
+- インライン数式（`$...$`）とブロック数式（`$$...$$`）
+- Markdownサポート（太字、イタリック、リンク等）
+- KaTeX による数式描画
+- シンプルモード対応
+
+**プロパティ:**
+- `text`: 表示するテキスト
+- `containerTag`: コンテナのHTMLタグ
+- `simple`: シンプルモード（基本的な数式のみ）
+- `disableMarkdown`: Markdownを無効化
+- `customDelimiters`: カスタム区切り文字
+
+### 5. SectionTitle コンポーネント
+セクションタイトルを表示します。
+
+```vue
+<SectionTitle 
+  title="セクションタイトル"
+  color="sky-800"
+/>
+```
+
+**機能:**
+- 左側のカラーバーと組み合わせたタイトル表示
+- UnoCSS/Tailwindカラー対応
+- カスタムカラー対応
+- スロットコンテンツ対応
+
+**プロパティ:**
+- `title`: タイトルテキスト
+- `color`: カラー（Tailwind形式またはHEX）
+
+### 6. SubSectionTitle コンポーネント
+サブセクションタイトルを表示します。
+
+```vue
+<SubSectionTitle 
+  title="サブセクションタイトル"
+  color="sky-700"
+/>
+```
+
+**機能:**
+- 左側のアイコン（矢印）と組み合わせたタイトル表示
+- UnoCSS/Tailwindカラー対応
+- カスタムカラー対応
+
+**プロパティ:**
+- `title`: タイトルテキスト
+- `color`: カラー（Tailwind形式またはHEX）
+
+### 7. TextColorBox コンポーネント
+色付きのテキストボックスを表示します。
+
+```vue
+<TextColorBox 
+  title="タイトル"
+  text="本文テキスト"
+  container-class="my-4"
+/>
+```
+
+**機能:**
+- タイトル付きのカラーボックス
+- HTMLタグ対応
+- マーキング機能（`v-mark`）
+- カスタムスタイル適用
+
+**プロパティ:**
+- `title`: ボックスのタイトル
+- `text`: ボックスの本文
+- `containerClass`: 追加のCSSクラス
+
+
+**機能:**
+- SVGベースの入れ子円グラフ
+- データ構造の階層表示
+- アニメーション効果
+- 課題提起セクション付き
+- パーセンテージ表示
+
+**特徴:**
+- 外側の円：全体データの分類（構造化/非構造化）
+- 内側の円：構造化データの詳細分類
+- 自動アニメーション効果
+- 完全にカスタマイズ可能なSVG
+
+## 🛠️ 設定方法
+
+### 1. 参考文献の設定
+
+frontmatter に `citations` を追加：
+
+```yaml
+---
+citations:
+  smith2023:
+    author: "Smith, J."
+    title: "Research on AI"
+    journal: "Journal of AI"
+    year: "2023"
+    doi: "10.1000/example"
+  jones2022:
+    author: "Jones, A."
+    title: "Machine Learning Basics"
+    publisher: "Tech Press"
+    year: "2022"
+---
+```
+
+### 2. 章・セクション構造の設定
+
+```yaml
+---
+chapters:
+  intro:
+    title: "はじめに"
+    sections:
+      overview:
+        title: "概要"
+      objectives:
+        title: "目的"
+  method:
+    title: "手法"
+    sections:
+      approach:
+        title: "アプローチ"
+      implementation:
+        title: "実装"
+---
+```
+
+## 📱 使用例
+
+```vue
+<template>
+  <div>
+    <!-- ヘッダー -->
+    <Header 
+      :chapter-data="{ title: '研究手法' }"
+      chapter="method"
+      current-section="approach"
+    />
+    
+    <!-- セクションタイトル -->
+    <SectionTitle title="提案手法" />
+    
+    <!-- 数式を含むテキスト -->
+    <MathText 
+      text="提案手法では、損失関数 $L = \frac{1}{n}\sum_{i=1}^{n}(y_i - \hat{y_i})^2$ を最小化します。"
+    />
+    
+    <!-- 階層リスト -->
+    <HierarchyList>
+      - 手法の特徴
+        - 高精度
+        - 高速処理
+        - 省メモリ
+    </HierarchyList>
+    
+    <!-- 引用 -->
+    <p>この手法は<Citation id="smith2023" />で提案されました。</p>
+    
+    <!-- カラーボックス -->
+    <TextColorBox 
+      title="重要なポイント"
+      text="この手法により従来手法より<strong>20%</strong>の性能向上を実現しました。"
+    />
+  </div>
+</template>
+```
+
+## 🎨 スタイル
+
+テーマは以下のカラーパレットを使用：
+- プライマリ: Sky（`sky-600`、`sky-700`、`sky-800`）
+- セカンダリ: Gray（`gray-600`、`gray-700`、`gray-800`）
+- アクセント: Blue（`blue-500`、`blue-600`）
+
+## 📦 依存関係
+
+- Vue 3
+- Slidev
+- UnoCSS/Tailwind CSS
+- KaTeX（数式レンダリング）
+- Lucide Icons
+
+## Contributing
+
+- `npm install`
+- `npm run dev` to start theme preview of `example.md`
+- Edit the `example.md` and style to see the changes
+- `npm run export` to generate the preview PDF
+- `npm run screenshot` to generate the preview PNG

package/components/Citation.vue

@@ -0,0 +1,253 @@
+<template>
+  <span>
+    <!-- インライン引用番号 -->
+    <sup class="text-blue-600 font-semibold">
+      [{{ citationNumber }}]
+    </sup>
+    
+    <!-- 引用情報表示エリア（画面下部に常時表示） -->
+    <div 
+      v-if="hasCurrentPageCitations"
+      class="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-gray-300 shadow-lg z-40 max-h-32 overflow-y-auto"
+      style="pointer-events: none;"
+    >
+      <div class="max-w-7xl mx-auto px-4 py-2">
+        <div class="space-y-1">
+          <div 
+            v-for="citation in sortedCurrentPageCitations" 
+            :key="citation.id"
+            class="text-xs text-gray-800"
+          >
+            <span class="font-semibold">[{{ citation.number }}]</span>
+            {{ citation.formatted }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </span>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useSlideContext } from '@slidev/client'
+
+const { $slidev } = useSlideContext()
+const citations = $slidev.configs.citations || {}
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  }
+})
+
+// グローバル引用管理の初期化
+if (!window.citationManager) {
+  window.citationManager = {
+    counter: 1,
+    citations: new Map(), // id -> { number, data, formatted }
+    pageActiveCitations: new Map(), // pageNumber -> Set(citationIds)
+    components: new Set()
+  }
+}
+
+const forceUpdate = ref(0)
+
+// 現在のページ番号を取得
+const currentPage = computed(() => {
+  return $slidev.nav.currentPage
+})
+
+// 引用データを取得
+const citationData = computed(() => {
+  return citations[props.id] || null
+})
+
+// 引用番号を取得または生成
+const citationNumber = computed(() => {
+  if (!citationData.value) return '?'
+  
+  if (!window.citationManager.citations.has(props.id)) {
+    window.citationManager.citations.set(props.id, {
+      number: window.citationManager.counter,
+      data: citationData.value,
+      formatted: formatCitation(citationData.value)
+    })
+    window.citationManager.counter++
+  }
+  
+  return window.citationManager.citations.get(props.id).number
+})
+
+// 現在のページにアクティブな引用があるかチェック
+const hasCurrentPageCitations = computed(() => {
+  forceUpdate.value // 依存関係を強制的に更新
+  const pageSet = window.citationManager.pageActiveCitations.get(currentPage.value)
+  return pageSet && pageSet.size > 0
+})
+
+// 現在のページのソートされた引用一覧
+const sortedCurrentPageCitations = computed(() => {
+  forceUpdate.value // 依存関係を強制的に更新
+  const pageSet = window.citationManager.pageActiveCitations.get(currentPage.value)
+  
+  if (!pageSet) return []
+  
+  return Array.from(pageSet)
+    .map(id => ({
+      id,
+      ...window.citationManager.citations.get(id)
+    }))
+    .filter(citation => citation.data) // dataが存在するもののみ
+    .sort((a, b) => a.number - b.number)
+})
+
+// 引用をフォーマット
+const formatCitation = (data) => {
+  if (!data) return '引用情報が見つかりません'
+  
+  let citation = ''
+  
+  // 著者
+  if (data.author) {
+    citation += data.author
+  }
+  
+  // タイトル
+  if (data.title) {
+    citation += citation ? `, "${data.title}"` : `"${data.title}"`
+  }
+  
+  // ジャーナル
+  if (data.journal) {
+    citation += citation ? `, ${data.journal}` : data.journal
+  }
+  
+  // ボリューム・ナンバー
+  if (data.volume && data.number) {
+    citation += `, Vol. ${data.volume}, No. ${data.number}`
+  } else if (data.volume) {
+    citation += `, Vol. ${data.volume}`
+  } else if (data.number) {
+    citation += `, No. ${data.number}`
+  }
+  
+  // ページ
+  if (data.pages) {
+    citation += `, pp. ${data.pages}`
+  }
+  
+  // 年
+  if (data.year) {
+    citation += citation ? ` (${data.year})` : data.year
+  }
+  
+  // 出版社
+  if (data.publisher) {
+    citation += citation ? `, ${data.publisher}` : data.publisher
+  }
+  
+  // URL
+  if (data.url) {
+    citation += citation ? `, ${data.url}` : data.url
+  }
+  
+  // ISSN
+  if (data.issn) {
+    citation += `, ISSN: ${data.issn}`
+  }
+  
+  return citation || '引用情報が不完全です'
+}
+
+// 全コンポーネントの再描画をトリガー
+const triggerGlobalUpdate = () => {
+  window.citationManager.components.forEach(component => {
+    if (component.updateForceUpdate) {
+      component.updateForceUpdate()
+    }
+  })
+}
+
+// 強制更新関数
+const updateForceUpdate = () => {
+  forceUpdate.value++
+}
+
+// 現在のページに引用を追加
+const addToCurrentPage = () => {
+  if (!citationData.value) return
+  
+  const page = currentPage.value
+  if (!window.citationManager.pageActiveCitations.has(page)) {
+    window.citationManager.pageActiveCitations.set(page, new Set())
+  }
+  window.citationManager.pageActiveCitations.get(page).add(props.id)
+}
+
+// 現在のページから引用を削除
+const removeFromCurrentPage = () => {
+  const page = currentPage.value
+  const pageSet = window.citationManager.pageActiveCitations.get(page)
+  if (pageSet) {
+    pageSet.delete(props.id)
+    if (pageSet.size === 0) {
+      window.citationManager.pageActiveCitations.delete(page)
+    }
+  }
+}
+
+// ページ変更を監視
+watch(currentPage, (newPage, oldPage) => {
+  if (oldPage !== undefined) {
+    // 前のページから削除
+    const oldPageSet = window.citationManager.pageActiveCitations.get(oldPage)
+    if (oldPageSet) {
+      oldPageSet.delete(props.id)
+      if (oldPageSet.size === 0) {
+        window.citationManager.pageActiveCitations.delete(oldPage)
+      }
+    }
+  }
+  
+  // 新しいページに追加
+  addToCurrentPage()
+  triggerGlobalUpdate()
+})
+
+// コンポーネントのマウント時
+onMounted(() => {
+  if (citationData.value) {
+    addToCurrentPage()
+    window.citationManager.components.add({ updateForceUpdate })
+    triggerGlobalUpdate()
+  }
+})
+
+// コンポーネントのアンマウント時
+onUnmounted(() => {
+  removeFromCurrentPage()
+  window.citationManager.components.delete({ updateForceUpdate })
+  triggerGlobalUpdate()
+})
+</script>
+
+<style scoped>
+/* スクロールバーのスタイリング */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>