fb-slides 0.1.2

package/templates/starter/README.md

@@ -0,0 +1,27 @@
+# __TITLE__
+
+Slides built with [`__PKG__`](https://www.npmjs.com/package/__PKG__).
+
+```bash
+npm install
+npm run dev       # http://localhost:4000
+npm run build     # → dist/
+npm run preview   # build, then serve dist/
+```
+
+## What is where
+
+| | |
+| --- | --- |
+| `decks/*.md` | the talk. Drop a file in, delete one — there is no list to update |
+| `demo/counter/` | a static page a slide embeds and runs |
+| `demo/angular-hello/` | an app with its own dev server, started by `servers:` |
+| `assets/` | images the Markdown links to |
+| `theme.css` | colour overrides, loaded after the package's theme |
+| `slides.config.js` | title, folders, signature, side servers — all optional |
+
+The Angular demo needs its own install once — `npm --prefix demo/angular-hello install`.
+Without it that one slide comes up empty and everything else works.
+
+The deck engine itself is not in this repo: it comes from the package, so
+`npm update __PKG__` brings new features to this talk and every other one.

package/templates/starter/_gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.angular/
+.DS_Store

package/templates/starter/_package.json

@@ -0,0 +1,14 @@
+{
+  "name": "__NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "fb-slides dev",
+    "build": "fb-slides build",
+    "preview": "fb-slides preview"
+  },
+  "devDependencies": {
+    "__PKG__": "__VERSION__"
+  }
+}

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

@@ -0,0 +1,44 @@
+---
+marp: true
+title: __TITLE__
+section: Intro
+---
+
+# __TITLE__
+
+The subtitle goes here.
+
+---
+
+## 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]
+```

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

@@ -0,0 +1,34 @@
+---
+marp: true
+title: Demos
+section: Demos
+---
+
+<!-- demo: counter -->
+
+## A page, running on the slide
+
+<iframe src="../demo/counter/" style="width:100%;height:60vh"></iframe>
+
+---
+
+<!-- demo: http://localhost:4200/ -->
+
+## An app with its own dev server
+
+<iframe src="http://localhost:4200/" style="width:100%;height:60vh"></iframe>
+
+---
+
+## How those two slides work
+
+```markdown
+<!-- demo: counter -->        a folder in demo/
+<!-- demo: http://…:4200/ -->  anything else
+```
+
+- the marker must be the first thing in the slide
+- what follows it is the fallback for GitHub and Marp
+- `demo/angular-hello` is started by `servers:` in `slides.config.js`
+
+Note: the iframe is reloaded every time you arrive on the slide, so a demo is always in its initial state.

package/templates/starter/demo/angular-hello/README.md

@@ -0,0 +1,15 @@
+# angular-hello
+
+An Angular app on a slide. It is here to show the one thing a static page cannot:
+a demo with its **own dev server**, started by `servers:` in `../../slides.config.js`
+and embedded with `<!-- demo: http://localhost:4200/ -->`.
+
+It needs its own install, once:
+
+```bash
+npm --prefix demo/angular-hello install
+```
+
+Until you do, `npm run dev` prints a warning and that one slide comes up empty.
+Delete the folder — and the `servers:` entry, and the slide — if the talk has no
+framework demo in it.

package/templates/starter/demo/angular-hello/_package.json

@@ -0,0 +1,24 @@
+{
+  "name": "angular-hello",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
+  "dependencies": {
+    "@angular/common": "^22.1.0",
+    "@angular/compiler": "^22.1.0",
+    "@angular/core": "^22.1.0",
+    "@angular/platform-browser": "^22.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^22.1.6",
+    "@angular/cli": "^22.1.6",
+    "@angular/compiler-cli": "^22.1.0",
+    "typescript": "~6.0.2"
+  }
+}

package/templates/starter/demo/angular-hello/angular.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "projects": {
+    "angular-hello": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "index": "src/index.html",
+            "tsConfig": "tsconfig.app.json",
+            "styles": ["src/styles.css"]
+          },
+          "configurations": {
+            "development": { "optimization": false, "sourceMap": true }
+          },
+          "defaultConfiguration": "development"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "development": { "buildTarget": "angular-hello:build:development" }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

