slidev-theme-gtlabo 1.0.0

package/components/CitationListPage.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="h-full flex flex-col">
+    <!-- ヘッダー部分（Headerコンポーネントを使用） -->
+    <Header 
+      :chapter-data="{ title: '参考文献' }"
+      chapter="ref"
+    />
+  
+    <!-- 参考文献リスト -->
+    <div class="flex-1 overflow-y-auto px-4">
+      <div
+        v-if="citationsList.length > 0"
+        class="space-y-6"
+      >
+        <div 
+          v-for="(citation, index) in citationsList" 
+          :key="citation.key"
+          class="citation-item border-l-4 border-sky-500 pl-6 py-2"
+        >
+          <!-- 引用キー -->
+          <div class="text-lg font-semibold text-sky-700 mb-2">
+            [{{ citation.key }}]
+          </div>
+            
+          <!-- 引用情報 -->
+          <div class="text-gray-800 leading-relaxed">
+            <!-- 著者 -->
+            <span
+              v-if="citation.data.author"
+              class="font-medium"
+            >
+              {{ citation.data.author }}
+            </span>
+              
+            <!-- タイトル -->
+            <span
+              v-if="citation.data.title"
+              class="italic"
+            >
+              <span v-if="citation.data.author">. </span>
+              "{{ citation.data.title }}"
+            </span>
+              
+            <!-- 雑誌名 -->
+            <span
+              v-if="citation.data.journal"
+              class="font-medium"
+            >
+              <span v-if="citation.data.title || citation.data.author">. </span>
+              <em>{{ citation.data.journal }}</em>
+            </span>
+              
+            <!-- 巻号 -->
+            <span v-if="citation.data.volume">
+              <span v-if="citation.data.journal">, </span>
+              Vol. {{ citation.data.volume }}
+            </span>
+              
+            <span v-if="citation.data.number">
+              <span v-if="citation.data.volume">, </span>
+              <span v-else-if="citation.data.journal">, </span>
+              No. {{ citation.data.number }}
+            </span>
+              
+            <!-- ページ -->
+            <span v-if="citation.data.pages">
+              <span v-if="citation.data.volume || citation.data.number">, </span>
+              <span v-else-if="citation.data.journal">, </span>
+              pp. {{ citation.data.pages }}
+            </span>
+              
+            <!-- 出版社 -->
+            <span v-if="citation.data.publisher">
+              <span v-if="citation.data.journal || citation.data.pages">, </span>
+              {{ citation.data.publisher }}
+            </span>
+              
+            <!-- 年 -->
+            <span
+              v-if="citation.data.year"
+              class="font-medium"
+            >
+              <span v-if="citation.data.author || citation.data.title || citation.data.journal || citation.data.publisher">, </span>
+              ({{ citation.data.year }})
+            </span>
+              
+            <!-- DOI -->
+            <div
+              v-if="citation.data.doi"
+              class="mt-2 text-sm text-blue-600"
+            >
+              DOI: <a
+                :href="`https://doi.org/${citation.data.doi}`"
+                target="_blank"
+                class="hover:underline"
+              >
+                {{ citation.data.doi }}
+              </a>
+            </div>
+              
+            <!-- URL -->
+            <div
+              v-if="citation.data.url && !citation.data.doi"
+              class="mt-2 text-sm text-blue-600"
+            >
+              URL: <a
+                :href="citation.data.url"
+                target="_blank"
+                class="hover:underline break-all"
+              >
+                {{ citation.data.url }}
+              </a>
+            </div>
+              
+            <!-- ISSN -->
+            <div
+              v-if="citation.data.issn"
+              class="mt-1 text-sm text-gray-600"
+            >
+              ISSN: {{ citation.data.issn }}
+            </div>
+          </div>
+        </div>
+      </div>
+        
+      <!-- 参考文献がない場合 -->
+      <div
+        v-else
+        class="text-center text-gray-500 mt-16"
+      >
+        <div class="text-xl">
+          参考文献が設定されていません
+        </div>
+        <div class="text-sm mt-2">
+          frontmatterの<code class="bg-gray-200 px-2 py-1 rounded">citations</code>セクションに参考文献を追加してください
+        </div>
+      </div>
+    </div>
+      
+    <!-- フッター（必要に応じて） -->
+    <div class="flex-shrink-0 mt-8 pt-4 border-t border-gray-300 px-4">
+      <div class="text-sm text-gray-600 text-center">
+        {{ citationsList.length }} 件の参考文献
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script setup>
+  import { computed } from 'vue'
+  import { useSlideContext } from '@slidev/client'
+  // Headerコンポーネントをimport
+  import Header from './Header.vue'
+  
+  // Slidevコンテキストからconfigsにアクセス
+  const { $slidev } = useSlideContext()
+  const citations = $slidev.configs.citations || {}
+  
+  // プロパティ定義（必要に応じて）
+  const props = defineProps({
+    // 表示スタイルのカスタマイズ用
+    style: {
+      type: String,
+      default: 'academic', // 'academic', 'ieee', 'apa' など
+    },
+    // 表示順序
+    sortBy: {
+      type: String,
+      default: 'key', // 'key', 'author', 'year' など
+    }
+  })
+  
+  // 参考文献リストを生成
+  const citationsList = computed(() => {
+    if (!citations || typeof citations !== 'object') {
+      return []
+    }
+    
+    const list = Object.keys(citations).map(key => ({
+      key,
+      data: citations[key]
+    }))
+    
+    // ソート処理
+    switch (props.sortBy) {
+      case 'author':
+        return list.sort((a, b) => {
+          const authorA = a.data.author || ''
+          const authorB = b.data.author || ''
+          return authorA.localeCompare(authorB)
+        })
+      case 'year':
+        return list.sort((a, b) => {
+          const yearA = parseInt(a.data.year) || 0
+          const yearB = parseInt(b.data.year) || 0
+          return yearB - yearA // 降順（新しい順）
+        })
+      case 'key':
+      default:
+        return list.sort((a, b) => a.key.localeCompare(b.key))
+    }
+  })
+  
+  // スタイル別のフォーマット関数（将来的な拡張用）
+  const formatCitation = (citation, style = 'academic') => {
+    // 現在は academic スタイルのみ実装
+    // 将来的にIEEE、APA等のスタイルを追加可能
+    return citation
+  }
+  </script>
+  
+  <style scoped>
+  .citation-item {
+    transition: all 0.2s ease-in-out;
+  }
+  
+  .citation-item:hover {
+    background-color: rgba(14, 165, 233, 0.05);
+    border-left-width: 6px;
+  }
+  
+  /* スクロールバーのスタイリング */
+  .overflow-y-auto {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(14, 165, 233, 0.3) transparent;
+  }
+  
+  .overflow-y-auto::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .overflow-y-auto::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .overflow-y-auto::-webkit-scrollbar-thumb {
+    background-color: rgba(14, 165, 233, 0.3);
+    border-radius: 3px;
+  }
+  
+  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(14, 165, 233, 0.5);
+  }
+  
+  /* コードブロックのスタイル */
+  code {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  }
+  </style>

