A simple app that combines Ace Editor and RevealJS. You can write markdown on the left, and preview your presentation on the right.

  • By Jack Singleton
  • Last update: Nov 28, 2022
  • Comments: 15

Sandstorm Hacker Slides

Screenshot

A simple app that combines Ace Editor and RevealJS

You can write markdown on the left, and preview your presentation on the right.

Try it on Sandstorm

Hack on Hacker Slides

I built this app very quickly and it is unfortunately not one of my main priorities right now. Contributions are very welcome!

Hacker Slides uses vagrant-spk, so dev setup is quite easy.

  1. You will need vagrant-spk installed. If you get an error running the following command, follow the vagrant-spk installation instructions
$ vagrant-spk -h
usage: /home/jack/bin/vagrant-spk [-h] [--work-directory WORK_DIRECTORY]
...
  1. Make sure you have virtualbox installed before bringing up vagrant vm
$ VirtualBox -h
Oracle VM VirtualBox Manager 5.0.0
...
  1. Bring up the Vagrant VM
$ vagrant-spk up
  1. Start the application in dev mode
$ vagrant-spk dev
  1. Navigate to the Sandstorm dev instance

http://local.sandstorm.io:6080/

Here are some things to know about the code base.

  • It's a little hacky (it is Hacker Slides after all :))
  • RevealJS 3.0.0 has been copied into the static/revealjs directory.
  • main.py is a super simple python server that mainly just accepts GETs and PUTs for /slides.md and reads and saves markdown from/to /var/slides.md
  • index.{html,js} is the one and only main page for the app. Its only job is to load Ace Editor on the left side of the screen, and slides.html in an iframe on the right side.
  • slides.{html,js} sets up RevealJS to load markdown from /slides.md. It also knows how to reload the markdown via a postMessage call.
  • save.js adds a debounced keyup handler to the editor that a) fires off an ajax PUT to save the markdown content and b) sends a postMessage message to the RevealJS iframe telling it to reload its markdown preview (which currently roundtrips to the server again)

Github

https://github.com/jacksingleton/hacker-slides

