Markdown presentations

gwillz eb37738239 Update readme. 2 months ago
css 29f605f687 Minor fix for light-mode button/scrollbar colours. 1 year ago
public 09389665c9 Live markdown updates (as you type), removed render button/ctrl+enter. 1 year ago
src 1b98c0e84e Fix tutorial link in help dialog. 4 months ago
types 78ff763644 Fix classnames typings. 1 year ago
.firebaserc 9394d1970a Added firebase deployment. 1 year ago
.gitignore f1a061d26d Better image placements and regex; added tutorial document. 1 year ago
README.md eb37738239 Update readme. 2 months ago
app.js c70d71a233 Only render markdown component on content changes. 1 year ago
deploy.sh c023e4d433 Added deploy script. 1 year ago
firebase.json 292447be3e Fix tutorial deploy. 1 year ago
package-lock.json fc71e7d10b Npm audit. 4 months ago
package.json fc71e7d10b Npm audit. 4 months ago
postcss.config.js 3d1d666ff6 Updated css build process (into webpack). 1 year ago
tsconfig.json e5bd1429b8 Initial commit. 1 year ago
webpack.config.js ec08d9a1ec Updated absolute js URLs to relative. 1 year ago

README.md

Markdown Slides

Available here.

I found myself presenting a class on programming recently. The slides were prepared by a third-party group who also provided the exam and certificate. Unfortunately, the material was often grossly incorrect and the code samples were all images instead of text.

I had to quickly turn around new slides as I went through the material. I hate having bulky powerpoint software on my computers and I really wanted something that would do syntax highlighting without me having to think about it.

Key features

  • Dark mode!
  • Create slides with horizontal rules ---
  • Save work to browser storage
  • Export/download files
  • Print mode - includes notes written as comments [//]: # ()
  • URL fetching with ?url=... - must be CORS compliant
  • Keyboard shortcuts galore

Prior art

This is largly inspired by hacker-slides. I found my requirements weren't the same and it was a good opportunity to test a few new things.

Key differences; client-side only, file management, limited automatic rendering.

Browser support

Tested with:

  • Firefox (latest/64+)
  • Chromium (latest/71+)

Perhaps?:

  • Edge (latest/17+)
  • Safari (latest/11+)

Definitely not:

  • Internet Explorer

IE could technically work, but I wasn't bothered enough to include all the required polyfills. If someone really wants it, I'll throw them in :)

Also let me know if Safari and Edge work. That'd be cool.

Build/dev

# clone stuff
git clone git@github.com:gwillz/slides
cd slides/

# install and build stuff
npm install
npm run webpack

# dev environment (in separate terminals)
npm run webpack -- -w
npm start

# deploy stuff
npm run clean
NODE_ENV=production npm run webpack
npm run pages # this pushes to origin/gh-pages

Feel welcome to create PRs if you please. I'm kinda picky about things but I couldn't tell you what until I've seen it. I guess we'll find out!

Techy things

  • Typescript
  • React
  • Redux
  • Showdown
  • highlight.js
  • Draft.js
  • PostCSS
  • Webpack

I think there's a fair bit of cool stuff in here and plenty of opportunity to extend the functionality.

Ta!

TODOs

  • Remove draft.js
  • Use cachebuster file names
  • Make the divider draggable
  • Mobile view? top/bottom instead of left/right
  • Refactor files names
  • Add text labels to buttons
  • use css-loader, file-loader