Slides by Asad Ullah Khalid

This repository contains presentation slides for talks given by Asad Ullah Khalid, built using reveal.js - an open source HTML presentation framework.

About

Senior Frontend Developer at Mercedes-Benz.io, Berlin, Germany with 7+ years of experience. Frontend focused with fullstack JS/TS expertise.

Connect with me:

• 🌐 Website: asadullahkhalid.com
• 💼 LinkedIn: asadkhalid305
• 💻 GitHub: asadullah305
• 📅 Book a session: Topmate

Getting Started

Install Dependencies

npm install

Serve the Project

npm run dev

This starts a development server at http://localhost:8000 by default.

You can override host/port with gulp flags:

npx gulp serve --host 0.0.0.0 --port 3000

Build the Project

npm run build

This regenerates data/slides.json and builds production assets in dist/.

Build Talks Listing Only

npm run build-talks

Use this before deployment to regenerate talk metadata and static output.

Deploy the Project

npm run deploy

Note: Configure your deployment settings as needed based on your hosting provider.

Generate PDF for Any Talk

PDF export is dynamic and works for any talk folder under talks/.

1) Install Decktape (Global)

This project uses Decktape for slide-to-PDF export.

npm install -g decktape

Verify installation:

decktape --version

2) Start Local Server

Decktape exports from the local reveal.js URL, so start the server first:

npm run dev

Default server URL is http://localhost:8000.

3) Run Dynamic PDF Command

Pass the talk folder name as the argument:

npm run generate:pdf your-talk-folder-name

Example:

npm run generate:pdf a-practical-guide-to-building-agentic-systems

You can also use the npm separator form:

npm run generate:pdf -- a-practical-guide-to-building-agentic-systems

Output Location

The PDF is always created inside the same talk folder with this naming pattern:

talks/<talk-folder-name>/<talk-folder-name>.pdf

Example output:

talks/a-practical-guide-to-building-agentic-systems/a-practical-guide-to-building-agentic-systems.pdf

Validation & Error Handling

The script validates all required conditions before export:

• Talk folder exists under talks/
• talks/<name>/index.html exists
• Local server is reachable at http://localhost:8000
• decktape is available in PATH

If talk name is invalid, it prints available talk folders.

Common Issues

• decktape is not available in PATH
  • Install globally: npm install -g decktape
  • Open a new terminal after install
• Local server is not reachable at http://localhost:8000
  • Start server with npm run dev
• Address already in use (EADDRINUSE)
  • Another server is already running on port 8000; reuse it or stop it and restart

Creating New Talks

Each talk lives in its own subfolder under talks/.

Current pattern supports either local content per talk or shared content (for reuse):

talks/
  shared/
    intro.md         ← reusable intro deck section
    assets/          ← reusable images/memes/media
  your-talk-name/
    index.html       ← required entry point
    hook.md          ← required title/cover section
    slides.md        ← required main content
    intro.md         ← optional local intro (if not using shared)
    assets/          ← talk-specific assets (optional)

1. Create a new folder talks/your-talk-name/
2. Copy index.html from an existing talk and update the <title> tag
3. Add hook.md and slides.md
4. Choose intro strategy:
   • Local intro: data-markdown="intro.md"
   • Shared intro: data-markdown="../shared/intro.md"
5. Use assets from either:
   • Local: ./assets/...
   • Shared: ../shared/assets/...
6. Run npm run extract (or npm run dev / npm run build) to regenerate data/slides.json

data/slides.json is generated automatically by scripts/extractSlideData.js.

---

Reveal.js Plugins

This project uses 6 powerful plugins to enhance presentations:

1. 🎨 Highlight Plugin

Syntax highlighting for code blocks with line numbers.

<pre><code data-line-numbers="1-3|4-6">
function example() {
  console.log("Hello");
}
</code></pre>

Features:

• Automatic syntax highlighting
• Line numbers: data-line-numbers
• Highlight ranges: data-line-numbers="1,3-5"