Comments(15)

  • 1

    How can I add a vertical slides

    Adding new horizontal slides is easy with ---but how do I add a vertical slide above or underneath of a slide?

    The reveal.js manual says something like the following but this is not working.

            <section>Single Horizontal Slide</section>
            <section>
                <section>Vertical Slide 1</section>
                <section>Vertical Slide 2</section>
            </section>
    
  • 2

    Typing interrupted by preview updates

    Okay, trying to type in a Hacker Slides, and this is killing me. Every time I type like... a letter, the next two letters aren't recognized because the program is busy re-rendering the preview with the last letter in it. I've taken to typing in Notepad and copy/pasting lines into the Hacker Slides.

  • 3

    New Hacker Slides Graphics for Sandstorm.io Package

    @jacksingleton

    I'm Nena Nguyen, designer at Sandstorm. I'm reaching out to you about Hacker Slide graphics because we're currently developing an app market and working on UI improvements to the existing Sandstorm shell design. See: https://groups.google.com/d/msg/sandstorm-dev/VRkPqX61cRs/Ts37SbqqKAAJ

    As a part of this redesign, existing and new apps will need to submit 3 graphics (as a part of their SPK) for aesthetic and functional purposes.

    I haven't been able to find any graphics for Hacker Slides, and was informed by @paulproteus that it's likely none exist so I went ahead and made some very simple (but I think appropriate) graphics for Hacker Slides.

    If you think these are suitable, I can send you the appropriate files for when we need apps to update their SPKs(soonish). If not, I'll happily send over the illustrator/svg files for you to tweak or you can choose to come up with your own set.

    Let me know~

    :)

    hackerslides-preview1

  • 4

    Speaker notes is a 404

    Steps to reproduce:

    • Go to https://oasis.sandstorm.io/demo
    • Click "Try demo"
    • Click "Install..."
    • Find Hacker Slides & install it
    • Create a new Hacker Slides grain
    • Click on the words HACKER SLIDES
    • Press s on the keyboard

    Expected behavior:

    • See presenter notes.

    Actual behavior:

    • 404
  • 5

    Allow disabling ACE

    I'd like to use this as a convenient way of storing presentations in Sandstorm and delivering them without needing to set up a static server. Only, I'm a screen reader user and the editor is inaccessible (though apparently RevealJS is nicely accessible.)

    Would it be possible to add a "Use visual editor" checkbox that is checked by default? If unchecked, we'd get a simple <textarea/> with the Markdown content. This might be beneficial for It's All Text users too; since ACE doesn't populate the text area, anyone wanting to pull the text into their own external editor would likely have a hard time doing so.

    Thanks.

  • 6

    Vagrant-spk-ify

    Hi @jacksingleton ,

    This pull request does a few things:

    • Switch to vagrant-spk to set up the Vagrant VM in which Sandstorm and the app run. (I built this on top of the vagrant-spk setupvm diy stack, and then copied in your existing sandstorm-pkgdef.capnp.)
    • Adjust the sandstorm-pkgdef.capnp to alwaysInclude the static assets dir. Initially once I did that, it created a ~80MB package file, and I looked into why, and the answer is that node_modules was getting added seemingly unnecessarily, so I added that to be ignored.
    • Then I ran into the Python 3 PYC problem thing. This is (I think) because if the PYC files are there, Python stat()s the PY & PYC files, then reads the PYC files, and spk dev doesn't record the stat()-ing of the PY files, so it doesn't record that into sandstorm-files.list. So then there are no PY files in the SPK, and then Python doesn't bother looking for PYCs. First I ran into this for the Python 3.4 core libraries; luckily you have the script in there repo to remove that stuff. So I did:
    # Remove PYC files
    vagrant-spk ssh
    bash /opt/app/infra/clean-pycache.sh
    exit
    # Re-run the app, to get a fresh trace
    vagrant-spk dev
    # then CLICK AROUND in the app! or else it won't actually notice that flask is a dependency!!!
    ^C
    vagrant-spk pack /tmp/app.spk
    

    which almost worked, but then I had a similar problem with the Flask PYC files.

    So I had to add another rm to the clean-pycache.sh script.

    FWIW I think you don't actually get these problems if you use a virtualenv. But anyway.

    Cheerio, and please review/merge/we can discuss on Tue at the meetup if you prefer!

    -- Asheesh.

  • 7

    Some quotation marks not supported.

    Copy-pasting the following into your app freaks out the preview pane:

    “if you want a definition of the term ‘walled garden’ as it pertains to technology, ask a man with both an iphone and a chromebook” - @malki

    This appears to be because the quotes (single and double) are angled, a common Office/PowerPoint tendency.

  • 8

    € not supported

    Whenever a €-sign shows up the preview states

    ERROR: The attempt to fetch ../slides.md failed with HTTP status 500.Check your browser's JavaScript console for more details.
    Remember that you need to serve the presentation HTML from a HTTP server.
    
  • 9

    Use of unicode character crashes preview pane

    If I try to paste in, say, a unicode arrow (→) into my slide to replace "->", the preview pane shows an error:

    I tried it with a couple other unicode arrows and got the same result, and suspect this may be the behavior with any unicode character.

  • 10

    Look at Hast.me

    Hey there,

    I think hast.me is a very similar app that already has a lot of features you listed in the README.md:

    • built with Meteor
    • collaborative
    • has auth
    • similar editor

    https://github.com/zhouzhuojie/hast

  • 11

    Implementation of vertical slides

    Jack

    I spend some time to work on the initial code to implement the vertical slides. But i have some difficults and I take a way that seems working. I read each line text markdown only to the cursor position. Every step I keep the number of the last slide horizontal and the number of the last slide vertical.

    I tested this dev of Hacker slides on my installation of sandstorm. Then I cleaned the index.js file against your repo file but I did not try to build the app.

    best Jean

  • 12

    Bump express from 2.5.11 to 4.17.1 in /static/revealjs

    Bumps express from 2.5.11 to 4.17.1.

    Release notes

    Sourced from express's releases.

    4.17.1

    • Revert "Improve error message for null/undefined to res.status"

    4.17.0

    ... (truncated)
    Changelog

    Sourced from express's changelog.

    4.17.1 / 2019-05-25

    • Revert "Improve error message for null/undefined to res.status"

    4.17.0 / 2019-05-16

    ... (truncated)
    Commits
    Maintainer changes

    This version was pushed to npm by dougwilson, a new releaser for express since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    Cannot change default theme

    Hello,

    I can't change theme to something else than default black and white. I included link to theme css file manually, but now after each refresh presentation is first displayed in black theme and then blinks into theme I selected.

    Is there a possibility to specifiy a theme in the beginning and have presentation loaded with this theme from start?

  • 14

    Updates flailing in Firefox on Mac

    Is this the same Hacker Slides that is an app on Sandstorm (oasis.sandstorm.io)? If so, I'm having a hell of a time using it on a Mac OS X using Firefox 56.0. The app works pretty well on a PC in Chrome, but when I tried to make a new HS grain after logging in on the Mac, it was extremely sluggish, dropping characters as I typed. It seems to have something to do with the right-side preview updating every time I hit a key. It is updating so frantically that it causes me to drop lots of keys unless I type very, very slowly. It wasn't doing this on the PC in Chrome. This seems to be happening whether in plain text mode or rich-text mode.

  • 15

    Markdown slide attributes

    Although the element attribute works nicely the slide attribute via markdown at the beginning of a slide doesn't seem to work:

    <!-- .slide: data-background="#ffffff" -->

    Or am I getting this wrong?