slidev-theme-gtlabo 1.0.0

package/components/SubSectionTitle.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="flex items-center my-2 -ml-4">
+    <!-- 左側のバー -->
+    <lucide-chevron-right
+      class="w-12 h-12 text-sky-700 -mr-1"
+      :style="customBarStyle"
+    />
+      
+    <!-- タイトルテキスト -->
+    <h2 
+      class="text-5xl font-extrabold m-0 leading-tight tracking-wide"
+      :class="textColorClass"
+      :style="customTextStyle"
+    >
+      {{ title }}
+    </h2>
+  </div>
+</template>
+  
+  <script setup lang="ts">
+  import { computed } from 'vue'
+  
+  const props = defineProps<{
+    title: string
+    color?: string
+  }>()
+  
+  // UnoCSS用のカラークラス
+  const barColorClass = computed(() => {
+    if (!props.color) return 'bg-sky-700'
+    
+    // UnoCSS/Tailwindのカラー名かチェック
+    const colorPattern = /^(red|blue|green|yellow|purple|pink|indigo|cyan|teal|orange|amber|lime|emerald|sky|violet|fuchsia|rose|slate|gray|zinc|neutral|stone)(-\d{1,3})?$/
+    
+    if (colorPattern.test(props.color)) {
+      return `bg-${props.color}`
+    }
+    
+    // カスタムカラーの場合は空文字を返してstyleで適用
+    return ''
+  })
+  
+  const textColorClass = computed(() => {
+    if (!props.color) return 'text-gray-900'
+    
+    // UnoCSS/Tailwindのカラー名かチェック
+    const colorPattern = /^(red|blue|green|yellow|purple|pink|indigo|cyan|teal|orange|amber|lime|emerald|sky|violet|fuchsia|rose|slate|gray|zinc|neutral|stone)(-\d{1,3})?$/
+    
+    if (colorPattern.test(props.color)) {
+      return `text-${props.color}`
+    }
+    
+    // カスタムカラーの場合は空文字を返してstyleで適用
+    return ''
+  })
+  
+  // カスタムカラー用のスタイル
+  const customBarStyle = computed(() => {
+    if (!props.color || barColorClass.value) return {}
+    return { backgroundColor: props.color }
+  })
+  
+  const customTextStyle = computed(() => {
+    if (!props.color || textColorClass.value) return {}
+    return { color: props.color }
+  })
+  </script>

