dgageot / demoit

Live coding demos without Context Switching

DemoIt

DemoIt is a tool that helps you create beautiful live-coding demonstrations.

Why?

I'm doing lots of live-coding during conferences and I like tools like reveal.js to create slides. What I wanted was a tool that has some of the properties of reveal.js but with capabilities to code and run commands in front of the audience.

Two things are really important to me:

• For a given presentation, the slides should live in the same repository as the code.
• The tool should allow context-switching-less live coding demos. Attendees don't want to watch me switching between a browser, an IDE and a terminal all the time.

This is how I came up with DemoIt.

How?

DemoIt is a small command line tool written in Go. It serves rich web content composed of text, images and smart web components.

Those web components make most of the magic.

• One component displays multi-tab ttys that can be used to run any command.
• Another is a web browser view that auto refreshes itself.
• Another is a code viewer with highlighing and tabs that looks like a real IDE,

Install

Download binary from GitHub

curl -L -odemoit https://github.com/dgageot/demoit/releases/download/v1.0/demoit-`uname -s | tr '[:upper:]' '[:lower:]'`-`uname -m`
sudo install demoit /usr/local/bin/demoit

Add shell font

To have a correct display in the web terminal, it's better to install the font Inconsolata for Powerline on your computer. This font can be found here.

Get started from a Sample

# Create an empty directory
cd $HOME; mkdir my-demoit-presentation; cd $HOME/my-demoit-presentation
# Download a sample demo
curl -L https://github.com/dgageot/demoit/archive/master.tar.gz | tar xvf - --strip-components=2 demoit-master/sample
# Run demoit
demoit

Then, browse to http://localhost:8888

Pro tip: Run demoit -dev instead and enjoy live reload each time you change the content of the slides.

How do I customize my presenttion then?

Basically, the idea is to:

• Write content in demoit.html at the root of the project. This file contains all the html slides separated with ---.
• Add images, fonts and scripts in the .demoit folder at the root of the project.
• Customize the style sheet in .demoit/style.css.

Contribute

Build from sources

git clone https://github.com/dgageot/demoit.git
cd demoit
go install

This requires Go 1.19 or later.

demoit's Issues

Regression: checks for ".demoit" in wrong folder

$ cd $HOME/go/src/github.com/dgageot/demoit
$ cd sample
$ demoit

-> works.

$ cd $HOME/go/src/github.com/dgageot/demoit
$ demoit sample
mandatory resource folder ".demoit": .demoit doesn't exist

