# prototracer/bash-scripting architecture

> Architecture diagram of the GitHub repository prototracer/bash-scripting, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/prototracer/bash-scripting
- Repository: https://github.com/prototracer/bash-scripting

## Overview

This is a browser-based workshop presentation. A presenter navigates slide content; the script updates presentation state and related UI, while providing facilitation tools such as notes and per-slide timers. The tree contains no README, and the source excerpt is partial, so the graph focuses on behavior directly supported by the available files.

Main entry points: [`script.js`](https://github.com/prototracer/bash-scripting/blob/main/script.js) (Presentation controller), [`index.html`](https://github.com/prototracer/bash-scripting/blob/main/index.html) (Slide content), [`styles.css`](https://github.com/prototracer/bash-scripting/blob/main/styles.css) (Presentation styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Presentation"]
  node_slides["Slide content<br/>[index.html]"]
  node_controller["Presentation controller<br/>[script.js]"]
  node_styling["Presentation styling<br/>[styles.css]"]
  node_roadmap["Visited roadmap<br/>[script.js]"]
end

subgraph group_facilitation["Facilitation tools"]
  node_notes["Speaker notes<br/>[script.js]"]
  node_timer["Slide timer<br/>[script.js]"]
  node_code["Code display and copy<br/>[script.js]"]
end

subgraph group_browser["Browser features"]
  node_browserapis["Browser APIs"]
end

node_presenter(("Presenter"))

node_presenter -->|"navigates and controls"| node_controller
node_slides -->|"provides slide DOM"| node_controller
node_controller -->|"updates presentation"| node_slides
node_styling -->|"styles"| node_slides
node_controller -->|"updates visited badges"| node_roadmap
node_controller -->|"updates notes"| node_notes
node_controller -->|"sets up slide timer"| node_timer
node_controller -->|"triggers typing effect"| node_code
node_code -->|"copies via clipboard"| node_browserapis
node_timer -->|"plays completion tone"| node_browserapis
node_controller -->|"toggles fullscreen"| node_browserapis

click node_slides "https://github.com/prototracer/bash-scripting/blob/main/index.html"
click node_controller "https://github.com/prototracer/bash-scripting/blob/main/script.js"
click node_styling "https://github.com/prototracer/bash-scripting/blob/main/styles.css"
click node_roadmap "https://github.com/prototracer/bash-scripting/blob/main/script.js"
click node_notes "https://github.com/prototracer/bash-scripting/blob/main/script.js"
click node_timer "https://github.com/prototracer/bash-scripting/blob/main/script.js"
click node_code "https://github.com/prototracer/bash-scripting/blob/main/script.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_slides,node_controller,node_styling,node_roadmap toneBlue
class node_notes,node_timer,node_code toneAmber
class node_browserapis toneMint
class node_presenter toneIndigo
```

## Components

### Presentation

- [Slide content](https://github.com/prototracer/bash-scripting/blob/main/index.html): `index.html`
- [Presentation controller](https://github.com/prototracer/bash-scripting/blob/main/script.js): `script.js`
- [Presentation styling](https://github.com/prototracer/bash-scripting/blob/main/styles.css): `styles.css`
- [Visited roadmap](https://github.com/prototracer/bash-scripting/blob/main/script.js): `script.js`

### Facilitation tools

- [Speaker notes](https://github.com/prototracer/bash-scripting/blob/main/script.js): `script.js`
- [Slide timer](https://github.com/prototracer/bash-scripting/blob/main/script.js): `script.js`
- [Code display and copy](https://github.com/prototracer/bash-scripting/blob/main/script.js): `script.js`

### Browser features

- **Browser APIs**

### Other components

- **Presenter**

## Connections

- Presenter → Presentation controller: navigates and controls
- Slide content → Presentation controller: provides slide DOM
- Presentation controller → Slide content: updates presentation
- Presentation styling → Slide content: styles
- Presentation controller → Visited roadmap: updates visited badges
- Presentation controller → Speaker notes: updates notes
- Presentation controller → Slide timer: sets up slide timer
- Presentation controller → Code display and copy: triggers typing effect
- Code display and copy → Browser APIs: copies via clipboard
- Slide timer → Browser APIs: plays completion tone
- Presentation controller → Browser APIs: toggles fullscreen