package/components/TableOfContents.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="table-of-contents-container flex flex-col justify-center bg-theme-color">
+    <!-- ヘッダー -->
+    <div
+      v-if="isAppendixSection"
+      :class="headerClasses"
+    >
+      <p :class="headerTitleClasses">
+        付録
+      </p>
+    </div>
+      
+    <!-- メインコンテンツ -->
+    <div :class="mainContentClasses">
+      <div class="max-w-full w-full">
+        <!-- 通常の目次表示 -->
+        <div
+          v-if="!isAppendixSection"
+          :class="gridClasses"
+        >
+          <div 
+            v-for="(chapter, index) in regularChapters" 
+            :key="chapter.key"
+            class="flex flex-col"
+            :class="{ 'relative': isNextChapter(chapter.key) }"
+          >
+            <!-- 次の章の強調表示 -->
+            <div 
+              v-if="isNextChapter(chapter.key)"
+              :class="highlightBorderClasses"
+            />
+            <div 
+              v-if="isNextChapter(chapter.key)"
+              :class="nextBadgeClasses"
+            >
+              NEXT
+            </div>
+                  
+            <!-- 章番号とタイトル -->
+            <div :class="chapterHeaderClasses">
+              <div :class="chapterNumberClasses">
+                {{ String(index + 1).padStart(2, '0') }}
+              </div>
+              <div class="flex-1 border-b border-white pb-2">
+                <span :class="chapterTitleClasses">
+                  {{ chapter.title }}
+                </span>
+              </div>
+            </div>
+                  
+            <!-- セクション一覧（重複除去済み） -->
+            <div :class="sectionListClasses">
+              <div 
+                v-for="(sectionData, sectionIndex) in chapter.uniqueSections" 
+                :key="`${chapter.key}-${sectionIndex}`"
+                :class="sectionItemClasses"
+              >
+                <span :class="sectionTextClasses">
+                  {{ sectionData.title }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      
+        <!-- 付録の目次表示 -->
+        <div
+          v-else
+          :class="gridClasses"
+        >
+          <div 
+            v-for="(chapter, index) in appendixChapters" 
+            :key="chapter.key"
+            class="flex flex-col"
+            :class="{ 'relative': isNextChapter(chapter.key) }"
+          >
+            <!-- 次の章の強調表示 -->
+            <div 
+              v-if="isNextChapter(chapter.key)"
+              :class="highlightBorderClasses"
+            />
+            <div 
+              v-if="isNextChapter(chapter.key)"
+              :class="nextBadgeClasses"
+            >
+              NEXT
+            </div>
+                  
+            <!-- 付録番号とタイトル -->
+            <div :class="chapterHeaderClasses">
+              <div :class="appendixNumberClasses">
+                A{{ index + 1 }}
+              </div>
+              <div class="flex-1 border-b border-white pb-2">
+                <h2 :class="chapterTitleClasses">
+                  {{ chapter.title }}
+                </h2>
+              </div>
+            </div>
+                  
+            <!-- セクション一覧（重複除去済み） -->
+            <div :class="sectionListClasses">
+              <div 
+                v-for="(sectionData, sectionIndex) in chapter.uniqueSections" 
+                :key="`${chapter.key}-${sectionIndex}`"
+                :class="sectionItemClasses"
+              >
+                <span :class="sectionTextClasses">
+                  {{ sectionData.title }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </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({
+  nextChapter: {
+    type: String,
+    required: true,
+    description: '次に始まる章のキー'
+  },
+  currentChapter: {
+    type: String,
+    required: false,
+    description: '現在の章のキー（進捗表示用）'
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
+    description: '目次のサイズ（xs, sm, md, lg, xl）'
+  }
+})
+
+// セクションの重複を除去する関数
+const getUniqueSections = (chapterKey) => {
+  const chapter = chapters[chapterKey]
+  if (!chapter?.sections) return []
+  
+  const sections = chapter.sections
+  const sectionKeys = Object.keys(sections)
+  const uniqueSections = []
+  let previousTitle = null
+  
+  for (const sectionKey of sectionKeys) {
+    const sectionData = sections[sectionKey]
+    const currentTitle = sectionData?.title || `セクション ${sectionKey}`
+    
+    // 前のセクションと同じタイトルでない場合のみ追加
+    if (currentTitle !== previousTitle) {
+      uniqueSections.push({
+        key: sectionKey,
+        title: currentTitle,
+        originalData: sectionData
+      })
+      previousTitle = currentTitle
+    }
+  }
+  
+  return uniqueSections
+}
+
+// 次の章が付録かどうかを判定
+const isAppendixSection = computed(() => {
+  return props.nextChapter.startsWith('ap')
+})
+
+// 通常の章リスト（refと付録を除外）
+const regularChapters = computed(() => {
+  if (!chapters || typeof chapters !== 'object') {
+    return []
+  }
+  
+  return Object.keys(chapters)
+    .filter(chapterKey => chapterKey !== 'ref' && !chapterKey.startsWith('ap'))
+    .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,
+        uniqueSections: getUniqueSections(chapterKey) // 重複除去済みセクション
+      }
+    })
+})
+
+// 付録の章リスト
+const appendixChapters = computed(() => {
+  if (!chapters || typeof chapters !== 'object') {
+    return []
+  }
+  
+  return Object.keys(chapters)
+    .filter(chapterKey => chapterKey.startsWith('ap'))
+    .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,
+        uniqueSections: getUniqueSections(chapterKey) // 重複除去済みセクション
+      }
+    })
+})
+
+// セクションタイトルを取得
+const getSectionTitle = (chapterKey, sectionKey) => {
+  const chapter = chapters[chapterKey]
+  const sectionData = chapter?.sections?.[sectionKey]
+  return sectionData?.title || `セクション ${sectionKey}`
+}
+
+// 次の章かどうかを判定
+const isNextChapter = (chapterKey) => {
+  return props.nextChapter === chapterKey
+}
+
+// サイズ設定に基づく動的スタイル
+const sizeConfigs = {
+  xs: {
+    columns: 4,
+    headerPadding: 'pt-6 pb-3 px-4 ',
+    headerTitle: 'text-2xl',
+    mainPadding: 'px-4 py-4',
+    gridGap: 'gap-x-4 gap-y-2',
+    chapterNumber: 'text-2xl',
+    chapterTitle: 'text-sm font-bold',
+    chapterHeader: 'mb-1',
+    sectionList: 'ml-8 space-y-0.5',
+    sectionText: 'text-xs',
+    appendixNumber: 'text-lg',
+    nextBadge: 'px-1 py-0.5 text-xs'
+  },
+  sm: {
+    columns: 3,
+    headerPadding: 'pt-8 pb-4 px-6',
+    headerTitle: 'text-3xl',
+    mainPadding: 'px-6 py-6',
+    gridGap: 'gap-x-6 gap-y-3',
+    chapterNumber: 'text-3xl',
+    chapterTitle: 'text-base',
+    chapterHeader: 'mb-2',
+    sectionList: 'ml-10 space-y-1',
+    sectionText: 'text-sm',
+    appendixNumber: 'text-2xl',
+    nextBadge: 'px-2 py-1 text-xs'
+  },
+  md: {
+    columns: 2,
+    headerPadding: 'pt-14 pb-8 px-10',
+    headerTitle: 'text-5xl',
+    mainPadding: 'px-12 py-12',
+    gridGap: 'gap-x-16 gap-y-8',
+    chapterNumber: 'text-6xl',
+    chapterTitle: 'text-2xl',
+    chapterHeader: 'mb-4',
+    sectionList: 'ml-20 space-y-2',
+    sectionText: 'text-lg',
+    appendixNumber: 'text-4xl',
+    nextBadge: 'px-3 py-1 text-sm'
+  },
+  lg: {
+    columns: 2,
+    headerPadding: 'pt-16 pb-10 px-12',
+    headerTitle: 'text-6xl',
+    mainPadding: 'px-16 py-16',
+    gridGap: 'gap-x-20 gap-y-10',
+    chapterNumber: 'text-7xl',
+    chapterTitle: 'text-3xl',
+    chapterHeader: 'mb-6',
+    sectionList: 'ml-24 space-y-3',
+    sectionText: 'text-xl',
+    appendixNumber: 'text-5xl',
+    nextBadge: 'px-4 py-2 text-base'
+  },
+  xl: {
+    columns: 1,
+    headerPadding: 'pt-20 pb-12 px-16',
+    headerTitle: 'text-8xl',
+    mainPadding: 'px-20 py-20',
+    gridGap: 'gap-x-24 gap-y-12',
+    chapterNumber: 'text-9xl',
+    chapterTitle: 'text-5xl',
+    chapterHeader: 'mb-8',
+    sectionList: 'ml-32 space-y-4',
+    sectionText: 'text-3xl',
+    appendixNumber: 'text-7xl',
+    nextBadge: 'px-5 py-2 text-lg'
+  }
+}
+
+const currentConfig = computed(() => sizeConfigs[props.size])
+
+// 動的クラス
+const headerClasses = computed(() => `text-left ${currentConfig.value.headerPadding}`)
+const headerTitleClasses = computed(() => `${currentConfig.value.headerTitle} font-bold text-white`)
+const mainContentClasses = computed(() => `flex-1 ${currentConfig.value.mainPadding}`)
+const gridClasses = computed(() => `grid grid-cols-${currentConfig.value.columns} ${currentConfig.value.gridGap}`)
+const chapterHeaderClasses = computed(() => `flex items-center ${currentConfig.value.chapterHeader} relative z-5`)
+const chapterNumberClasses = computed(() => `${currentConfig.value.chapterNumber} font-bold text-white mr-2`)
+const chapterTitleClasses = computed(() => `${currentConfig.value.chapterTitle} font-bold text-white`)
+const sectionListClasses = computed(() => currentConfig.value.sectionList)
+const sectionItemClasses = computed(() => 'flex items-start')
+const sectionTextClasses = computed(() => `text-white ${currentConfig.value.sectionText} leading-relaxed`)
+const appendixNumberClasses = computed(() => `${currentConfig.value.appendixNumber} font-bold text-white mr-6 pb-2`)
+const highlightBorderClasses = computed(() => 'absolute -inset-2 border-4 border-yellow-400 rounded-lg opacity-80')
+const nextBadgeClasses = computed(() => `absolute -top-2 -right-2 bg-yellow-400 text-black ${currentConfig.value.nextBadge} rounded-full font-bold z-10`)
+</script>
+
+<style>
+/* このコンポーネント専用のスタイル */
+.table-of-contents-container {
+  /* ページ全体をカバーする背景 */
+  position: absolute !important;
+  top: 0 !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+  z-index: 0 !important;
+}
+
+/* 背景色を確実に適用 */
+.table-of-contents-container.bg-theme-color {
+  background-color: rgba(2, 132, 199, 1) !important;
+}
+</style>

