Feature/self intro

273Do-theme/components/Footer.vue

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

273Do-theme/components/Header.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+type Props = {
+  date: number;
+};
+
+const { date } = defineProps<Props>();
+</script>
+
 <template>
   <footer class="flex items-center justify-between text-xs">
-    <span>YYYY-MM-DD</span>
+    <span>{{ date }}</span>
   </footer>
 </template>

273Do-theme/layouts/cover.vue

@@ -1,30 +1,34 @@
 <script setup lang="ts">
-import Header from "../components/Header.vue";
+type Props = {
+  date: number;
+  slideTitle: string;
+  logo: string;
+};
 
-const titleSplit: string[] = ["ここに", "スライドタイトルを", "記述する"];
-const eventTitle = "Event Title Here";
-const eventSubTitle = "Sub Title Here";
+const { slideTitle, logo } = defineProps<Props>();
+
+const slideTitleSplit: string[] = slideTitle.split("/");
 </script>
 
 <template>
   <div class="slidev-layout flex flex-col h-full p-12">
-    <Header />
+    <Header :date="date" />
     <div class="flex-1 flex flex-col justify-center">
       <span
-        v-for="(word, index) in titleSplit"
+        v-for="(word, index) in slideTitleSplit"
         :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 class="flex flex-col mt-10">
+          <slot name="eventTitle" />
         </div>
-        <img src="/imgs/273do-logo.svg" class="w-20 mt-4" />
+        <img :src="logo" class="w-20 mt-12" />
       </div>
     </div>
+    <slot />
   </div>
 </template>

273Do-theme/layouts/self-intro.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+type Props = {
+  image: string;
+};
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div class="slidev-layout flex flex-col h-full p-12">
+    <slot name="title" />
+    <div class="flex-1 flex gap-8 items-start mt-14">
+      <img :src="image" class="w-65 aspect-square shrink-0" />
+      <div class="flex flex-col">
+        <slot />
+      </div>
+    </div>
+    <Footer />
+  </div>
+</template>

273Do-theme/styles/layout.css

@@ -15,14 +15,19 @@
 
   h1,
   h2,
-  h3,
   .cover-title,
   .slidev-code-block-title {
     width: fit-content;
     background-color: var(--primary);
     color: var(--primary-foreground);
   }
 
+  :not(pre) > code {
+    background-color: var(--secondary);
+    padding: 0.15em 0.4em;
+    border-radius: 0.25em;
+  }
+
   .shiki {
     background-color: var(--foreground) !important;
   }

pages/01-cover.md

@@ -1 +1,11 @@
-<!--カバースライドに追加する必要があれば設定する-->
+---
+date: 260101
+slideTitle: ここに/スライドタイトルを/記述する
+logo: /imgs/273do-logo.svg
+---
+
+::eventTitle::
+
+#### Event Title Here
+
+#### Event Sub Title Here

pages/02-self-intro.md

@@ -0,0 +1,19 @@
+---
+layout: self-intro
+image: /imgs/me.png
+---
+
+::title::
+
+# こんにちは
+
+::default::
+
+### 273* (ツナサンド)
+
+Develop, Graphic Design, Sensor Analysis, Experimental Creative, Piano
+
+大阪を拠点に活動している Web エンジニアです。  
+趣味でものづくりや表現活動を楽しんでおり、ツール開発、グラフィックデザイン、映像、音楽、インターネット美学などの実験的な表現に興味があります。
+
+`curl https://273do.works`

pages/03-slide.md

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

slides.md

@@ -1,13 +1,16 @@
 ---
 theme: ./273Do-theme
-title: Slide Title
 drawings:
   persist: false
 transition: view-transition
+slideTitle: ここに/スライドタイトルを/記述する
 src: ./pages/01-cover.md
 ---
 
+---
+src: ./pages/02-self-intro.md
 ---
 
-src: ./pages/02-slide.md
+---
+src: ./pages/03-slide.md
 ---

vite.config.ts

@@ -5,4 +5,5 @@ export default defineConfig({
     "*": "vp check --fix",
   },
   lint: { options: { typeAware: true, typeCheck: true } },
+  fmt: { ignorePatterns: ["slides.md"] },
 });