chore: add Svelte island to flexbox slide

2025-02-03 17:05:45 -03:00 · 2025-02-03 17:05:45 -03:00 · 967ad59394
commit 967ad59394
parent 32af9bde3d
11 changed files with 403 additions and 117 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,5 +1,9 @@
 // @ts-check
 import { defineConfig } from 'astro/config';

+import svelte from '@astrojs/svelte';
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [svelte()]
+});
--- a/package.json
+++ b/package.json
@ -9,8 +9,11 @@
    "astro": "astro"
  },
  "dependencies": {
+    "@astrojs/svelte": "^7.0.4",
    "astro": "^5.2.3",
-    "reveal.js": "^5.1.0"
+    "reveal.js": "^5.1.0",
+    "svelte": "^5.19.7",
+    "typescript": "^5.7.3"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.9.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -8,12 +8,21 @@ importers:

  .:
    dependencies:
+      '@astrojs/svelte':
+        specifier: ^7.0.4
+        version: 7.0.4(astro@5.2.3(rollup@4.28.1)(sass@1.83.0)(typescript@5.7.3))(sass@1.83.0)(svelte@5.19.7)(typescript@5.7.3)
      astro:
        specifier: ^5.2.3
-        version: 5.2.3(rollup@4.28.1)(sass@1.83.0)(typescript@5.7.2)
+        version: 5.2.3(rollup@4.28.1)(sass@1.83.0)(typescript@5.7.3)
      reveal.js:
        specifier: ^5.1.0
        version: 5.1.0
+      svelte:
+        specifier: ^5.19.7
+        version: 5.19.7
+      typescript:
+        specifier: ^5.7.3
+        version: 5.7.3
    devDependencies:
      '@biomejs/biome':
        specifier: ^1.9.4
@ -27,6 +36,10 @@ importers:

 packages:

+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
  '@ark/schema@0.39.0':
    resolution: {integrity: sha512-LQbQUb3Sj461LgklXObAyUJNtsUUCBxZlO2HqRLYvRSqpStm0xTMrXn51DwBNNxeSULvKVpXFwoxiSec9kwKww==}

@ -46,6 +59,14 @@ packages:
    resolution: {integrity: sha512-GilTHKGCW6HMq7y3BUv9Ac7GMe/MO9gi9GW62GzKtth0SwukCu/qp2wLiGpEujhY+VVhaG9v7kv/5vFzvf4NYw==}
    engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}

+  '@astrojs/svelte@7.0.4':
+    resolution: {integrity: sha512-vTFhHhYNr1GkrpR63Talv8ba1HHUWoHNzBs4eJNZz4bQCihAdxw+xz/CWcWM1bfAzH3Jfc7jAKXPNAZSwN4oFg==}
+    engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}
+    peerDependencies:
+      astro: ^5.0.0
+      svelte: ^5.1.16
+      typescript: ^5.3.3
+
  '@astrojs/telemetry@3.2.0':
    resolution: {integrity: sha512-wxhSKRfKugLwLlr4OFfcqovk+LIFtKwLyGPqMsv+9/ibqqnW3Gv7tBhtKEb0gAyUAC4G9BTVQeQahqnQAhd6IQ==}
    engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}
@ -378,9 +399,24 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
  '@jridgewell/sourcemap-codec@1.5.0':
    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}

+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
  '@nodelib/fs.scandir@2.1.5':
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@ -603,6 +639,21 @@ packages:
  '@shikijs/vscode-textmate@10.0.1':
    resolution: {integrity: sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==}

+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1':
+    resolution: {integrity: sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^5.0.0
+      svelte: ^5.0.0
+      vite: ^6.0.0
+
+  '@sveltejs/vite-plugin-svelte@5.0.3':
+    resolution: {integrity: sha512-MCFS6CrQDu1yGwspm4qtli0e63vaPCehf6V7pIMP15AsWgMKrqDGCPFF/0kn4SP0ii4aySu4Pa62+fIRGFMjgw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+    peerDependencies:
+      svelte: ^5.0.0
+      vite: ^6.0.0
+
  '@types/cookie@0.6.0':
    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}

@ -633,6 +684,11 @@ packages:
  '@ungap/structured-clone@1.2.1':
    resolution: {integrity: sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==}

+  acorn-typescript@1.4.13:
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+
  acorn@8.14.0:
    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
    engines: {node: '>=0.4.0'}
@ -791,6 +847,13 @@ packages:
  decode-named-character-reference@1.0.2:
    resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}

