Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

update with 1.2

  • Loading branch information...
commit fa3e3d90fc91b2f4e3f82fe0a5d9c77c97d53e8b 1 parent 481477c
@houqp authored
View
6 Makefile
@@ -11,6 +11,12 @@ install-deckjs:
unzip deck.js.extended.zip
rm deck.js.extended.zip
+check:
+ git checkout master README.md
+ git checkout master deckjs.conf
+ git checkout master tutorial-slide.asciidoc
+ git checkout master example-template.asciidoc
+
clean:
rm -rf *.html
View
32 README.md
@@ -6,7 +6,7 @@ A Deck.js backend for asciidoc.
## Dependencies
* AsciiDoc
-* Deck.js
+* Deck.js (included in the backend package)
Optional:
@@ -15,23 +15,39 @@ Optional:
## Installation
-If you don't have deck.js you can download it automatically with `make install`. Or you can get it manually from its official [link][deckjs], and rename the unzipped directory to `deck.js`. (when installing with make, you also get some other deck.js extensions.)
+Download the [backend package][deckjs] and use asciidoc to install:
-The second thing you need to do is to make sure your asciidoc can properly find `deckjs.conf`. For asciidoc's configuration file loading strategy, please refer to [this guide][asc-conf-guide].
+```bash
+asciidoc --backend install deckjs-1.2.zip
+```
+
+This will install the backend to `~/asciidoc/backend/deckjs`.
-The easiest way is to put `deckjs.conf` and the asciidoc file you wrote in the same directory.
+You can also use this backend without installation, see the next section.
## Usage
+With deckjs backend installed, use following command to generate slides:
+
+```bash
+asciidoc -b deckjs file.asciidoc
+```
+
+To use without Installation, you need to specify different argument:
+
```bash
asciidoc -f deck.js.conf file.asciidoc
```
-file.asciidoc is the asciidoc file you wrote.
+Make sure your asciidoc can properly find `deckjs.conf`. For asciidoc's configuration file loading strategy, please refer to [this guide][asc-conf-guide].
+
+Note that without installation, you also have to enable `linkcss` option. Then put `deck.js`, `ad-stylesheet` and generated slide into the same directory. Checkout the [template file][example] for how to enable all kinds of options.
+
-Remember to put `deck.js`, `ad-stylesheet` and generated slide into the same directory.
+[deckjs]:https://github.com/downloads/houqp/asciidoc-deckjs/deckjs-1.2.zip
+[deckjs-ext]:https://github.com/downloads/houqp/asciidoc-deckjs/deck.js.extended.zip
+[asc-conf-guide]:http://www.methods.co.nz/asciidoc/userguide.html#X27
+[example]:http://houqp.github.com/asciidoc-deckjs/example-template.asciidoc
-[deckjs]:https://github.com/imakewebthings/deck.js/zipball/stable
-[asc-conf-guide]:http://www.methods.co.nz/asciidoc/userguide.html#X7
View
147 deckjs.conf
@@ -1,4 +1,4 @@
-# version 1.1
+# version 1.2
include::/usr/share/asciidoc/xhtml11.conf[]
@@ -111,17 +111,15 @@ text=<p>|</p>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
<title>{doctitle=}</title>
-
<meta name="description" content="{description}" />
<meta name="viewport" content="width=1024, user-scalable=no">
<meta name="author" content="{author}" />
<meta name="generator" content="AsciiDoc {asciidoc-version}" />
<meta name="presdate" content="{revdate}" />
{corpname?<meta name="company" content="{corpname}" />}
-
<!-- Core and extension CSS files -->
+ifdef::linkcss[]
<link rel="stylesheet" href="deck.js/core/deck.core.css">
<link rel="stylesheet" href="deck.js/extensions/goto/deck.goto.css">
<link rel="stylesheet" href="deck.js/extensions/menu/deck.menu.css">
@@ -129,18 +127,98 @@ text=<p>|</p>
<link rel="stylesheet" href="deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="deck.js/extensions/toc/deck.toc.css">
-
<!-- Theme CSS files -->
<link rel="stylesheet" href="./deck.js/themes/style/{deckjs_theme}.css">
<link rel="stylesheet" id="transition-theme-link" href="./deck.js/themes/transition/{deckjs_transition}.css">
- {pygments?<link rel="stylesheet" href="./ad-stylesheet/pygments/{pygments_sytle}.css">}
-
+ {pygments?<link rel="stylesheet" href="./ad-stylesheet/pygments/{pygments_style}.css">}
<!-- Replace path with correct path to Modernizr file. -->
<script src="deck.js/modernizr.custom.js"></script>
+endif::linkcss[]
+ifndef::linkcss[]
+<style type="text/css">
+include1::{stylesdir=./deck.js/core}/deck.core.css[]
+</style>
+<style type="text/css">
+include1::{stylesdir=./deck.js/extensions/goto}/deck.goto.css[]
+</style>
+<style type="text/css">
+include1::{stylesdir=./deck.js/extensions/menu}/deck.menu.css[]
+</style>
+<style type="text/css">
+include1::{stylesdir=./deck.js/extensions/navigation}/deck.navigation.css[]
+</style>
+<style type="text/css">
+include1::{stylesdir=./deck.js/extensions/status}/deck.status.css[]
+</style>
+<style type="text/css">
+include1::{stylesdir=./deck.js/extensions/hash}/deck.hash.css[]
+</style>
+<style type="text/css">
+include1::{stylesdir=./deck.js/extensions/toc}/deck.toc.css[]
+</style>
+<!-- Theme CSS files -->
+<style type="text/css">
+include1::{stylesdir=./deck.js/themes/style}/{deckjs_theme}.css[]
+</style>
+<style type="text/css" id="transition-theme-link">
+include1::{stylesdir=./deck.js/themes/transition}/{deckjs_transition}.css[]
+</style>
+ifdef::pygments[]
+<style type="text/css" id="transition-theme-link">
+include1::{stylesdir=./ad-stylesheet/pygments}/{pygments_style}.css[]
+</style>
+endif::pygments[]
+<!-- Replace path with correct path to Modernizr file. -->
+<script type="text/javascript">
+# Escape as CDATA to pass validators.
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js}/modernizr.custom.js[]
+/*]]>*/
+</script>
+<script type="text/javascript">
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js}/jquery-1.7.min.js[]
+/*]]>*/
+</script>
+<!-- Deck Core and extensions -->
+<script type="text/javascript">
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js/core}/deck.core.js[]
+/*]]>*/
+</script>
+<script type="text/javascript">
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js/extensions/hash}/deck.hash.js[]
+/*]]>*/
+</script>
+<script type="text/javascript">
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js/extensions/menu}/deck.menu.js[]
+/*]]>*/
+</script>
+<script type="text/javascript">
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js/extensions/goto}/deck.goto.js[]
+/*]]>*/
+</script>
+<script type="text/javascript">
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js/extensions/status}/deck.status.js[]
+/*]]>*/
+</script>
+<script type="text/javascript">
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js/extensions/navigation}/deck.navigation.js[]
+/*]]>*/
+</script>
+<script type="text/javascript">
+/*<![CDATA[*/
+include1::{scriptsdir=./deck.js/extensions/toc}/deck.toc.js[]
+/*]]>*/
+</script>
+endif::linkcss[]
</head>
-
<body class="deck-container">
-
<section class="slide" id="title-slide">
<h1>{doctitle}</h1>
<h3>{author}{corpname? — {corpname}}</h3>
@@ -152,50 +230,47 @@ text=<p>|</p>
[footer]
<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
<a href="#" class="deck-next-link" title="Next">&#8594;</a>
-
<p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
-
-<!-- toc pannel -->
+# toc pannel
<div class="deck-toc"></div>
-
-<!-- this is a toc status panel -->
-<!-- <table class="deck-toc-status"> -->
- <!-- <tr> -->
- <!-- <td class="right deck-toc-h2">&nbsp;</td> -->
- <!-- <td class="left deck-toc-h3">&nbsp;</td> -->
- <!-- </tr> -->
-<!-- </table> -->
-
+# toc status panel
+#<table class="deck-toc-status">
+# <tr>
+# <td class="right deck-toc-h2">&nbsp;</td>
+# <td class="left deck-toc-h3">&nbsp;</td>
+# </tr>
+#</table>
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
-
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
-
<!-- Other extension HTML snippets go here, at the bottom of the deck container. -->
-<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
-<script>window.jQuery || document.write('<script src="deck.js/jquery-1.7.min.js"><\/script>')</script>
-
-<!-- Deck Core and extensions -->
-<script src="deck.js/core/deck.core.js"></script>
-<script src="deck.js/extensions/hash/deck.hash.js"></script>
-<script src="deck.js/extensions/menu/deck.menu.js"></script>
-<script src="deck.js/extensions/goto/deck.goto.js"></script>
-<script src="deck.js/extensions/status/deck.status.js"></script>
-<script src="deck.js/extensions/navigation/deck.navigation.js"></script>
-<script src="deck.js/extensions/toc/deck.toc.js"></script>
-
+ifdef::linkcss[]
+ <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
+ <script>window.jQuery || document.write('<script src="deck.js/jquery-1.7.min.js"><\/script>')</script>
+ <!-- Deck Core and extensions -->
+ <script src="deck.js/core/deck.core.js"></script>
+ <script src="deck.js/extensions/hash/deck.hash.js"></script>
+ <script src="deck.js/extensions/menu/deck.menu.js"></script>
+ <script src="deck.js/extensions/goto/deck.goto.js"></script>
+ <script src="deck.js/extensions/status/deck.status.js"></script>
+ <script src="deck.js/extensions/navigation/deck.navigation.js"></script>
+ <script src="deck.js/extensions/toc/deck.toc.js"></script>
+endif::linkcss[]
<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
$(function() {
- {scrollable?$.deck.defaults.keys["previous"] = [8, 33, 37, 39]; $.deck.defaults.keys["next"] = [13, 32, 34, 39];}
+ifdef::scrollable[]
+$.deck.defaults.keys["previous"] = [8, 33, 37, 39];
+$.deck.defaults.keys["next"] = [13, 32, 34, 39];}
+endif::scrollable[]
$.deck('.slide');
});
</script>
View
7 example-template.asciidoc
@@ -26,12 +26,17 @@ deck.js Support for Asciidoc
with `Pygments`.
///////////////////////
//:pygments:
-//:pygments_sytle: native
+//:pygments_style: native
///////////////////////
Uncomment following line if you want to scroll inside slides
with {down,up} arrow keys.
///////////////////////
//:scrollable:
+///////////////////////
+ Uncomment following line if you want to link css and js file
+ from outside instead of embedding them into the output file.
+///////////////////////
+//:linkcss:
== Slide One
View
49 tutorial-slide.asciidoc
@@ -3,35 +3,13 @@ deck.js Support for Asciidoc
:author: Qingping Hou
:email: <dave2008713@gmail.com>
:description: a tutorial for writing deck.js presentation with asciidoc
-:revdate: 2012-02-07
-:revnumber: 0.2
-///////////////////////
- Themes that you can choose includes:
- web-2.0, swiss, neon, beamer
-///////////////////////
+:revdate: 2012-02-08
+:revnumber: 0.3
:deckjs_theme: neon
-///////////////////////
- Transitions that you can choose includes:
- fade, horizontal-slide, vertical-slide
-///////////////////////
:deckjs_transition: horizontal-slide
-///////////////////////
- AsciiDoc use `source-highlight` as default highlighter.
-
- Styles available for pygment highlighter:
- monokai, manni, perldoc, borland, colorful, default, murphy, vs, trac,
- tango, fruity, autumn, bw, emacs, vim, pastie, friendly, native,
-
- Uncomment following two lines if you want to highlight your code
- with `Pygments`.
-///////////////////////
-//:pygments:
-//:pygments_sytle: native
-///////////////////////
- Uncomment following line if you want to scroll inside slides
- with {down,up} arrow keys.
-///////////////////////
-//:scrollable:
+:pygments:
+:pygments_style: native
+:scrollable:
== What is deck.js?
@@ -39,19 +17,30 @@ deck.js Support for Asciidoc
*deck.js* is a JavaScript library for building modern HTML presentations. *deck.js* is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.
-For more information, please check out its http://imakewebthings.github.com/deck.js/[Project page].
+For more information, please check out its http://imakewebthings.github.com/deck.js/[project page].
== How to generate deck.js with Asciidoc
-It's just as simple as issuing following command:
+First, make sure you have at least asciidoc-8.6.6 installed and download this backend from the http://houqp.github.com/asciidoc-deckjs/[project page].
+
+Then install the backend:
...........................................
-asciidoc -f deckjs.conf file.asciidoc
+asciidoc --backend install deckjs-1.2.zip
...........................................
+After the installation, it's just as simple as issuing following command:
+
+...........................................
+asciidoc -b deckjs.conf file.asciidoc
+...........................................
+
+You can also use this backend without installation, please refer to https://github.com/houqp/asciidoc-deckjs/blob/master/README.md[README] for details.
+
== Shortcuts
+
Following are built-in shortcuts in deck.js:
* jump to any slide by given number, `g`.
Please sign in to comment.
Something went wrong with that request. Please try again.