package/components/TextColorBox.vue

@@ -0,0 +1,97 @@
+<template>
+  <div :class="['shadow-md rounded-lg overflow-hidden', containerClass]">
+    <div class="flex justify-center bg-theme-color/30 text-center font-bold">
+      <p 
+        :class="['p-2 flex justify-center items-center text-xl whitespace-pre-line', titleClass]"
+        v-html="sanitizedTitle"
+      />
+    </div>
+    <div class="py-2 px-4 bg-white text-md leading-relaxed">
+      <!-- slot使用時はslotを優先、そうでなければtextプロパティを使用 -->
+      <slot>
+        <p
+          :class="['leading-relaxed  whitespace-pre-line', textClass]"
+          v-html="sanitizedText"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+  containerClass: {
+    type: [String, Array, Object],
+    default: ''
+  },
+  titleClass: {
+    type: [String, Array, Object],
+    default: ''
+  },
+  textClass: {
+    type: [String, Array, Object],
+    default: ''
+  }
+})
+
+// HTMLタグを含むテキストを安全に処理
+const sanitizedText = computed(() => {
+  // 基本的なHTMLタグのみを許可するシンプルなサニタイズ
+  const allowedTags = ['span', 'strong', 'em', 'u', 'br']
+  const allowedAttributes = ['class', 'style', 'v-mark']
+  
+  // より安全な実装が必要な場合は、DOMPurifyなどのライブラリを使用することを推奨
+  return props.text
+})
+
+// タイトルも同様に処理
+const sanitizedTitle = computed(() => {
+  return props.title
+})
+</script>
+
+<style scoped>
+/* v-markディレクティブ用のスタイル */
+:deep(.v-mark) {
+  position: relative;
+  display: inline;
+}
+
+:deep(.v-mark.underline) {
+  text-decoration: underline;
+}
+
+:deep(.v-mark.underline.orange) {
+  text-decoration: underline;
+  text-decoration-color: orange;
+  text-decoration-thickness: 2px;
+}
+
+/* その他のマーキングスタイル */
+:deep(.v-mark.highlight) {
+  background-color: yellow;
+  padding: 0 2px;
+}
+
+:deep(.v-mark.highlight.blue) {
+  background-color: #bfdbfe;
+}
+
+:deep(.v-mark.highlight.green) {
+  background-color: #bbf7d0;
+}
+
+:deep(.v-mark.highlight.red) {
+  background-color: #fecaca;
+}
+</style>

