いろいろ追加

frontend-conf-hokkaido/components/QRCode.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import QRCode from "qrcode";
+
+export type Props = {
+  text: string;
+  removeParams?: boolean;
+  caption?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  text: "",
+  removeParams: true,
+  caption: "",
+});
+
+const canvas = ref<HTMLCanvasElement>();
+
+const removeParams = (text: string) => {
+  if (!URL.canParse(text)) {
+    return text;
+  }
+  const noParamsURL = text.split("?")[0];
+
+  return props.removeParams ? noParamsURL : props.text;
+};
+
+const link = computed(() =>
+  URL.canParse(props.text) ? removeParams(props.text) : undefined
+);
+
+onMounted(() => {
+  if (!(canvas.value instanceof HTMLCanvasElement)) return;
+  QRCode.toCanvas(canvas.value, removeParams(props.text) ?? "");
+});
+</script>
+
+<template>
+  <div class="container">
+    <a class="outer" :href="link" target="_blank" rel="noreferrer">
+      <canvas class="canvas" ref="canvas"></canvas>
+    </a>
+    <span class="caption">{{ props.caption }}</span>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  padding: 16px 0;
+}
+.outer {
+  display: block;
+  width: fit-content;
+  border: solid 3px;
+  border-radius: 8px;
+  overflow: hidden;
+  color: #333;
+
+  &[href]:hover {
+    opacity: 0.8;
+  }
+}
+
+.caption {
+  display: block;
+  text-align: center;
+  font-size: 1rem;
+}
+
+.canvas {
+  display: block;
+}
+</style>

frontend-conf-hokkaido/slides.md

@@ -12,31 +12,28 @@ fonts:
 ---
 src: "../reuse/me.md"
 ---
----
-layout: image
-image: /images/entrance.jpg
----
-
-## フロントエンドカンファレンス北海道
-
-8/24に札幌で開催されたWebフロントエンドにフィーチャーしたカンファレンス
 
 ---
 layout: image-left
-image: 
+image: /images/ramen.jpg
 ---
 
 ### 前日入りしました
 
+- 朝起きれないので昼の便で行った
+- 軽く札幌観光
+- ラーメン食べて終了
+
+---
+layout: image-right
+image: /images/curry.jpg
 ---
 
 ## 当日のトークについて
 
-すべては紹介できないので、ざっくりと。
-
-全ての資料はここにまとめられている。
+すべては紹介できないのでざっくりと
 
-https://zenn.dev/yumemi_inc/articles/2024-08-25-frontend-conf-hokkaido-2024
+<QRCode text="https://zenn.dev/yumemi_inc/articles/2024-08-25-frontend-conf-hokkaido-2024" caption="資料まとめ" />
 
 ---
 layout: iframe-left
@@ -113,13 +110,15 @@ layout: center
 
 ---
 
-### カンファレンス終了後
-
----
-
 ## 感想
 
 - カンファレンスの楽しさを再認識できた
 - 「フロントエンド」のカンファレンスは意外と少ないので貴重な話を聴けた
 - 旅行がてらのカンファレンスはいいぞ
-- みんなももっと社外の勉強会・カンファレンスに参加しよう！
+
+---
+layout: end
+image: /images/sushi.jpg
+---
+
+# おしまい

frontend-conf-hokkaido/styles/mod.css

@@ -1,3 +1,27 @@
-#app h1 {
+#app .slidev-page-1 h1 {
   font-size: 2.25rem;
+  color: var(--c-main);
+  background-color: rgb(from var(--c-base) 255 255 255 / 50%);
+  text-align: center;
+  font-weight: 900;
+}
+
+.slidev-page-1 {
+  background-image: url("/images/entrance.jpg");
+  background-size: cover;
+}
+
+#app .slidev-page-1 .slidev-layout,
+#app .slidev-page-1 .slidev-layout {
+  background: none;
+}
+
+#app .slidev-layout.end {
+  background: url("/images/sushi.jpg") !important;
+  background-size: cover !important;
+
+  h1 {
+    color: var(--c-main);
+    background-color: rgb(from var(--c-base) 255 255 255 / 50%);
+  }
 }