+  dedent-js@1.0.1:
+    resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
  defu@6.1.4:
    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}

@ -856,11 +919,17 @@ packages:
    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
    engines: {node: '>=12'}

+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
  esprima@4.0.1:
    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
    engines: {node: '>=4'}
    hasBin: true

+  esrap@1.4.3:
+    resolution: {integrity: sha512-Xddc1RsoFJ4z9nR7W7BFaEPIp4UXoeQ0+077UdWLxbafMQFyU79sQJMk7kxNgRwQ9/aVgaKacCHC2pUACGwmYw==}
+
  estree-walker@2.0.2:
    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}

@ -1006,6 +1075,9 @@ packages:
    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
    engines: {node: '>=12'}

+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
  is-wsl@3.1.0:
    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
    engines: {node: '>=16'}
@ -1030,6 +1102,9 @@ packages:
    resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
    engines: {node: '>=6'}

+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
  locate-path@5.0.0:
    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
    engines: {node: '>=8'}
@ -1037,6 +1112,9 @@ packages:
  longest-streak@3.1.0:
    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}

+  lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+
  lru-cache@10.4.3:
    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}

@ -1204,6 +1282,9 @@ packages:
  nlcst-to-string@4.0.0:
    resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}

+  no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+
  node-addon-api@7.1.1:
    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}

@ -1253,6 +1334,9 @@ packages:
  parse5@7.2.1:
    resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}

+  pascal-case@3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+
  path-exists@4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
@ -1437,6 +1521,16 @@ packages:
    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
    engines: {node: '>=4'}

+  svelte2tsx@0.7.34:
+    resolution: {integrity: sha512-WTMhpNhFf8/h3SMtR5dkdSy2qfveomkhYei/QW9gSPccb0/b82tjHvLop6vT303ZkGswU/da1s6XvrLgthQPCw==}
+    peerDependencies:
+      svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
+      typescript: ^4.9.4 || ^5.0.0
+
+  svelte@5.19.7:
+    resolution: {integrity: sha512-I0UUp2MpB5gF8aqHJVklOcRcoLgQNnBolSwLMMqDepE9gVwmGeYBmJp1/obzae72QpxdPIymA4AunIm2x70LBg==}
+    engines: {node: '>=18'}
+
  tinyexec@0.3.2:
    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}

@ -1467,8 +1561,8 @@ packages:
    resolution: {integrity: sha512-ojFL7eDMX2NF0xMbDwPZJ8sb7ckqtlAi1GsmgsFXvErT9kFTk1r0DuQKvrCh73M6D4nngeHJmvogF9OluXs7Hw==}
    engines: {node: '>=16'}

-  typescript@5.7.2:
-    resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==}
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
    engines: {node: '>=14.17'}
    hasBin: true

@ -1668,6 +1762,9 @@ packages:
    resolution: {integrity: sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==}
    engines: {node: '>=18'}

+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
  zod-to-json-schema@3.24.1:
    resolution: {integrity: sha512-3h08nf3Vw3Wl3PK+q3ow/lIil81IT2Oa7YpQyUUDsEWbXveMesdfK1xBd2RhCkynwZndAxixji/7SYJJowr62w==}
    peerDependencies:
@ -1687,6 +1784,11 @@ packages:

 snapshots:

+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
  '@ark/schema@0.39.0':
    dependencies:
      '@ark/util': 0.39.0
@ -1726,6 +1828,28 @@ snapshots:
    dependencies:
      prismjs: 1.29.0

