fb-slides 0.9.1 → 0.11.0

package/templates/starter/decks/01-intro.md

@@ -4,63 +4,10 @@ title: __TITLE__
 section: Intro
 ---
 
-# __TITLE__
+# Signals, _explained_, **bold**
 
-The subtitle goes here.
+## The subtitle goes here.
 
----
-
-<!-- .slide: class="author-slide" -->
-
-<div class="author-photo">
-  <img src="assets/author/photo-1.svg" alt="" />
-  <img src="assets/author/photo-2.svg" alt="" />
-</div>
-
-<div class="author-bio">
-  <h1>Your name</h1>
-  <ul>
-    <li>What you do</li>
-    <li>What you are <strong>known for</strong></li>
-    <li>Where people can find you</li>
-  </ul>
-  <p class="author-meta">The stack · you · work · with</p>
-  <p class="author-meta">❤️ Life outside work — <strong>yoursite.dev</strong></p>
-</div>
-
-Note: thirty seconds, no more. Swap the two placeholders in assets/author/ for your own photos — add as many as you like, they cross-fade in the order they are written.
-
----
-
-## A slide
-
-A slide is whatever sits between two `---` lines.
-
-- lists of three or more reveal one item at a time
-- `?nofrag` shows them all at once
-- an `#` h1 on its own makes a section divider
-
-Note: this is a speaker note — only the speaker view (`S`) shows it.
-
----
-
-## Code
-
-The ranges in the fence are reveal's: one group per click.
-
-```js [1|3-5]
-const deck = 'decks/*.md';
-
-for (const slide of deck) {
-  render(slide);
-}
-```
-
----
-
-## A diagram
+### heading 3
 
-```mermaid
-flowchart LR
-  MD[Markdown] --> DECK[fb-slides] --> R[reveal.js]
-```
+#### heading 4

package/templates/starter/decks/02-author.md

@@ -0,0 +1,64 @@
+---
+marp: true
+title: About me
+section: About
+---
+
+<!-- .slide: class="author-slide" -->
+
+<div class="author-photo">
+  <img src="assets/author/fb-mountain.jpg" alt="Fabio Biondi">
+  <img src="assets/author/gemini-masterclass-26.jpg" alt="Gemini masterclass 2026">
+  <img src="assets/author/fb-mtb.jpeg" alt="Fabio Biondi in mountain bike gear">
+  <img src="assets/author/webday-26.jpg" alt="Speaking at WebDay 2026">
+  <img src="assets/author/JSDAY-26.jpg" alt="Speaking at JSDay 2026">
+  <img src="assets/author/devfest-pisa-26.jpg" alt="Speaking at DevFest Pisa 2026">
+  <img src="assets/author/devfestroma-25.jpg" alt="Speaking at DevFest Roma 2025">
+  
+</div>
+
+
+
+<div class="author-bio">
+  <h1>Fabio Biondi</h1>
+  <ul>
+    <li>Freelance</li>
+    <li>AI Gen & Front-end <strong>Training for Teams</strong></li>
+    <li><strong>Google Developer Expert (Angular)</strong></li>
+    <li><strong>Speaker</strong> &amp; Content Creator</li>
+    <li><strong>Community</strong> Founder</li>
+    <li><strong>LearnByDo.ing</strong> creator</li>
+  </ul>
+
+  <p class="author-stack">Main Skills: TypeScript · Angular · React · Next.js · Gemini · Claude</p>
+  <p class="author-meta">❤️ MTB · Snowboard · Tennis · Skate — <strong>FabioBiondi.dev</strong></p>
+
+
+<br />
+
+## _fabiobiondi.dev_
+
+</div>
+
+Note: thirty seconds, no more. The credentials matter only to say why I spent the last months inside this protocol.
+
+---
+
+<!-- demo: https://www.learnbydo.ing/ -->
+
+## Live demo
+
+
+<iframe src="https://www.learnbydo.ing/" style="width:100%;height:60vh"></iframe>
+
+## New slide
+
+---
+
+<!-- demo: https://www.building-ai.app -->
+
+## Live demo
+
+<iframe src="https://www.building-ai.app" style="width:100%;height:60vh"></iframe>
+
+## New slide

package/templates/starter/decks/02-demos.md

@@ -4,6 +4,42 @@ title: Demos
 section: Demos
 ---
 
