Getting Started


日本語で表示する。


About

Slidepad is HTML slide generater based on Docpad.
Slidepad converts markdown documents into cool HTML presentations.
You can chose presentation template from
Bigdeck.jshtml5slidesimpress.js.


Install

Slidepad run on Node.js. So set up Node.js first of all.

install docpad

npm install -g docpad

clone the project

git clone http://github.com/georgeOsdDev/slidepad.git
cd slidepad
npm install

generate server

docpad run

or without docpad

node node_modules/docpad/bin/docpad-server

check it out with modern browser

http://localhost:9778


Create Your Presentation

Source documents must be saved as .html.md file like below.
.html.md files are included into each index.html.coffee file. And then it was converted into index.html by docpad.

/ 
└── src
    └── documents
        ├── big
        │   ├── big1.html.md
        │   ├── big2.html.md
        │   ├── ...
        │   ├── 
        │   └── index.html.coffee
        ├── deck.js
        │   ├── deck1.html.md
        │   ├── deck2.html.md
        │   ├── ...
        │   ├── 
        │   └── index.html.coffee
        ├── h5slides
        │   ├── h5slides1.html.md
        │   ├── h5slides2.html.md
        │   ├── ...
        │   ├── 
        │   └── index.html.coffee
        ├── impress.js
        │   ├── impress1.html.md
        │   ├── impress2.html.md
        │   ├── ...
        │   ├── 
        │   └── index.html.coffee
        ├── index.html.coffee
        ├── pages
        │   ├── start-ja.html.md
        │   └── start.html.md
        ├── scripts
        │   └── script.js.coffee
        └── styles
            └── style.css.styl

Using big

Document

Create documents like below.

big1.html.md

---
pageOrder: 1
tags: ['big']
title: 'big1'
---
Write something Here in markdown syntax

lines between --- are meta-data shoud be written in coffee-script syntax.

Conversion

One document become a <div> element in index.html.
And Big recognize it one slide in a presentation

Style

To apply other style, edit layout file.
/src/documents/laout/default.html.coffee around L71

switch @document.layout
  when 'big.html.coffee'
    link rel:'stylesheet', href:'/vendor/big/big.css', type:'text/css'
    script src:'/vendor/big/big.js'

More infomation

Big


Using deck.js

Document

Create documents like below.

deck2.html.md

---
pageOrder: 2
tags: ['deck']
sectionId:'deck2'
child: ['deck3','deck4','deck5']
title: 'deck2'
---
Write something Here in markdown syntax

lines between --- are meta-data shoud be written in coffee-script syntax.

Conversion

One document become a <section> element in index.html.
And deck.js recognize it one slide in a presentation.

Style

To apply other style, edit layout file.
/src/documents/laout/default.html.coffee around L74〜L90

when 'deck.html.coffee'
  text @getBlock('styles').add([
    '/vendor/deck/core/deck.core.css'
    # Chose extentions
    '/vendor/deck/extensions/goto/deck.goto.css'
    '/vendor/deck/extensions/menu/deck.menu.css'
    '/vendor/deck/extensions/navigation/deck.navigation.css'
    '/vendor/deck/extensions/status/deck.status.css'
    '/vendor/deck/extensions/hash/deck.hash.css'
    '/vendor/deck/extensions/scale/deck.scale.css'
    # Chose style
    '/vendor/deck/themes/style/swiss.css'
    # '/vendor/deck/themes/style/neon.css'
    # '/vendor/deck/themes/style/web-2.0.css'
    '/vendor/deck/themes/transition/horizontal-slide.css'
    # '/vendor/deck/themes/transition/vertical-slide.css'
    # '/vendor/deck/themes/transition/fade-slide.css'
  ]).toHTML()
  script src:'/vendor/deck/modernizr.custom.js'

deck.js extention

All deck.js extentions are imported by default.
To apply them, edit index.html.coffee like below.

/src/documents/deck/index.html.coffee around L37

# deck.navigation snippet
a '.deck-prev-link', href='#', title:'Previous', ->
  text "&#8592;"
a '.deck-next-link', href='#', title='Next', ->
  text "&#8594;"

More infomation

deck.js doc


Using html5slides

Document

Create documents like below.

h5slides3.html.md

---
pageOrder: 3
tags: ['h5slides']
additionalClass:'build'
title: 'h5slides2'
---
Write something Here in markdown syntax

lines between --- are meta-data shoud be written in coffee-script syntax.

Conversion

One document become a <article> element in index.html.
And html5slides recognize it one slide in a presentation

Style

To apply other style, edit layout file.
/src/documents/h5slides/index.html.coffee L11

section class:'slides layout-regular template-default', ->

More infomation

html5slides


Using impress.js

Document

Create documents like below.

impress4.html.md

---
pageOrder: 4
tags: ['impress']
sectionId:'source'
title: 'impress4'
datax: 6300
datay: 2000
datarotate: 20
datascale: 4
additonalClass : ""
---
Write something Here in markdown syntax

lines between --- are meta-data shoud be written in coffee-script syntax.

Conversion

One document become a <div> element with meta-data attributes in index.html.
And impress.js recognize it one slide in a presentation

Style

To apply other style, edit layout file.
/src/documents/laout/default.html.coffee around L97〜L102

when 'impress.html.coffee'
  # write own style
  text @getBlock('styles').add([
    'http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic'
    '/vendor/impress/css/impress-demo.css'
  ]).toHTML()

More infomation

impress.js


Back Home