update of theme + components

Author: jerdog

components/InfoLine.vue

@@ -0,0 +1,13 @@
+<template>
+	<footer class="absolute bottom-0 left-0 right-0 flex text-center text-sm text-white">
+		<div class="flex-1 p-1" style="background:#3333B3">
+			{{ $slidev.configs.conference || "Unknown conference" }}
+		</div>
+		<div class="flex-1 p-1" style="background:#191959">
+			{{ $slidev.configs.author || "Unknown author" }}
+		</div>
+		<div class="flex-1 p-1" style="background:#262686">
+			<img src="/images/twitter-iamjerdog.png" width="50%">
+		</div>
+	</footer>
+</template>

components/Item.vue

@@ -0,0 +1,14 @@
+<template>
+	<div class="item">
+		<header v-if="title">{{ title }}</header>
+		<main>
+			<slot></slot>
+		</main>
+	</div>
+</template>
+
+<script setup lang="ts">
+	defineProps<{
+		title?: string;
+	}>();
+</script>

components/slidev.d.ts

@@ -0,0 +1,23 @@
+import type { UnwrapNestedRefs, Ref } from "vue";
+import type { SlidevContext } from "@slidev/client/modules/context";
+
+declare global {
+	// These will be injected in every component
+	const $slidev: UnwrapNestedRefs<SlidevContext>;
+	const $renderContext: Ref<string>;
+}
+
+declare module 'vue' {
+	interface ComponentCustomProperties {
+		$slidev: UnwrapNestedRefs<SlidevContext>;
+		$renderContext: string;
+	}
+}
+
+declare module '@slidev/types' {
+	interface SlidevConfig {
+		infoLine?: boolean;
+		date?: string;
+		author?: string;
+	}
+}

components/talkTopBar.vue

@@ -0,0 +1,31 @@
+<template>
+	<header class="absolute top-0 left-0 right-0 flex shadow-md shadow-black text-sm" style="background:black">
+		<div class="flex-1 p-1" style="background:#262686">
+			{{ $slidev.configs.title || "Unknown title" }}
+		</div>
+	</header>
+</template>
+
+<script setup lang="ts">
+	import { computed } from "vue";
+
+	import type { SlideInfoBase } from "@slidev/types";
+
+	const sections = computed(() => {
+		const result: [string, number[]][] = [];
+		let pages: number[] = [];
+		let title = "";
+		for(let i = 1; i < $slidev.nav.slides.length; i++) {
+			const slide = $slidev.nav.slides[i];
+			const section = (slide.meta?.slide as SlideInfoBase)?.frontmatter?.section;
+			if(section && section != title) {
+				if(pages.length > 0) result.push([title, pages]);
+				pages = [];
+				title = section;
+			}
+			pages.push(i);
+		}
+		result.push([title, pages]);
+		return result;
+	});
+</script>

global-top.vue

@@ -1,6 +1,4 @@
-<template>
-    <footer class="absolute bottom-0 left-0 right-0 p-2">
-        <img src="/images/twitter-iamjerdog.png" width="15%" style="position:absolute;bottom:10px;left:2%;">
-        <img src="/images/twitter-iamjerdog.png" width="15%" style="position:absolute;bottom:10px;right:2%;">
-    </footer>
-  </template>
+<template>
+	<talkTopBar />
+	<InfoLine v-if="$slidev.configs.infoLine ?? true" />
+</template>

global-top.vue.old

@@ -0,0 +1,6 @@
+<template>
+    <footer class="absolute bottom-0 left-0 right-0 p-2">
+        <img src="/images/twitter-iamjerdog.png" width="15%" style="position:absolute;bottom:10px;left:2%;">
+        <img src="/images/twitter-iamjerdog.png" width="15%" style="position:absolute;bottom:10px;right:2%;">
+    </footer>
+  </template>