slidev-theme-gtlabo 1.0.7 → 1.0.9

package/components/Citation.vue

@@ -37,11 +37,33 @@ const props = defineProps({
   }
 })
 
-// グローバル引用管理の初期化（引用番号のみ管理）
+// グローバル引用管理の初期化
 if (!window.citationManager) {
   window.citationManager = {
-    counter: 1,
-    citations: new Map() // id -> { number, data, formatted }
+    citations: new Map(), // id -> { number, data, formatted }
+    citationKeys: Object.keys(citations), // frontmatterのキーの順番を保持
+    initialized: false
+  }
+}
+
+// frontmatterの順番でcitation番号を事前に割り当て
+const initializeCitations = () => {
+  if (!window.citationManager.initialized) {
+    window.citationManager.citationKeys = Object.keys(citations)
+    
+    window.citationManager.citationKeys.forEach((key, index) => {
+      if (!window.citationManager.citations.has(key)) {
+        const data = citations[key]
+        const newCitation = {
+          number: index + 1, // 1から開始
+          data: data,
+          formatted: formatCitation(data)
+        }
+        window.citationManager.citations.set(key, newCitation)
+      }
+    })
+    
+    window.citationManager.initialized = true
   }
 }
 
@@ -59,24 +81,21 @@ const citationData = computed(() => {
   return data
 })
 
-// 引用番号を取得または生成
+// 引用番号を取得
 const citationNumber = computed(() => {
   if (!citationData.value) {
     return '?'
   }
   
-  if (!window.citationManager.citations.has(props.id)) {
-    const newCitation = {
-      number: window.citationManager.counter,
-      data: citationData.value,
-      formatted: formatCitation(citationData.value)
-    }
-    window.citationManager.citations.set(props.id, newCitation)
-    window.citationManager.counter++
-  }
+  // 初期化を確実に実行
+  initializeCitations()
   
   const citation = window.citationManager.citations.get(props.id)
-  return citation.number
+  if (citation) {
+    return citation.number
+  }
+  
+  return '?'
 })
 
 // フォーマットされた引用テキスト