package/templates/starter/demo/angular-hello/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>angular-hello</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/templates/starter/demo/angular-hello/src/main.ts

@@ -0,0 +1,18 @@
+// A whole Angular app in one file: it exists to prove that a slide can embed an
+// app with its own dev server, not just a static page. `servers:` in
+// slides.config.js is what starts it alongside the deck.
+import { Component, signal } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Hello from Angular</h1>
+    <button (click)="count.set(count() + 1)">{{ count() }}</button>
+  `,
+})
+export class App {
+  readonly count = signal(0);
+}
+
+bootstrapApplication(App).catch((error) => console.error(error));

package/templates/starter/demo/angular-hello/src/styles.css

@@ -0,0 +1,22 @@
+body {
+  margin: 0;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 1rem;
+  height: 100vh;
+  background: #12151b;
+  color: #e8ebf0;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}
+h1 { font-size: clamp(20px, 4vw, 40px); font-weight: 650; margin: 0; }
+button {
+  font: inherit;
+  font-size: clamp(16px, 3vw, 28px);
+  padding: 0.4em 1.1em;
+  border-radius: 14px;
+  border: 1px solid #2c333f;
+  background: #1a1f27;
+  color: #6ea8fe;
+  cursor: pointer;
+}

package/templates/starter/demo/angular-hello/tsconfig.app.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": { "types": [] },
+  "include": ["src/**/*.ts"]
+}

package/templates/starter/demo/angular-hello/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true
+  },
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }]
+}

package/templates/starter/demo/counter/index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>counter</title>
+    <style>
+      body {
+        margin: 0;
+        display: grid;
+        place-items: center;
+        height: 100vh;
+        background: #12151b;
+        color: #e8ebf0;
+        font: 500 clamp(18px, 5vw, 44px) / 1.4 ui-sans-serif, system-ui, sans-serif;
+      }
+      button {
+        font: inherit;
+        padding: 0.4em 1em;
+        border-radius: 14px;
+        border: 1px solid #2c333f;
+        background: #1a1f27;
+        color: #6ea8fe;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Any page can go on a slide. This one is here to prove it is really running. -->
+    <button onclick="this.textContent = ++count">0</button>
+    <script>
+      let count = 0;
+    </script>
+  </body>
+</html>

package/templates/starter/slides.config.js

@@ -0,0 +1,34 @@
+// Everything here is optional: delete the file and the defaults below apply.
+export default {
+  title: '__TITLE__',
+  lang: 'en',
+
+  // Where the talk lives. Every .md in here becomes slides, in file-name order.
+  decks: 'decks',
+
+  // Folder behind a bare `<!-- demo: counter -->` marker in the Markdown.
+  demos: 'demo',
+
+  // Port `fb-slides dev` serves the deck on (`preview` uses the next one up).
+  // `--port n` on the command line wins over this.
+  port: 4000,
+
+  // Side processes `fb-slides dev` starts along with the deck — a demo that is a
+  // real app rather than a static page. Drop this key, the folder and the slide
+  // that embeds it if the talk has no framework demo in it.
+  servers: [
+    {
+      name: 'angular-hello',
+      cwd: 'demo/angular-hello',
+      command: 'npm',
+      args: ['start', '--', '--port', '4200'],
+      url: 'http://localhost:4200/',
+    },
+  ],
+
+  // The corner signature. Uncomment to show it.
+  // signature: { name: 'fabiobiondi.dev', url: 'https://www.fabiobiondi.dev', logo: 'assets/logo.png' },
+
+  // Passed straight to Reveal.initialize().
+  // reveal: { transition: 'fade', slideNumber: false },
+};

package/templates/starter/theme.css

@@ -0,0 +1,14 @@
+/* Loaded after the package's theme.base.css — an override, not a replacement.
+   Redefining a token here reskins the whole deck. Delete this file if the
+   default dark theme is fine as it is. */
+
+/*
+:root {
+  --bg: #0e1116;
+  --card: #1a1f27;
+  --text: #e8ebf0;
+  --muted: #97a1b0;
+  --accent: #6ea8fe;
+  --accent-2: #7ee2b8;
+}
+*/