Merge pull request #1 from gdorsi/main

feat: cinematic cover

components/Confetti.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import ConfettiGenerator from "confetti-js";
+
+// declare a ref to hold the element reference
+// the name must match template ref value
+const canvas = ref(null);
+
+onMounted(() => {
+  const confettiSettings = { target: canvas.value };
+  const confetti = new ConfettiGenerator(confettiSettings);
+  confetti.render();
+});
+</script>
+
+<style>
+.confetti {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>
+
+<template>
+  <canvas class="confetti" ref="canvas"></canvas>
+</template>

components/Logo.vue

@@ -3,6 +3,10 @@
   --logo-width: 150px;
 }
 
+.slidev-vclick-hidden .logo {
+  display: none;
+}
+
 .logo {
   margin: auto;
   border-radius: 17px;

slides.md

@@ -27,9 +27,14 @@ fonts:
 
 La community di appassionati Javascript a Roma
 
+<v-click>
+
 <div class="abs-br m-6 flex gap-2">
   <Logo />
 </div>
+<Confetti />
+
+</v-click>
 
 ---
 

theme/layouts/cover.vue

@@ -1,33 +1,11 @@
-<script setup>
-import { ref, onMounted } from "vue";
-import ConfettiGenerator from "confetti-js";
 
-// declare a ref to hold the element reference
-// the name must match template ref value
-const canvas = ref(null);
 
-onMounted(() => {
-  const confettiSettings = { target: canvas.value };
-  const confetti = new ConfettiGenerator(confettiSettings);
-  confetti.render();
-});
-</script>
 
-<style>
-.confetti {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-</style>
 
 <template>
   <div class="slidev-layout cover text-center">
     <div class="my-auto w-full">
       <slot />
     </div>
-    <canvas class="confetti" ref="canvas"></canvas>
   </div>
 </template>