2. 📝 Markdown Plugin

Write slides in Markdown instead of HTML.

<section
  data-markdown="slides.md"
  data-separator="^\n---\n$"
  data-separator-vertical="^\n--\n$"
></section>

Separators:

• --- = New horizontal slide
• -- = New vertical slide

3. 🗣️ Speaker Notes Plugin

Displays speaker notes in a separate window.

In Markdown:

## Slide Title

Slide content here

Note:
These are speaker notes visible only to the presenter

Usage:

1. Start dev server: npm run dev
2. Open: http://localhost:8000/talks/your-talk-name/index.html
3. Press S key to open speaker notes window

⚠️ Important: Must access via http://localhost:8000 (not file://)

Features:

• Current/next slide preview
• Timer
• Notes display

4. ∑ Math Plugin

Render mathematical equations using KaTeX.

Inline math:

Einstein's equation: $E = mc^2$

Block math:

$$
\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x)
$$

5. 🔍 Zoom Plugin

Zoom into slide elements for detail.

Usage:

• Mac/Windows: Alt + Click on any element
• Linux: Ctrl + Click on any element
• Exit: Press ESC or click again

Works with: Images, GIFs, diagrams, code blocks

Visual feedback:

• Zoom cursor (🔍) appears on hover
• Subtle glow effect on images
• Smooth 2x zoom animation

6. 🔎 Search Plugin

Search text across all slides.

Usage:

• Shortcut: Ctrl + Shift + F (works on Mac & Windows)
• Or click search icon (top right)
• Type search term and press Enter
• Navigate with ↑↓ arrows

⚠️ Note: Use Ctrl (not Cmd) on Mac to avoid browser conflicts

Features:

• Searches all slides
• Highlights matches
• Auto-navigation to results

---

Plugin Installation

All plugins are already configured in this project. For new talks, include:

<!-- Load plugins -->
<script src="../dist/reveal.js"></script>
<script src="../plugin/markdown/markdown.js"></script>
<script src="../plugin/highlight/highlight.js"></script>
<script src="../plugin/notes/notes.js"></script>
<script src="../plugin/math/math.js"></script>
<script src="../plugin/zoom/zoom.js"></script>
<script src="../plugin/search/search.js"></script>

<!-- Initialize -->
<script>
  Reveal.initialize({
    plugins: [
      RevealMarkdown,
      RevealHighlight,
      RevealNotes,
      RevealMath.KaTeX,
      RevealZoom,
      RevealSearch,
    ],
  });
</script>

---

Quick Tips

1. Highlight + Markdown: Code blocks in markdown auto-highlight
2. Notes + Markdown: Use Note: keyword for speaker notes
3. Math + Markdown: Math syntax works in markdown slides
4. Zoom: Great for showing diagram/code details during talks
5. Search: Useful during Q&A to quickly find slides

---

Project Structure

CSS Organization

Stylesheets are organized in css/ directory:

Main Files:

• reveal.scss → compiled to dist/reveal.css (for presentations)
• landing.scss → compiled to dist/landing.css (for landing page)

Shared Modules: (prefixed with _)

• _variables.scss - Global colors, theme settings
• _animations.scss - Keyframe animations
• _reveal-customizations.scss - Custom utilities, corner glow effects

Subdirectories:

• print/ - Print and PDF export styles
• talks/ - Talk-specific custom styles
• theme/ - Reveal.js themes (black, white, etc.)

Build CSS:

npm run build    # Build all assets
gulp css         # Build CSS only

Customize:

• Colors/effects → Edit css/_variables.scss
• Utilities → Edit css/_reveal-customizations.scss
• Talk styles → Create file in css/talks/

---

About reveal.js

reveal.js is an open source HTML presentation framework. For more information, visit revealjs.com.

---

reveal.js is MIT licensed | Copyright © 2011-2022 Hakim El Hattab