Giter Site home page Giter Site logo

panglesd / slipshow Goto Github PK

View Code? Open in Web Editor NEW
624.0 7.0 10.0 513.55 MB

An engine for displaying slips, the next-gen version of slides

License: MIT License

CSS 1.84% JavaScript 7.41% HTML 0.74% Makefile 0.01% OCaml 89.84% Perl 0.15% Dockerfile 0.01% Shell 0.01%
slides slideshow slideshow-maker slideshow-html slideshow-library slip slips

slipshow's Introduction

slipshow

Warning

Slipshow is under heavy modifications: it now includes a compiler from markdown to a standalone slipshow presentation!

The documentation isn't yet up-to-date. You can have at look at sliphub.choum.net for some preliminary information.

Slipshow is a tool specifically designed for technical presentations where traditional slides are not enough.

In a slipshow presentation, the equivalent of a slide is called a slip. Each slip is like a slide, but with no bottom limit. That is, the content can be arbitrarily long! During the presentation, the camera will "scroll" down to reveal the hidden content, following a script given by the presenter!

Here are the goals of slipshow, in no specific orders:

  • Lift restrictions from traditional slide-based presentation. In particular, make it closer to a blackboard presentation!
  • Easy to write and readable syntax: markdown with few extensions. No manual placement like in powerpoint. No crazy syntax like in latex.
  • Source of the presentation is plain text: much better for source control, sharing with people, using your favorite editor, readability, compatibility.
  • Open the possibility for a dynamic presentation. Watching scientific popularization video demonstrates how well-chosen animations can make a difficult subject more understandable.

Slipshow compiles files written in an extension of markdown, to a standalone html file viewable offline in any web browser.

If you want to see it in action, go to the example section. If you want to start writing your presentation, go to Quick start. Click for the full documentation and API, or continue reading to know more about this project!

The issue with traditional slides

When using traditional slides, you are given a rectangle of white space to express your though. When this rectangle is full, you have no other choice than erasing everything, and start again with a new white rectangle.

This can be a problem both for the viewer and the presenter. If the viewer took some time understanding the beginning of the slide, they might miss the last part of a slide: everything will be erased before they have a chance to read it and catch up. And indeed, there is an obvious asymetry: the last part of a slide will be visible much shorter than the first part!

The presenter might want to show three information (1, 2 and 3), each requiring the previous one to be visible on screen. However, all three information might not fit in one screen! When the first two are visible, it is necessary to... start again with a fresh slide, while we would like to keep information 2 visible.

Of course, for many kind of presentation, with very few content in the slide, this is not a problem at all. However, for some of them, it can be quite an issue! Having had many courses on various technical subjects (mostly math and computer science), I can see how slides degraded the experience from a blackboard presentation.

Instead of starting of with a fresh slide, a slipshow presentation "scrolls down" to reveal new space usable by the presenter, without hiding everything. This is much closer to what happens with a blackboard: the presenter can erase half of it, and continue with the new free space! And a viewer a little bit late still has a chance to catch up, since half of the information is still there.

Examples

You can find several example of slip presentation, from different versions of slip. As they were from early stage of developpement, looking at the source code can be helpful but many things may have changed. Only the official example, tutorial and documentation are kept up to date.

Use the arrows to navigate in the presentation.

Tutorial, API and Documentation

You can find an extensive documentation, with a tutorial at the readthedocs documentation.

Quick start

For a super quick start, just click visit sliphub.choum.net to start writing a presentation online.

For using slipshow offline, you'll need to install the slipshow tool. Currently, there are several ways to get it:

# For opam users. TODO: make it work! Release it to opam!
$ opam pin slipshow [email protected]/panglesd/slipshow.git

# For npm users
$ npm install -g slipshow

Then, you can use the slipshow binary to compile a .md file to a slipshow presentation:

# Compile file.md into file.html:
$ slipshow -o file.html file.md

# Watch for changes in the file, automatically recompiling:
$ slipshow -o file.html file.md --watch

# Watch for changes in the file, automatically recompiling and hot-reloadind the opened presentation:
$ slipshow -o file.html file.md --serve

You're ready to go! Have a look at the syntax, or the full tutorial for a more gentle introduction.

Contributing

