improved CSS and support toc

Makefile

@@ -32,15 +32,11 @@ DST_PANDOC_FILES ?= $(subst $(EXT),.html, \
                             $(SRC_PANDOC_FILES)))
 TEMPLATE ?= templates/post.html
 CSS = /css/y.css
-PANDOC := pandoc \
+MK_HTML := engine/mk-html.sh
-			-c $(CSS) \
+PANDOC := $(MK_HTML) $(CSS) $(TEMPLATE)
-			--template=$(TEMPLATE) \
+$(DST_DIR)/%.html: $(SRC_DIR)/%.org $(TEMPLATE) $(MK_HTML)
-			--from org \
-			--to html5 \
-			--standalone
-$(DST_DIR)/%.html: $(SRC_DIR)/%.org $(TEMPLATE)
 	@mkdir -p $(dir $@)
-	$(PANDOC) $< --output $@.tmp
+	$(PANDOC) $< $@.tmp
 	minify --mime text/html $@.tmp > $@
 	@rm $@.tmp
 ALL += $(DST_PANDOC_FILES)

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"

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

src/css/y.css

@@ -1,9 +1,9 @@
 html {
-    font-family: Avenir, "Helvetica Neue", sans-serif;
+    font-family: serif;
-    font-size: 16px;
+    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; }
+.abstract { margin: 1rem 10% 0; font-size: 0.875em; font-style: italic; }
-#logo { display: inline-block;
+#logo { display: block;
-        vertical-align: middle;}
+        vertical-align: middle;
-#logo svg { width: 3em; }
+        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;
+#toc, blockquote { margin: 0 1rem;
-             padding-left: 1em;
+                   padding-left: 1rem;
-             border-left: solid var(--rbg); }
+                   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);
+pre { border-color: var(--fg); background: var(--rbg); }
-      background: var(--rbg);
-    }
-
-
 .todo,.done { background: var(--r); color: #FFF; font-weight: bold; font-size: .66em; padding: .2em;}
 .done { background: var(--g); }

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

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.

templates/post.html

@@ -14,18 +14,18 @@
   </head>
   <body>
     <div class="main">
+        <div id="logo">
+          <a href="/">
+            <svg width="5em" viewBox="0 0 64 64">
+              <circle cx="32" cy="32" r="30" stroke="var(--b2)" stroke-width="2" fill="var(--b03)"/>
+              <circle cx="32" cy="32" r="12" stroke="var(--r)" stroke-width="2" fill="var(--o)"/>
+              <circle cx="32" cy="32" r="6" stroke-width="0" fill="var(--y)"/>
+              <ellipse cx="32" cy="14" rx="14" ry="8" stroke-width="0" fill="var(--b3)"/>
+            </svg>
+          </a>
+        </div>
       <div id="preamble" class="status">
         <div class="content">
-          <div id="logo">
-            <a href="/">
-              <svg width="5em" viewBox="0 0 64 64">
-                <circle cx="32" cy="32" r="30" stroke="var(--b2)" stroke-width="2" fill="var(--b03)"/>
-                <circle cx="32" cy="32" r="12" stroke="var(--r)" stroke-width="2" fill="var(--o)"/>
-                <circle cx="32" cy="32" r="6" stroke-width="0" fill="var(--y)"/>
-                <ellipse cx="32" cy="14" rx="14" ry="8" stroke-width="0" fill="var(--b3)"/>
-              </svg>
-            </a>
-          </div>
           <h1>$title$</h1>
           <div class="meta">
             <span class="yyydate">$date$</span> on
@@ -38,6 +38,7 @@ $description$
         </div>
       </div>
       <div id="content">
+$if(toc)$<div id="toc">$table-of-contents$</div>$endif$
 $body$
       </div>
       <div id="postamble" class="status">