slidev-theme-gtlabo 2.0.4 → 2.1.1

package/components/Citation.vue

@@ -1,34 +1,29 @@
 <template>
   <span>
     <!-- インライン引用番号 -->
-    <sup class="text-blue-600 font-semibold">
+    <sup class="text-blue-600 font-semibold cursor-help" :title="formattedCitation">
       [{{ citationNumber }}]
     </sup>
-    
-    <!-- このコンポーネント専用の引用情報表示エリア -->
-    <div 
-      v-if="shouldShowCitation"
-      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 class="text-xs text-gray-800">
-            <span class="font-semibold">[{{ citationNumber }}]</span>
-            {{ formattedCitation }}
-          </div>
-        </div>
-      </div>
-    </div>
   </span>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, inject } from 'vue'
 import { useSlideContext } from '@slidev/client'
 
-const { $slidev } = useSlideContext()
-const citations = $slidev.configs.citations || {}
+const { $slidev, $page } = useSlideContext()
+
+// 方法1: frontmatterから取得（従来通り）
+const frontmatterCitations = $slidev.configs.citations || {}
+
+// 方法2: injectから取得（外部ファイル対応）
+const injectedCitations = inject('citations', {})
+
+// 両方をマージ（frontmatter優先）
+const citations = computed(() => ({
+  ...injectedCitations,
+  ...frontmatterCitations
+}))
 
 const props = defineProps({
   id: {
@@ -40,12 +35,25 @@ const props = defineProps({
 // グローバル引用管理の初期化
 if (!window.citationManager) {
   window.citationManager = {
-    citations: new Map(), // id -> { number, data, formatted }
-    citationKeys: Object.keys(citations), // frontmatterのキーの順番を保持
-    initialized: false
+    citations: new Map(),           // id -> { number, data, formatted }
+    citationKeys: [],               // frontmatterのキーの順番
+    pageCitations: new Map(),       // pageNumber -> Set of citation ids
+    initialized: false,
+    listeners: new Set()            // 更新通知用リスナー
   }
 }
 
+// 更新を通知する関数
+const notifyListeners = () => {
+  window.citationManager.listeners.forEach(listener => {
+    try {
+      listener()
+    } catch (e) {
+      // リスナーエラーを無視
+    }
+  })
+}
+
 // frontmatterの順番でcitation番号を事前に割り当て
 const initializeCitations = () => {
   if (!window.citationManager.initialized) {
@@ -55,7 +63,7 @@ const initializeCitations = () => {
       if (!window.citationManager.citations.has(key)) {
         const data = citations[key]
         const newCitation = {
-          number: index + 1, // 1から開始
+          number: index + 1,
           data: data,
           formatted: formatCitation(data)
         }
@@ -67,18 +75,9 @@ const initializeCitations = () => {
   }
 }
 
-const isMounted = ref(false)
-
-// 現在のページ番号を取得
-const currentPage = computed(() => {
-  const page = $slidev.nav.currentPage
-  return page
-})
-
 // 引用データを取得
 const citationData = computed(() => {
-  const data = citations[props.id] || null
-  return data
+  return citations[props.id] || null
 })
 
 // 引用番号を取得
@@ -87,7 +86,6 @@ const citationNumber = computed(() => {
     return '?'
   }
   
-  // 初期化を確実に実行
   initializeCitations()
   
   const citation = window.citationManager.citations.get(props.id)
@@ -112,12 +110,6 @@ const formattedCitation = computed(() => {
   return formatCitation(citationData.value)
 })
 
-// 引用を表示すべきかどうか
-const shouldShowCitation = computed(() => {
-  const shouldShow = isMounted.value && citationData.value !== null
-  return shouldShow
-})
-
 // 引用をフォーマット
 const formatCitation = (data) => {
   if (!data) {
@@ -126,22 +118,18 @@ const formatCitation = (data) => {
   
   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) {
@@ -150,82 +138,77 @@ const formatCitation = (data) => {
     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}`
   }
   
-  const formatted = citation || '引用情報が不完全です'
-  return formatted
+  return citation || '引用情報が不完全です'
+}
+
+// 現在のページに引用を登録
+const registerCitation = () => {
+  // $page はこのコンポーネントが配置されているスライドの番号（静的）
+  const page = $page
+  if (!page) return
+  
+  if (!window.citationManager.pageCitations.has(page)) {
+    window.citationManager.pageCitations.set(page, new Set())
+  }
+  
+  const pageSet = window.citationManager.pageCitations.get(page)
+  if (!pageSet.has(props.id)) {
+    pageSet.add(props.id)
+    notifyListeners()
+  }
 }
 
-// 全体のグローバル状態をデバッグ出力
-const debugGlobalState = () => {
-  // デバッグ用（必要に応じてコメントアウト）
+// 現在のページから引用を解除
+const unregisterCitation = () => {
+  const page = $page
+  if (!page) return
+  
+  const pageSet = window.citationManager.pageCitations.get(page)
+  if (pageSet) {
+    pageSet.delete(props.id)
+    if (pageSet.size === 0) {
+      window.citationManager.pageCitations.delete(page)
+    }
+    notifyListeners()
+  }
 }
 
-// コンポーネントのマウント時
 onMounted(() => {
-  isMounted.value = true
-  
-  // 初期化を確実に実行
   initializeCitations()
-  
-  if (citationData.value) {
-    // 引用番号を取得（副作用でglobal stateに保存される）
-    const _ = citationNumber.value
-    debugGlobalState()
-  }
+  registerCitation()
 })
 
-// コンポーネントのアンマウント時
 onUnmounted(() => {
-  isMounted.value = false
-  debugGlobalState()
+  unregisterCitation()
 })
-
-// 開発用：グローバル状態確認用の関数をwindowに追加
-if (typeof window !== 'undefined') {
-  window.debugCitationState = debugGlobalState
-}
 </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;
+sup {
+  font-size: 0.75em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+  top: -0.5em;
 }
 </style>

package/components/CitationListPage.vue

@@ -147,12 +147,23 @@
 </template>
   
 <script setup>
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { useSlideContext } from '@slidev/client'
 
 // Slidevコンテキストからconfigsにアクセス
 const { $slidev } = useSlideContext()
-const citations = $slidev.configs.citations || {}
+
+// 方法1: frontmatterから取得（従来通り）
+const frontmatterCitations = $slidev.configs.citations || {}
+
+// 方法2: injectから取得（外部ファイル対応）
+const injectedCitations = inject('citations', {})
+
+// 両方をマージ（frontmatter優先）
+const citations = computed(() => ({
+  ...injectedCitations,
+  ...frontmatterCitations
+}))
 
 // プロパティ定義
 const props = defineProps({
@@ -177,16 +188,17 @@ const props = defineProps({
 
 // 参考文献リストを生成（frontmatterの順番を維持）
 const citationsList = computed(() => {
-  if (!citations || typeof citations !== 'object') {
+  const citationsData = citations.value
+  if (!citationsData || typeof citationsData !== 'object') {
     return []
   }
   
   // frontmatterの記述順でキーを取得
-  const originalKeys = Object.keys(citations)
+  const originalKeys = Object.keys(citationsData)
   
   const list = originalKeys.map((key, index) => ({
     key,
-    data: citations[key],
+    data: citationsData[key],
     number: index + 1 // frontmatterの順番に基づく番号
   }))
   

package/components/Header.vue

@@ -97,12 +97,25 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed ,inject } from 'vue'
 import { useSlideContext } from '@slidev/client'
 
 // Slidevコンテキストからconfigsにアクセス
 const { $slidev } = useSlideContext()
-const chapters = $slidev.configs.chapters || {}
+
+// 方法1: frontmatterから取得（従来通り）
+const frontmatterChapters = $slidev.configs.chapters || {}
+
+// 方法2: injectから取得（外部ファイル対応）
+const injectedChapters = inject('chapters', {})
+
+// 両方をマージ（frontmatter優先）
+const chapters = computed(() => ({
+  ...injectedChapters,
+  ...frontmatterChapters
+}))
+
+console.log('Header2.vue - chapters:', chapters.value)
 
 const props = defineProps({
   // タイトル用のプロパティ
@@ -133,28 +146,45 @@ const isSection = computed(() => {
 
 // タイトル表示用のデータ
 const displayData = computed(() => {
+  console.log('=== displayData 計算開始 ===')
+  console.log('props.chapterData:', props.chapterData)
+  console.log('props.currentSection:', props.currentSection)
+  console.log('props.chapter:', props.chapter)
+  console.log('props.currentChapter:', props.currentChapter)
+  console.log('chapters.value:', chapters.value)
+  
   // chapterDataが直接渡された場合はそれを使用
   if (props.chapterData) {
+    console.log('→ chapterData を使用')
     return props.chapterData
   }
   
   // currentSectionが指定されている場合、セクションデータを取得
   if (props.currentSection && (props.chapter || props.currentChapter)) {
     const chapterKey = props.chapter || props.currentChapter
-    const chapterData = chapters[chapterKey]
+    console.log('→ セクション検索: chapterKey =', chapterKey)
+    
+    const chapterData = chapters.value[chapterKey]
+    console.log('→ chapterData:', chapterData)
+    console.log('→ sections:', chapterData?.sections)
+    console.log('→ 検索するsection:', props.currentSection)
+    console.log('→ sectionData:', chapterData?.sections?.[props.currentSection])
+    
     if (chapterData?.sections?.[props.currentSection]) {
       return chapterData.sections[props.currentSection]
     }
+    console.log('→ セクションが見つかりません')
     return null
   }
   
   // chapterキーが渡された場合は内部データから取得
   const chapterKey = props.chapter || props.currentChapter
-  if (chapterKey && chapters[chapterKey]) {
-    return chapters[chapterKey]
+  if (chapterKey && chapters.value[chapterKey]) {
+    console.log('→ 章データを使用')
+    return chapters.value[chapterKey]
   }
   
-  // どちらも渡されなかった場合はnull
+  console.log('→ 何も見つかりません')
   return null
 })
 
@@ -172,14 +202,21 @@ const isCurrentPageAppendix = computed(() => {
 
 // 章リストを生成（refを除外し、appendixの表示を条件分岐）
 const chapterList = computed(() => {
-  if (!chapters || typeof chapters !== 'object') {
+  const chaptersData = chapters.value
+  console.log('=== chapterList 計算 ===')
+  console.log('chaptersData:', chaptersData)
+  console.log('typeof chaptersData:', typeof chaptersData)
+  console.log('Object.keys:', chaptersData ? Object.keys(chaptersData) : 'null')
+  
+  if (!chaptersData || typeof chaptersData !== 'object') {
+    console.log('→ chaptersData が無効')
     return []
   }
   
-  return Object.keys(chapters)
-    .filter(chapterKey => chapterKey !== 'ref') // refを除外
+  const result = Object.keys(chaptersData)
+    .filter(chapterKey => chapterKey !== 'ref')
     .map(chapterKey => {
-      const chapter = chapters[chapterKey]
+      const chapter = chaptersData[chapterKey]
       const sections = chapter?.sections || {}
       const sectionKeys = Object.keys(sections)
       
@@ -191,17 +228,26 @@ const chapterList = computed(() => {
         isAppendix: chapterKey.startsWith('ap')
       }
     })
+  
+  console.log('chapterList result:', result)
+  return result
 })
 
 // 表示する章リスト（appendixページかどうかで切り替え）
 const displayChapterList = computed(() => {
+  console.log('=== displayChapterList 計算 ===')
+  console.log('isCurrentPageAppendix:', isCurrentPageAppendix.value)
+  console.log('chapterList:', chapterList.value)
+  
+  let result
   if (isCurrentPageAppendix.value) {
-    // appendixページの場合はappendixのみ表示
-    return chapterList.value.filter(chapter => chapter.isAppendix)
+    result = chapterList.value.filter(chapter => chapter.isAppendix)
   } else {
-    // 通常ページの場合はappendixを除外
-    return chapterList.value.filter(chapter => !chapter.isAppendix)
+    result = chapterList.value.filter(chapter => !chapter.isAppendix)
   }
+  
+  console.log('displayChapterList result:', result)
+  return result
 })
 
 // appendixの開始ページを計算（SectionDivider考慮版）

package/components/SectionDivider.vue

@@ -1,4 +1,4 @@
-<!-- components/TableOfContents.vue -->
+<!-- components/SectionDivider.vue -->
 <template>
   <div class="table-of-contents-container flex flex-col justify-start bg-white overflow-hidden relative">
     <!-- 厳密な背景グリッド - Swiss Styleの基礎 -->
@@ -160,12 +160,23 @@
 </template>
       
 <script setup>
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { useSlideContext } from '@slidev/client'
 
 // Slidevコンテキストからconfigsにアクセス
 const { $slidev } = useSlideContext()
-const chapters = $slidev.configs.chapters || {}
+
+// 方法1: frontmatterから取得（従来通り）
+const frontmatterChapters = $slidev.configs.chapters || {}
+
+// 方法2: injectから取得（外部ファイル対応）
+const injectedChapters = inject('chapters', {})
+
+// 両方をマージ（frontmatter優先）
+const chapters = computed(() => ({
+  ...injectedChapters,
+  ...frontmatterChapters
+}))
 
 const props = defineProps({
   nextChapter: {
@@ -188,7 +199,8 @@ const props = defineProps({
 
 // セクションの重複を除去する関数
 const getUniqueSections = (chapterKey) => {
-  const chapter = chapters[chapterKey]
+  const chaptersData = chapters.value
+  const chapter = chaptersData[chapterKey]
   if (!chapter?.sections) return []
   
   const sections = chapter.sections
@@ -221,14 +233,15 @@ const isAppendixSection = computed(() => {
 
 // 通常の章リスト（refと付録を除外）
 const regularChapters = computed(() => {
-  if (!chapters || typeof chapters !== 'object') {
+  const chaptersData = chapters.value
+  if (!chaptersData || typeof chaptersData !== 'object') {
     return []
   }
   
-  return Object.keys(chapters)
+  return Object.keys(chaptersData)
     .filter(chapterKey => chapterKey !== 'ref' && !chapterKey.startsWith('ap'))
     .map(chapterKey => {
-      const chapter = chapters[chapterKey]
+      const chapter = chaptersData[chapterKey]
       const sections = chapter?.sections || {}
       const sectionKeys = Object.keys(sections)
       
@@ -244,14 +257,15 @@ const regularChapters = computed(() => {
 
 // 付録の章リスト
 const appendixChapters = computed(() => {
-  if (!chapters || typeof chapters !== 'object') {
+  const chaptersData = chapters.value
+  if (!chaptersData || typeof chaptersData !== 'object') {
     return []
   }
   
-  return Object.keys(chapters)
+  return Object.keys(chaptersData)
     .filter(chapterKey => chapterKey.startsWith('ap'))
     .map(chapterKey => {
-      const chapter = chapters[chapterKey]
+      const chapter = chaptersData[chapterKey]
       const sections = chapter?.sections || {}
       const sectionKeys = Object.keys(sections)
       
@@ -267,7 +281,8 @@ const appendixChapters = computed(() => {
 
 // セクションタイトルを取得
 const getSectionTitle = (chapterKey, sectionKey) => {
-  const chapter = chapters[chapterKey]
+  const chaptersData = chapters.value
+  const chapter = chaptersData[chapterKey]
   const sectionData = chapter?.sections?.[sectionKey]
   return sectionData?.title || `セクション ${sectionKey}`
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-gtlabo",
-  "version": "2.0.4",
+  "version": "2.1.1",
   "description": "A Slidev theme for laboratory presentations with customizable components",
   "author": "mksmkss",
   "license": "MIT",
@@ -12,7 +12,7 @@
   "main": "index.js",
   "files": [
     "components",
-    "layouts", 
+    "layouts",
     "styles",
     "setup",
     "uno.config.ts",
@@ -20,7 +20,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mksmkss/slidev-theme-gtlabo.git"
+    "url": "git+https://github.com/mksmkss/slidev-theme-gtlabo.git"
   },
   "homepage": "https://github.com/mksmkss/slidev-theme-gtlabo",
   "bugs": {
@@ -62,4 +62,4 @@
       "aspectRatio": "4/3"
     }
   }
-}
+}

package/components/ChapterItem.vue

@@ -1,93 +0,0 @@
-<!-- components/ChapterItem.vue -->
-<template>
-  <div 
-    class="flex flex-col"
-    :class="isNext ? 'border-sky-500 border-l-8 pl-6' : 'border-slate-200 border-l-4 pl-7'"
-  >
-    <!-- 次の章インジケーター - sky-500アクセント -->
-    <div 
-      v-if="isNext"
-      :class="nextBadgeClasses"
-      class="bg-sky-500 text-white font-bold uppercase tracking-widest leading-none"
-    >
-      NEXT
-    </div>
-          
-    <!-- 章番号とタイトル - 左揃え、明確なヒエラルキー -->
-    <div :class="chapterHeaderClasses">
-      <div class="flex items-end space-x-3 w-full">
-        <div :class="chapterNumberClasses" class="flex text-slate-900 font-bold tabular-nums leading-none">
-          {{ chapterNumber }}
-        </div>
-        <div class="flex-1">
-          <div class="border-b border-slate-900 mb-2">
-            <span :class="chapterTitleClasses" class="text-slate-900 font-bold leading-tight">
-              {{ chapter.title }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-          
-    <!-- セクション一覧 - 機能的な情報構造 -->
-    <div :class="sectionListClasses">
-      <div 
-        v-for="(sectionData, sectionIndex) in chapter.uniqueSections" 
-        :key="`${chapter.key}-${sectionIndex}`"
-        class="flex items-start"
-      >
-        <span class="w-1 h-1 bg-slate-400 mr-2 mt-1.5 flex-shrink-0 rounded-full"></span>
-        <span :class="sectionTextClasses" class="text-slate-600 leading-snug">
-          {{ sectionData.title }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  chapter: {
-    type: Object,
-    required: true
-  },
-  index: {
-    type: Number,
-    required: true
-  },
-  isNext: {
-    type: Boolean,
-    default: false
-  },
-  isAppendix: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: String,
-    default: 'md'
-  },
-  config: {
-    type: Object,
-    required: true
-  }
-})
-
-// 章番号の生成（通常章は "01", "02"、付録は "A1", "A2"）
-const chapterNumber = computed(() => {
-  if (props.isAppendix) {
-    return `A${props.index + 1}`
-  }
-  return String(props.index + 1).padStart(2, '0')
-})
-
-// 動的クラス
-const chapterHeaderClasses = computed(() => props.config.chapterHeader)
-const chapterNumberClasses = computed(() => props.config.chapterNumber)
-const chapterTitleClasses = computed(() => props.config.chapterTitle)
-const sectionListClasses = computed(() => props.config.sectionList)
-const sectionTextClasses = computed(() => props.config.sectionText)
-const nextBadgeClasses = computed(() => props.config.nextBadge)
-</script>