@@ -96,7 +115,6 @@ const formattedCitation = computed(() => {
 // 引用を表示すべきかどうか
 const shouldShowCitation = computed(() => {
   const shouldShow = isMounted.value && citationData.value !== null
-  
   return shouldShow
 })
 
@@ -158,30 +176,30 @@ const formatCitation = (data) => {
   }
   
   const formatted = citation || '引用情報が不完全です'
-  
   return formatted
 }
 
 // 全体のグローバル状態をデバッグ出力
 const debugGlobalState = () => {
+  // デバッグ用（必要に応じてコメントアウト）
 }
 
 // コンポーネントのマウント時
 onMounted(() => {
-  
   isMounted.value = true
   
+  // 初期化を確実に実行
+  initializeCitations()
+  
   if (citationData.value) {
-    // 引用番号を生成（副作用でglobal stateに保存される）
+    // 引用番号を取得（副作用でglobal stateに保存される）
     const _ = citationNumber.value
     debugGlobalState()
-  } else {
   }
 })
 
 // コンポーネントのアンマウント時
 onUnmounted(() => {
-  
   isMounted.value = false
   debugGlobalState()
 })

package/components/CitationListPage.vue

@@ -17,9 +17,9 @@
           :key="citation.key"
           class="citation-item border-l-2 border-sky-400 pl-3 py-1"
         >
-          <!-- 引用キー -->
+          <!-- 引用番号（frontmatterの順番に基づく） -->
           <div class="text-sm font-semibold text-sky-700 mb-1">
-            [{{ citation.key }}]
+            [{{ citation.number }}]
           </div>
             
           <!-- 引用情報 -->
@@ -164,19 +164,23 @@ const props = defineProps({
   // 表示順序
   sortBy: {
     type: String,
-    default: 'key', // 'key', 'author', 'year' など
+    default: 'frontmatter', // 'frontmatter', 'key', 'author', 'year' など
   }
 })
 
-// 参考文献リストを生成
+// 参考文献リストを生成（frontmatterの順番を維持）
 const citationsList = computed(() => {
   if (!citations || typeof citations !== 'object') {
     return []
   }
   
-  const list = Object.keys(citations).map(key => ({
+  // frontmatterの記述順でキーを取得
+  const originalKeys = Object.keys(citations)
+  
+  const list = originalKeys.map((key, index) => ({
     key,
-    data: citations[key]
+    data: citations[key],
+    number: index + 1 // frontmatterの順番に基づく番号
   }))
   
   // ソート処理
@@ -194,8 +198,11 @@ const citationsList = computed(() => {
         return yearB - yearA // 降順（新しい順）
       })
     case 'key':
-    default:
       return list.sort((a, b) => a.key.localeCompare(b.key))
+    case 'frontmatter':
+    default:
+      // frontmatterの順番を維持（デフォルト）
+      return list
   }
 })
 

package/components/TableOfContents.vue

@@ -269,8 +269,8 @@ const sizeConfigs = {
     columns: 2,
     headerPadding: 'pt-14 pb-8 px-10',
     headerTitle: 'text-5xl',
-    mainPadding: 'px-12 py-12',
-    gridGap: 'gap-x-16 gap-y-8',
+    mainPadding: 'px-6 py-40',
+    gridGap: 'gap-x-12 gap-y-2',
     chapterNumber: 'text-6xl',
     chapterTitle: 'text-2xl',
     chapterHeader: 'mb-4',

package/layouts/cover.vue

@@ -1,33 +1,54 @@
 <template>
-  <div class="slidev-layout cover relative overflow-hidden bg-gradient-to-br from-white via-gray-100 to-sky-200">
-    <!-- 大きな円形要素（右上） -->
-    <div class="absolute -right-32 -top-32 w-96 h-96 bg-sky-300/70 rounded-full" />
-    <div class="absolute right-8 top-24 w-64 h-64 bg-sky-400/60 rounded-full" />
+  <div class="slidev-layout cover relative overflow-hidden animated-gradient">
+    <!-- ランダムに動く大きな円形要素(右上) -->
+    <div 
+      ref="circle1"
+      class="absolute -right-32 -top-32 w-96 h-96 bg-sky-300/70 rounded-full transition-all duration-[3000ms] ease-in-out"
+      :style="circleStyles[0]"
+    />
+    <div 
+      ref="circle2"
+      class="absolute right-8 top-24 w-64 h-64 bg-sky-400/60 rounded-full transition-all duration-[4000ms] ease-in-out"
+      :style="circleStyles[1]"
+    />
     
-    <!-- 左下の三角形要素 -->
-    <div class="absolute left-16 bottom-16 w-0 h-0 border-l-48 border-r-48 border-b-80 border-transparent border-b-sky-400/50" />
-    <div class="absolute left-32 bottom-32 w-0 h-0 border-l-32 border-r-32 border-b-56 border-transparent border-b-sky-500/55" />
+    <!-- ランダムに動く左下の三角形要素 -->
+    <div 
+      class="absolute left-16 bottom-16 w-0 h-0 border-l-48 border-r-48 border-b-80 border-transparent border-b-sky-400/50 transition-all duration-[3500ms] ease-in-out"
+      :style="triangleStyles[0]"
+    />
+    <div 
+      class="absolute left-32 bottom-32 w-0 h-0 border-l-32 border-r-32 border-b-56 border-transparent border-b-sky-500/55 transition-all duration-[4500ms] ease-in-out"
+      :style="triangleStyles[1]"
+    />
     
-
-    <!-- 右下の斜線要素 -->
-    <div class="absolute right-25 bottom-5 transform -translate-y-1/2 rotate-60 space-y-8">
-      <div class="w-48 h-3 rounded-md bg-sky-500/70" />
-      <div class="w-36 h-3 rounded-md bg-sky-500/70" />
-      <div class="w-48 h-3 rounded-md bg-sky-500/70" />
-      <div class="w-24 h-3 rounded-md bg-sky-500/70" />
+    <!-- ランダムに動く右下の斜線要素 -->
+    <div 
+      class="absolute right-25 bottom-5 space-y-8 transition-all duration-[5000ms] ease-in-out"
+      :style="linesStyle"
+    >
+      <div 
+        v-for="(width, index) in lineWidths" 
+        :key="index"
+        class="h-3 rounded-md bg-sky-500/70 transition-all duration-[2000ms] ease-in-out"
+        :style="{ width: `${width}px` }"
+      />
     </div>    
     
-    <!-- 左上の円形グリッド（より濃く） -->
-    <div class="absolute left-16 top-16 grid grid-cols-3 gap-3 opacity-60">
-      <div class="w-8 h-8 bg-sky-600 rounded-full" />
-      <div class="w-8 h-8 border-2 border-sky-700 rounded-full" />
-      <div class="w-8 h-8 bg-sky-600 rounded-full" />
-      <div class="w-8 h-8 bg-sky-600 rounded-full" />
-      <div class="w-8 h-8 bg-sky-600 rounded-full" />
-      <div class="w-8 h-8 border-2 border-sky-700 rounded-full" />
-      <div class="w-8 h-8 border-2 border-sky-700 rounded-full" />
-      <div class="w-8 h-8 bg-sky-600 rounded-full" />
-      <div class="w-8 h-8 bg-sky-600 rounded-full" />
+    <!-- ランダムに動く左上の円形グリッド -->
+    <div 
+      class="absolute left-16 top-16 grid grid-cols-3 gap-3 opacity-60 rotating-grid"
+      :style="gridStyle"
+    >
+      <div 
+        v-for="(dot, index) in dots" 
+        :key="index"
+        :class="[
+          'w-8 h-8 rounded-full transition-all duration-[2500ms] ease-in-out',
+          dot.filled ? 'bg-sky-600' : 'border-2 border-sky-700'
+        ]"
+        :style="dot.style"
+      />
     </div>
     
     <!-- メインコンテンツ -->
@@ -38,10 +59,10 @@
           {{ $slidev.configs.meetingName }}
         </div>
         
-        <!-- メインタイトル（サイズ指定可能） -->
+        <!-- メインタイトル -->
         <div 
           :class="[
-            'font-bold text-slate-900 leading-tight',
+            'font-bold text-slate-900 leading-tight ',
             getTitleSizeClass($slidev.configs.titleSize || 'large')
           ]"
         >
@@ -59,14 +80,24 @@
         </div>
         
         <!-- 著者情報 -->
-        <div class="space-y-2">
-          <div class="text-2xl font-semibold text-slate-800">
-            {{ $slidev.configs.author.affiliation }}
-          </div>
-          <div class="text-2xl font-bold text-slate-900">
-            {{ $slidev.configs.author.name }}
+        <div class="space-y-4">
+          <div class="flex flex-col items-end justify-between w-full w-full px-20">
+            <div class="text-2xl font-semibold text-slate-800 ">
+              {{ $slidev.configs.author.affiliation }}<span class="text-sky-600 ml-2">*</span>{{ $slidev.configs.author.name }}
+            </div>
+            
+            <!-- 共著者 (存在する場合) -->
+            <div v-if="coAuthors.length > 0" class="space-y-1 flex flex-col items-end">
+              <div
+                v-for="(coAuthor, index) in coAuthors"
+                :key="index"
+                class="text-2xl font-semibold text-slate-800"
+              >
+                <span class="mr-2"> {{ coAuthor.affiliation }}</span> {{ coAuthor.name }}
+              </div>
+            </div>
           </div>
-          <!-- 日付 -->
+          
           <div class="text-xl font-semibold text-slate-700">
             {{ $slidev.configs.date }}
           </div>
@@ -82,6 +113,11 @@
 </template>
 
 <script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useSlideContext } from '@slidev/client'
+
+const { $slidev } = useSlideContext()
+
 // タイトルサイズのクラスを返す関数
 function getTitleSizeClass(size) {
   const sizeMap = {
@@ -94,4 +130,150 @@ function getTitleSizeClass(size) {
   
   return sizeMap[size] || sizeMap['large']
 }
-</script>
+
+// 共著者リストを取得
+const coAuthors = computed(() => {
+  const configs = $slidev.configs
+  if (!configs || !configs.coAuthors || !Array.isArray(configs.coAuthors)) {
+    return []
+  }
+  console.log(configs.coAuthors)
+  // 最大4人まで
+  return configs.coAuthors.slice(0, 4)
+})
+
+// ランダムな値を生成する関数
+const randomRange = (min, max) => Math.random() * (max - min) + min
+
+// 初期状態でランダムな位置を設定
+const circleStyles = ref([
+  { transform: `translate(${randomRange(-15, 15)}px, ${randomRange(-15, 15)}px) rotate(${randomRange(-5, 5)}deg)` },
+  { transform: `translate(${randomRange(-20, 20)}px, ${randomRange(-20, 20)}px) rotate(${randomRange(-8, 8)}deg)` }
+])
+
+const triangleStyles = ref([
+  { transform: `translate(${randomRange(-10, 10)}px, ${randomRange(-10, 10)}px) rotate(${randomRange(-3, 3)}deg)` },
+  { transform: `translate(${randomRange(-12, 12)}px, ${randomRange(-12, 12)}px) rotate(${randomRange(-4, 4)}deg)` }
+])
+
+const linesStyle = ref({ 
+  transform: `translate(${randomRange(-15, 15)}px, ${randomRange(-15, 15)}px) rotate(${randomRange(55, 65)}deg)` 
+})
+
+const lineWidths = ref([
+  randomRange(180, 204),
+  randomRange(130, 158),
+  randomRange(180, 204),
+  randomRange(85, 107)
+])
+
+const gridStyle = ref({})
+
+const dots = ref([
+  { filled: true, style: { transform: `scale(${randomRange(0.85, 1.15)})` } },
+  { filled: false, style: { transform: `scale(${randomRange(0.85, 1.15)})` } },
+  { filled: true, style: { transform: `scale(${randomRange(0.85, 1.15)})` } },
+  { filled: true, style: { transform: `scale(${randomRange(0.85, 1.15)})` } },
+  { filled: true, style: { transform: `scale(${randomRange(0.85, 1.15)})` } },
+  { filled: false, style: { transform: `scale(${randomRange(0.85, 1.15)})` } },
+  { filled: false, style: { transform: `scale(${randomRange(0.85, 1.15)})` } },
+  { filled: true, style: { transform: `scale(${randomRange(0.85, 1.15)})` } },
+  { filled: true, style: { transform: `scale(${randomRange(0.85, 1.15)})` } }
+])
+
+// アニメーション更新関数
+const updateAnimations = () => {
+  // 円形要素をランダムに動かす
+  circleStyles.value[0] = {
+    transform: `translate(${randomRange(-15, 15)}px, ${randomRange(-15, 15)}px) rotate(${randomRange(-5, 5)}deg)`
+  }
+  circleStyles.value[1] = {
+    transform: `translate(${randomRange(-20, 20)}px, ${randomRange(-20, 20)}px) rotate(${randomRange(-8, 8)}deg)`
+  }
+  
+  // 三角形要素をランダムに動かす
+  triangleStyles.value[0] = {
+    transform: `translate(${randomRange(-10, 10)}px, ${randomRange(-10, 10)}px) rotate(${randomRange(-3, 3)}deg)`
+  }
+  triangleStyles.value[1] = {
+    transform: `translate(${randomRange(-12, 12)}px, ${randomRange(-12, 12)}px) rotate(${randomRange(-4, 4)}deg)`
+  }
+  
+  // 斜線要素をランダムに動かす
+  linesStyle.value = {
+    transform: `translate(${randomRange(-15, 15)}px, ${randomRange(-15, 15)}px) rotate(${randomRange(55, 65)}deg)`
+  }
+  
+  // 斜線の幅をランダムに変更
+  lineWidths.value = [
+    randomRange(180, 204),
+    randomRange(130, 158),
+    randomRange(180, 204),
+    randomRange(85, 107)
+  ]
+  
+  // ドットをランダムにスケール変更
+  dots.value = dots.value.map(dot => ({
+    ...dot,
+    style: {
+      transform: `scale(${randomRange(0.85, 1.15)})`
+    }
+  }))
+}
+
+let intervalId = null
+
+onMounted(() => {
+  // 即座に最初のアニメーションを開始
+  setTimeout(() => {
+    updateAnimations()
+  }, 100)
+  
+  // 定期的にアニメーションを更新(3秒ごと)
+  intervalId = setInterval(() => {
+    updateAnimations()
+  }, 3000)
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+</script>
+
+<style scoped>
+/* グラデーション背景のアニメーション */
+@keyframes gradient-shift {
+  0% {
+    background: linear-gradient(to bottom right, white, #f3f4f6, #e0f2fe);
+  }
+  33% {
+    background: linear-gradient(to bottom right, white, #eff6ff, #dbeafe);
+  }
+  66% {
+    background: linear-gradient(to bottom right, white, #f3f4f6, #dbeafe);
+  }
+  100% {
+    background: linear-gradient(to bottom right, white, #f3f4f6, #e0f2fe);
+  }
+}
+
+.animated-gradient {
+  animation: gradient-shift 20s ease-in-out infinite;
+}
+
+/* グリッドの常時回転アニメーション */
+@keyframes rotate-continuously {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotating-grid {
+  animation: rotate-continuously 120s linear infinite;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-gtlabo",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A Slidev theme for laboratory presentations with customizable components",
   "author": "mksmkss",
   "license": "MIT",

package/uno.config.ts

@@ -6,8 +6,8 @@ export default defineConfig({
       md: '1rem',
     },
     colors: {
-      'text-main': 'rgba(31, 41, 55, 1)',
-      'theme-color': 'rgba(2, 132, 199, 1)',
+      'text-main': '#1f2937',
+      'theme-color': '#0284c7',
     },
   },
 })