ferrix/slides/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BGP hands-on: announce your own prefix</title>
    <!--
      Deck structure and look follow Matt Godbolt's newer talks (e.g.
      github.com/mattgodbolt/what-happens-beneath-accu-2026): reveal.js with
      no stock theme, a custom dark theme (theme.css), monokai code blocks,
      16:9, fade transitions, and one Markdown file per section.

      reveal.js is loaded from ./reveal.js/dist if present (run
      ./vendor-reveal.sh once; works offline), otherwise from the CDN. Its
      stylesheets are inserted BEFORE ours by the loader below, so theme.css
      and style.css always have the last word.
    -->
    <link rel="stylesheet" href="theme.css" id="deck-style" />
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="images/favicon.svg" type="image/svg+xml" />
    <link rel="shortcut icon" href="images/favicon.svg" />
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <!-- Title slide. For a full-bleed image instead, empty it and add
             data-background="images/title.png" like Matt does. -->
        <section class="title-slide">
          <svg class="as-path" viewBox="0 0 1000 90" preserveAspectRatio="xMinYMid meet" aria-hidden="true">
            <line x1="20" y1="30" x2="980" y2="30" />
            <g class="you"><circle cx="20" cy="30" r="11" /><text x="4" y="72">you</text></g>
            <g><circle cx="250" cy="30" r="11" /><text x="196" y="72">AS4200000001</text></g>
            <g><circle cx="500" cy="30" r="11" /><text x="463" y="72">AS210036</text></g>
            <g><circle cx="750" cy="30" r="11" /><text x="722" y="72">AS42476</text></g>
            <g><circle cx="980" cy="30" r="11" /><text x="890" y="72">the Internet</text></g>
          </svg>
          <h1>Announce your own prefix</h1>
          <h3>A hands-on introduction to BGP</h3>
          <p class="byline">Rayhaan Jaufeerally &middot; Network Security &middot; ETH Z&uuml;rich, 2026</p>
        </section>

        <!--
          One Markdown file per section. Inside a file:
            -----      next horizontal slide
            ---        next vertical slide (goes down, for detail you may skip)
            Notes:     everything after this is speaker notes (press S)
        -->
        <section data-markdown="sections/01-intro.md" data-separator="^-----" data-separator-vertical="^---" data-separator-notes="^Notes:"></section>
        <section data-markdown="sections/02-bgp.md" data-separator="^-----" data-separator-vertical="^---" data-separator-notes="^Notes:"></section>
        <section data-markdown="sections/03-lab.md" data-separator="^-----" data-separator-vertical="^---" data-separator-notes="^Notes:"></section>
        <section data-markdown="sections/04-communities.md" data-separator="^-----" data-separator-vertical="^---" data-separator-notes="^Notes:"></section>
        <section data-markdown="sections/05-wrap-up.md" data-separator="^-----" data-separator-vertical="^---" data-separator-notes="^Notes:"></section>
      </div>
    </div>
    <!-- Sits where Matt's decks carry the employer logo. -->
    <div class="wordmark"><b>ferrix</b>_bgp &middot; netsec 2026</div>

    <script type="module">
      const VERSION = "6.0.2";
      const LOCAL = "./reveal.js/dist";
      const CDN = `https://cdn.jsdelivr.net/npm/reveal.js@${VERSION}/dist`;

      // Prefer the vendored copy so the deck works without a network.
      async function pickBase() {
        try {
          const r = await fetch(`${LOCAL}/reveal.css`, { method: "HEAD" });
          if (r.ok) return LOCAL;
        } catch (_) {}
        return CDN;
      }
      const base = await pickBase();

      const deckStyle = document.getElementById("deck-style");
      await Promise.all(
        ["reset.css", "reveal.css", "plugin/highlight/monokai.css"].map(
          (href) =>
            new Promise((resolve) => {
              const link = document.createElement("link");
              link.rel = "stylesheet";
              link.href = `${base}/${href}`;
              link.onload = link.onerror = resolve;
              deckStyle.before(link);
            }),
        ),
      );

      const [{ default: Reveal }, { default: Markdown }, { default: Highlight }, { default: Notes }] =
        await Promise.all(
          ["reveal.mjs", "plugin/markdown.mjs", "plugin/highlight.mjs", "plugin/notes.mjs"].map(
            (m) => import(/* @vite-ignore */ `${base}/${m}`),
          ),
        );

      // BIRD configuration, so router config on slides is highlighted. Same
      // trick Matt uses for the assembly dialects in his talks.
      function bird() {
        return {
          name: "bird",
          keywords: {
            keyword:
              "protocol template filter function define table if then else case return accept reject " +
              "import export where none all limit action block neighbor local as direct multihop passive " +
              "description ipv4 ipv6 bgp kernel device static pipe include router id",
            built_in:
              "net proto source dest bgp_path bgp_community bgp_large_community bgp_ext_community " +
              "bgp_med bgp_local_pref bgp_next_hop",
            literal: "true false on off RTD_UNREACHABLE RTS_BGP",
          },
          contains: [
            { className: "comment", begin: "#", end: "$" },
            { className: "string", begin: '"', end: '"' },
            { className: "number", begin: "\\b[0-9a-fA-F:]*::?[0-9a-fA-F:]*(/[0-9]+)?(\\{[0-9]+,[0-9]+\\})?\\b" },
            { className: "number", begin: "\\b[0-9]+(\\.[0-9]+){3}(/[0-9]+)?\\b" },
            { className: "number", begin: "\\b[0-9]+\\b" },
          ],
        };
      }

      // ?accent=green|amber|magenta previews another accent; blue is the default.
      const accent = new URLSearchParams(location.search).get("accent");
      if (accent) document.documentElement.dataset.accent = accent;

      // 16:9. Nudge scaleFactor to fit the projector, as Matt does.
      const scaleFactor = 0.65;
      const deck = new Reveal({
        hash: true,
        transition: "fade",
        slideNumber: false,
        margin: 0.15,
        width: 1920 * scaleFactor,
        height: 1080 * scaleFactor,
        markdown: { smartypants: true },
        highlight: {
          beforeHighlight: (hljs) => hljs.registerLanguage("bird", bird),
        },
        plugins: [Markdown, Highlight, Notes],
      });

      await deck.initialize();
      window.deck = deck; // handy in the console: deck.slide(3), deck.getTotalSlides()
    </script>
  </body>
</html>