From 89328fe20611da1f34ac633de315a900254267c1 Mon Sep 17 00:00:00 2001 From: Mike Gerwitz Date: Sat, 19 Jan 2019 00:50:06 -0500 Subject: [PATCH] Generate inline CSS for page header The idea here is to provide as little CSS as is sensible for the initial page load to be styled in a layout similar to the final layout. This initial styling may be briefly visible on a slow conection. Slow connections can happen for a variety of reasons. For example, I'm a Tor user, and connection speeds vary. Mobile connection speeds can also vary wildly. This adds a few hundred bytes, but I was able to cut it down quite a bit, and I don't find this to be unreasonable relative to the other data on each page. --- .gitignore | 1 + Makefile | 15 +++++++++++--- src/header.tpl.htm | 2 ++ src/mkheader | 3 ++- style.css | 49 +++++++++++++++++++++++++++++----------------- 5 files changed, 48 insertions(+), 22 deletions(-) diff --git a/.gitignore b/.gitignore index 6aaf4b4..acc28df 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ /post/list !/docs/about/resume.html rss.xml +/inline.css /www-root /cgit-root /papers/*.pdf diff --git a/Makefile b/Makefile index 698ae8a..5b9a4fc 100644 --- a/Makefile +++ b/Makefile @@ -59,6 +59,8 @@ www-pages = $(patsubst src/%, $(www-root)/%, $(srcpages)) www-files = $(www-pages) $(www-root)/style.css $(www-root)/rss.xml $(www-paper) \ $(www-images) $(www-fonts) $(www-root)/redirect-map.php +pgdeps := src/mkheader inline.css src/h12title src/header.tpl.htm src/footer.tpl.htm + RSS_N=10 export WWW_URL @@ -71,11 +73,11 @@ default: www-root src/post2meta $< > $@ src/talks.html: src/talks.rec src/papers.html: src/papers.rec -%.html %.xml: %.sh post/list src/mkheader src/header.tpl.htm src/footer.tpl.htm $(phtml) +%.html %.xml: %.sh post/list $(pgdeps) $(phtml) $< > $@ -%.html: %.md src/post2html src/mkheader src/h12title src/header.tpl.htm src/footer.tpl.htm src/pandoc.tpl +%.html: %.md src/post2html $(pgdeps) src/pandoc.tpl src/post2html $< > $@ -%.html: %.htm src/mkheader src/h12title src/header.tpl.htm src/footer.tpl.htm +%.html: %.htm src/mkheader inline.css src/h12title src/header.tpl.htm src/footer.tpl.htm src/mkheader about @__PAGE_TITLE__@ \ | cat - $< src/footer.tpl.htm \ | src/h12title @__PAGE_TITLE__@ \ @@ -95,6 +97,13 @@ post/list: $(pmeta) post/%.mk: post/%.meta build-aux/mkmk build-aux/mkmk $(www-root) $< > $@ +# Inline CSS for header (for initial page load). Blocks marked with +# `/*inline*/' are included. +inline.css: style.css + awk '/\/\*inline\*\/$$/,/^\}/{sub(/ *\/\*inline\*\//, ""); print}' $< \ + | sed 's/^ \+//g; s/ *\([{}>()]\) */\1/g; s/^ *\([^:]\+:\) */\1/g' \ + | tr -d '\n' > $@ + # Note the conditional include only for webroot. This is needed for two # reasons: # 1. To avoid including them on `clean' (see GNU Make manual, which is diff --git a/src/header.tpl.htm b/src/header.tpl.htm index f2aa0e7..a8047b3 100644 --- a/src/header.tpl.htm +++ b/src/header.tpl.htm @@ -7,6 +7,8 @@ @PAGE_TITLE@Mike Gerwitz +
diff --git a/src/mkheader b/src/mkheader index 292fe4f..05920c5 100755 --- a/src/mkheader +++ b/src/mkheader @@ -46,7 +46,8 @@ main() } sed "s#@PAGE_TITLE@#$title${title:+ \\— }#g - s#@PAGE_TYPE@#$type#g" \ + s#@PAGE_TYPE@#$type#g + /