--- /dev/null
+.*.swo
+.*.swp
+*.html
--- /dev/null
+/* === Colors === */
+
+footer,
+body a.toplevel:before,
+body span.count,
+div.slide:target:after,
+div.slide:target + a, div.slide:target + a + a,
+:target + a:before, :target + a + a:before
+{ color: #888; }
+
+body
+{ background-color: #AAA;
+ background-image: repeating-linear-gradient( to bottom right, #AAA, #999 8px);
+}
+
+div.slide
+{ background-color: #FFF;
+ background-image: repeating-linear-gradient( #FFF, #EEE 4px);
+}
+
+div.slide:target:after,
+footer:before, body:after
+{ background-color: #EEE;
+ background-image: repeating-linear-gradient(#EEE, #DDD 8px);
+}
+
+div.slide h1, div.slide h2
+{ background-color: #EEE;
+ background-image: repeating-linear-gradient(#EEE, #DDD 8px);
+}
+
+div.slide pre, div.slide code
+{ background-color: #DDD;
+ background-image: repeating-linear-gradient(#CCC, #DDD 4px);
+}
+
+div.slide:after /* slide number on overview screen */
+{ color: #AAA; }
+
+/* === Overall Layout === */
+
+* {
+ box-sizing: border-box;
+ margin: 0; padding: 0;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+/* min-height: 240px */ body { font-size: 9px; }
+@media(min-height: 320px) { body { font-size: 12px; } }
+@media(min-height: 480px) { body { font-size: 19px; } }
+@media(min-height: 720px) { body { font-size: 28px; } }
+@media(min-height: 768px) { body { font-size: 30px; } }
+@media(min-height: 800px) { body { font-size: 32px; } }
+@media(min-height: 960px) { body { font-size: 38px; } }
+@media(min-height: 1024px) { body { font-size: 41px; } }
+@media(min-height: 1080px) { body { font-size: 43px; } }
+@media(min-height: 2160px) { body { font-size: 86px; } }
+
+body {
+ font-family: sans-serif;
+ padding: 2em 1em 6em 1em;
+ #background-color: #555;
+ text-align: center;
+ overflow-x: hidden;
+}
+body * {
+ text-align: left;
+ font-size: inherit;
+}
+
+body:after {
+ position: fixed;
+ bottom: 0; left: 0;
+ width: 100%;
+ height: 1.25em;
+ content: ' ';
+ #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
+}
+
+a.previous, a.next ,a.toplevel {
+ text-decoration: none;
+}
+
+footer {
+ position: fixed;
+ bottom: 0; left: 0;
+ width: 100%;
+ font-size: .75em;
+ padding: .5em 4em .5em 12em;
+ text-align: center;
+ #color: #888;
+ z-index: 4;
+ /* footer must not have background, so slide number is not covered */
+}
+footer:before { /* fake background in case footer spans multiple lines */
+ content: ' ';
+ position: absolute;
+ top: 0; left: 0;
+ bottom: 1.5em;
+ width: 100%;
+ #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
+ z-index: -1;
+}
+
+body a.toplevel {
+ position: fixed;
+ bottom: 0; left: 8em;
+ width: 2ex; overflow: hidden;
+ font-size: .875em;
+ padding-bottom: .25em;
+ color: transparent;
+ z-index: 5;
+}
+body a.toplevel:before {
+ #color: #888;
+ content: '\2196';
+}
+
+body span.count {
+ position: fixed;
+ bottom: 0; left: 6.25em;
+ font-size: .875em;
+ padding-bottom: .125em;
+ #color: #888;
+ z-index: 5;
+}
+
+/* ==== Overview Screen ==== */
+
+div.slide, a.nextslide {
+ font-size: .15625em;
+}
+
+div.slide {
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
+ width: 48em; height: 30em;
+ margin-left: -48em;
+ border: 1px solid black;
+}
+
+div.slide:after { /* slide number */
+ position: absolute;
+ bottom: 0; left: 0;
+ font-size: 15em;
+ line-height: 1em;
+ text-align: left;
+ content: attr(count);
+ padding-left: .125em;
+ #color: #DDD;
+}
+
+div.slide + a { display: none; }
+a.nextslide {
+ display: inline-block;
+ position: relative;
+ vertical-align: top;
+ width: 48em; line-height: 30em;
+ color: transparent;
+ z-index: 2;
+}
+#div.slide:nth-of-type(1) { margin-right: .5em; }
+
+/* ==== Slide Appearance ==== */
+
+div.slide {
+ #background: #FFF no-repeat center;
+ text-align: center;
+ line-height: 1.5em;
+}
+
+div.slide > * {
+ margin-top: 1em;
+ max-width: 85%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+div.slide > *:first-child:last-child,
+div.slide > h2:first-child + :last-child {
+ margin-top: 20%;
+ transform: translate(0, -50%);
+}
+
+div.slide h1, div.slide h2 {
+ display: block;
+ text-align: center;
+ font-size: 1.5em;
+ margin-top: 0;
+ margin-bottom: 1em;
+ width: 100%; max-width: 100%;
+ #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
+}
+
+div.slide h1,
+div.slide > h1:first-child:last-child {
+ margin-top: 25%;
+ margin-bottom: 0;
+ padding: .5em 2em;
+}
+
+div.slide h2 {
+ padding: .25em 1em;
+}
+
+div.slide > table {
+ width: 85%;
+}
+div.slide * table {
+ width: 100%;
+}
+
+div.slide ul li {
+ list-style-type: square;
+ margin-left: 2em;
+}
+
+div.slide ul ul, div.slide ul ol,
+div.slide ol ul, div.slide ol ol {
+ margin-left: -1em;
+}
+
+div.slide > ul,
+div.slide > ol {
+ width: fit-content;
+ margin: .25em auto;
+}
+
+div.slide pre, div.slide code {
+ #background-color: rgba(224,224,224,128);
+ font-family: monospace;
+}
+div.slide pre {
+ padding: 1ex;
+ text-align: left;
+ overflow: hidden;
+}
+div.slide code {
+ padding: 0 .5em;
+}
+
+/* ==== Slide Display ==== */
+
+div.slide:target {
+ position: fixed;
+ z-index: 3;
+ top: 0; bottom: 0; left: 0; right: 0;
+ width: auto; height: 100%;
+ margin: 0;
+ border: none;
+ font-size: inherit;
+}
+
+/* slide number, footer bar*/
+div.slide:target:after {
+ position: absolute;
+ bottom: 0; left: 0;
+ width: 100%;
+ font-size: .875em;
+ line-height: 1.5em;
+ text-align: left;
+ content: attr(count) " /";
+ padding-left: 4em;
+ #color: #888;
+ #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
+}
+
+/* back and forth link buttons */
+div.slide:target + a,
+div.slide:target + a + a {
+ position: static;
+ display: block;
+ font-size: inherit;
+ line-height: 1em;
+ #color: #888;
+}
+:target + a:before, :target + a + a:before {
+ display: block;
+ position: fixed;
+ bottom: 0;
+ #color: #888;
+ padding: 0 1em .25em 1em;
+ z-index: 4;
+}
+:target + a:before { left: 0; }
+:target + a:before { content: '\22d8'; }
+:target + a + a:before { right: 0; }
+:target + a + a:before { content: '\22d9'; }
+
+.uncover[type="checkbox"] + * { opacity: .2; }
+.uncover[type="checkbox"]:checked + * { opacity: 1; }
+
+.uncover[type="checkbox"] {
+ position: fixed;
+ top: 0; bottom: 0; left: 0; right: 0;
+ width: 100%; height: 100%;
+ opacity: 0;
+ z-index: 1;
+}
+
+.uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
+.uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
+.uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
+.uncover[type="checkbox"]:checked { display: none; }
+
--- /dev/null
+#!/bin/sh
+
+prev='' next='' idoff=0
+depth=0 ucdepth=-1
+
+base64() {
+ uuencode -m - <"$1" \
+ | sed '1d; :X;$!{N;bX;}; s;\n;;g; s;=\+;;g;'
+}
+
+{ "${0%/*}"/cgilite/html-sh.sed || cat; } \
+| {
+ line="$(line)"
+ while :; do
+ tag="${tag}${line%%>*}"
+
+ if [ "$line" = "${line%%>*}" ]; then
+ # $line did not contain ">" and thus was added to $tag entirely
+ if ! line="$(line)"; then
+ printf %s\\n "$tag"
+ break
+ fi
+ tag="${tag}
+ "
+ else
+ # $line is shortened by segment added to $tag
+ line="${line#*>}"
+ tag="${tag}>"
+ fi
+
+ ### Image embedding for Inline styles
+ while expr "$tag" : '.*<[^>]*style="[^"]*url("\?[^)]\+\.\(png\|jpg\|jpeg\|gif\|svg\)"\?)'; do
+ pre="${tag%%url(*)*}"
+ post="${tag#*url(*)}"
+ file="${tag#${pre}url(}" file="${file%)$post}"
+ file="${file#\"}" file="${file%\"}"
+ echo Inlining Background Image "$file" >&2
+ if [ -r "$file" ]; then
+ tag="${pre}url('data:image/${file##*.};base64,$(base64 "$file")')${post}"
+ fi
+ done >/dev/null
+
+ ### Image embedding for Image tags
+ while expr "$tag" : '.*<img [^>]*src="[^"]\+\.\(png\|jpg\|jpeg\|gif\|svg\)"'; do
+ pre="${tag%%src=\"*\"*}"
+ post="${tag#*src=\"*\"}"
+ file="${tag#${pre}src=\"}" file="${file%\"$post}"
+ echo Inlining Image "$file" >&2
+ if [ -r "$file" ]; then
+ tag="${pre}src=\"data:image/${file##*.};base64,$(base64 "${file}")\"${post}"
+ fi
+ done >/dev/null
+
+ ### Tag Processing
+ case $tag in
+ *\<head\>*|\*\<head\ *\>) # Inline styles into head
+ printf '%s<meta name="viewport" content="width=device-width">
+ <meta charset="UTF-8">
+ <style type="text/css"><!--\n' "${tag%${tag#*<head*>}}"
+ cat "${0%/*}/clickslide.css"
+ printf '\n--></style>%s' "${tag#*<head*>}"
+ tag='' depth=$((depth + 1))
+ ;;
+ *\<slide\ *id=\"?*\"*\>*) # Count slide id, insert "next" button
+ prev="$next"
+ next="${tag#*<slide }" next="${next#*id=\"}" next="${next%\"*}"
+ next="autoslide${idoff}"
+ idoff="$((idoff + 1))"
+ printf '%s<a class="nextslide" href="#%s">next</a><div class="slide" count="%i" id="%s" %s' \
+ "${tag%<slide *}" "$next" "$idoff" "$next" "${tag#*<slide }"
+ tag='' depth=$((depth + 1))
+ ;;
+ *\<slide\ *\>*|*\<slide\>*)
+ prev="$next"
+ next="autoslide${idoff}"
+ idoff="$((idoff + 1))"
+ printf '%s<a class="nextslide" href="#%s">next</a><div class="slide" count="%i" id="%s" %s' \
+ "${tag%<slide*}" "$next" "$idoff" "$next" "${tag#*<slide}"
+ tag='' depth=$((depth + 1))
+ ;;
+ *\</slide\>*) # Insert "previous" button
+ printf '%s</div><a class="prevslide" href="#%s">previous</a>%s' \
+ "${tag%</slide>*}" "$prev" "${tag#*</slide>}"
+ tag='' depth=$((depth - 1))
+ ;;
+ *\<body*\>*) # Insert toplevel link
+ printf '%s<a href="#" class="toplevel">overview</a>' "$tag"
+ tag='' depth=$((depth + 1))
+ ;;
+ *\</body*\>*) # Insert total slide count
+ printf '<span class="count">%i</span>%s' "$idoff" "$tag"
+ tag='' depth=$((depth - 1))
+ ;;
+ *\<*class=\"uncover\"*\>*) # Insert checkboxes in "uncover" lists
+ #printf '%s<li></li>' "$tag"
+ printf '%s' "$tag"
+ tag='' depth=$((depth + 1))
+ ucdepth=$depth
+ ;;
+ *\</*\>*)
+ printf %s "$tag"
+ tag='' depth=$((depth - 1))
+ [ $depth -lt $ucdepth ] && ucdepth=-1
+ ;;
+ *\<*\>*)
+ if [ $ucdepth = $depth ]; then
+ printf '%s<input type="checkbox" class="uncover"/><%s' "${tag%<*}" "${tag#*<}"
+ else
+ printf %s "$tag"
+ fi
+ [ "${tag}" = "${tag%/>}" ] && depth=$((depth + 1))
+ tag=''
+ ;;
+ *) :
+ ;;
+ esac
+ done
+}
--- /dev/null
+demo.html: demo.short
+ ../clickslide.sh <$< >$@
--- /dev/null
+[html [head
+ [title ClickSlide Demo]
+] [body
+ [footer Clickslide Demo]
+
+ [slide [h1 Clickslide]
+ a Compiler for Browser based Slideshows
+ ]
+
+ [slide
+ [ul
+ [li Why would I write another Slideshow system]
+ [li What's wrong with JavaScript?]
+ [li How do you simplify HTML?]
+ ]
+ ]
+
+ [slide [h2 Why Write another Slideshow System?]
+ [ul .uncover
+ [li WYSIWYG Slideshow applications are annoying [ul
+ [li too much fiddling, not straight to point]
+ ]]
+ [li [em LaTeX] is not exactly casual]
+ [li Existing browser slideshows are [ul
+ [li based on JavaScript]
+ [li Either verbous HTML, or unflexible markup]
+ ]]
+ ]
+ ]
+
+ [slide [h2 Why avoid JavaScript]
+ [ul .uncover
+ [li Nothing wrong with JS as a programming language, [strong but...]]
+ [li Freedom to [em Use], [em Study], [em Share], and [em Improve] can in practice not be applied to code served from another computer (regardless of the license this code is under)]
+ [li Impossible to get browser security straight for Turing complete programs [ul
+ [li → Massive security problems, which are fundamentally unresolvable]
+ [li HTML and CSS are not Turing complete (CSS is a [em regular] language)]
+ ]]
+ [li Performance killer in practice]
+ ]
+ ]
+
+ [slide [h1 Usage and Features]]
+
+ [slide [h2 Simplifying HTML]
+ Maintain the flexibility of plain HTML. Decrease verbosity of the code. [br]
+ [pre style="display: inline-block; width: 46%; background-image: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.5)), url(exb0.jpg);"
+\<html\>
+ \<head\>
+ \<title\>Demo\</title\>
+ \</head\>
+ \<body id="frontpage"\>
+ \<h1 class="top"\>Headline\</h1\>
+ \</body\>
+\</html\>
+ ]
+ [pre style="display: inline-block; width: 46%; background-image: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.5)), url(exb3.jpg);"
+\[html
+ \[head
+ \[title Demo\]
+ \]
+ \[body \#frontpage
+ \[h1 .top Headline\]
+ \]
+\]
+ ]
+ ]
+
+ [slide [h2 Example Slide Show]
+ [pre
+\[html \[head
+ \[title Example Slideshow\]
+\]\[body
+ \[footer Title | Author | Date and Place\]
+ \[slide \[h1 Title\]\]
+ \[slide \[h2 A Slide\]
+ \[ul .uncover
+ \[li This list\]
+ \[li gets uncovered\]
+ \[li item by item\]
+\]\]\]\]
+ ]
+ ]
+
+ [slide [h2 Syntax]
+ [ul
+ [li Clickslide uses [a "//plutz.net/software/shorthand.html" Shorthand] syntax]
+ [li it introduces the [code slide]-tag to make up a single slide]
+ [li lists belonging to the [code \.uncover]-class will be uncovered item by item when the list is clicked]
+ [li You can view the source code of this presentation: [a "demo.short" click here]]
+ ]
+ ]
+
+ [slide [h2 Features]
+ [ul
+ [li Whole slideshow is contained in one document]
+ [li Images get embedded into the document via base64-coding]
+ [li Slideshow can be put on a website, emailed, or passed around on a thumbdrive]
+ [li Slideshow can be viewed on virtually all desktop and mobile devices]
+ [li Source files can be easily tracked via version control]
+ ]
+ ]
+
+ [slide [h1 Thank you for listening!]]
+]
projects / clickslide / commitdiff
