From 88f8d6b681e739944e8a06658150222c55d1b8c8 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 22 Jul 2026 02:53:45 +0200
Subject: [PATCH] feat: slide-deck engine and shared slide layouts

Keyboard-navigable full-screen deck (arrow keys, progress bar, hash
deep-linking that lands directly on the target slide) plus the reusable
Shell / Title / Bullets / Keys / Resources layout components.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/slides/BulletsSlide.vue   |  33 +++++
 src/components/slides/KeysSlide.vue      |  40 ++++++
 src/components/slides/ResourcesSlide.vue |  43 +++++++
 src/components/slides/SlideShell.vue     |  31 +++++
 src/components/slides/TitleSlide.vue     |  32 +++++
 src/features/slides/types.ts             |  16 +++
 src/views/PresentationView.vue           | 150 +++++++++++++++++++++++
 7 files changed, 345 insertions(+)
 create mode 100644 src/components/slides/BulletsSlide.vue
 create mode 100644 src/components/slides/KeysSlide.vue
 create mode 100644 src/components/slides/ResourcesSlide.vue
 create mode 100644 src/components/slides/SlideShell.vue
 create mode 100644 src/components/slides/TitleSlide.vue
 create mode 100644 src/features/slides/types.ts
 create mode 100644 src/views/PresentationView.vue

