Optimize rendering

src/Dockerfile.liveserver

@@ -9,4 +9,4 @@ EXPOSE 8080
 VOLUME /target
 WORKDIR /target
 
-ENTRYPOINT node /usr/local/bin/live-server --no-browser --wait=100 --watch=/target/index.html,assets/css/ .
+ENTRYPOINT node /usr/local/bin/live-server --no-browser --wait=50 --watch=/target/index.html,assets/css/ .

src/Dockerfile.pandoc

@@ -6,6 +6,7 @@ ARG pandoc_version
 ARG version
 ARG motto
 
+# TODO try watchman to get inotify working. Currently watchman in alpine edge ..
 RUN apk add \
     make bash curl \
     graphviz inotify-tools rsync \

src/Makefile

@@ -21,12 +21,12 @@ push:	all
 
 
 prepare:	downloaded/bin/pandoc \
-	markdeck/lib/plantuml.jar \
 	markdeck/lib/plantuml.jar \
 	markdeck/lib/ditaa.jar \
 	markdeck/assets/3rdparty/asciinema-player.js \
 	markdeck/assets/3rdparty/asciinema-player.css \
 	markdeck/assets/3rdparty/reveal.js \
+	markdeck/assets/3rdparty/reveal.js/css/theme/source/markdeck.scss \
 	markdeck/assets/3rdparty/impress.js \
 	jqueryemoji \
 	markdeck/helper/downloaded/trianglify-background-generator-master \
@@ -90,6 +90,8 @@ markdeck/assets/3rdparty/reveal.js:
 	mkdir -p $@
 	curl -L "https://github.com/hakimel/reveal.js/archive/$(REVEALJS_VERSION).tar.gz" | tar -C $@ --strip-components=1 --exclude test --exclude font -zxvf -
 
+markdeck/assets/3rdparty/reveal.js/css/theme/source/markdeck.scss: markdeck/assets/markdeck/css/theme/source/markdeck.scss
+	cp $^ $@
 
 markdeck/assets/3rdparty/impress.js:
 	mkdir -p $@

src/markdeck/Makefile