package/components/Header.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="flex flex-col px-4 -mx-3 -mt-4  mb-2">
+    <div class="flex ">
+      <div class="flex flex-col gap-y-2 w-11/12">
+        <!-- プログレス部分 -->
+        <div class="flex items-center gap-2 overflow-x-auto">
+          <div 
+            v-for="(chapter, index) in displayChapterList" 
+            :key="chapter.key"
+            class="flex flex-col items-center min-w-35 py-1"
+          >
+            <!-- 章タイトル -->
+            <div class="flex flex-1 text-md font-semibold text-gray-800 text-left w-full whitespace-nowrap mb-2">
+              {{ chapter.title }}
+            </div>
+                    
+            <!-- 進捗バー -->
+            <div class="flex flex-1 w-full">
+              <!-- セクションが複数ある場合 -->
+              <div 
+                v-if="chapter.sections.length > 0"
+                class="flex w-full h-1 gap-0.8 rounded-full overflow-hidden"
+              >
+                <div 
+                  v-for="(section, sectionIndex) in chapter.sections" 
+                  :key="sectionIndex"
+                  class="flex-1 h-full transition-all duration-200 ease-in-out cursor-help rounded-full"
+                  :class="{ 
+                    'bg-gray-700': isCompleted(index, sectionIndex),
+                    'bg-blue-500': isCurrent(index, sectionIndex),
+                    'bg-gray-300': !isCompleted(index, sectionIndex) && !isCurrent(index, sectionIndex)
+                  }"
+                  :style="{ 
+                    width: getSectionWidth(chapter.sections.length) + '%'
+                  }"
+                  :title="getSectionTitle(chapter, sectionIndex)"
+                />
+              </div>
+              
+              <!-- セクションがない場合（1節のみ） -->
+              <div 
+                v-else
+                class="flex w-full h-1 bg-gray-300 rounded-full overflow-hidden"
+              >
+                <div 
+                  class="flex-1 h-full transition-all duration-200 ease-in-out cursor-help"
+                  :class="{ 
+                    'bg-gray-700': isCompleted(index, 0),
+                    'bg-blue-500': isCurrent(index, 0),
+                    'bg-gray-300': !isCompleted(index, 0) && !isCurrent(index, 0)
+                  }"
+                  :title="chapter.title"
+                />
+              </div>
+            </div>
+                    
+            <!-- 章間の接続線（最後の章以外） -->
+            <div 
+              v-if="index < displayChapterList.length - 1"
+              class="text-gray-400 transition-colors duration-200 mx-1"
+              :class="{ 'text-gray-700': isChapterCompleted(index) }"
+            />
+          </div>
+        </div>
+            
+        <!-- タイトル部分 -->
+        <div class="flex flex-col justify-center items-left">
+          <p
+            v-if="displayData"
+            class="text-4xl font-bold text-slate-800 inline-block py-4 "
+          >
+            {{ displayData.title }}
+          </p>
+          <p
+            v-else
+            class="text-4xl font-bold text-slate-800 inline-block py-4 bg-amber"
+          >
+            {{ isSection ? 'セクションが見つかりません' : '章が見つかりません' }}
+          </p>
+        </div>
+      </div>
+      
+      <!-- ページカウンター -->
+      <div class="flex w-1/12 items-center justify-center text-gray-800">
+        <div class="border-3 border-stone-800 rounded-md flex flex-col w-14 divide-y-2 divide-stone-800">
+          <div class="flex flex-1 justify-center items-center text-4xl font-bold">
+            {{ adjustedCurrentPage }}
+          </div>
+          <div class="flex flex-1 justify-center items-center text-xl font-semibold max-h-6">
+            {{ adjustedTotal }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex w-4/5 bg-sky-600 h-1.5 rounded-full -mx-6 " />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useSlideContext } from '@slidev/client'
+
+// Slidevコンテキストからconfigsにアクセス
+const { $slidev } = useSlideContext()
+const chapters = $slidev.configs.chapters || {}
+
+const props = defineProps({
+  // タイトル用のプロパティ
+  chapter: {
+    type: String,
+    required: false
+  },
+  chapterData: {
+    type: Object,
+    required: false
+  },
+  currentSection: {
+    type: String,
+    required: false
+  },
+  // プログレス用のプロパティ（タイトル用と共通利用）
+  currentChapter: {
+    type: String,
+    required: false,
+    default: null
+  }
+})
+
+// セクションかどうかを判定
+const isSection = computed(() => {
+  return !!props.currentSection
+})
+
+// タイトル表示用のデータ
+const displayData = computed(() => {
+  // chapterDataが直接渡された場合はそれを使用
+  if (props.chapterData) {
+    return props.chapterData
+  }
+  
+  // currentSectionが指定されている場合、セクションデータを取得
+  if (props.currentSection && (props.chapter || props.currentChapter)) {
+    const chapterKey = props.chapter || props.currentChapter
+    const chapterData = chapters[chapterKey]
+    if (chapterData?.sections?.[props.currentSection]) {
+      return chapterData.sections[props.currentSection]
+    }
+    return null
+  }
+  
+  // chapterキーが渡された場合は内部データから取得
+  const chapterKey = props.chapter || props.currentChapter
+  if (chapterKey && chapters[chapterKey]) {
+    return chapters[chapterKey]
+  }
+  
+  // どちらも渡されなかった場合はnull
+  return null
+})
+
+// 参考文献ページかどうかを判定
+const isReferencePage = computed(() => {
+  const currentChapterKey = props.currentChapter || props.chapter
+  return currentChapterKey === 'ref'
+})
+
+// 現在のページがappendixかどうかを判定
+const isCurrentPageAppendix = computed(() => {
+  const currentChapterKey = props.currentChapter || props.chapter
+  return currentChapterKey && currentChapterKey.startsWith('ap')
+})
+
+// 章リストを生成（refを除外し、appendixの表示を条件分岐）
+const chapterList = computed(() => {
+  if (!chapters || typeof chapters !== 'object') {
+    return []
+  }
+  
+  return Object.keys(chapters)
+    .filter(chapterKey => chapterKey !== 'ref') // refを除外
+    .map(chapterKey => {
+      const chapter = chapters[chapterKey]
+      const sections = chapter?.sections || {}
+      const sectionKeys = Object.keys(sections)
+      
+      return {
+        key: chapterKey,
+        title: chapter?.title || `章 ${chapterKey}`,
+        sections: sectionKeys,
+        sectionData: sections,
+        isAppendix: chapterKey.startsWith('ap')
+      }
+    })
+})
+
+// 表示する章リスト（appendixページかどうかで切り替え）
+const displayChapterList = computed(() => {
+  if (isCurrentPageAppendix.value) {
+    // appendixページの場合はappendixのみ表示
+    return chapterList.value.filter(chapter => chapter.isAppendix)
+  } else {
+    // 通常ページの場合はappendixを除外
+    return chapterList.value.filter(chapter => !chapter.isAppendix)
+  }
+})
+
+// appendixの開始ページを計算
+const appendixStartPage = computed(() => {
+  const totalPages = $slidev.nav.total
+  const appendixChapters = chapterList.value.filter(chapter => chapter.isAppendix)
+  
+  console.log('appendixStartPage計算:')
+  console.log('  totalPages:', totalPages)
+  console.log('  appendixChapters:', appendixChapters)
+  
+  if (appendixChapters.length === 0) {
+    console.log('  appendixなし - 結果:', totalPages + 1)
+    return totalPages + 1 // appendixがない場合は存在しないページ番号を返す
+  }
+  
+  // appendixの実際のセクション数を計算
+  const appendixSectionCount = appendixChapters.reduce((total, chapter) => {
+    const sectionCount = Math.max(1, chapter.sections.length)
+    console.log(`  章${chapter.key}: ${sectionCount}セクション`)
+    return total + sectionCount
+  }, 0)
+  
+  console.log('  appendixSectionCount:', appendixSectionCount)
+  const result = totalPages - appendixSectionCount + 1
+  console.log('  appendixあり - 結果:', result)
+  return result
+})
+
+// 調整されたページ総数（常にappendix前まで、appendixがない場合は全体から表紙を除く）
+const adjustedTotal = computed(() => {
+  // chapterList（全体）からappendixを検索
+  const appendixChapters = chapterList.value.filter(chapter => chapter.isAppendix)
+  
+  // デバッグ用ログ
+  console.log('全chapterList:', chapterList.value)
+  console.log('appendixChapters:', appendixChapters)
+  console.log('appendixChapters.length:', appendixChapters.length)
+  console.log('$slidev.nav.total:', $slidev.nav.total)
+  console.log('appendixStartPage.value:', appendixStartPage.value)
+  
+  if (appendixChapters.length === 0) {
+    // appendixがない場合は全体のページ数から表紙を除く
+    console.log('appendixなし - 計算結果:', $slidev.nav.total - 1)
+    return $slidev.nav.total - 1
+  } else {
+    // appendixがある場合はappendix開始前のページ数から表紙を除く
+    console.log('appendixあり - 計算結果:', appendixStartPage.value - 2)
+    return appendixStartPage.value - 2
+  }
+})
+
+// 表紙を除いた現在のページ番号
+const adjustedCurrentPage = computed(() => {
+  return Math.max(1, $slidev.nav.currentPage - 1)
+})
+
+// 現在の章のインデックスを取得（表示リスト内での位置）
+const currentChapterIndex = computed(() => {
+  const currentChapterKey = props.currentChapter || props.chapter
+  if (!currentChapterKey) return -1
+  return displayChapterList.value.findIndex(chapter => chapter.key === currentChapterKey)
+})
+
+// 現在の節のインデックスを取得
+const currentSectionIndex = computed(() => {
+  const currentChapterKey = props.currentChapter || props.chapter
+  if (!currentChapterKey || !props.currentSection) return -1
+  const chapter = displayChapterList.value[currentChapterIndex.value]
+  if (!chapter) return -1
+  return chapter.sections.findIndex(section => section === props.currentSection)
+})
+
+// セクションタイトルを取得（ツールチップ用）
+const getSectionTitle = (chapter, sectionIndex) => {
+  if (chapter.sections.length === 0) {
+    return chapter.title
+  }
+  const sectionKey = chapter.sections[sectionIndex]
+  const sectionData = chapter.sectionData[sectionKey]
+  return sectionData?.title || `セクション ${sectionIndex + 1}`
+}
+
+// セクションの幅を計算（%）
+const getSectionWidth = (totalSections) => {
+  if (totalSections <= 1) return 100
+  return 100 / totalSections
+}
+
+// 指定されたセクションが完了しているかチェック
+const isCompleted = (chapterIndex, sectionIndex) => {
+  // 参考文献ページの場合はすべて完了状態
+  if (isReferencePage.value) {
+    return true
+  }
+  
+  const currentIdx = currentChapterIndex.value
+  const currentSecIdx = currentSectionIndex.value
+  
+  if (currentIdx === -1) return false
+  
+  // 現在の章より前の章はすべて完了
+  if (chapterIndex < currentIdx) return true
+  
+  // 現在の章の場合
+  if (chapterIndex === currentIdx) {
+    // セクションが指定されている場合
+    if (currentSecIdx >= 0) {
+      return sectionIndex < currentSecIdx
+    }
+    // セクションが指定されていない場合は何も完了していない
+    return false
+  }
+  
+  return false
+}
+
+// 指定されたセクションが現在の位置かチェック
+const isCurrent = (chapterIndex, sectionIndex) => {
+  // 参考文献ページの場合は何も現在位置にしない（すべて完了状態）
+  if (isReferencePage.value) {
+    return false
+  }
+  
+  const currentIdx = currentChapterIndex.value
+  const currentSecIdx = currentSectionIndex.value
+  
+  if (currentIdx === -1) return false
+  if (chapterIndex !== currentIdx) return false
+  
+  // セクションが指定されている場合
+  if (currentSecIdx >= 0) {
+    return sectionIndex === currentSecIdx
+  }
+  
+  // セクションが指定されていない場合は最初のセクションが現在位置
+  return sectionIndex === 0
+}
+
+// 章全体が完了しているかチェック
+const isChapterCompleted = (chapterIndex) => {
+  // 参考文献ページの場合はすべて完了状態
+  if (isReferencePage.value) {
+    return true
+  }
+  
+  const currentIdx = currentChapterIndex.value
+  return currentIdx > chapterIndex
+}
+</script>