├── diagrams ├── dns-resolution.puml ├── https-handshake.dot └── https-handshake.txt ├── slides.md ├── theme.json ├── README.md └── justfile /diagrams/dns-resolution.puml: -------------------------------------------------------------------------------- 1 | @startuml 2 | hide footbox 3 | autonumber 4 | title Simple DNS Resolution Flow 5 | 6 | actor "User" as user 7 | participant "Browser" as browser 8 | participant "Local DNS Resolver" as resolver 9 | participant "DNS Server" as dns 10 | 11 | == DNS Query Process == 12 | user -> browser: Enter example.com 13 | browser -> resolver: Lookup example.com 14 | 15 | resolver -> dns: Query example.com 16 | note right: If not in cache,\nask DNS server 17 | dns --> resolver: Return IP (203.0.113.1) 18 | 19 | resolver --> browser: Return IP address 20 | browser --> user: Load website 21 | 22 | note over resolver: Cache result for future use 23 | 24 | @enduml 25 | -------------------------------------------------------------------------------- /diagrams/https-handshake.dot: -------------------------------------------------------------------------------- 1 | digraph { 2 | rankdir=LR; 3 | compound=true; 4 | splines=true; 5 | node [fontname="Handlee"]; 6 | 7 | subgraph cluster_client { 8 | label="Client"; 9 | client [label="Browser"]; 10 | } 11 | 12 | subgraph cluster_server { 13 | label="Server"; 14 | server [label="Web Server"]; 15 | cert [label="Certificate\nPublic Key"]; 16 | } 17 | 18 | client -> server [label="1. Client Hello\n(TLS version, cipher suites)"]; 19 | server -> client [label="2. Server Hello\n(chosen TLS version & cipher)"]; 20 | server -> client [label="3. Send Certificate"]; 21 | client -> server [label="4. Client Key Exchange\n(encrypted pre-master secret)"]; 22 | client -> server [label="5. Change Cipher Spec"]; 23 | client -> server [label="6. Finished"]; 24 | server -> client [label="7. Change Cipher Spec"]; 25 | server -> client [label="8. Finished"]; 26 | 27 | {rank=same; client server} 28 | } 29 | -------------------------------------------------------------------------------- /slides.md: -------------------------------------------------------------------------------- 1 | --- 2 | theme: theme.json 3 | author: Author Name 4 | date: MMMM dd, YYYY 5 | paging: Slide %d / %d 6 | --- 7 | 8 | ```bash 9 | ~~~just intro Title with Figlet 10 | This will render the presnetation title. 11 | ~~~ 12 | ``` 13 | 14 | --- 15 | 16 | ```bash 17 | ~~~just intro_toilet Alternative Title with Toilet 18 | This will render the presnetation title. 19 | ~~~ 20 | ``` 21 | 22 | --- 23 | 24 | 25 | ## Example Diagram with GraphEasy 26 | 27 | ```bash 28 | ~~~just digraph https-handshake 29 | It will be overriden by command output. The `https-handshake` is the name of digraph diagram to render. 30 | ~~~ 31 | ``` 32 | 33 | --- 34 | 35 | ## Example Diagram with PlantUML 36 | 37 | ```bash 38 | ~~~just plantuml dns-resolution 39 | It will be overriden by command output. the `dns-resolution` is the name of PlantUML diagram to render. 40 | ~~~ 41 | ``` 42 | --- 43 | 44 | ## We can execute code in slides 45 | 46 | > Hit `Ctrl + e` to execute the below code block 47 | 48 | ```bash 49 | ls -lah --color=always 50 | ``` 51 | --- 52 | 53 | ### Or run programs 54 | 55 | ```go 56 | package main 57 | 58 | import "fmt" 59 | 60 | func main() { 61 | fmt.Println("Hello, World!") 62 | } 63 | ``` 64 | 65 | --- 66 | 67 | # Demo 68 | 69 | ```bash 70 | ~~~just demo Let's Demo Something Cool 71 | Another text box for demo title. 72 | ~~~ 73 | ``` 74 | -------------------------------------------------------------------------------- /theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "document": { 3 | "block_prefix": "\n", 4 | "block_suffix": "\n", 5 | "color": "#f8f8f2", 6 | "margin": 2 7 | }, 8 | "block_quote": { 9 | "color": "#f1fa8c", 10 | "indent": 1, 11 | "indent_token": "│ " 12 | }, 13 | "paragraph": { 14 | }, 15 | "list": { 16 | "level_indent": 2, 17 | "bold": false 18 | }, 19 | "heading": { 20 | "block_suffix": "\n", 21 | "color": "39", 22 | "bold": true 23 | }, 24 | "h1": { 25 | "prefix": "██ ", 26 | "suffix": " ", 27 | "color": "#9fc", 28 | "bold": true 29 | }, 30 | "h2": { 31 | "prefix": "▓▓▓ ", 32 | "color": "#1cc" 33 | }, 34 | "h3": { 35 | "prefix": "▒▒▒▒ ", 36 | "color": "#29c" 37 | }, 38 | "h4": { 39 | "color": "#559", 40 | "prefix": "░░░░░ " 41 | }, 42 | "h5": {}, 43 | "h6": {}, 44 | "text": { 45 | "bold": true 46 | }, 47 | "strikethrough": { 48 | "crossed_out": true 49 | }, 50 | "emph": { 51 | "italic": true 52 | }, 53 | "strong": { 54 | "bold": true 55 | }, 56 | "hr": { 57 | "color": "240", 58 | "format": "\n--------\n" 59 | }, 60 | "item": { 61 | "block_prefix": "\n", 62 | "prefix": "🠶 ", 63 | "bold": true, 64 | "color": "#559" 65 | }, 66 | "enumeration": { 67 | "block_prefix": ". " 68 | }, 69 | "task": { 70 | "ticked": "[✓] ", 71 | "unticked": "[ ] " 72 | }, 73 | "link": { 74 | "color": "30", 75 | "underline": true 76 | }, 77 | "link_text": { 78 | "color": "35", 79 | "bold": true 80 | }, 81 | "image": { 82 | "color": "212", 83 | "underline": true 84 | }, 85 | "image_text": { 86 | "color": "243", 87 | "format": "Image: {{.text}} →" 88 | }, 89 | "code": { 90 | "prefix": " ", 91 | "suffix": " ", 92 | "color": "203", 93 | "background_color": "236" 94 | }, 95 | "code_block": { 96 | "theme": "dracula", 97 | "margin": 4 98 | }, 99 | "table": { 100 | "center_separator": "┼", 101 | "column_separator": "│", 102 | "row_separator": "─" 103 | }, 104 | "definition_list": {}, 105 | "definition_term": {}, 106 | "definition_description": { 107 | "block_prefix": "\n🠶 " 108 | }, 109 | "html_block": {}, 110 | "html_span": {} 111 | } 112 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Terminal Slides Template 2 | 3 | Terminal Slides Template is a simple template for creating terminal-based 4 | presentations using the `slides` tool with a few scripts in a `justfile`. 5 | 6 | ## Prerequisites 7 | 8 | Ensure you have the following tools installed on your system: 9 | 10 | - **[just](https://github.com/casey/just)**: Used for executing predefined commands in a `justfile`, simplifying the setup and command execution for the slides. 11 | - **[slides](https://maaslalani.com/slides/)**: The core tool that renders Markdown slides in the terminal, allowing for dynamic content through command execution within the slides. 12 | - **[PlantUML](http://plantuml.com/starting)** (Optional): For rendering UML diagrams within the slides. 13 | - **[Graph::Easy](https://metacpan.org/dist/Graph-Easy/view/bin/graph-easy)** (Optional): A Perl module for rendering ASCII graphs and diagrams. 14 | - `cpan install Graph::Easy` 15 | 16 | ## Getting Started 17 | 18 | 1. **Use the repository template**: Start by cloning or creating a new repo. 19 | 20 | ```bash 21 | gh repo create --template piotr1215/terminal-slides-template --private your-slides-repo --clone 22 | ``` 23 | 24 | > [!IMPORTANT] 25 | > 2. **Set Execution Permissions**: Ensure that both `slides.md` and the `justfile` have execution permissions. This can be done with the following command: 26 | 27 | ```bash 28 | chmod +x slides.md justfile 29 | ``` 30 | 31 | This step is crucial for allowing the slides tool to execute commands specified in your Markdown slides. 32 | 33 | 3. **Optionally create diagrams**: Create new `plantuml` or `graph-easy` files in the `diagrams`. On presentation load, those diagrams will be rendered and output displayed in 34 | the slides. 35 | 36 | 4. **Update the Slides**: Update the `slides.md` file with your presentation content. The slides are written in Markdown, with the ability to execute commands within the slides. For example, you can include the output of a command in your slides using the following syntax: 37 | 38 | ````markdown 39 | ```bash 40 | $ echo "Hello, World!" 41 | Hello, World! 42 | ``` 43 | ```` 44 | 45 | The command will be executed, and the output will be displayed in the slides. 46 | 47 | 5. **Run Your Presentation**: With `slides` installed and execution permissions set, you can now run your presentation using the following command: 48 | 49 | ```bash 50 | just present AuthorName 51 | ``` 52 | 53 | ## Note on diagrams 54 | 55 | As a rule of thumb, use `PlantUML` to render sequence diagrams and `graph-easy` to render component diagrams. 56 | 57 | ## Customize theme 58 | 59 | The `theme.json` file is a [glamour-compatible](https://github.com/charmbracelet/glamour/tree/master/styles) theme file that can be used to customize the appearance of the slides. You can modify the colors, fonts, and other style elements 60 | to suit your preferences. 61 | 62 | ## Contributions and Feedback 63 | 64 | Feel free to contribute to this template by submitting pull requests or issues. 65 | -------------------------------------------------------------------------------- /justfile: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env -S just --justfile 2 | 3 | # confgiuration 4 | replace := if os() == "linux" { "sed -i"} else { "sed -i '' -e" } 5 | diagrams := justfile_directory() + "/diagrams" 6 | 7 | # show all the justfile recipes 8 | default: 9 | @just --list 10 | 11 | # change presentation author in the slides 12 | change_author author: 13 | #!/usr/bin/env bash 14 | {{replace}} '/^author: /s/:.*/: {{author}}/' slides.md 15 | 16 | # run the presentation 17 | present author: (change_author author) 18 | @slides ./slides.md 19 | 20 | # list all the figlet fonts 21 | list_figlet_fonts: 22 | #!/usr/bin/env bash 23 | if command -v figlet &>/dev/null; then 24 | showfigfonts 25 | else 26 | echo "figlet not installed" 27 | fi 28 | 29 | # list all the toilet fonts 30 | list_toilet_formats_filters: 31 | #!/usr/bin/env bash 32 | if command -v toilet &>/dev/null; then 33 | toilet -F list 34 | echo "" 35 | toilet -E list 36 | else 37 | echo "toilet not installed" 38 | fi 39 | 40 | # list all the boxes 41 | list_boxes: 42 | #!/usr/bin/env bash 43 | if command -v boxes &>/dev/null; then 44 | boxes -l 45 | else 46 | echo "boxes not installed" 47 | fi 48 | 49 | # run graphasy diagram 50 | plantuml diagram: 51 | #!/usr/bin/env bash 52 | export diagram="{{diagram}}" 53 | if command -v plantuml &>/dev/null; then 54 | java -jar /usr/local/bin/plantuml.jar {{diagrams}}/"$diagram".puml -utxt 55 | mv {{diagrams}}/"$diagram".utxt /tmp/"$diagram".utxt 56 | cat /tmp/"$diagram".utxt 57 | else 58 | echo " " 59 | fi 60 | 61 | # run graphasy diagram 62 | digraph diagram: 63 | #!/usr/bin/env bash 64 | export diagram="{{diagram}}" 65 | if command -v graph-easy &>/dev/null; then 66 | graph-easy {{diagrams}}/"$diagram".dot --as=boxart > {{diagrams}}/"$diagram".txt 67 | cat {{diagrams}}/"$diagram".txt 68 | else 69 | echo " " 70 | fi 71 | 72 | # show freetext 73 | freetext *free_text: 74 | #!/usr/bin/env bash 75 | export title="{{free_text}}" 76 | if command -v figlet &>/dev/null && command -v boxes &>/dev/null; then 77 | echo "$title" | figlet -f pagga -w 200 | boxes -d peek 78 | else 79 | echo "$title" 80 | fi 81 | 82 | # show ending ascii 83 | demo *demo_title: 84 | #!/usr/bin/env bash 85 | export title="{{demo_title}}" 86 | if command -v figlet &>/dev/null && command -v boxes &>/dev/null; then 87 | echo "$title" | figlet -f pagga -w 200 | boxes -d peek 88 | else 89 | echo "$title" 90 | fi 91 | 92 | # show intro ascii using figlet 93 | intro *pres_title: 94 | #!/usr/bin/env bash 95 | export title="{{pres_title}}" 96 | 97 | if command -v figlet &>/dev/null && command -v boxes &>/dev/null; then 98 | echo "$title" | figlet -f future -w 200 | boxes -d peek 99 | else 100 | echo "$title" 101 | fi 102 | 103 | # show intro ascii using toilet 104 | intro_toilet *pres_title: 105 | #!/usr/bin/env bash 106 | export title="{{pres_title}}" 107 | if command -v toilet &>/dev/null && command -v boxes &>/dev/null; then 108 | echo "$title" | toilet -f mono9 -w 250 --filter border 109 | else 110 | echo "$title" 111 | fi 112 | -------------------------------------------------------------------------------- /diagrams/https-handshake.txt: -------------------------------------------------------------------------------- 1 | ┌−−−−−−−−−−−−−−−−−┐ 2 | ╎ Server ╎ 3 | ╎ ╎ 4 | ╎ ┌─────────────┐ ╎ 5 | ╎ │ Certificate │ ╎ 6 | ╎ │ Public Key │ ╎ ┌───────────────────────────────────────────────────────┐ 7 | ╎ └─────────────┘ ╎ │ │ 8 | ╎ ╎ │ │ 9 | └−−−−−−−−−−−−−−−−−┘ │ │ 10 | │ │ 11 | │ 7. Change Cipher Spec │ 4. Client Key Exchange 12 | │ ┌──────────────────────────────────────────┐ │ (encrypted pre-master secret) 13 | │ ▼ │ ▼ 14 | ┌−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−┐ ┌−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−┐ 15 | ╎ Client ╎ ╎ ╎ 16 | ╎ ╎ ╎ ╎ 17 | ╎ ┌────────────────────────────┐ ╎ 3. Send Certificate ╎ ┌──────────────────────────────────────────────────────────────────────┐ ╎ 18 | ╎ │ │ ╎ ◀─────────────────────────────── ╎ │ │ ╎ 19 | ╎ │ │ ╎ ╎ │ │ ╎ 20 | ╎ │ │ ╎ 8. Finished ╎ │ │ ╎ 21 | ╎ │ Browser │ ╎ ◀─────────────────────────────── ╎ │ Web Server │ ╎ 22 | ╎ │ │ ╎ ╎ │ │ ╎ 23 | ╎ │ │ ╎ 2. Server Hello ╎ │ │ ╎ 24 | ╎ │ │ ╎ (chosen TLS version & cipher) ╎ │ │ ╎ 25 | ╎ │ │ ╎ ◀─────────────────────────────── ╎ │ │ ╎ 26 | ╎ └────────────────────────────┘ ╎ ╎ └──────────────────────────────────────────────────────────────────────┘ ╎ 27 | ╎ ╎ ╎ ╎ 28 | └−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−┘ └−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−┘ 29 | │ │ │ ▲ ▲ ▲ 30 | │ │ │ 6. Finished │ │ │ 1. Client Hello 31 | │ │ └──────────────────────────────────────────┘ │ 5. Change Cipher Spec │ (TLS version, cipher suites) 32 | │ │ │ │ 33 | │ │ │ │ 34 | │ └───────────────────────────────────────────────────────┘ │ 35 | │ │ 36 | │ │ 37 | └──────────────────────────────────────────────────────────────────────────────────────────────────────────┘ 38 | --------------------------------------------------------------------------------