-> fail :(

HTTP server panic "slice bounds out of range"

I've been trying to set up a new project, but whenever I create a new project that's not called sample the HTTP server panics and dies the first time I try to view the page locally.

Steps to reproduce

1. Clone the repository
2. Create a new directory inside the repo, e.g. mkdir myproject
3. Copy sample content from sample project into my new project, cp -prf sample/* myproject/*
4. Run webserver: demoit myproject
5. Open http://localhost:8888 in web browser and receive logs:

❯ demoit myproject
2019/10/18 16:30:03 Permitting clients to write input to the PTY.
2019/10/18 16:30:03 Welcome to DemoIt. Please, open http://localhost:8888
2019/10/18 16:30:03 "Dev Mode" to live reload your slides can be enabled with '--dev'
2019/10/18 16:30:03 HTTP server is listening at: http://127.0.0.1:9999/
2019/10/18 16:30:11 127.0.0.1:62745 200 GET /
2019/10/18 16:30:11 127.0.0.1:62748 200 GET /auth_token.js
2019/10/18 16:30:11 127.0.0.1:62749 200 GET /config.js
2019/10/18 16:30:11 127.0.0.1:62745 200 GET /css/index.css
2019/10/18 16:30:11 127.0.0.1:62747 200 GET /css/xterm_customize.css
2019/10/18 16:30:11 127.0.0.1:62746 200 GET /css/xterm.css
2019/10/18 16:30:11 127.0.0.1:62750 200 GET /js/gotty-bundle.js
2019/10/18 16:30:11 127.0.0.1:62750 200 GET /
2019/10/18 16:30:11 New client connected: 127.0.0.1:62751, connections: 1/0
2019/10/18 16:30:11 127.0.0.1:62750 200 GET /favicon.png
2019/10/18 16:30:11 127.0.0.1:62750 304 GET /css/index.css
2019/10/18 16:30:11 127.0.0.1:62746 304 GET /css/xterm_customize.css
2019/10/18 16:30:11 127.0.0.1:62750 304 GET /css/xterm.css
2019/10/18 16:30:11 127.0.0.1:62747 200 GET /auth_token.js
2019/10/18 16:30:11 127.0.0.1:62750 200 GET /config.js
2019/10/18 16:30:11 127.0.0.1:62746 304 GET /js/gotty-bundle.js
2019/10/18 16:30:11 Connection closed by local command: 127.0.0.1:62751, connections: 0/0
2019/10/18 16:30:12 New client connected: 127.0.0.1:62752, connections: 1/0
2019/10/18 16:30:12 Connection closed by local command: 127.0.0.1:62752, connections: 0/0
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62759: runtime error: slice bounds out of range [:10] with length 0
goroutine 29 [running]:
net/http.(*conn).serve.func1(0xc0000aa140)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc000026b60)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc00044f800, 0x5a, 0x5a, 0x2, 0xc0001d0088)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc0001880e0, 0xc00028a100)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc0001880e0, 0xc00028a100)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc0001880e0, 0xc00011ed00)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc0001880e0, 0xc00011ed00)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0000aa140, 0x18056a0, 0xc0001b40c0)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62760: runtime error: slice bounds out of range [:10] with length 0
goroutine 31 [running]:
net/http.(*conn).serve.func1(0xc0000aa320)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc0003141c0)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc0004a1500, 0x5a, 0x5a, 0x2, 0xc0005ae088)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc0000a2000, 0xc00043c100)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc0000a2000, 0xc00043c100)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc0000a2000, 0xc0002d3400)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc0000a2000, 0xc0002d3400)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0000aa320, 0x18056a0, 0xc000231000)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62761: runtime error: slice bounds out of range [:10] with length 0
goroutine 73 [running]:
net/http.(*conn).serve.func1(0xc0001bc0a0)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc000334320)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc000310000, 0x5a, 0x5a, 0x2, 0xc0001d01a8)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc000188380, 0xc00028a700)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc000188380, 0xc00028a700)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc000188380, 0xc00028a400)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc000188380, 0xc00028a400)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0001bc0a0, 0x18056a0, 0xc000078f00)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62762: runtime error: slice bounds out of range [:10] with length 0
goroutine 33 [running]:
net/http.(*conn).serve.func1(0xc0000aa500)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc000314280)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc0004a1c00, 0x5a, 0x5a, 0x2, 0xc0001d02c8)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc000188460, 0xc00028a900)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc000188460, 0xc00028a900)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc000188460, 0xc00043c200)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc000188460, 0xc00043c200)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0000aa500, 0x18056a0, 0xc0001b4cc0)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62763: runtime error: slice bounds out of range [:10] with length 0
goroutine 74 [running]:
net/http.(*conn).serve.func1(0xc0001bc1e0)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc000314380)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc0004a2300, 0x5a, 0x5a, 0x2, 0xc0001d03e8)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc000188540, 0xc00028ab00)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc000188540, 0xc00028ab00)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc000188540, 0xc00043c300)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc000188540, 0xc00043c300)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0001bc1e0, 0x18056a0, 0xc0001b4ec0)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62764: runtime error: slice bounds out of range [:10] with length 0
goroutine 84 [running]:
net/http.(*conn).serve.func1(0xc0000aa6e0)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc000314420)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc0004a2a00, 0x5a, 0x5a, 0x2, 0xc000276088)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc000148460, 0xc0001c8b00)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc000148460, 0xc0001c8b00)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc000148460, 0xc00043c500)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc000148460, 0xc00043c500)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0000aa6e0, 0x18056a0, 0xc0001b5040)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62765: runtime error: slice bounds out of range [:10] with length 0
goroutine 75 [running]:
net/http.(*conn).serve.func1(0xc0001bc280)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc000027220)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc0003e2000, 0x5a, 0x5a, 0x2, 0xc0000d3708)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc000280380, 0xc0003e0000)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc000280380, 0xc0003e0000)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc000280380, 0xc0003a4000)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc000280380, 0xc0003a4000)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0001bc280, 0x18056a0, 0xc0002fc580)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62766: runtime error: slice bounds out of range [:10] with length 0
goroutine 77 [running]:
net/http.(*conn).serve.func1(0xc0001bc320)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc000027300)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc000454000, 0x5a, 0x5a, 0x2, 0xc0000d3828)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc000280460, 0xc0003e0200)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc000280460, 0xc0003e0200)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc000280460, 0xc00028ac00)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc000280460, 0xc00028ac00)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0001bc320, 0x18056a0, 0xc0000797c0)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62767: runtime error: slice bounds out of range [:10] with length 0
goroutine 79 [running]:
net/http.(*conn).serve.func1(0xc0001bc3c0)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc0003147c0)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc0004a3100, 0x5a, 0x5a, 0x2, 0xc0002761a8)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc000148540, 0xc0003a4200)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc000148540, 0xc0003a4200)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc000148540, 0xc00043c700)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc000148540, 0xc00043c700)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0001bc3c0, 0x18056a0, 0xc0001b5180)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e
2019/10/18 16:30:18 http: panic serving 127.0.0.1:62768: runtime error: slice bounds out of range [:10] with length 0
goroutine 49 [running]:
net/http.(*conn).serve.func1(0xc0000cd4a0)
	/usr/local/go/src/net/http/server.go:1767 +0x139
panic(0x1669de0, 0xc0000273a0)
	/usr/local/go/src/runtime/panic.go:679 +0x1b2
github.com/dgageot/demoit/templates.hash(...)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:48
github.com/dgageot/demoit/templates.Index(0xc0003e2700, 0x5a, 0x5a, 0x2, 0xc0000d3948)
	/Users/pjlewis/Repositories/demoit-presentations/templates/index.go:28 +0x155
github.com/dgageot/demoit/handlers.Step(0x1804820, 0xc000280620, 0xc0003e0400)
	/Users/pjlewis/Repositories/demoit-presentations/handlers/step.go:66 +0x205
net/http.HandlerFunc.ServeHTTP(0x173ed20, 0x1804820, 0xc000280620, 0xc0003e0400)
	/usr/local/go/src/net/http/server.go:2007 +0x44
github.com/gorilla/mux.(*Router).ServeHTTP(0xc000134000, 0x1804820, 0xc000280620, 0xc00043c800)
	/Users/pjlewis/go/pkg/mod/github.com/gorilla/[email protected]/mux.go:212 +0xe2
net/http.serverHandler.ServeHTTP(0xc000188000, 0x1804820, 0xc000280620, 0xc00043c800)
	/usr/local/go/src/net/http/server.go:2802 +0xa4
net/http.(*conn).serve(0xc0000cd4a0, 0x18056a0, 0xc0001b5600)
	/usr/local/go/src/net/http/server.go:1890 +0x875
created by net/http.(*Server).Serve
	/usr/local/go/src/net/http/server.go:2927 +0x38e

Note that running demoit sample from the repo root works fine, and I'm able to browse without problem.

Presentation title should be configurable

Conflict on port 35729 when 2 servers want to run with -dev

$ demoit -port 7000 -shellport 7001 -dev sample/
2019/03/18 14:07:06 Welcome to DemoIt. Please, open http://localhost:7000
2019/03/18 14:07:06 Permitting clients to write input to the PTY.
2019/03/18 14:07:06 HTTP server is listening at: http://:::7001/
2019/03/18 14:07:06 listen tcp :35729: bind: address already in use

It would be nice to switch automatically to another port, when 35729 is already in use. I don't know if it is feasible, or if 35729 is the only possible option, though.

Silent failure when shell port already in use

$ demoit -port 7000 sample/
2019/03/18 14:15:27 Welcome to DemoIt. Please, open http://localhost:7000
2019/03/18 14:15:27 "Dev Mode" to live reload your slides can be enabled with '--dev'
2019/03/18 14:15:27 Permitting clients to write input to the PTY.
$

The server doesn't start, but doesn't say why.
I suspect it is because I have another demoit server running, using the default shell port 9999.

Terminal ("web-term") should be configurable via .bashrc

It would be great if one could specify .bashrc file (similar to .bash_history file we have now) that can be used to set up the terminal automatically at every view/load.

Fails to start shell under WSL

I built and tried running under WSL (Windows Subsystem for Linux / Ubuntu 18.04).
I can browse through the sample slides OK, served up by demoit, but I'm unable to get a terminal session to work (keep getting "Connection Closed").

I added a fmt.Println() to see what "commands" was set to when launching the shell.

Any idea how to get this working under WSL?
Is it a networking issue?
Any debug suggestions welcome ...

2019/02/11 16:44:51 Welcome to DemoIt. Please, open http://localhost:8888
2019/02/11 16:44:51 "Dev Mode" to live reload your slides can be enabled with '--dev'
2019/02/11 16:44:51 Permitting clients to write input to the PTY.
2019/02/11 16:44:51 HTTP server is listening at: http://:::9999/
Using shell /bin/bash
Using history /tmp/demoit388801105
commands =  cd ./folder;HISTFILE=/tmp/demoit388801105 exec /bin/bash
Ping http://localhost:8000/
2019/02/11 16:44:59 [::1]:30386 200 GET /
2019/02/11 16:44:59 [::1]:30391 200 GET /auth_token.js
2019/02/11 16:44:59 [::1]:30392 200 GET /config.js
2019/02/11 16:44:59 [::1]:30386 200 GET /css/index.css
2019/02/11 16:44:59 [::1]:30390 200 GET /css/xterm_customize.css
2019/02/11 16:44:59 [::1]:30389 200 GET /css/xterm.css
2019/02/11 16:44:59 [::1]:30393 200 GET /js/gotty-bundle.js
Ping http://localhost:8000/
2019/02/11 16:45:02 New client connected: [::1]:30407, connections: 1/0
2019/02/11 16:45:02 Connection closed by an error: failed to create backend: failed to start command `sh`: fork/exec /bin/sh: invalid argument: [::1]:30407, connections: 0/0
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/
Ping http://localhost:8000/

similarly if I connect to http://127.0.0.1:9999 I get

2019/02/11 16:52:20 Welcome to DemoIt. Please, open http://localhost:8888
2019/02/11 16:52:20 "Dev Mode" to live reload your slides can be enabled with '--dev'
2019/02/11 16:52:20 Permitting clients to write input to the PTY.
2019/02/11 16:52:20 HTTP server is listening at: http://:::9999/
2019/02/11 16:52:31 127.0.0.1:31135 200 GET /
2019/02/11 16:52:31 127.0.0.1:31137 200 GET /css/xterm_customize.css
2019/02/11 16:52:31 127.0.0.1:31140 200 GET /auth_token.js
2019/02/11 16:52:31 127.0.0.1:31136 200 GET /css/xterm.css
2019/02/11 16:52:31 127.0.0.1:31139 200 GET /config.js
2019/02/11 16:52:31 127.0.0.1:31135 200 GET /css/index.css
2019/02/11 16:52:32 127.0.0.1:31138 200 GET /js/gotty-bundle.js
2019/02/11 16:52:33 New client connected: 127.0.0.1:31143, connections: 1/0
2019/02/11 16:52:33 Connection closed by an error: failed to create backend: failed to start command `sh`: fork/exec /bin/sh: invalid argument: 127.0.0.1:31143, connections: 0/0
2019/02/11 16:52:35 127.0.0.1:31138 200 GET /favicon.png

Allow video and audio paths

If one wants to play an audio file at the moment, it seems the only option is to serve it from .demoit/images. Maybe have a more generic media folder instead?

URL slide overflow -> panic

If I have 22 slides, accessing /23 panics.

Expected: 404

Mobile: swipe right, swipe left

I ack that viewing with a mobile or tablet is not the primary use case,
however it would be nice to be able to move forward/backward.
In a demo without the arrow buttons, I couldn't navigate at all from my smartphone.

Change sourceCode style.

Change demoit.js so it will accept styles.
Available styles are here https://xyproto.github.io/splash/docs/

Speaker notes

Feature request: a separate browser window for Speaker notes.

Could be available on a separate port, or a separate handler.

The markup could use a custom element

<speaker-note>
This is what I will say, but it won't be displayed to the audience.
</speaker-note>

We would need to move forward the Speaker Notes view automatically when the steps move forward.

Remote server

Make it seamless to present anywhere from a URL

(i.e. demoit server not installed locally on the presentation machine)

In a Shell, how to move forward to next Step?

If a step features a Shell, the Shell automatically gets the focus, which is nice to start typing.

However, how can I advance to the next Step while keeping my hands on the keyboard?

What I currently do is move the mouse, click somewhere to unfocus the Shell, then hit the RightArrow key.

Support iframes

I currently serve my iframe HTML files stored in folder js.

It would be nice to support an explicit folder iframes, and an idiomatic way way to store IMG/JS/CSS dependencies of the iframes.

"Play again" button on last slide

This would be nice

Export to PDF

demoit can't use .demoit/.bash_history on MacOS

ZSH is the default shell on MacOS, so the shortcuts/snippets inside .demoit/.bash_history are not working properly

Ports as command line parameters

There are legit cases where we'd want a custom port for the web server (instead of 8888) and for the shell server (instead of 9999)

Remove logs `Ping http://localhost:6060/`

These clutter the server output, if we can mute them it would be nice.

Editable files

Current behavior

• <source-code> files are read from filesystem
• they are read-only
• demos may be using the same files (e.g. running the displayed code)

Desired behavior

• <source-code> files are optionally editable in the browser
• on change, they are persisted to disk
• the presenter may run the demo, then edit the file, then run again the demo on modified source

WebTerm with prefilled command

Current workflow

• I move forward to a slide containing a <web-term>
• I type my long command live e.g. go tool pprof -http :6060 benchmark.prof
• I hit enter
• The command runs and displays its output

Desired workflow

To save time and be less error-prone, in case the long command details don't matter to the audience:

• I move forward to a slide containing a <web-term>
• My long command go tool pprof -http :6060 benchmark.prof is prefilled
• I hit enter
• The command runs and displays its output

A picture is worth a thousands words

Consider adding a gif to the README to show what this project is about

Next Previous not working

Seems that since latest commit Next and Previous is not working.

OS: MacOS
Browser: Chrome
Output:

Uncaught ReferenceError: next is not defined
    at HTMLAnchorElement.onclick ((index):26)
onclick @ (index):26

demoit crashs in the slide 7 of the sample

Hello David!

For information, when I run the sample, I got on http://localhost:8888/7

2022/11/04 17:16:15 unable to create a docker container for vscode: Error response from daemon: No such image: codercom/code-server:3.4.1

But, it's visible on the dockerhub..
https://hub.docker.com/layers/codercom/code-server/3.4.1/images/sha256-7595b2d20634b2546c94031adb554835d39e707f74cf6f4e783726be726dd8e3?context=explore

So, we need to perform a docker pull manually (to avoid the crash)

➜ docker pull codercom/code-server:3.4.1
3.4.1: Pulling from codercom/code-server
376057ac6fa1: Pull complete
e9328b5d4ce4: Pull complete
b235a90e52e2: Pull complete
050b6dc28509: Pull complete
e1d3f4aae495: Pull complete
13719612fc66: Pull complete
44f1c3cd316e: Pull complete
10e54f3cdd62: Pull complete
Digest: sha256:da8fe9ad6f6528b17e8d2fb927504e60d1e69527da165f69ffdf86f9d90b4c09
Status: Downloaded newer image for codercom/code-server:3.4.1
docker.io/codercom/code-server:3.4.1

Kind regards,
David

Vertical scrollbar (in sample demo)

(Observed on Linux)

The right scrollbar is always visible, regardless the actual height of my browser window. It's still visible in Fullscreen.

README should tell which min version of go is required

I had difficulties to install this and follow the README tutorial, because I had an old version of go.

Switching to go1.14.2 was the solution.

However, a note in README about a go version prerequestie would be fine.

Shell font

Hello,

Nice project, I really like the embedded shell :)
For the shell to be displayed properly you need to have the font "Inconsolata for Powerline" installed on your computer. Otherwise the cursor will not be placed properly and the shell display width will not be good.
It could be added to the readme to avoid other people spending time to understand why the cursor is misplaced, moreover the font can be found for free here: https://github.com/powerline/fonts/tree/master/Inconsolata
Just tell me if you are ok, I can add it to the readme.

Thanks !

Code preview misses last few lines

Hi, love this project, I'm evaluating it for future presentations. However, there seems to be a problem with the code preview pages in recent Firefox and Chromium versions:

Firefox 67.0b16:

Chromium 74.0.3729.131 (Official Build) Arch Linux (64-bit):

sh: -c: option requires an argument

When I run it using
demoit sample or demoit dev sample
On browser it always says "sh: -c: option requires an argument"
go get -u github.com/dgageot/demoit

I am running your sample project without any change.

Source file viewer ("source-code") is not scrollable horizontally

Text file viewer ("source-code") should offer horisontal scroll in case the lines in the file er too long. You can see the scrollbar at the bottom of the page, but can't scroll.

`go install -mod=vendor` fails on a dependency

Local builds are failing at the moment:

$ go install -mod=vendor
build github.com/dgageot/demoit: cannot load github.com/chromedp/cdproto/target: open /[clipped..]/go/src/github.com/dgageot/demoit/vendor/github.com/chromedp/cdproto/target: no such file or directory

sh: -c: option requires an argument

Thank you for this cool idea and project.
I decided to give it a try, but I seem to be hitting an error (see screenshot).

Steps

1. cd $HOME/go/src/github.com/dgageot/demoit
2. demoit sample or demoit -dev sample
3. Visit http://localhost:9999 or http://127.0.0.1:9999

Environment

• macOS 10.14.3
• chrome 71.0.3578.98
• safari 12.0.3
• go 1.11.4

Screenshot

Logs

$ !demoit
demoit -dev sample/
2019/01/29 09:49:14 Welcome to DemoIt. Please, open http://localhost:8888
2019/01/29 09:49:14 Permitting clients to write input to the PTY.
2019/01/29 09:49:14 HTTP server is listening at: http://:::9999/
[LiveReload] listening on :35729
2019/01/29 09:49:22 127.0.0.1:57360 200 GET /
2019/01/29 09:49:22 127.0.0.1:57360 200 GET /auth_token.js
2019/01/29 09:49:22 127.0.0.1:57362 200 GET /config.js
2019/01/29 09:49:22 127.0.0.1:57361 200 GET /css/index.css
2019/01/29 09:49:22 127.0.0.1:57364 200 GET /css/xterm_customize.css
2019/01/29 09:49:22 127.0.0.1:57363 200 GET /css/xterm.css
2019/01/29 09:49:22 127.0.0.1:57365 200 GET /js/gotty-bundle.js
2019/01/29 09:49:22 New client connected: 127.0.0.1:57366, connections: 1/0
2019/01/29 09:49:22 Connection closed by local command: 127.0.0.1:57366, connections: 0/0

Explain that Speaker Notes won't work in Safari

I should add in the Speaker Notes slide in the Sample deck an explicit disclaimer: This feature is not expected to work in Safari.

https://caniuse.com/#feat=broadcastchannel

Slide number in page title

Current page title is Demo

It would be nice if it could display 6 / 51 where 6 is the current slide and 51 is the total number of slides.

Partial source file

It would be great to be able to display only, say, lines 110 to 120 of my source file

Missing flags import in handlers/shell.go

Tried demoit; it didn't compile out of the box, but it was easy to fix (see below). Also, for the install instructions, you don't need both go build and go install, only the install is necessary. Other than this great stuff... Thanks.

diff --git a/handlers/shell.go b/handlers/shell.go
index 33ed52a..f5a7f79 100644
--- a/handlers/shell.go
+++ b/handlers/shell.go
@@ -25,6 +25,7 @@ import (
        "strings"

        "github.com/dgageot/demoit/files"
+       "github.com/dgageot/demoit/flags"
        "github.com/gorilla/mux"
        "github.com/pkg/errors"
 )

Correct shell font by default

Since #4 we know which font works well.

Consider updating the HTML to load the cromulent web font, regardless of what is installed or not on the presentation machine.

Styling source file viewer

It would be nice to be able to

• display line numbers, or not
• display file name, or not
• apply arbitrary CSS to the code displayed

Continuity of shell history

• In step N, run shell command X
• Then the "Up" arrow key can be used to re-run the same command X
• Move forward to step N+1, which also features a web-term
• The "Up" arrow key doesn't remember X
  • it would be nice if it did