improved CSS and support toc
This commit is contained in:
parent
23b980eff0
commit
e4c3a308e5
7 changed files with 72 additions and 39 deletions
12
Makefile
12
Makefile
|
@ -32,15 +32,11 @@ DST_PANDOC_FILES ?= $(subst $(EXT),.html, \
|
||||||
$(SRC_PANDOC_FILES)))
|
$(SRC_PANDOC_FILES)))
|
||||||
TEMPLATE ?= templates/post.html
|
TEMPLATE ?= templates/post.html
|
||||||
CSS = /css/y.css
|
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 $@)
|
@mkdir -p $(dir $@)
|
||||||
$(PANDOC) $< --output $@.tmp
|
$(PANDOC) $< $@.tmp
|
||||||
minify --mime text/html $@.tmp > $@
|
minify --mime text/html $@.tmp > $@
|
||||||
@rm $@.tmp
|
@rm $@.tmp
|
||||||
ALL += $(DST_PANDOC_FILES)
|
ALL += $(DST_PANDOC_FILES)
|
||||||
|
|
23
engine/mk-html.sh
Executable file
23
engine/mk-html.sh
Executable file
|
@ -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"
|
|
@ -129,7 +129,10 @@ body=$(< $tmpdir/index)
|
||||||
date=$(LC_TIME=en_US date +'%Y-%m-%d')
|
date=$(LC_TIME=en_US date +'%Y-%m-%d')
|
||||||
# the pandoc templates use $x$ format, we replace it by just $x
|
# the pandoc templates use $x$ format, we replace it by just $x
|
||||||
# to be used with envsubst
|
# 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 title
|
||||||
export author
|
export author
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
html {
|
html {
|
||||||
font-family: Avenir, "Helvetica Neue", sans-serif;
|
font-family: serif;
|
||||||
font-size: 16px;
|
font-size: 18px;
|
||||||
line-height: calc(1ex/0.37); }
|
line-height: calc(1ex/0.37); }
|
||||||
#TOC {text-align: left;}
|
#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); }
|
.main { min-height: calc(100vh - 1em); }
|
||||||
h1,h2,h3,h4,h5,h6 {
|
h1,h2,h3,h4,h5,h6 {
|
||||||
line-height: calc(1ex/0.42);
|
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; }
|
code,pre { font-family: Menlo, Monaco, monospace; font-size: 1.85ex; }
|
||||||
figure { margin: 1rem 0; padding: 0; }
|
figure { margin: 1rem 0; padding: 0; }
|
||||||
.meta { font-size: small;}
|
.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; }
|
#preamble, #postamble { text-align: center; }
|
||||||
#content,.content,#preamble,#postamble {
|
#content,.content,#postamble {
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
max-width: 70ch;
|
max-width: 70ch;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
#content, #preamble,#postamble { padding: 1rem; }
|
||||||
figure img { width: 100%; }
|
figure img { width: 100%; }
|
||||||
|
li > img, p > img { max-height: 1.5em; vertical-align: middle; }
|
||||||
sup, sub {
|
sup, sub {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -59,7 +64,7 @@ body>input { display: none; }
|
||||||
label { font-weight: 700; }
|
label { font-weight: 700; }
|
||||||
label:hover { cursor: pointer; }
|
label:hover { cursor: pointer; }
|
||||||
label ~ pre { margin-top: 0; }
|
label ~ pre { margin-top: 0; }
|
||||||
figcaption { text-align: right; font-family: italic; }
|
figcaption { text-align: right; font-style: italic; font-size: 0.875em; }
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--b03: #2E3440;
|
--b03: #2E3440;
|
||||||
|
@ -137,11 +142,19 @@ body, body > div {
|
||||||
label:hover, a,a:visited { color: var(--hl); }
|
label:hover, a,a:visited { color: var(--hl); }
|
||||||
code { background: var(--rbg); }
|
code { background: var(--rbg); }
|
||||||
table th { 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 ---- */
|
/* ---- SYNTAX HIGHLIGHTING ---- */
|
||||||
#table-of-contents { text-align: left; }
|
#table-of-contents { text-align: left; }
|
||||||
|
#logo { background: var(--fg);
|
||||||
|
border-bottom: solid 5px var(--rfg); }
|
||||||
.ex { color:var(--v); }
|
.ex { color:var(--v); }
|
||||||
.op, .fu, .ot {color:var(--b);}
|
.op, .fu, .ot {color:var(--b);}
|
||||||
.bu { color:var(--m); }
|
.bu { color:var(--m); }
|
||||||
|
@ -149,13 +162,8 @@ blockquote { margin: 0 1em;
|
||||||
.kw { color:var(--y); }
|
.kw { color:var(--y); }
|
||||||
.st { color:var(--g); }
|
.st { color:var(--g); }
|
||||||
.co { color:var(--fg0); }
|
.co { color:var(--fg0); }
|
||||||
|
|
||||||
.pubDate { font-size: .7em; color: var(--fg); }
|
.pubDate { font-size: .7em; color: var(--fg); }
|
||||||
.tag { font-size: .7em; background-color: var(--rbg); }
|
.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;}
|
.todo,.done { background: var(--r); color: #FFF; font-weight: bold; font-size: .66em; padding: .2em;}
|
||||||
.done { background: var(--g); }
|
.done { background: var(--g); }
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
#+EMAIL: yann@esposito.host
|
#+EMAIL: yann@esposito.host
|
||||||
#+keywords: Haskell programming functional tutorial
|
#+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.
|
#+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
|
#+STARTUP: overview
|
||||||
|
|
||||||
#+begin_quote
|
#+begin_quote
|
||||||
|
|
|
@ -5,7 +5,9 @@
|
||||||
#+DATE: [2021-05-01 Sat]
|
#+DATE: [2021-05-01 Sat]
|
||||||
#+KEYWORDS: blog static
|
#+KEYWORDS: blog static
|
||||||
#+DESCRIPTION: Minimal and fast static website builder with make.
|
#+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.
|
As someone on the Internet said not so far ago.
|
||||||
Building its own static building system is a rite of passage for many developers.
|
Building its own static building system is a rite of passage for many developers.
|
||||||
|
|
|
@ -14,18 +14,18 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main">
|
<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 id="preamble" class="status">
|
||||||
<div class="content">
|
<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>
|
<h1>$title$</h1>
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
<span class="yyydate">$date$</span> on
|
<span class="yyydate">$date$</span> on
|
||||||
|
@ -38,6 +38,7 @@ $description$
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="content">
|
<div id="content">
|
||||||
|
$if(toc)$<div id="toc">$table-of-contents$</div>$endif$
|
||||||
$body$
|
$body$
|
||||||
</div>
|
</div>
|
||||||
<div id="postamble" class="status">
|
<div id="postamble" class="status">
|
||||||
|
|
Loading…
Reference in a new issue