From: Paul Hänsch Date: Wed, 18 Sep 2019 13:41:39 +0000 (+0200) Subject: Squashed 'clickslide/' changes from b771768..08ca3fa X-Git-Url: http://git.plutz.net/?p=vhs_kurs;a=commitdiff_plain;h=2c91cc63d0e28a4f202ee2db9a8d769e63d54f7f Squashed 'clickslide/' changes from b771768..08ca3fa 08ca3fa switch for base64 implementation fc0b6d7 switch for base64 implementation c461819 Merge commit 'f6663322e3efc841d04a4336f7f9ff55a07e5128' f666332 Squashed 'cgilite/' changes from 8c2e52f..506e2f9 8ccb37d Merge branch 'master' of git.plutz.net:clickslide 39a000d separated color declarations for easyer syling e93b4dc finished demo slides da2c6e7 finished demo 7f3ca99 portability: prevent crashes in bash git-subtree-dir: clickslide git-subtree-split: 08ca3fa5aa85561baa66ebeac9130bd96e46333d --- diff --git a/cgilite/file.sh b/cgilite/file.sh index b6118f5..51ec245 100755 --- a/cgilite/file.sh +++ b/cgilite/file.sh @@ -1,6 +1,6 @@ #!/bin/sh -# Copyright 2016 - 2018 Paul Hänsch +# Copyright 2016 - 2019 Paul Hänsch # # This file is part of cgilite. # @@ -59,7 +59,7 @@ FILE(){ # Parse the allowable date formats from Section 3.3.1 of # https://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html HEADER If-Modified-Since \ - | sed -r 's;^[^ ]+, ([0-9]{2}) (...) ([0-9]{4}) (..:..:..) GMT$;\3-\2-\1 \4;; + | sed -E 's;^[^ ]+, ([0-9]{2}) (...) ([0-9]{4}) (..:..:..) GMT$;\3-\2-\1 \4;; s;^[^ ]+, ([0-9]{2})-(...)-([789][0-9]) (..:..:..) GMT$;19\3-\2-\1 \4;; s;^[^ ]+, ([0-9]{2})-(...)-([0-6][0-9]) (..:..:..) GMT$;20\3-\2-\1 \4;; s;^[^ ]+ (...) ([0-9]{2}) (..:..:..) ([0-9]{4})$;\4-\1-\2 \3;; @@ -69,7 +69,7 @@ FILE(){ | xargs -r0 date +%s -ud 2>&- )" - range="$(HEADER Range |sed -nr 's;^bytes=([0-9]+-[0-9]*|-[0-9]+)$;\1;p;q;')" + range="$(HEADER Range |sed -nE 's;^bytes=([0-9]+-[0-9]*|-[0-9]+)$;\1;p;q;')" case "$range" in *-) range="${range}$((file_size - 1))";; -*) [ ${range#-} -le $file_size ] \ diff --git a/cgilite/session.sh b/cgilite/session.sh index 25a6598..8ed8d88 100755 --- a/cgilite/session.sh +++ b/cgilite/session.sh @@ -41,6 +41,15 @@ timeid(){ checkid(){ grep -m 1 -xE '[0-9a-zA-Z:=]{16}'; } +transid(){ + # transaction ID to modify a given file + local file="$1" + { stat -c %F%i%n%N%s%Y "$file" 2>&- + printf %s "$SESSION_ID" + server_key + } | sha256sum | cut -d\ -f1 +} + update_session(){ local session sid time sig serverkey checksig @@ -53,9 +62,9 @@ update_session(){ checksig="${checksig%% *}" d=$(date +%s) - if [ "$checksig" != "$sig" \ - -o "$time" -lt "$d" \ - -o ! "$(printf %s "$sid" |checkid)" ] 2>&- + if ! [ "$checksig" = "$sig" \ + -a "$time" -ge "$d" \ + -a "$(printf %s "$sid" |checkid)" ] 2>&- then debug Setting up new session sid="$(randomid)" diff --git a/cgilite/storage.sh b/cgilite/storage.sh index 0d09b26..10a8029 100755 --- a/cgilite/storage.sh +++ b/cgilite/storage.sh @@ -1,6 +1,6 @@ #!/bin/sh -# Copyright 2018 Paul Hänsch +# Copyright 2018, 2019 Paul Hänsch # # This is a file format helper, part of CGIlite. # @@ -74,7 +74,7 @@ STRING=' STRING(){ { [ $# -eq 0 ] && cat || printf %s "$*"; } \ - | sed -r ':X; $!{N;bX;}'"$STRING" + | sed -E ':X; $!{N;bX;}'"$STRING" } UNSTRING=' @@ -89,5 +89,5 @@ UNSTRING=' ' UNSTRING(){ { [ $# -eq 0 ] && cat || printf %s "$*"; } \ - | sed -r "$UNSTRING" + | sed -E "$UNSTRING" } diff --git a/clickslide.css b/clickslide.css index 084bf68..2e76754 100644 --- a/clickslide.css +++ b/clickslide.css @@ -1,3 +1,44 @@ +/* === 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; @@ -20,7 +61,7 @@ body { font-family: sans-serif; padding: 2em 1em 6em 1em; - background-color: #555; + #background-color: #555; text-align: center; overflow-x: hidden; } @@ -33,9 +74,9 @@ body:after { position: fixed; bottom: 0; left: 0; width: 100%; - background-color: #EEE; height: 1.25em; content: ' '; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); } a.previous, a.next ,a.toplevel { @@ -49,16 +90,17 @@ footer { font-size: .75em; padding: .5em 4em .5em 12em; text-align: center; - color: #888; + #color: #888; z-index: 4; + /* footer must not have background, so slide number is not covered */ } -footer:before { +footer:before { /* fake background in case footer spans multiple lines */ content: ' '; position: absolute; top: 0; left: 0; bottom: 1.5em; width: 100%; - background-color: #EEE; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); z-index: -1; } @@ -68,11 +110,11 @@ body a.toplevel { width: 2ex; overflow: hidden; font-size: .875em; padding-bottom: .25em; - color: #EEE; + color: transparent; z-index: 5; } body a.toplevel:before { - color: #888; + #color: #888; content: '\2196'; } @@ -81,7 +123,7 @@ body span.count { bottom: 0; left: 6.25em; font-size: .875em; padding-bottom: .125em; - color: #888; + #color: #888; z-index: 5; } @@ -108,7 +150,7 @@ div.slide:after { /* slide number */ text-align: left; content: attr(count); padding-left: .125em; - color: #DDD; + #color: #DDD; } div.slide + a { display: none; } @@ -117,7 +159,7 @@ a.nextslide { position: relative; vertical-align: top; width: 48em; line-height: 30em; - color: rgba(0, 0, 0, 0); + color: transparent; z-index: 2; } #div.slide:nth-of-type(1) { margin-right: .5em; } @@ -125,7 +167,7 @@ a.nextslide { /* ==== Slide Appearance ==== */ div.slide { - background: #FFF no-repeat center; + #background: #FFF no-repeat center; text-align: center; line-height: 1.5em; } @@ -145,12 +187,12 @@ div.slide > h2:first-child + :last-child { div.slide h1, div.slide h2 { display: block; - background-color: #EEE; 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, @@ -187,13 +229,18 @@ div.slide > ol { margin: .25em auto; } +div.slide pre, div.slide code { + #background-color: rgba(224,224,224,128); + font-family: monospace; +} div.slide pre { - background-color: rgba(192,192,192,128); padding: 1ex; text-align: left; - font-family: monospace; overflow: hidden; } +div.slide code { + padding: 0 .5em; +} /* ==== Slide Display ==== */ @@ -217,8 +264,8 @@ div.slide:target:after { text-align: left; content: attr(count) " /"; padding-left: 4em; - background-color: #EEE; - color: #888; + #color: #888; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); } /* back and forth link buttons */ @@ -228,13 +275,13 @@ div.slide:target + a + a { display: block; font-size: inherit; line-height: 1em; - color: #888; + #color: #888; } :target + a:before, :target + a + a:before { display: block; position: fixed; bottom: 0; - color: #888; + #color: #888; padding: 0 1em .25em 1em; z-index: 4; } diff --git a/clickslide.sh b/clickslide.sh index 980365f..d42f405 100755 --- a/clickslide.sh +++ b/clickslide.sh @@ -3,9 +3,15 @@ prev='' next='' idoff=0 depth=0 ucdepth=-1 -base64() { - uuencode -m - <"$1" \ - | sed '1d; :X;$!{N;bX;}; s;\n;;g; s;=\+;;g;' +_base64() { + # busybox does not ship base64, only uuencode. Other platforms might need base64 instead + if which uuencode; then + uuencode -m - <"$1" \ + | sed '1d; :X;$!{N;bX;}; s;\n;;g; s;=\+;;g;' + else + base64 <"$1" \ + | sed ':X;$!{N;bX;}; s;\n;;g; s;=\+;;g;' + fi } { "${0%/*}"/cgilite/html-sh.sed || cat; } \ @@ -33,10 +39,10 @@ base64() { pre="${tag%%url(*)*}" post="${tag#*url(*)}" file="${tag#${pre}url(}" file="${file%)$post}" - file="${file#"}" file="${file%"}" + file="${file#\"}" file="${file%\"}" echo Inlining Background Image "$file" >&2 if [ -r "$file" ]; then - tag="${pre}url('data:image/${file##*.};base64,$(base64 "$file")')${post}" + tag="${pre}url('data:image/${file##*.};base64,$(_base64 "$file")')${post}" fi done >/dev/null @@ -47,7 +53,7 @@ base64() { 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}" + tag="${pre}src=\"data:image/${file##*.};base64,$(_base64 "${file}")\"${post}" fi done >/dev/null 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/example/exb0.jpg b/demo/exb0.jpg similarity index 100% rename from example/exb0.jpg rename to demo/exb0.jpg diff --git a/example/exb1.jpg b/demo/exb1.jpg similarity index 100% rename from example/exb1.jpg rename to demo/exb1.jpg diff --git a/example/exb2.jpg b/demo/exb2.jpg similarity index 100% rename from example/exb2.jpg rename to demo/exb2.jpg diff --git a/example/exb3.jpg b/demo/exb3.jpg similarity index 100% rename from example/exb3.jpg rename to demo/exb3.jpg diff --git a/example.short b/example.short deleted file mode 100644 index 0d90368..0000000 --- a/example.short +++ /dev/null @@ -1,22 +0,0 @@ -[!DOCTYPE HTML] -[html [head - [title Demo] -][body - [footer Paul Hänsch | Linux-Grundkurs | VHS Chemnitz] - [slide - [h1 Folie A] - [ul .uncover - [li Eins] - [li Zwei] - [li Drei] - [li Vier] - [li Fünf] - ] - ][slide - [h1 Folie B] - foo bar qua spam eggs bacon jam elephant - [ol .uncover [li x] [li y] [li z]] - giraffe sabertooth kitten vegetarian - ] - [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] -]] diff --git a/example/demo.short b/example/demo.short deleted file mode 100644 index f2ab688..0000000 --- a/example/demo.short +++ /dev/null @@ -1,85 +0,0 @@ -[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 (see next slide)] - [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 [h2 Simplifying HTML] - Maintain the flexibility of plain HTML. Decrease verbosity of the code. [br] - [pre style="display: inline-block; width: 46%; background-image: url(exb0_light.jpg);" -\ - \ - \Demo\ - \ - \ - \