@@ -0,0 +1,155 @@
+SHELL := /bin/bash
+
+build: .info-build render sync sass config pandoc
+	@echo "-------- /rerendering ---------"
+	@echo
+
+.info-build:
+	@echo "-------- rerendering ---------"
+
+
+.info-render:
+	@echo "-------- rerendering prep ---------"
+
+render: .info-render /target/assets/css/rerendering.css /target/assets/rendered
+	@echo "-------- /rerendering prep ---------"
+	@echo
+
+/target/assets/css/rerendering.css: /markdeck/assets/markdeck/css/when-rerendering.css /target/assets/css
+	cp $< $@
+
+/target/assets/css:
+	mkdir -p $@
+
+/target/assets/rendered:
+	mkdir -p $@
+
+
+.info-sync:
+	@echo "-------- rsync output --------"
+
+sync: .info-sync .rsync .fc-list
+	@echo "-------- /rsync ---------"
+	@echo
+
+.rsync: /target .rsync-sync /target/assets/css/slides.scss /target/assets/css/render-pdf.css
+
+.rsync-sync: /markdeck/assets $(wildcard /source/assets)
+	# FIXME the dynamically generated scss and css files are deleted by rsync.
+	# If there was a way to separate the files coming from rsync and the
+	# dynamically generated files this would be ideal
+	# -rsync -auv --delete $^ /target/
+	-rsync -auv $^ /target/
+
+.fc-list:
+	@echo
+	@echo "Know fonts:"
+	@fc-list
+
+/target/assets/css/slides.scss /target/assets/css/slides.impress.css /target/assets/css/render-pdf.css:
+	touch $@
+
+
+.info-sass:
+	@echo "-------- sass output --------"
+
+sass: .info-sass \
+	/target/assets/css/slides.css \
+	/target/assets/css/slides.impress.css \
+	/target/assets/markdeck/css/markdeck.impressjs.css \
+	/target/assets/markdeck/css/markdeck.revealjs.css \
+	.sync-custom-themes \
+	$(addprefix /target/assets/3rdparty/reveal.js/css/theme/,$(addsuffix .css,$(basename $(notdir $(wildcard /target/assets/3rdparty/reveal.js/css/theme/source/*.scss)))))
+
+	@echo "-------- /sass ---------"
+	@echo
+
+.sync-custom-themes: $(wildcard /source/assets/css/theme/source/*.scss)
+	rsync -au $^ /target/assets/3rdparty/reveal.js/css/theme/source/
+
+
+.info-config:
+	@echo "-------- config --------"
+
+config: .info-config .metadata
+	jq '. | .' < /target/.meta/config.json
+	@echo "ASCIIART_CONFIG=${ASCIIART_CONFIG}"
+	@echo "-------- /config --------"
+	@echo
+
+.metadata: /target/.meta /target/.meta/config.json
+
+/target/.meta/config.json: $(wildcard /source/slide*.md) /markdeck/note.md /markdeck/defaults.yaml
+	pandoc --template=/markdeck/metadata.template $^ > $@
+
+/target/.meta:
+	mkdir -p $@
+
+
+.info-pandoc:
+	@echo "-------- pandoc output --------"
+
+pandoc: .info-pandoc /target/index.html
+	@echo "-------- /pandoc output --------"
+	@echo
+
+/target/.meta/slides.combined.md.txt: $(wildcard /source/slide*.md)
+	-rm -f $@
+	touch $@
+	if [ -n "$^" ]; then \
+		for F in $^; do \
+			markdown-pp --exclude latexrender $$F >> $@ ; \
+			echo >> $@; \
+		done; \
+	else \
+		cp /markdeck/note.md $@; \
+	fi
+
+/target/.meta/index.html: /target/.meta/slides.combined.md.txt /target/.meta/config.json /markdeck/defaults.yaml
+	PANDOC_ARGS=; \
+	[ -e /source/include-before-body ] && PANDOC_ARGS="$${PANDOC_ARGS} --include-before-body /source/include-before-body"; \
+	[ -e /source/include-after-body ] && PANDOC_ARGS="$${PANDOC_ARGS} --include-after-body /source/include-after-body"; \
+	variant="$$(jq -r '.variant' < /target/.meta/config.json)"; \
+	pandoc \
+		-f markdown+yaml_metadata_block \
+		-t revealjs \
+		--no-highlight \
+		--wrap=preserve \
+		--standalone \
+		--template=/markdeck/template-$${variant}.html \
+		--slide-level=2 \
+		--section-divs \
+		--lua-filter /markdeck/lib/skip-slide-filter.lua \
+		--filter mathjax-pandoc-filter \
+		--lua-filter /markdeck/lib/render-asciiart-filter.lua \
+		--lua-filter /markdeck/lib/render-emojis-filter.lua \
+		--lua-filter /markdeck/lib/bg-shortcut-filter.lua \
+		--lua-filter /markdeck/lib/$${variant}-shortcut-filter.lua \
+		--lua-filter /markdeck/lib/inline-svg.lua \
+		--lua-filter /markdeck/lib/font-awesome.lua \
+		$${PANDOC_ARGS} \
+		-o $@ \
+		$< /markdeck/defaults.yaml 2>&1 | tee /target/.meta/pandoc.output
+
+/target/index.html: /target/.meta /target/.meta/index.html
+	# clear rerendering styling
+	echo "" > /target/assets/css/rerendering.css
+	cp /target/.meta/index.html $@
+
+.SECONDEXPANSION:
+/target/assets/3rdparty/reveal.js/css/theme/%.css: $$(addsuffix /%.scss,/target/assets/3rdparty/reveal.js/css/theme/source)
+	sassc $< $@
+
+/target/assets/markdeck/css/%.css /target/assets/css/%.css: $$(subst .css,.scss,$$@)
+	sassc $< $@
+
+wait-for-changes: $(wildcard /source/slide*.md) /source/assets $(wildcard /source/include-before-body) $(wildcard /source/include-after-body)
+	# TODO currently inotify doesn't work on mounted volumes :-/
+	# inotifywait -e modify,create,delete,move,attrib -r $^
+	/markdeck/wait-for-changes
+
+
+clean:
+	rm -rf /target/.??* /target/*
+
+.PHONY: build .info-build render .info-render sync .info-sync .rsync .rsync-sync .fc-list sass .info-sass .sync-custom-themes clean config .info-config pandoc .info-pandoc wait-for-changes

src/markdeck/assets/markdeck/css/_common.scss

@@ -1,43 +1,6 @@
-img.emoji {
-    width: 1.1em;
-    height: 1.1em;
-    padding: 0;
-    margin: 0;
-    vertical-align: baseline;
-}
-
-.rerendering-message {
-    display: none;
-    position: absolute;
-    text-align: center;
-    top: 20%;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    z-index: 1000;
-    color: white;
-    font-size: 200%;
-    text-shadow: 2px 2px #000000;
-}
-
-.markdeck-logo {
-    position: absolute;
-    left: 0;
-    right: 0;
-    text-align: center;
-    bottom: 8px;
-    height: 8px;
-    font-size: 10px;
-    color: #5550;
-    z-index: 1;
-
-    a {
-        color: #333a;
-        text-shadow: 1px 1px #bbba;
-        background: none;
-        text-decoration: none;
-    }
-}
+// FIXME this is just the remainder of what has been moved into markdeck.scss
+// for revealjs but not yet for impressjs.
+@import "commoncommon";
 
 .light-on-dark, section.light-on-dark h1 {
     color: #fff;
@@ -51,36 +14,6 @@ img.emoji {
     }
 }
 
-/*!
- * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@font-face {
-    font-family: "Font Awesome 5 Brands";
-    font-style: normal;
-    font-weight: normal;
-    src: url(fonts/fa-brands-400.ttf) format("truetype");
-}
-.fab {
-    font-family:"Font Awesome 5 Brands";
-}
-
-/*!
- * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@font-face {
-    font-family: "Font Awesome 5 Free";
-    font-style: normal;
-    font-weight: 900;
-    src: url(fonts/fa-solid-900.ttf) format("truetype");
-}
-.fa, .fas {
-    font-family:"Font Awesome 5 Free";
-    font-weight:900;
-}
-
-@import "fontawesome.css";
 
 @font-face {
     font-family: 'Inconsolata';

src/markdeck/assets/markdeck/css/_commoncommon.scss

@@ -0,0 +1,63 @@
+.rerendering-message {
+    display: none;
+    position: absolute;
+    text-align: center;
+    top: 20%;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: 1000;
+    color: white;
+    font-size: 200%;
+    text-shadow: 2px 2px #000000;
+}
+
+.markdeck-logo {
+    position: absolute;
+    left: 0;
+    right: 0;
+    text-align: center;
+    bottom: 8px;
+    height: 8px;
+    font-size: 10px;
+    color: #5550;
+    z-index: 1;
+
+    a {
+        color: #333a;
+        text-shadow: 1px 1px #bbba;
+        background: none;
+        text-decoration: none;
+    }
+}
+
+/*!
+ * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@font-face {
+    font-family: "Font Awesome 5 Brands";
+    font-style: normal;
+    font-weight: normal;
+    src: url(fonts/fa-brands-400.ttf) format("truetype");
+}
+.fab {
+    font-family:"Font Awesome 5 Brands";
+}
+
+/*!
+ * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@font-face {
+    font-family: "Font Awesome 5 Free";
+    font-style: normal;
+    font-weight: 900;
+    src: url(fonts/fa-solid-900.ttf) format("truetype");
+}
+.fa, .fas {
+    font-family:"Font Awesome 5 Free";
+    font-weight:900;
+}
+
+@import "fontawesome.css";