#!/bin/sh
-# Copyright 2016 - 2018 Paul Hänsch
+# Copyright 2016 - 2019 Paul Hänsch
#
# This file is part of cgilite.
#
# 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;;
| 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 ] \
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
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)"
#!/bin/sh
-# Copyright 2018 Paul Hänsch
+# Copyright 2018, 2019 Paul Hänsch
#
# This is a file format helper, part of CGIlite.
#
STRING(){
{ [ $# -eq 0 ] && cat || printf %s "$*"; } \
- | sed -r ':X; $!{N;bX;}'"$STRING"
+ | sed -E ':X; $!{N;bX;}'"$STRING"
}
UNSTRING='
'
UNSTRING(){
{ [ $# -eq 0 ] && cat || printf %s "$*"; } \
- | sed -r "$UNSTRING"
+ | sed -E "$UNSTRING"
}
+/* === 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;
body {
font-family: sans-serif;
padding: 2em 1em 6em 1em;
- background-color: #555;
+ #background-color: #555;
text-align: center;
overflow-x: hidden;
}
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 {
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;
}
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';
}
bottom: 0; left: 6.25em;
font-size: .875em;
padding-bottom: .125em;
- color: #888;
+ #color: #888;
z-index: 5;
}
text-align: left;
content: attr(count);
padding-left: .125em;
- color: #DDD;
+ #color: #DDD;
}
div.slide + a { display: none; }
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; }
/* ==== Slide Appearance ==== */
div.slide {
- background: #FFF no-repeat center;
+ #background: #FFF no-repeat center;
text-align: center;
line-height: 1.5em;
}
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,
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 ==== */
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 */
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;
}
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; } \
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
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
--- /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!]]
+]
+++ /dev/null
-[!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]]
-]]
+++ /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 (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);"
-\<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: url(exb3_light.jpg);"
-\[html
- \[head
- \[title Demo\]
- \]
- \[body \#frontpage
- \[h1 .top Headline\]
- \]
-\]
- ]
- ]
- [slide [h1 This is a \<h1\>]
- [pre \[h1 This is a \\\<h1\\\>\]]
- ]
- [slide
- [h2 This is a \<h2\>]
- [pre
- \[h2 This is a \\\<h2\\\>\]
- \[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]
- ]
- ]
-]
projects / vhs_kurs / commitdiff