Headline\ - \ -\ - ] - [pre style="display: inline-block; width: 46%; background-image: url(exb3_light.jpg);" -\[html - \[head - \[title Demo\] - \] - \[body \#frontpage - \[h1 .top Headline\] - \] -\] - ] - ] - [slide [h1 This is a \] - [pre \[h1 This is a \\\\]] - ] - [slide - [h2 This is a \] - [pre - \[h2 This is a \\\\] - \[ul .uncover - \[li This list ...\] - \[li ... gets uncovered ...\] - \[li ... item by item\] - \] - ] - [br] - [ul .uncover - [li This list ...] - [li ... gets uncovered ...] - [li ... item by item] - ] - ] -] diff --git a/example/exb0_light.jpg b/example/exb0_light.jpg deleted file mode 100644 index ea6dd7f..0000000 Binary files a/example/exb0_light.jpg and /dev/null differ diff --git a/example/exb1_light.jpg b/example/exb1_light.jpg deleted file mode 100644 index 7a094dd..0000000 Binary files a/example/exb1_light.jpg and /dev/null differ diff --git a/example/exb2_light.jpg b/example/exb2_light.jpg deleted file mode 100644 index 0c6c058..0000000 Binary files a/example/exb2_light.jpg and /dev/null differ diff --git a/example/exb3_light.jpg b/example/exb3_light.jpg deleted file mode 100644 index 3808929..0000000 Binary files a/example/exb3_light.jpg and /dev/null differ