package/layouts/cover.vue

@@ -0,0 +1,69 @@
+<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="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 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>    
+    
+    <!-- 左上の円形グリッド（より濃く） -->
+    <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>
+    
+    <!-- メインコンテンツ -->
+    <div class="relative z-10 flex flex-col justify-center items-start px-8 py-12">
+      <div class="max-w-4xl w-full space-y-6">
+        <!-- 会議名 -->
+        <div class="text-2xl font-semibold text-slate-700">
+          {{ $slidev.configs.meetingName }}
+        </div>
+        
+        <!-- メインタイトル -->
+        <div class="text-6xl font-bold text-slate-900 leading-tight ">
+          {{ $slidev.configs.coverTitle.first }}
+          <br>
+          {{ $slidev.configs.coverTitle.second }}
+        </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>
+          <!-- 日付 -->
+          <div class="text-xl font-semibold text-slate-700">
+            {{ $slidev.configs.date }}
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 左下のコピーライト風エリア -->
+    <div class="absolute bottom-4 left-8 text-slate-700 text-sm font-medium">
+      {{ new Date().getFullYear() }} {{ $slidev.configs.author.affiliation }}
+    </div>
+  </div>
+</template>

package/layouts/default.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="slidev-layout bg-white px-4 text-text-main font-sans flex flex-col justify-start text-xl">
+    <slot />
+  </div>
+</template>
+
+<style>
+.slidev-layout p {
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+}
+</style>

package/layouts/intro.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout intro">
+    <div class="my-auto text-center text-4xl font-bold">
+      <slot />
+    </div>
+  </div>
+</template>

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "slidev-theme-gtlabo",
+  "version": "1.0.0",
+  "description": "A Slidev theme for laboratory presentations with customizable components",
+  "author": "mksmkss",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "components",
+    "layouts", 
+    "styles",
+    "setup",
+    "uno.config.ts",
+    "index.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mksmkss/slidev-theme-gtlabo.git"
+  },
+  "homepage": "https://github.com/mksmkss/slidev-theme-gtlabo",
+  "bugs": {
+    "url": "https://github.com/mksmkss/slidev-theme-gtlabo/issues"
+  },
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "presentation",
+    "laboratory",
+    "vue"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "slidev build example.md",
+    "dev": "slidev example.md --open",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png"
+  },
+  "dependencies": {
+    "@slidev/types": "^51.8.2",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^51.8.2",
+    "typescript": "^5.0.0",
+    "unocss": "^66.2.3"
+  },
+  "//": "Learn more: https://sli.dev/guide/write-theme.html",
+  "slidev": {
+    "colorSchema": "light",
+    "defaults": {
+      "fonts": {
+        "sans": "Nunito Sans",
+        "mono": "Fira Code"
+      },
+      "aspectRatio": "4/3"
+    }
+  }
+}

package/setup/shiki.ts

@@ -0,0 +1,11 @@
+import type { ShikiSetupReturn } from '@slidev/types'
+import { defineShikiSetup } from '@slidev/types'
+
+export default defineShikiSetup((): ShikiSetupReturn => {
+  return {
+    themes: {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light',
+    },
+  }
+})

package/styles/index.ts

@@ -0,0 +1,3 @@
+// inherit from base layouts, remove it to get full customizations
+import "@slidev/client/styles/layouts-base.css";
+import "./layout.css";