From e4c3a308e518c7059e5a1459d9e8a7d3d794e9a5 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Sun, 9 May 2021 12:11:33 +0200 Subject: [PATCH] improved CSS and support toc --- Makefile | 12 ++---- engine/mk-html.sh | 23 ++++++++++ engine/mk-index.sh | 5 ++- src/css/y.css | 44 ++++++++++++-------- src/posts/0010-Haskell-Now/index.org | 2 +- src/posts/0017-static-blog-builder/index.org | 4 +- templates/post.html | 21 +++++----- 7 files changed, 72 insertions(+), 39 deletions(-) create mode 100755 engine/mk-html.sh diff --git a/Makefile b/Makefile index 64b1018..9936a98 100644 --- a/Makefile +++ b/Makefile @@ -32,15 +32,11 @@ DST_PANDOC_FILES ?= $(subst $(EXT),.html, \ $(SRC_PANDOC_FILES))) TEMPLATE ?= templates/post.html CSS = /css/y.css -PANDOC := pandoc \ - -c $(CSS) \ - --template=$(TEMPLATE) \ - --from org \ - --to html5 \ - --standalone -$(DST_DIR)/%.html: $(SRC_DIR)/%.org $(TEMPLATE) +MK_HTML := engine/mk-html.sh +PANDOC := $(MK_HTML) $(CSS) $(TEMPLATE) +$(DST_DIR)/%.html: $(SRC_DIR)/%.org $(TEMPLATE) $(MK_HTML) @mkdir -p $(dir $@) - $(PANDOC) $< --output $@.tmp + $(PANDOC) $< $@.tmp minify --mime text/html $@.tmp > $@ @rm $@.tmp ALL += $(DST_PANDOC_FILES) diff --git a/engine/mk-html.sh b/engine/mk-html.sh new file mode 100755 index 0000000..ae9c556 --- /dev/null +++ b/engine/mk-html.sh @@ -0,0 +1,23 @@ +#!/usr/bin/env bash +set -eu + +cd "$(git rev-parse --show-toplevel)" || exit 1 +css="$1" +template="$2" +orgfile="$3" +htmlfile="$4" + +tocoption="" +if grep -ie '^#+options:' "$orgfile" | grep 'toc:t'>/dev/null; then + tocoption="--toc" +fi + +set -x +pandoc -c "$css" $tocoption \ + --template="$template" \ + --mathml \ + --from org \ + --to html5 \ + --standalone \ + $orgfile \ + --output "$htmlfile" diff --git a/engine/mk-index.sh b/engine/mk-index.sh index 12f5da3..8c29f94 100755 --- a/engine/mk-index.sh +++ b/engine/mk-index.sh @@ -129,7 +129,10 @@ body=$(< $tmpdir/index) date=$(LC_TIME=en_US date +'%Y-%m-%d') # the pandoc templates use $x$ format, we replace it by just $x # to be used with envsubst -template=$(< templates/post.html | sed 's/\$header-includes\$//' | perl -pe 's#(\$[^\$]*)\$#$1#g' ) +template=$(< templates/post.html | \ + sed 's/\$(header-includes|table-of-content)\$//' | \ + sed 's/\$if.*\$//' | \ + perl -pe 's#(\$[^\$]*)\$#$1#g' ) { export title export author diff --git a/src/css/y.css b/src/css/y.css index 2f41aa2..6561a33 100644 --- a/src/css/y.css +++ b/src/css/y.css @@ -1,9 +1,9 @@ html { - font-family: Avenir, "Helvetica Neue", sans-serif; - font-size: 16px; + font-family: serif; + font-size: 18px; line-height: calc(1ex/0.37); } #TOC {text-align: left;} -html,body { margin: 0; padding: 0 0 3em 0; border: 0; } +html,body { margin: 0; padding: 0; border: 0; } .main { min-height: calc(100vh - 1em); } h1,h2,h3,h4,h5,h6 { line-height: calc(1ex/0.42); @@ -15,18 +15,23 @@ pre > code { background: none; font-size: 0.875em; } code,pre { font-family: Menlo, Monaco, monospace; font-size: 1.85ex; } figure { margin: 1rem 0; padding: 0; } .meta { font-size: small;} -.abstract { margin: 2rem 10%; font-size: 0.875em; font-style: italic; } -#logo { display: inline-block; - vertical-align: middle;} -#logo svg { width: 3em; } +.abstract { margin: 1rem 10% 0; font-size: 0.875em; font-style: italic; } +#logo { display: block; + vertical-align: middle; + text-align: center; + padding: 1rem; + } +#logo svg { width: 5em; } #preamble, #postamble { text-align: center; } -#content,.content,#preamble,#postamble { +#content,.content,#postamble { padding: 0 1rem; max-width: 70ch; overflow: hidden; margin: 0 auto; } +#content, #preamble,#postamble { padding: 1rem; } figure img { width: 100%; } +li > img, p > img { max-height: 1.5em; vertical-align: middle; } sup, sub { vertical-align: baseline; position: relative; @@ -59,7 +64,7 @@ body>input { display: none; } label { font-weight: 700; } label:hover { cursor: pointer; } label ~ pre { margin-top: 0; } -figcaption { text-align: right; font-family: italic; } +figcaption { text-align: right; font-style: italic; font-size: 0.875em; } :root { --b03: #2E3440; @@ -137,11 +142,19 @@ body, body > div { label:hover, a,a:visited { color: var(--hl); } code { background: var(--rbg); } table th { background: var(--rbg); } -blockquote { margin: 0 1em; - padding-left: 1em; - border-left: solid var(--rbg); } +#toc, blockquote { margin: 0 1rem; + padding-left: 1rem; + border-left: solid var(--rbg); } +#toc { font-size: 0.875em; + background: var(--rbg); + padding: 1rem; + border: solid 1px var(--fg0); + } +#toc ul { padding-left: 2em; } /* ---- SYNTAX HIGHLIGHTING ---- */ #table-of-contents { text-align: left; } +#logo { background: var(--fg); + border-bottom: solid 5px var(--rfg); } .ex { color:var(--v); } .op, .fu, .ot {color:var(--b);} .bu { color:var(--m); } @@ -149,13 +162,8 @@ blockquote { margin: 0 1em; .kw { color:var(--y); } .st { color:var(--g); } .co { color:var(--fg0); } - .pubDate { font-size: .7em; color: var(--fg); } .tag { font-size: .7em; background-color: var(--rbg); } -pre { border-color: var(--fg); - background: var(--rbg); - } - - +pre { border-color: var(--fg); background: var(--rbg); } .todo,.done { background: var(--r); color: #FFF; font-weight: bold; font-size: .66em; padding: .2em;} .done { background: var(--g); } diff --git a/src/posts/0010-Haskell-Now/index.org b/src/posts/0010-Haskell-Now/index.org index 642620a..12b2803 100644 --- a/src/posts/0010-Haskell-Now/index.org +++ b/src/posts/0010-Haskell-Now/index.org @@ -5,7 +5,7 @@ #+EMAIL: yann@esposito.host #+keywords: Haskell programming functional tutorial #+DESCRIPTION: A short and intense introduction to Haskell. This is an update of my old (2012) article. A lot of things have changed since then. Mostly I changed my approach about the easiest way to install a Haskell playground. I removed the not as important part, and added a short introduction about starting a new project. -#+OPTIONS: auto-id:t toc:t +#+OPTIONS: toc:t auto-id:t #+STARTUP: overview #+begin_quote diff --git a/src/posts/0017-static-blog-builder/index.org b/src/posts/0017-static-blog-builder/index.org index 144b69d..b02ca8e 100644 --- a/src/posts/0017-static-blog-builder/index.org +++ b/src/posts/0017-static-blog-builder/index.org @@ -5,7 +5,9 @@ #+DATE: [2021-05-01 Sat] #+KEYWORDS: blog static #+DESCRIPTION: Minimal and fast static website builder with make. -#+OPTIONS: auto-id:t toc:t +#+OPTIONS: auto-id:t + + As someone on the Internet said not so far ago. Building its own static building system is a rite of passage for many developers. diff --git a/templates/post.html b/templates/post.html index f9d981e..e84ea3c 100644 --- a/templates/post.html +++ b/templates/post.html @@ -14,18 +14,18 @@
+
-

$title$

$date$ on @@ -38,6 +38,7 @@ $description$
+$if(toc)$
$table-of-contents$
$endif$ $body$