README.md 2.4 KB

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