Feature/add layout

273Do-theme/components/Footer.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useNav } from "@slidev/client";
+
+const { currentSlideNo, total } = useNav();
+</script>
+
+<template>
+  <footer class="flex items-center justify-between text-xs" text="[color:var(--muted-foreground)]">
+    <span>スライド名</span>
+    <span>{{ currentSlideNo }}/{{ total }}</span>
+  </footer>
+</template>

273Do-theme/components/Header.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer class="flex items-center justify-between text-xs">
+    <span>YYYY-MM-DD</span>
+  </footer>
+</template>

273Do-theme/layouts/cover.vue

@@ -1,21 +1,30 @@
 <script setup lang="ts">
-import { handleBackground } from "../layoutHelper";
-import { computed } from "vue";
+import Header from "../components/Header.vue";
 
-const props = defineProps({
-  background: {
-    type: String,
-    default: undefined,
-  },
-});
-
-const style = computed(() => handleBackground(props.background));
+const titleSplit: string[] = ["ここに", "スライドタイトルを", "記述する"];
+const eventTitle = "Event Title Here";
+const eventSubTitle = "Sub Title Here";
 </script>
 
 <template>
-  <div class="slidev-layout cover" :style="style">
-    <div class="my-auto w-full">
-      <slot />
+  <div class="slidev-layout flex flex-col h-full p-12">
+    <Header />
+    <div class="flex-1 flex flex-col justify-center">
+      <span
+        v-for="(word, index) in titleSplit"
+        :key="index"
+        class="inline-block w-fit text-6xl leading-tight"
+        bg="[var(--primary)]"
+        text="[color:var(--primary-foreground)]"
+        >{{ word }}</span
+      >
+      <div class="flex w-full items-center justify-between">
+        <div class="flex flex-col mt-4">
+          <span>{{ eventTitle }}</span>
+          <span>{{ eventSubTitle }}</span>
+        </div>
+        <img src="/imgs/273do-logo.svg" class="w-20 mt-4" />
+      </div>
     </div>
   </div>
 </template>

273Do-theme/layouts/default.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="slidev-layout flex flex-col h-full p-12">
+    <div class="flex-1">
+      <slot />
+    </div>
+    <Footer />
+  </div>
+</template>

273Do-theme/layouts/intro.vue

@@ -17,5 +17,6 @@ const style = computed(() => handleBackground(props.background));
     <div class="my-auto">
       <slot />
     </div>
+    <Footer />
   </div>
 </template>

273Do-theme/styles/layout.css

@@ -16,6 +16,7 @@
   h1,
   h2,
   h3,
+  .cover-title,
   .slidev-code-block-title {
     width: fit-content;
     background-color: var(--primary);

pages/01-cover.md

@@ -0,0 +1 @@
+<!--カバースライドに追加する必要があれば設定する-->

pages/02-slide.md

@@ -0,0 +1 @@
+# スライド 2