Code Monkey home page Code Monkey logo

impress's Introduction

smartdown/impress

Integrate Smartdown with the impress.js presentation library. The basic idea is that a set of Smartdown docs can be assembled into a presentation. Impress.js slide attributes can be specified in index.html or in the frontmatter of the Smartdown documents.

What's the deal with Manifest.md?

The idea is to move as much of the specification of the ordering of content and the content itself from the realm of index.html into the more comfortable Markdown format, including Markdown frontmatter. So basically, an impress.js slideshow that would ordinarily be specified in an index.html can instead refer to a Manifest.md file by adding a slide definition like the following to index.html:

  <div
    id="manifest"
    class="step slide smartdown manifest"
    src="./Manifest.md"
  >
  </div>

The contents of Manifest.md will typically be only Markdown frontmatter (YAML). The important part is the files: section, which lists the Markdown (or Smartdown) files to be rendered as slides. The exampleBasic/Manifest.md file looks like this:

---
impress:
  data-x: 1000
  data-y: 1000
  files:
    - ./Overview.md
    - ./Home.md
    - ./Multi.md
---

What's the deal with Multislides?

Smartdown supports a feature called Multicards which enables an author to put the text for multiple Smartdown cards in a single file. For example, the following Smartdown text will be displayed as three separate cards in an ordinary Smartdown viewer. However, smartdown/impress will create three separate slides.

 Apple
 ---

### All about Apples

Apples are sometimes red.

 Cherry
 ---

### All about Cherries

Cherries are sometimes red.

 Book
 ---

### All about Books

Book are sometimes read.

Versions

0.0.1 - Initial attempt at integrating Smartdown with Impress.js, including three examples. Requires Smartdown 0.0.118+. Another contribution here is the use of Manifest.md files and their frontmatter to help authors avoid HTML. Allow Smartdown tunnel syntax to be used to navigate within a presentation. Examples include a Smartdown Gallery example that demonstrates and stress-tests some Smartdown features. The exampleBasic/ example provide a pages.html to view slides one at a time without Impress.js. 0.0.2 - Uses latest impress.js build. 0.0.3 - Use SD 1.0.2 and updated impress.js build. Add 'flatten=horizontal' and 'flatten=vertical' options to URL. Ensure that slides become visible only after their Smartdown is loaded. Eliminate the use of pages.html in favor of the flatten mode. Repurpose fallback message as a please-wait-for-loading message. Delete unused CSS files inherited from the original impress.js examples. Add start buttons to Overview.md for the examples.

impress's People

Contributors

doctorbud avatar

Watchers

James Cloos avatar

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.