├── .gitignore
├── README.md
├── data
├── example.md
├── index.template
└── prefix.md
├── go.mod
├── go.sum
├── release.sh
├── ssh-external-win.go
├── ssh-external.go
├── ssh-internal.go
├── tech-talk.go
└── www
├── amy.gif
├── favicon.png
├── script.js
├── style.css
└── wetty
├── hterm_all.js
├── index.html
└── wetty.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | bindata.go
3 | tech-talk
4 | tech-talk.exe
5 | vendor
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Tech Talk
2 |
3 | An opinionated Markdown-based technical slideshow tool with a built-in terminal that just works.
4 |
5 | 
6 |
7 | - Write your slides with [Markdown](https://github.com/gnab/remark/wiki/Markdown)
8 | - Built-in terminal (both local or via SSH)
9 | - Supports presenter mode with notes & timer, cloned displays, etc.
10 | - Simple, self-contained executable for Winows, Mac & Linux
11 | - PDF export with your browser's built-in print to PDF
12 | - Trivial to customize and distribute within your company
13 |
14 | ## Usage
15 |
16 | Start by downloading a [release](https://github.com/danielgtaylor/tech-talk/releases) or your company's variant. You probably want to put it into `/usr/local/bin/tech-talk` on Mac / Linux. On Windows you can save `tech-talk.exe` anywhere as it is fully self-contained / portable.
17 |
18 | ```sh
19 | # See a demo slideshow
20 | tech-talk
21 |
22 | # Use your own slides
23 | tech-talk slides.md
24 |
25 | # Use SSH to connect to some server for the terminal
26 | tech-talk -host user@hostname slides.md
27 |
28 | # Custom ports are also allowed
29 | tech-talk -host user@hostname:port slides.md
30 |
31 | # Windows users must pass an authentication method as an internal SSH
32 | # mechanism is used instead of OpenSSH. Keys are recommended over passwords.
33 | tech-talk -host user@hostname -pass cleartext-password slides.md
34 | tech-talk -host user@hostname -key id_rsa slides.md
35 | tech-talk -host user@hostname -key my-key.pem slides.md
36 |
37 | # Mac / Linux users can force the use of the internal SSH client and use the
38 | # same options that Windows users would use from above.
39 | tech-talk -ssh internal ...
40 | ```
41 |
42 | Then go to [http://localhost:4000/](http://localhost:4000/) to view.
43 |
44 | ## Customization
45 |
46 | Sending around boilerplate or configs to everyone sucks. Build your own self-contained executable with your company's theme and let people focus on making great talks.
47 |
48 | First you'll want to install [Go](https://golang.org/). Then:
49 |
50 | ```sh
51 | mkdir -p $GOPATH/src/github.com/danielgtaylor
52 | cd $GOPATH/src/github.com/danielgtaylor
53 | git clone https://github.com/danielgtaylor/tech-talk.git
54 | cd tech-talk
55 | go install
56 | ```
57 |
58 | Now, make your customizations!
59 |
60 | - [Slideshow prefix (prepended to first slide)](https://github.com/danielgtaylor/tech-talk/tree/master/data/prefix.md)
61 | - [Stylesheet (fonts, colors, layout, etc)](https://github.com/danielgtaylor/tech-talk/tree/master/www/style.css)
62 | - [Javascript (transitions)](https://github.com/danielgtaylor/tech-talk/tree/master/www/script.js)
63 | - [Terminal default font size](https://github.com/danielgtaylor/tech-talk/tree/master/www/wetty/wetty.js)
64 | - [Example slideshow](https://github.com/danielgtaylor/tech-talk/tree/master/data/example.md)
65 | - [HTML template](https://github.com/danielgtaylor/tech-talk/blob/master/data/index.template)
66 |
67 | Once you are ready:
68 |
69 | ```sh
70 | # Build for your OS and test
71 | ./build.sh
72 | ./tech-talk
73 |
74 | # Or, cross-compile, e.g:
75 | GOOS=linux GOARCH=386 ./build.sh
76 |
77 | # Automated release (cross-compile to supported platforms):
78 | ./release.sh
79 | ```
80 |
81 | Remember to run `./build.sh` each time you make a change, and your browser may cache items so Cmd+Shift+R or Ctrl+Shift+R to force a refresh are useful.
82 |
83 | Now you can upload your executables somewhere like Google Drive and share them within the company.
84 |
85 | ## Acknowledgments
86 |
87 | This project is possible because of the amazing work done by many people in the following projects, many of which are used with slight modifications or custom settings:
88 |
89 | - [Remark.js](https://github.com/gnab/remark#remark)
90 | - [Socket.io](https://github.com/googollee/go-socket.io)
91 | - [pty](https://github.com/kr/pty)
92 | - [Wetty](https://github.com/krishnasrinivas/wetty)
93 | - [crypto/ssh](https://godoc.org/golang.org/x/crypto/ssh)
94 |
95 | So, how does this beast work? Simple, really. It starts both a web server and Socket.IO server, renders an index page with Remark.js using the user-supplied Markdown, which in turn contains an `iframe` with a terminal that uses the socket to communicate with a PTY running either a login shell or `ssh` session. For the internal SSH client there is no client-side PTY but instead a couple pipes through an SSH connection.
96 |
97 | ## License
98 |
99 | https://dgt.mit-license.org/
100 |
--------------------------------------------------------------------------------
/data/example.md:
--------------------------------------------------------------------------------
1 | # Sample Tech Talk
2 |
3 | This is an example. Press ⇨ to continue.
4 |
5 | [View example source](https://github.com/danielgtaylor/tech-talk/blob/master/data/example.md)
6 |
7 | ---
8 |
9 | # Slide Title
10 |
11 | Slides support Markdown content. **Strong** and *emphasized* text, [links](https://github.com/danielgtaylor/tech-talk), lists, tables, and code syntax highlighting.
12 |
13 | 1. List item
14 | 2. Another item
15 | 3. Just use standard Markdown!
16 |
17 | ```js
18 | // Code example using Javascript
19 | const pi = 3.14159;
20 | let r = 10;
21 |
22 | console.log(2 * pi * r * r);
23 | ```
24 |
25 | [More formatting info](https://github.com/gnab/remark/wiki/Markdown)
26 |
27 | ---
28 |
29 | # Navigation
30 |
31 | Key | Description
32 | --- | -----------
33 | ⇨ | Move to next slide (spacebar also works)
34 | ⇦ | Move to previous slide
35 | ~ | Show terminal (any selected text is copy/pasted)
36 | f | Go to fullscreen mode
37 | esc | Exit fullscreen mode
38 | p | Go to presenter mode (to show slide notes)
39 | c | Clone window (to display current slide)
40 |
41 | ---
42 |
43 | # Incremental slide
44 |
45 | Partial slide updates are also supported by using the `--` delimiter or by simply using the same slide title.
46 |
47 | - A list
48 | - Of items
49 | --
50 |
51 | - One more item
52 | --
53 |
54 | - And one last one!
55 |
56 | But you aren't limited to just list items.
57 |
58 | ---
59 |
60 | # Math & Formulas
61 |
62 | Complex formulas are easy to display with [AsciiMath](http://asciimath.org/#syntax) using `%%`, or Tex / LaTeX using `$$` delimiters thanks to MathJax.
63 |
64 | .center[
65 | **AsciiMath example**
66 |
67 | %%i = sum(1.65 \* 0.000125^(o - 1) \* (1 - 2.718^(-0.04t) / 4.15) \* (7490duz) / (100h))%%
68 | ]
69 |
70 | .center[
71 | **LaTeX example**
72 | $$ax^2 + bx + c = 0$$
73 | ]
74 |
75 | ---
76 |
77 | # Images & Videos
78 |
79 | Assets in the same folder as the Markdown slides can be referenced relative to the root of the server.
80 |
81 | .center[
82 | ]
83 |
84 | ```html
85 | Tech Talk
5 | Wetty - The WebTTY Terminal Emulator
7 |
8 |
9 |
10 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/www/wetty/wetty.js:
--------------------------------------------------------------------------------
1 | var term;
2 | var socket = io(location.origin, {path: '/wetty/socket.io'})
3 | var buf = '';
4 |
5 | function Wetty(argv) {
6 | this.argv_ = argv;
7 | this.io = null;
8 | this.pid_ = -1;
9 | }
10 |
11 | Wetty.prototype.run = function() {
12 | this.io = this.argv_.io.push();
13 |
14 | this.io.onVTKeystroke = this.sendString_.bind(this);
15 | this.io.sendString = this.sendString_.bind(this);
16 | this.io.onTerminalResize = this.onTerminalResize.bind(this);
17 | }
18 |
19 | Wetty.prototype.sendString_ = function(str) {
20 | socket.emit('input', str);
21 | };
22 |
23 | Wetty.prototype.onTerminalResize = function(col, row) {
24 | socket.emit('resize', { col: col, row: row });
25 | };
26 |
27 | socket.on('connect', function() {
28 | lib.init(function() {
29 | hterm.defaultStorage = new lib.Storage.Local();
30 | term = new hterm.Terminal();
31 | window.term = term;
32 | term.decorate(document.getElementById('terminal'));
33 |
34 | term.setCursorPosition(0, 0);
35 | term.setCursorVisible(true);
36 | term.prefs_.set('font-size', 20);
37 | term.prefs_.set('ctrl-c-copy', true);
38 | term.prefs_.set('ctrl-v-paste', true);
39 | term.prefs_.set('use-default-window-copy', true);
40 |
41 | term.runCommandClass(Wetty, document.location.hash.substr(1));
42 | socket.emit('resize', {
43 | col: term.screenSize.width,
44 | row: term.screenSize.height
45 | });
46 |
47 | if (buf && buf != '')
48 | {
49 | term.io.writeUTF16(buf);
50 | buf = '';
51 | }
52 | });
53 | });
54 |
55 | socket.on('output', function(data) {
56 | if (!term) {
57 | buf += data;
58 | return;
59 | }
60 | term.io.writeUTF16(data);
61 | });
62 |
63 | socket.on('disconnect', function() {
64 | console.log("Socket.io connection closed");
65 | });
66 |
67 | // Support sending text from outside iframe
68 | window.addEventListener("message", (msg) => {
69 | if (msg.data && msg.data.target && msg.data.target.includes("metamask")) {
70 | return;
71 | }
72 | socket.emit("input", msg.data);
73 | term.focus();
74 | });
75 |
--------------------------------------------------------------------------------
86 |
87 | ```
88 |
89 | ---
90 | class: center, middle
91 |
92 | Optional classes can control layout
93 |
94 | Now go and give great tech talks!
95 |
--------------------------------------------------------------------------------
/data/index.template:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |