slidev-theme-gtlabo 2.0.3 → 2.1.0

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/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

@@ -43,13 +43,16 @@
         <!-- 通常の目次表示 -->
         <div
           v-if="!isAppendixSection"
-          :class="gridClasses"
+          :class="layoutClasses"
         >
           <div 
             v-for="(chapter, index) in regularChapters" 
             :key="chapter.key"
-            class="flex flex-col "
-            :class="isNextChapter(chapter.key) ? 'border-sky-500 border-l-8 pl-6' : 'border-slate-200 border-l-4 pl-7'"
+            class="flex flex-col break-inside-avoid"
+            :class="[
+              isNextChapter(chapter.key) ? 'border-sky-500 border-l-8 pl-6' : 'border-slate-200 border-l-4 pl-7',
+              itemMarginBottomClasses
+            ]"
           >
             <!-- 次の章インジケーター - sky-500アクセント -->
             <div 
@@ -95,13 +98,16 @@
         <!-- 付録の目次表示 -->
         <div
           v-else
-          :class="gridClasses"
+          :class="layoutClasses"
         >
           <div 
             v-for="(chapter, index) in appendixChapters" 
             :key="chapter.key"
-            class="flex flex-col"
-            :class="isNextChapter(chapter.key) ? 'border-sky-500  border-l-8 pl-6' : 'border-slate-200 border-l-4 pl-7'"
+            class="flex flex-col break-inside-avoid"
+            :class="[
+              isNextChapter(chapter.key) ? 'border-sky-500  border-l-8 pl-6' : 'border-slate-200 border-l-4 pl-7',
+              itemMarginBottomClasses
+            ]"
           >
             <!-- 次の章インジケーター -->
             <div 
@@ -274,11 +280,12 @@ const isNextChapter = (chapterKey) => {
 // サイズ設定 - 縦幅を大幅削減
 const sizeConfigs = {
   xs: {
-    columns: 4,
+    columns: "columns-4",
     headerPadding: 'pt-3 pb-1 px-6',
     headerTitle: 'text-lg',
     mainPadding: 'px-6 py-6',
-    gridGap: 'gap-x-4 gap-y-4',
+    columnGap: 'gap-4',
+    itemMarginBottom: 'mb-4',
     chapterNumber: 'text-2xl',
     chapterTitle: 'text-[11px]',
     chapterHeader: 'mb-2',
@@ -288,11 +295,12 @@ const sizeConfigs = {
     nextBadge: 'mb-2 px-1.5 py-0.5 text-[8px]'
   },
   sm: {
-    columns: 3,
+    columns: "columns-3",
     headerPadding: 'pt-6 pb-2 px-8',
     headerTitle: 'text-xl',
     mainPadding: 'px-8 py-8',
-    gridGap: 'gap-x-6 gap-y-5',
+    columnGap: 'gap-6',
+    itemMarginBottom: 'mb-5',
     chapterNumber: 'text-3xl',
     chapterTitle: 'text-xs',
     chapterHeader: 'mb-2.5',
@@ -302,11 +310,12 @@ const sizeConfigs = {
     nextBadge: 'mb-2.5 px-2 py-0.5 text-[9px]'
   },
   md: {
-    columns: 2,
+    columns: "columns-2",
     headerPadding: 'pt-12 px-12',
     headerTitle: 'text-3xl',
     mainPadding: 'px-12 py-14',
-    gridGap: 'gap-x-12 gap-y-6',
+    columnGap: 'gap-12',
+    itemMarginBottom: 'mb-6',
     chapterNumber: 'text-6xl',
     chapterTitle: 'text-2xl',
     chapterHeader: 'mb-3',
@@ -316,11 +325,12 @@ const sizeConfigs = {
     nextBadge: 'mb-3 px-2.5 py-1 text-md'
   },
   lg: {
-    columns: 2,
+    columns: "columns-2",
     headerPadding: 'pt-8 pb-4 px-16',
     headerTitle: 'text-4xl',
     mainPadding: 'px-16 py-18',
-    gridGap: 'gap-x-16 gap-y-8',
+    columnGap: 'gap-16',
+    itemMarginBottom: 'mb-8',
     chapterNumber: 'text-7xl',
     chapterTitle: 'text-xl',
     chapterHeader: 'mb-4',
@@ -330,11 +340,12 @@ const sizeConfigs = {
     nextBadge: 'mb-4 px-3 py-1.5 text-xs'
   },
   xl: {
-    columns: 1,
+    columns: "columns-1",
     headerPadding: 'pt-10 pb-5 px-20',
     headerTitle: 'text-6xl',
     mainPadding: 'px-20 py-24',
-    gridGap: 'gap-x-20 gap-y-12',
+    columnGap: 'gap-20',
+    itemMarginBottom: 'mb-12',
     chapterNumber: 'text-8xl',
     chapterTitle: 'text-3xl',
     chapterHeader: 'mb-6',
@@ -351,7 +362,8 @@ const currentConfig = computed(() => sizeConfigs[props.size])
 const headerClasses = computed(() => `text-left ${currentConfig.value.headerPadding}`)
 const headerTitleClasses = computed(() => currentConfig.value.headerTitle)
 const mainContentClasses = computed(() => `flex-1 ${currentConfig.value.mainPadding}`)
-const gridClasses = computed(() => `grid grid-cols-${currentConfig.value.columns} ${currentConfig.value.gridGap}`)
+const layoutClasses = computed(() => `${currentConfig.value.columns} ${currentConfig.value.columnGap} block`)
+const itemMarginBottomClasses = computed(() => currentConfig.value.itemMarginBottom)
 const chapterHeaderClasses = computed(() => currentConfig.value.chapterHeader)
 const chapterNumberClasses = computed(() => currentConfig.value.chapterNumber)
 const chapterTitleClasses = computed(() => currentConfig.value.chapterTitle)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-gtlabo",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "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"
     }
   }
-}
+}