✨ Add a mobile black-and-white slide deck

astro.config.mjs

@@ -106,6 +106,34 @@ function thoughtsCanvasLayoutDevPlugin() {
   }
 }
 
+function slidesDevPlugin() {
+  const slidesContentDir = path.resolve(__dirname, 'src/content/slides')
+  return {
+    name: 'slides-dev-plugin',
+    configureServer(server) {
+      server.httpServer?.once('listening', () => {
+        setTimeout(() => {
+          const address = server.httpServer?.address()
+          const port = typeof address === 'object' && address?.port ? address.port : 4321
+
+          console.log('\x1B[35m%s\x1B[0m', ' 🎴 [slides] Presentations ready:')
+
+          console.log('\x1B[36m%s\x1B[0m', `   ➜  Slides Hub:  http://localhost:${port}/slides`)
+
+          console.log('\x1B[32m%s\x1B[0m', `   ➜  Mobile Vibe: http://localhost:${port}/slides/mobile-vibe-coding\n`)
+        }, 150)
+      })
+
+      server.watcher.add(slidesContentDir)
+      server.watcher.on('change', (file) => {
+        if (file.startsWith(slidesContentDir)) {
+          server.ws.send({ type: 'full-reload' })
+        }
+      })
+    },
+  }
+}
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://yuler.dev',
@@ -137,7 +165,7 @@ export default defineConfig({
   ],
 
   vite: {
-    plugins: [tailwindcss(), thoughtsCanvasLayoutDevPlugin()],
+    plugins: [tailwindcss(), thoughtsCanvasLayoutDevPlugin(), slidesDevPlugin()],
     server: {
       watch: {
         ignored: [thoughtsCanvasLayoutPath],

eslint.config.mjs

@@ -2,6 +2,7 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu({
   astro: true,
+  ignores: ['src/content/slides/**'],
   formatters: {
     /** Markdown: dprint via eslint-plugin-format (`format/dprint`, language `markdown`) */
     markdown: 'dprint',

package.json

@@ -37,6 +37,7 @@
     "date-fns": "^4.4.0",
     "html-to-image": "^1.11.13",
     "leaflet": "^1.9.4",
+    "marked": "^18.1.1",
     "mermaid": "^11.16.1",
     "qrcode": "^1.5.4",
     "sharp": "^0.34.5",

src/components/Footer.astro

@@ -7,7 +7,7 @@ const showSiteLinks = Astro.url.pathname !== '/'
   {
     showSiteLinks && (
       <p class="mb-2 font-mono text-xs">
-        This website follows the <a href="/design" class="underline! decoration-gray-400 underline-offset-4 hover:text-gray-900 hover:decoration-gray-900 transition-colors">design guidelines</a> and provides <a href="/agents" class="underline! decoration-gray-400 underline-offset-4 hover:text-gray-900 hover:decoration-gray-900 transition-colors">agent instructions</a>.
+        This website follows the <a href="/design" class="underline! decoration-gray-400 underline-offset-4 hover:text-gray-900 hover:decoration-gray-900 transition-colors">design guidelines</a>, provides <a href="/agents" class="underline! decoration-gray-400 underline-offset-4 hover:text-gray-900 hover:decoration-gray-900 transition-colors">agent instructions</a>, and features <a href="/slides" class="underline! decoration-gray-400 underline-offset-4 hover:text-gray-900 hover:decoration-gray-900 transition-colors">slides</a>.
       </p>
     )
   }

src/components/cards/AgentStuff.astro

@@ -27,5 +27,12 @@ import Sparkles from '../icons/Sparkles.astro'
     >
       agent instructions
     </a>
+    , and presents
+    <a
+      href="/slides"
+      class="underline! decoration-gray-400 underline-offset-4 transition-colors hover:text-gray-900 hover:decoration-gray-900"
+    >
+      slides
+    </a>
   </p>
 </div>

src/components/cards/SlidesCard.astro

@@ -0,0 +1,58 @@
+---
+import { getAllSlideDecks } from '../../lib/slides'
+import CornerMarkers from '../CornerMarkers.astro'
+import ArrowRight from '../icons/ArrowRight.astro'
+import Play from '../icons/Play.astro'
+
+const decks = await getAllSlideDecks()
+const latest = decks[0]
+---
+
+{latest && (
+  <div class="relative bg-white border border-gray-200 p-5 max-h-40 transition-all duration-300 hover:border-gray-400">
+    <CornerMarkers />
+
+    <div class="mb-3 flex items-center justify-between border-b border-gray-100 pb-3">
+      <h2 class="text-base sm:text-lg font-semibold text-gray-900 font-mono">
+        Slides
+        <span class="px-2 py-0.5 text-xs sm:text-sm bg-gray-100 text-gray-600 font-mono">
+          {decks.length}
+        </span>
+      </h2>
+      <a
+        href="/slides"
+        class="inline-flex items-center gap-1 text-xs text-gray-400 font-mono transition-colors hover:text-gray-600 underline underline-offset-2 decoration-gray-200 hover:decoration-gray-400"
+      >
+        View all
+        <ArrowRight class="h-3 w-3" />
+      </a>
+    </div>
+
+    <div class="flex items-center justify-between gap-3">
+      <div class="min-w-0 flex-1">
+        <h3 class="font-bold text-gray-900 font-mono text-sm leading-snug hover:text-blue-600 transition-colors truncate">
+          <a href={`/slides/${latest.slug}`}>
+            {latest.title}
+          </a>
+        </h3>
+        <div class="mt-2 flex items-center gap-2">
+          <span class="border border-gray-200 px-1.5 py-0.5 text-[10px] font-mono leading-none text-gray-500">
+            {latest.slideCount} Slides
+          </span>
+          <span class="border border-gray-200 px-1.5 py-0.5 text-[10px] font-mono leading-none text-gray-500">
+            Vibe Coding
+          </span>
+        </div>
+      </div>
+
+      <a
+        href={`/slides/${latest.slug}`}
+        class="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-900 border border-gray-200 hover:border-gray-300 font-mono text-xs transition-colors"
+        title="播放演示"
+      >
+        <Play size={12} class="fill-current" />
+        <span>播放</span>
+      </a>
+    </div>
+  </div>
+)}