You can issue a Pull Request of any kind, report a bug, ask for a new feature, suggest an enhancement on the documentation (or make a Pull Request)... You can also write a theme.

License

MIT

slipshow's People

Contributors

dependabot[bot] avatar panglesd avatar voodoos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

slipshow's Issues

Make sure compiled presentations are standalone

For instance, for mathjax math I had to change it to svg, but there are still assets that are not included I think.

But more importantly, fonts need to be included for all browser to display the presentation the same!

Improve theming

  • Multiple themes should be shipped in the compiler (at least the two we have: warsaw inspired and Vanier)
  • It should be easy to add a theme: the workflow should be documented.

Add a ascii layout

I think it would be nice to have an "ascii layout" to place elements as ascii art.

For instance:

```layout
aa b
aa b
c dd
```
[a]: Some content
[b]: other content
[c]: and
[d]: so on

Engine: rewrite in OCaml

The engine was written in javascript a long time ago, when I did not know a lot about static checking!

It will be very convenient to have it in OCaml, compiled to javascript.

In this rewrite, I'd like to change at least one thing: the "step back". Instead of recording the initial step and "go back to the beginning, go forward $n-1$ steps", it would be much better to apply the "reverse effectful" function.

This also raises the question of how much is computed at runtime by the engine and how much is computed at compile-time by the compiler!

Add support for themes

Problem

The actual theme is inspired by Warsaw but it would be great to have a way to easily change or modify the theme, without tinkering with the distributed css.

Naive suggestion

  • Make the common css (in src/css) as neutral as possible.
  • Add some pre-made themes like the actual Warsaw theme in a folder like src/css/themes.
  • In the example include first the theme-agnostic css, then the chosen theme css, then the specialized slipIntroduction.css.
  • Document the various classes that users would need to override to make their own theme.

Add support for mermaid

Mermaid seem a popular and nice diagramming library, markdown-consistent.

I'd consider adding support for it! Github has it:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Linking to hidden subtrees or conditional display of subtrees

Is there any way to have event handlers on elements within a slip, that can then trigger moving to another slide? (long winded way of saying ‘link’).

Or is there a way to conditionally hide/show a slip?

The motivation is if one had a presentation that is intended for audiences of different levels of prior knowledge.

Re: links - one might have a subslip-tree (slip-subtree?) that is too detailed for the main body of (one version of) the presentation. So in the flow of the main talk, those overly-detailed subtrees would not be traversed. However maybe its likely you’ll have to return to it in the Q+A at the end. In this case, links to these subtrees would be useful to have in the end slip. Or if someone were to pose a relevant query during the presentation, an inline link from the parent slip of the overly-detailed subtree.

Re: conditionality - one could have a single presentation where the slip hierarchy goes into increasing levels of detail on the presentation topic. But conditionality allows for ‘lower-resolution’ versions of the same presentation, by setting a depth parameter (‘only go into this sliptree to nesting_level=X’) somewhere (presumably in Javascript).

They’re obviously related issues (an event handler that conditionally shows the subtree is equivalent to a link to the subtree), hence combining them into a single issue. Basically something like Milanote or ‘Workflowy-for-slides’, where you can expand/collapse subtrees.

Kudos on the whole project though, its really great to have an OSS multiply-nested presentation lib. I’m surprised its not more known more widely..

Compiler: Add support for subslips

The engine support having subslips, but it is not possible to have them in the compiler.

An idea for the syntax:

{subslip}
> subslip content
> ...

Fix issue with images with attributes

The following file:

![](https://avatars.githubusercontent.com/u/34110029?s=80&v=4){.myclass}

will have the wrong output:

<p><img src="[https://avatars.githubusercontent.com/u/34110029?s=80&amp;v=4](view-source:https://avatars.githubusercontent.com/u/34110029?s=80&v=4)" alt="" ><span class="myclass"><span>![](https://avatars.githubusercontent.com/u/34110029?s=80&amp;v=4)</span></span></p>

Allow to include video or large file

Dataurls have a limit, but there are workaround, à la ocaml-crunch!

<script>
  let file_content = "\56\54[...]";
  document.replace(old_element, element_from_file_content)
</script>

(not very precise but ...)

Add support for tikz

The npm package has support for tikz support, in some sense.

It would be so cool (but technically difficult) to have support for tikz directly in slipshow!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.