diff --git a/src/components/slides/BulletsSlide.vue b/src/components/slides/BulletsSlide.vue
new file mode 100644
index 0000000..2d4a4cb
--- /dev/null
+++ b/src/components/slides/BulletsSlide.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import SlideShell from './SlideShell.vue'
+
+export interface Bullet {
+  /** Optional bold lead-in, rendered in white before the rest of the text. */
+  lead?: string
+  text: string
+}
+
+defineProps<{
+  kicker?: string
+  title: string
+  bullets: Bullet[]
+  footnote?: string
+}>()
+</script>
+
+<template>
+  <SlideShell :kicker="kicker" :title="title">
+    <ul class="space-y-5">
+      <li v-for="(b, i) in bullets" :key="i" class="flex gap-4">
+        <span class="mt-2 h-2 w-2 flex-none rounded-full bg-violet-500" />
+        <span>
+          <span v-if="b.lead" class="mr-1.5 font-semibold text-white">{{ b.lead }}</span>
+          <span>{{ b.text }}</span>
+        </span>
+      </li>
+    </ul>
+    <p v-if="footnote" class="mt-10 border-l-2 border-violet-500/50 pl-4 text-base italic text-zinc-400">
+      {{ footnote }}
+    </p>
+  </SlideShell>
+</template>
diff --git a/src/components/slides/KeysSlide.vue b/src/components/slides/KeysSlide.vue
new file mode 100644
index 0000000..e08c205
--- /dev/null
+++ b/src/components/slides/KeysSlide.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Globe, KeyRound } from '@lucide/vue'
+import SlideShell from './SlideShell.vue'
+</script>
+
+<template>
+  <SlideShell kicker="Your identity" title="No account — a key pair">
+    <div class="grid gap-6 sm:grid-cols-2">
+      <!-- Public key -->
+      <div class="rounded-xl border border-emerald-600/40 bg-emerald-950/20 p-6">
+        <div class="mb-3 flex items-center gap-3">
+          <Globe class="h-7 w-7 text-emerald-400" />
+          <span class="text-xl font-bold text-white">npub…</span>
+        </div>
+        <p class="text-sm font-semibold uppercase tracking-wider text-emerald-400">Public key</p>
+        <p class="mt-2 text-zinc-300">Your username. Share it freely — it’s how people find and follow you.</p>
+        <p class="mt-4 rounded-md bg-black/40 px-3 py-2 font-mono text-xs text-emerald-300/80">
+          npub1q9x…share&nbsp;me
+        </p>
+      </div>
+
+      <!-- Private key -->
+      <div class="rounded-xl border border-red-600/50 bg-red-950/20 p-6">
+        <div class="mb-3 flex items-center gap-3">
+          <KeyRound class="h-7 w-7 text-red-400" />
+          <span class="text-xl font-bold text-white">nsec…</span>
+        </div>
+        <p class="text-sm font-semibold uppercase tracking-wider text-red-400">Private key</p>
+        <p class="mt-2 text-zinc-300">Your password. Whoever has it <em>is</em> you. Can’t be reset. Never share it.</p>
+        <p class="mt-4 rounded-md bg-black/40 px-3 py-2 font-mono text-xs text-red-300/70">
+          nsec1••••••••••••••••
+        </p>
+      </div>
+    </div>
+    <p class="mt-8 text-zinc-300">
+      No email, no phone, no signup. Your keys work across <span class="font-semibold text-white">every</span> Nostr
+      app — your follows and posts come with you.
+    </p>
+  </SlideShell>
+</template>
diff --git a/src/components/slides/ResourcesSlide.vue b/src/components/slides/ResourcesSlide.vue
new file mode 100644
index 0000000..8590a4d
--- /dev/null
+++ b/src/components/slides/ResourcesSlide.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ExternalLink } from '@lucide/vue'
+import SlideShell from './SlideShell.vue'
+
+defineProps<{
+  kicker?: string
+  title: string
+  takeaways: string[]
+  links: { label: string; url: string }[]
+}>()
+</script>
+
+<template>
+  <SlideShell :kicker="kicker" :title="title">
+    <div class="grid gap-8 sm:grid-cols-2">
+      <div>
+        <p class="mb-3 text-sm font-semibold uppercase tracking-wider text-violet-400">Remember</p>
+        <ul class="space-y-3">
+          <li v-for="(t, i) in takeaways" :key="i" class="flex gap-3">
+            <span class="mt-2 h-2 w-2 flex-none rounded-full bg-violet-500" />
+            <span>{{ t }}</span>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <p class="mb-3 text-sm font-semibold uppercase tracking-wider text-violet-400">Go deeper</p>
+        <ul class="space-y-3">
+          <li v-for="link in links" :key="link.url">
+            <a
+              :href="link.url"
+              target="_blank"
+              rel="noopener"
+              class="inline-flex items-center gap-2 text-zinc-200 underline decoration-violet-500/50 underline-offset-4 hover:text-violet-300"
+            >
+              <ExternalLink class="h-4 w-4 flex-none" />
+              {{ link.label }}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </SlideShell>
+</template>
diff --git a/src/components/slides/SlideShell.vue b/src/components/slides/SlideShell.vue
new file mode 100644
index 0000000..84faf57
--- /dev/null
+++ b/src/components/slides/SlideShell.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * Common frame for every content slide: a small violet "kicker" (eyebrow),
+ * a big title, and a default slot for the body. Vertically centered, capped
+ * width so lines stay readable on a projector.
+ */
+defineProps<{
+  kicker?: string
+  title?: string
+}>()
+</script>
+
+<template>
+  <div class="mx-auto flex h-full w-full max-w-5xl flex-col justify-center px-10 py-16">
+    <p
+      v-if="kicker"
+      class="mb-3 text-sm font-semibold uppercase tracking-[0.2em] text-violet-400"
+    >
+      {{ kicker }}
+    </p>
+    <h2
+      v-if="title"
+      class="mb-8 text-4xl font-bold leading-tight text-white sm:text-5xl"
+    >
+      {{ title }}
+    </h2>
+    <div class="text-lg leading-relaxed text-zinc-300 sm:text-xl">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/components/slides/TitleSlide.vue b/src/components/slides/TitleSlide.vue
new file mode 100644
index 0000000..20599df
--- /dev/null
+++ b/src/components/slides/TitleSlide.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+/** Opening / hero slide. */
+defineProps<{
+  title: string
+  subtitle?: string
+  tagline?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="relative mx-auto flex h-full w-full max-w-5xl flex-col items-center justify-center px-10 text-center"
+  >
+    <div
+      class="mb-8 flex h-20 w-20 items-center justify-center rounded-2xl bg-violet-600/20 ring-1 ring-violet-500/40"
+    >
+      <span class="text-4xl">🟣</span>
+    </div>
+    <h1 class="text-5xl font-extrabold tracking-tight text-white sm:text-7xl">
+      {{ title }}
+    </h1>
+    <p v-if="subtitle" class="mt-6 max-w-2xl text-xl text-zinc-300 sm:text-2xl">
+      {{ subtitle }}
+    </p>
+    <p
+      v-if="tagline"
+      class="mt-10 text-sm font-medium uppercase tracking-[0.25em] text-violet-400"
+    >
+      {{ tagline }}
+    </p>
+  </div>
+</template>
diff --git a/src/features/slides/types.ts b/src/features/slides/types.ts
new file mode 100644
index 0000000..d3ce619
--- /dev/null
+++ b/src/features/slides/types.ts
@@ -0,0 +1,16 @@
+import type { Component } from 'vue'
+
+/**
+ * A slide is a layout component plus the props that feed it.
+ * The deck renders `<component :is="component" v-bind="props" />`, so any
+ * component under `src/components/slides/` can be dropped in here — generic
+ * layouts for text-heavy slides, bespoke components for the diagram slides.
+ */
+export interface Slide {
+  /** Stable id used for the URL hash (e.g. #keys) and nav. */
+  id: string
+  /** Short label for the overview / progress tooltip. */
+  label: string
+  component: Component
+  props?: Record<string, unknown>
+}
diff --git a/src/views/PresentationView.vue b/src/views/PresentationView.vue
new file mode 100644
index 0000000..96e29e8
--- /dev/null
+++ b/src/views/PresentationView.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { ChevronLeft, ChevronRight } from '@lucide/vue'
+import { slides } from '@/features/slides/slides'
+
+const count = slides.length
+
+/** URL hash -> slide index, so any slide is deep-linkable (e.g. #outbox). */
+function indexFromHash(): number {
+  const id = window.location.hash.replace(/^#\/?/, '')
+  if (!id) return 0
+  const byId = slides.findIndex((s) => s.id === id)
+  if (byId !== -1) return byId
+  const asNum = Number(id)
+  return Number.isFinite(asNum) ? Math.max(0, Math.min(count - 1, asNum - 1)) : 0
+}
+
+// Initialize from the hash before first paint so deep-links don't fade in from slide 1.
+const current = ref(indexFromHash())
+
+const activeSlide = computed(() => slides[current.value])
+const progress = computed(() => ((current.value + 1) / count) * 100)
+
+/** Track direction so the transition slides the right way. */
+const dir = ref<'fwd' | 'back'>('fwd')
+
+function go(index: number) {
+  const clamped = Math.max(0, Math.min(count - 1, index))
+  dir.value = clamped >= current.value ? 'fwd' : 'back'
+  current.value = clamped
+}
+function next() {
+  go(current.value + 1)
+}
+function prev() {
+  go(current.value - 1)
+}
+
+function onKey(e: KeyboardEvent) {
+  switch (e.key) {
+    case 'ArrowRight':
+    case 'PageDown':
+    case ' ':
+      e.preventDefault()
+      next()
+      break
+    case 'ArrowLeft':
+    case 'PageUp':
+      e.preventDefault()
+      prev()
+      break
+    case 'Home':
+      e.preventDefault()
+      go(0)
+      break
+    case 'End':
+      e.preventDefault()
+      go(count - 1)
+      break
+  }
+}
+
+function onHashChange() {
+  const idx = indexFromHash()
+  if (idx !== current.value) go(idx)
+}
+
+watch(current, (i) => {
+  const id = slides[i].id
+  if (window.location.hash.replace(/^#\/?/, '') !== id) {
+    window.history.replaceState(null, '', `#${id}`)
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('keydown', onKey)
+  window.addEventListener('hashchange', onHashChange)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKey)
+  window.removeEventListener('hashchange', onHashChange)
+})
+</script>
+
+<template>
+  <div class="dark relative h-screen w-screen overflow-hidden bg-zinc-950 text-white">
+    <!-- Slide viewport -->
+    <Transition :name="dir === 'fwd' ? 'slide-fwd' : 'slide-back'" mode="out-in">
+      <div :key="activeSlide.id" class="absolute inset-0 flex items-stretch">
+        <component :is="activeSlide.component" v-bind="activeSlide.props" />
+      </div>
+    </Transition>
+
+    <!-- Prev / next click zones (mobile + mouse) -->
+    <button
+      class="group absolute left-0 top-0 flex h-full w-16 items-center justify-center text-zinc-600 transition hover:bg-white/5 hover:text-white disabled:pointer-events-none disabled:opacity-0"
+      :disabled="current === 0"
+      aria-label="Previous slide"
+      @click="prev"
+    >
+      <ChevronLeft class="h-8 w-8" />
+    </button>
+    <button
+      class="group absolute right-0 top-0 flex h-full w-16 items-center justify-center text-zinc-600 transition hover:bg-white/5 hover:text-white disabled:pointer-events-none disabled:opacity-0"
+      :disabled="current === count - 1"
+      aria-label="Next slide"
+      @click="next"
+    >
+      <ChevronRight class="h-8 w-8" />
+    </button>
+
+    <!-- Bottom bar: counter + progress -->
+    <div class="absolute inset-x-0 bottom-0">
+      <div class="flex items-center justify-between px-6 pb-3 text-xs text-zinc-500">
+        <span class="font-medium tracking-wide">Intro to Nostr</span>
+        <span class="tabular-nums">{{ current + 1 }} / {{ count }}</span>
+      </div>
+      <div class="h-1 w-full bg-zinc-800">
+        <div class="h-full bg-violet-500 transition-all duration-300" :style="{ width: progress + '%' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slide-fwd-enter-active,
+.slide-fwd-leave-active,
+.slide-back-enter-active,
+.slide-back-leave-active {
+  transition:
+    opacity 0.25s ease,
+    transform 0.25s ease;
+}
+.slide-fwd-enter-from {
+  opacity: 0;
+  transform: translateX(3%);
+}
+.slide-fwd-leave-to {
+  opacity: 0;
+  transform: translateX(-3%);
+}
+.slide-back-enter-from {
+  opacity: 0;
+  transform: translateX(-3%);
+}
+.slide-back-leave-to {
+  opacity: 0;
+  transform: translateX(3%);
+}
+</style>