+
+## A slide
+
+A slide is whatever sits between two `---` lines.
+
+- lists of three or more reveal one item at a time
+- `?nofrag` shows them all at once
+- an `#` h1 on its own makes a section divider
+
+Note: this is a speaker note — only the speaker view (`S`) shows it.
+
+---
+
+## Code
+
+The ranges in the fence are reveal's: one group per click.
+
+```js [1|3-5]
+const deck = 'decks/*.md';
+
+for (const slide of deck) {
+  render(slide);
+}
+```
+
+---
+
+## A diagram
+
+```mermaid
+flowchart LR
+  MD[Markdown] --> DECK[fb-slides] --> R[reveal.js]
+```
+
+---
+
 <!-- demo: counter -->
 
 ## A page, running on the slide

package/templates/starter/slides.config.js

@@ -9,11 +9,26 @@ export default {
   // Folder behind a bare `<!-- demo: counter -->` marker in the Markdown.
   demos: 'demo',
 
-  // One of reveal.js's own themes, served from this project rather than from a
-  // CDN: beige, black, black-contrast, blood, dracula, league, moon, night,
-  // serif, simple, sky, solarized, white, white-contrast. Uncomment to wear one
-  // — the deck's chrome follows it. Leave it out for this package's own look.
+  // ── Theme ─────────────────────────────────────────────────────────────────
+  // With both keys below commented out the deck wears this package's base look.
+  // To change it, uncomment ONE of the two — not both: layered together you get
+  // neither look, just whichever rule comes last. Run `fb-slides dev` and use
+  // the theme button in the toolbar to preview every option live; the popover
+  // prints the exact line to paste here.
+  //
+  // 1. A pack — one of this package's own named themes, a whole skin over the
+  //    base look. Available packs:
+  //      custom-aurora, custom-editoriale
+  // themePack: 'custom-aurora',
+  //
+  // 2. A reveal.js theme, served from this project rather than from a CDN — the
+  //    deck's chrome follows it. Available themes:
+  //      beige, black, black-contrast, blood, dracula, league, moon, night,
+  //      serif, simple, sky, solarized, white, white-contrast
   // revealTheme: 'dracula',
+  //
+  // Either way, `theme.css` next to this file is still loaded last, so your own
+  // overrides sit on top of whatever you picked.
 
   // Six of those themes ask fonts.googleapis.com for their typefaces. Those
   // requests are stripped out, so a deck never depends on the room's wifi; the
@@ -50,8 +65,13 @@ export default {
   // a path on disk.
   editor: true,
 
-  // The corner signature. Uncomment to show it.
-  // signature: { name: 'fabiobiondi.dev', url: 'https://www.fabiobiondi.dev', logo: 'assets/logo.png' },
+  // The corner signature, shown on every slide: name and logo, linking to url.
+  // Swap the values for your own, or delete the whole key to have no footer.
+  signature: {
+    name: 'www.fabiobiondi.dev',
+    url: 'https://www.fabiobiondi.dev',
+    logo: 'assets/jshd-sticker.png',
+  },
 
   // Passed straight to Reveal.initialize().
   // reveal: { transition: 'fade', slideNumber: false },

package/templates/starter/assets/author/photo-1.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 800" width="600" height="800">
-  <defs>
-    <linearGradient id="g1" x1="0" y1="0" x2="0.6" y2="1">
-      <stop offset="0" stop-color="#1f2937" />
-      <stop offset="1" stop-color="#4b5563" />
-    </linearGradient>
-  </defs>
-  <rect width="600" height="800" fill="url(#g1)" />
-  <text x="300" y="400" text-anchor="middle" font-family="ui-sans-serif, system-ui, sans-serif"
-    font-size="34" fill="#e8ebf0" fill-opacity="0.55">your photo 1</text>
-</svg>

package/templates/starter/assets/author/photo-2.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 800" width="600" height="800">
-  <defs>
-    <linearGradient id="g2" x1="0" y1="0" x2="0.6" y2="1">
-      <stop offset="0" stop-color="#1e3a5f" />
-      <stop offset="1" stop-color="#2f6f8f" />
-    </linearGradient>
-  </defs>
-  <rect width="600" height="800" fill="url(#g2)" />
-  <text x="300" y="400" text-anchor="middle" font-family="ui-sans-serif, system-ui, sans-serif"
-    font-size="34" fill="#e8ebf0" fill-opacity="0.55">your photo 2</text>
-</svg>