+  '@astrojs/svelte@7.0.4(astro@5.2.3(rollup@4.28.1)(sass@1.83.0)(typescript@5.7.3))(sass@1.83.0)(svelte@5.19.7)(typescript@5.7.3)':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.19.7)(vite@6.0.11(sass@1.83.0))
+      astro: 5.2.3(rollup@4.28.1)(sass@1.83.0)(typescript@5.7.3)
+      svelte: 5.19.7
+      svelte2tsx: 0.7.34(svelte@5.19.7)(typescript@5.7.3)
+      typescript: 5.7.3
+      vite: 6.0.11(sass@1.83.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
  '@astrojs/telemetry@3.2.0':
    dependencies:
      ci-info: 4.1.0
@ -1941,8 +2065,23 @@ snapshots:
  '@img/sharp-win32-x64@0.33.5':
    optional: true

+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
  '@jridgewell/sourcemap-codec@1.5.0': {}

+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
  '@nodelib/fs.scandir@2.1.5':
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@ -2118,6 +2257,28 @@ snapshots:

  '@shikijs/vscode-textmate@10.0.1': {}

+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.7)(vite@6.0.11(sass@1.83.0)))(svelte@5.19.7)(vite@6.0.11(sass@1.83.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.19.7)(vite@6.0.11(sass@1.83.0))
+      debug: 4.4.0
+      svelte: 5.19.7
+      vite: 6.0.11(sass@1.83.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.7)(vite@6.0.11(sass@1.83.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.7)(vite@6.0.11(sass@1.83.0)))(svelte@5.19.7)(vite@6.0.11(sass@1.83.0))
+      debug: 4.4.0
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.17
+      svelte: 5.19.7
+      vite: 6.0.11(sass@1.83.0)
+      vitefu: 1.0.5(vite@6.0.11(sass@1.83.0))
+    transitivePeerDependencies:
+      - supports-color
+
  '@types/cookie@0.6.0': {}

  '@types/debug@4.1.12':
@ -2146,6 +2307,10 @@ snapshots:

  '@ungap/structured-clone@1.2.1': {}

+  acorn-typescript@1.4.13(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
  acorn@8.14.0: {}

  ansi-align@3.0.1:
@ -2178,7 +2343,7 @@ snapshots:

  array-iterate@2.0.1: {}

-  astro@5.2.3(rollup@4.28.1)(sass@1.83.0)(typescript@5.7.2):
+  astro@5.2.3(rollup@4.28.1)(sass@1.83.0)(typescript@5.7.3):
    dependencies:
      '@astrojs/compiler': 2.10.3
      '@astrojs/internal-helpers': 0.5.0
@ -2225,7 +2390,7 @@ snapshots:
      semver: 7.7.0
      shiki: 1.29.2
      tinyexec: 0.3.2
-      tsconfck: 3.1.4(typescript@5.7.2)
+      tsconfck: 3.1.4(typescript@5.7.3)
      ultrahtml: 1.5.3
      unist-util-visit: 5.0.0
      unstorage: 1.14.4
@ -2238,7 +2403,7 @@ snapshots:
      yocto-spinner: 0.2.0
      zod: 3.24.1
      zod-to-json-schema: 3.24.1(zod@3.24.1)
-      zod-to-ts: 1.2.0(typescript@5.7.2)(zod@3.24.1)
+      zod-to-ts: 1.2.0(typescript@5.7.3)(zod@3.24.1)
    optionalDependencies:
      sharp: 0.33.5
    transitivePeerDependencies:
@ -2377,6 +2542,10 @@ snapshots:
    dependencies:
      character-entities: 2.0.2

+  dedent-js@1.0.1: {}
+
+  deepmerge@4.3.1: {}
+
  defu@6.1.4: {}

  dequal@2.0.3: {}
@ -2445,8 +2614,14 @@ snapshots:

  escape-string-regexp@5.0.0: {}

+  esm-env@1.2.2: {}
+
  esprima@4.0.1: {}

+  esrap@1.4.3:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
  estree-walker@2.0.2: {}

  estree-walker@3.0.3:
@ -2638,6 +2813,10 @@ snapshots:

  is-plain-obj@4.1.0: {}

+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.6
+
  is-wsl@3.1.0:
    dependencies:
      is-inside-container: 1.0.0
@ -2662,12 +2841,18 @@ snapshots:
      pify: 4.0.1
      strip-bom: 3.0.0

+  locate-character@3.0.0: {}
+
  locate-path@5.0.0:
    dependencies:
      p-locate: 4.1.0

  longest-streak@3.1.0: {}

+  lower-case@2.0.2:
+    dependencies:
+      tslib: 2.8.1
+
  lru-cache@10.4.3: {}

  magic-string@0.30.17:
@ -3014,6 +3199,11 @@ snapshots:
    dependencies:
      '@types/nlcst': 2.0.3

+  no-case@3.0.4:
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.8.1
+
  node-addon-api@7.1.1:
    optional: true

@ -3069,6 +3259,11 @@ snapshots:
    dependencies:
      entities: 4.5.0

+  pascal-case@3.1.2:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.8.1
+
  path-exists@4.0.0: {}

  pathe@1.1.2: {}
@ -3343,6 +3538,30 @@ snapshots:

  strip-bom@3.0.0: {}

+  svelte2tsx@0.7.34(svelte@5.19.7)(typescript@5.7.3):
+    dependencies:
+      dedent-js: 1.0.1
+      pascal-case: 3.1.2
+      svelte: 5.19.7
+      typescript: 5.7.3
+
+  svelte@5.19.7:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+      acorn: 8.14.0
+      acorn-typescript: 1.4.13(acorn@8.14.0)
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 1.4.3
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.17
+      zimmerframe: 1.1.2
+
  tinyexec@0.3.2: {}

  to-regex-range@5.0.1:
@ -3353,16 +3572,15 @@ snapshots:

  trough@2.2.0: {}

-  tsconfck@3.1.4(typescript@5.7.2):
+  tsconfck@3.1.4(typescript@5.7.3):
    optionalDependencies:
-      typescript: 5.7.2
+      typescript: 5.7.3

-  tslib@2.8.1:
-    optional: true
+  tslib@2.8.1: {}

  type-fest@4.30.1: {}

-  typescript@5.7.2: {}
+  typescript@5.7.3: {}

  ufo@1.5.4: {}

@ -3499,13 +3717,15 @@ snapshots:

  yoctocolors@2.1.1: {}

+  zimmerframe@1.1.2: {}
+
  zod-to-json-schema@3.24.1(zod@3.24.1):
    dependencies:
      zod: 3.24.1

-  zod-to-ts@1.2.0(typescript@5.7.2)(zod@3.24.1):
+  zod-to-ts@1.2.0(typescript@5.7.3)(zod@3.24.1):
    dependencies:
-      typescript: 5.7.2
+      typescript: 5.7.3
      zod: 3.24.1

  zod@3.24.1: {}
--- a/src/layouts/SlideLayout.astro
+++ b/src/layouts/SlideLayout.astro
@ -1,10 +1,12 @@
 ---
 export interface Props {
-  title: string;
-  authors: string[];
-  description?: string;
+	title: string;
+	authors: string[];
+	description?: string;
 }
 import Layout from "./BaseLayout.astro";
+import "reveal.js/dist/reveal.css";
+import "reveal.js/plugin/highlight/monokai.css";
 import "@theme";

 const { title, authors, description } = Astro.props;
@ -14,20 +16,6 @@ const { title, authors, description } = Astro.props;
  <Fragment slot="head">
    {description && <meta name="description" content={description} />}
    {authors.map((author) => <meta name="author" content={author} />)}
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css"
-      integrity="sha512-V5fKCVKOFy36w8zJmLzPH5R6zU6KvuHOvxfMRczx2ZeqTjKRGSBO9yiZjCKEJS3n6EmENwrH/xvSwXqxje+VVA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/highlight/monokai.css"
-      integrity="sha512-Ww3X8n7Y0V9xFWft1PYfLEESkLKZYjWHmaZgo6HZu4R0mX5D+sNK5YoLSgE10aS2SDXnppWRXndYiN7n/LxV3A=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
  </Fragment>
  <div class="reveal">
    <div class="slides">
@ -38,7 +26,7 @@ const { title, authors, description } = Astro.props;
      <slot />
    </div>
  </div>
-  <script>
+  <script >
    import Reveal from "reveal.js";
    import Highlight from "reveal.js/plugin/highlight/highlight.esm.js";
    import Zoom from "reveal.js/plugin/zoom/zoom.esm.js";
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -2,7 +2,9 @@
 import Layout from "@layouts/BaseLayout.astro";
 import { getSlides } from "@utils/getSlides";

-const slides = getSlides().sort((c1, c2) => (c1.title > c2.title ? -1 : 1));
+const slides = getSlides()
+	.filter(({ draft }) => !draft)
+	.sort((c1, c2) => (c1.title > c2.title ? -1 : 1));
 ---

 <Layout title="Home">
--- a/src/slides/flexbox/components/CSSPropertyDemo.svelte
+++ b/src/slides/flexbox/components/CSSPropertyDemo.svelte
@ -0,0 +1,107 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  type CSSPropertyDemoProps = {
+    property: string;
+    values: string[];
+    title?: string;
+    defaultValue?: string;
+    children?: Snippet<[]>;
+  };
+
+  const {
+    property,
+    values,
+    title = property,
+    defaultValue = values[0],
+  }: CSSPropertyDemoProps = $props();
+
+  let selected = $state(defaultValue);
+
+  const handleClick = (value: string) => {
+    selected = value;
+  };
+</script>
+
+<div class="flex-property-demo">
+  <h2 class="flex-property-demo__property">{title}</h2>
+  <div class="flex-property-demo__values">
+    {#if values.length > 1}
+      {#each values as value}
+        <button
+          class="flex-property-demo__value"
+          onclick={() => handleClick(value)}
+          class:selected={selected === value}
+        >
+          {value}
+        </button>
+      {/each}
+    {/if}
+  </div>
+  <div class="flex-property-demo__children" style={`${property}: ${selected}`}>
+    {#each [1, 2, 3] as index}
+      <div class="flex-property-demo__box">{index}</div>
+    {/each}
+  </div>
+  <pre>
+      <code data-trim data-noescape>
+        .container {"{"}
+          {property}: {selected};
+        {"}"}
+      </code>
+    </pre>
+</div>
+
+<style>
+  .flex-property-demo {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--base-spacing);
+  }
+
+  .flex-property-demo__children {
+    display: flex;
+    margin: 20px;
+    padding: 20px;
+    border: 2px solid #fff;
+    min-height: 200px;
+  }
+
+  button {
+    color: white;
+    background-color: black;
+    border: 2px solid white;
+    font-weight: bold;
+    padding: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  button.selected,
+  button:hover {
+    background-color: white;
+    color: black;
+  }
+
+  .flex-property-demo__box {
+    width: 100px;
+    height: 100px;
+    background: #4a9eff;
+    margin: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+  }
+
+  .flex-property-demo__values {
+    display: flex;
+    gap: var(--base-spacing);
+    align-self: center;
+  }
+
+  pre {
+    margin: 0;
+  }
+</style>
--- a/src/slides/flexbox/index.astro
+++ b/src/slides/flexbox/index.astro
@ -1,4 +1,6 @@
 ---
+import CSSPropertyDemo from "./components/CSSPropertyDemo.svelte";
+
 export const title = "CSS Flexbox";
 export const authors = ["Henrique Ramos"];
 export const publishedAt = "2025-01-27";
@ -16,78 +18,35 @@ export const draft = true;
 </section>

 <section>
-  <h2>Basic Flexbox Container</h2>
-  <div class="demo">
-    <div class="box">1</div>
-    <div class="box">2</div>
-    <div class="box">3</div>
-  </div>
-  <pre><code data-trim>
-.container {'{'}
-  display: flex;
-{'}'}
-</code></pre>
+  <CSSPropertyDemo
+    title="Simple Flexbox Container"
+    client:load
+    property="display"
+    values={["flex"]}
+  />
 </section>

 <section>
-  <h2>justify-content</h2>
-  <div class="demo" style="justify-content: space-between">
-    <div class="box">1</div>
-    <div class="box">2</div>
-    <div class="box">3</div>
-  </div>
-  <pre><code data-trim>
-.container {'{'}
-  justify-content: space-between;
-{'}'}
-</code></pre>
+  <CSSPropertyDemo
+    client:load
+    property="justify-content"
+    values={["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"]}
+  />
 </section>

 <section>
-  <h2>align-items</h2>
-  <div class="demo" style="align-items: center; height: 300px">
-    <div class="box">1</div>
-    <div class="box">2</div>
-    <div class="box">3</div>
-  </div>
-  <pre><code data-trim>
-.container {'{'}
-  align-items: center;
-{'}'}
-</code></pre>
+  <CSSPropertyDemo
+    client:load
+    property="align-items"
+    values={["flex-start", "center", "flex-end", "stretch"]}
+  />
 </section>

 <section>
-  <h2>flex-direction</h2>
-  <div class="demo" style="flex-direction: column">
-    <div class="box">1</div>
-    <div class="box">2</div>
-    <div class="box">3</div>
-  </div>
-  <pre><code data-trim>
-.container {'{'}
-  flex-direction: column;
-{'}'}
-</code></pre>
+  <CSSPropertyDemo
+    client:load
+    property="flex-direction"
+    values={["row", "row-reverse", "column", "column-reverse"]}
+  />
 </section>

-
-<style>
-      .demo {
-        display: flex;
-        margin: 20px;
-        padding: 20px;
-        border: 2px solid #fff;
-        min-height: 200px;
-      }
-      .box {
-        width: 100px;
-        height: 100px;
-        background: #4a9eff;
-        margin: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-      }
-    </style>
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@ -1,6 +1,7 @@
 :root {
 	--background: #000;
 	--background-color: #000;
+	--base-spacing: 8px;

 	--main-font: "Anaheim", sans-serif;
 	--main-font-size: 40px;
@ -26,8 +27,8 @@
 	--code-font: monospace;

 	--link-color: #aaaaff;
-	--link-color-dark: color.scale(#aaaaff, $lightness: -15%);
-	--link-color-hover: color.scale(#aaaaff, $lightness: 20%);
+	--link-color-dark: color-mix(in srgb, var(--link-color), #000 10%);
+	--link-color-hover: color-mix(in srgb, var(--link-color), #000 20%);

 	--selection-background-color: #888;
 	--selection-color: #fff;
--- a/src/utils/getAstroPages.ts
+++ b/src/utils/getAstroPages.ts
@ -21,23 +21,19 @@ const getAstroPages = <T extends Record<string, unknown> & AstroInstance>({
 	files,
 	schema,
 }: Opts<T>) =>
-	Object.values(files)
-		.filter(({ draft }) => !draft)
-		.map((module) => {
-			const validate = schema.and(astroPageType)(module);
-			if (validate instanceof type.errors)
-				return console.error(
-					`Invalid module${module.file}: ${validate.summary}`,
-				);
+	Object.values(files).map((module) => {
+		const validate = schema.and(astroPageType)(module);
+		if (validate instanceof type.errors)
+			throw new Error(`Invalid module${module.file}: ${validate.summary}`);

-			return {
-				id: (
-					module.file
-						.split("/")
-						.at(module.file.includes("index.astro") ? -2 : -1) ?? ""
-				).replace(".astro", ""),
-				...module,
-			};
-		});
+		return {
+			id: (
+				module.file
+					.split("/")
+					.at(module.file.includes("index.astro") ? -2 : -1) ?? ""
+			).replace(".astro", ""),
+			...module,
+		};
+	});

 export default getAstroPages;
--- a/src/utils/getSlides.ts
+++ b/src/utils/getSlides.ts
@ -8,6 +8,7 @@ type Slide = AstroInstance & {
 	description: string;
 	authors: string[];
 	publishedAt: string;
+	draft?: boolean;
 };

 /**
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+}