From: Paul Hänsch Date: Tue, 18 Jun 2019 17:56:13 +0000 (+0200) Subject: Merge commit 'f6663322e3efc841d04a4336f7f9ff55a07e5128' X-Git-Url: http://git.plutz.net/?p=clickslide;a=commitdiff_plain;h=c461819f9bb1a3b13246bd042c3c72ac54ceb929;hp=f6663322e3efc841d04a4336f7f9ff55a07e5128 Merge commit 'f6663322e3efc841d04a4336f7f9ff55a07e5128' --- diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9b71e08 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.*.swo +.*.swp +*.html diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..e69de29 diff --git a/cgilite.sh b/cgilite/cgilite.sh similarity index 100% rename from cgilite.sh rename to cgilite/cgilite.sh diff --git a/file.sh b/cgilite/file.sh similarity index 100% rename from file.sh rename to cgilite/file.sh diff --git a/html-sh.sed b/cgilite/html-sh.sed similarity index 100% rename from html-sh.sed rename to cgilite/html-sh.sed diff --git a/logging.sh b/cgilite/logging.sh similarity index 100% rename from logging.sh rename to cgilite/logging.sh diff --git a/session.sh b/cgilite/session.sh similarity index 100% rename from session.sh rename to cgilite/session.sh diff --git a/storage.sh b/cgilite/storage.sh similarity index 100% rename from storage.sh rename to cgilite/storage.sh diff --git a/clickslide.css b/clickslide.css new file mode 100644 index 0000000..2e76754 --- /dev/null +++ b/clickslide.css @@ -0,0 +1,308 @@ +/* === 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; } + diff --git a/clickslide.sh b/clickslide.sh new file mode 100755 index 0000000..e78f1c7 --- /dev/null +++ b/clickslide.sh @@ -0,0 +1,118 @@ +#!/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" : '.*]*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 + *\*|\*\) # Inline styles into head + printf '%s + + %s' "${tag#*}" + tag='' depth=$((depth + 1)) + ;; + *\*) # Count slide id, insert "next" button + prev="$next" + next="${tag#*next
*|*\*) + prev="$next" + next="autoslide${idoff}" + idoff="$((idoff + 1))" + printf '%snext
*) # Insert "previous" button + printf '%s
previous%s' \ + "${tag%*}" "$prev" "${tag#*}" + tag='' depth=$((depth - 1)) + ;; + *\*) # Insert toplevel link + printf '%soverview' "$tag" + tag='' depth=$((depth + 1)) + ;; + *\*) # Insert total slide count + printf '%i%s' "$idoff" "$tag" + tag='' depth=$((depth - 1)) + ;; + *\<*class=\"uncover\"*\>*) # Insert checkboxes in "uncover" lists + #printf '%s
  • ' "$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<%s' "${tag%<*}" "${tag#*<}" + else + printf %s "$tag" + fi + [ "${tag}" = "${tag%/>}" ] && depth=$((depth + 1)) + tag='' + ;; + *) : + ;; + esac + done +} diff --git a/demo/Makefile b/demo/Makefile new file mode 100644 index 0000000..7cb4080 --- /dev/null +++ b/demo/Makefile @@ -0,0 +1,2 @@ +demo.html: demo.short + ../clickslide.sh <$< >$@ diff --git a/demo/demo.short b/demo/demo.short new file mode 100644 index 0000000..9b239f6 --- /dev/null +++ b/demo/demo.short @@ -0,0 +1,105 @@ +[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);" +\ + \ + \Demo\ + \ + \ + \

    Headline\ + \ +\ + ] + [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!]] +] diff --git a/demo/exb0.jpg b/demo/exb0.jpg new file mode 100644 index 0000000..7aa9056 Binary files /dev/null and b/demo/exb0.jpg differ diff --git a/demo/exb1.jpg b/demo/exb1.jpg new file mode 100644 index 0000000..cec5520 Binary files /dev/null and b/demo/exb1.jpg differ diff --git a/demo/exb2.jpg b/demo/exb2.jpg new file mode 100644 index 0000000..70710dc Binary files /dev/null and b/demo/exb2.jpg differ diff --git a/demo/exb3.jpg b/demo/exb3.jpg new file mode 100644 index 0000000..c6832f0 Binary files /dev/null and b/demo/exb3.jpg differ