From b8c606553809b1ef84827e1754a6d85baba28032 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Mon, 19 Sep 2022 14:16:40 +0200
Subject: [PATCH] Add TOCs to articles

---
 .eleventy.js                        |  13 +++++++++----
 package-lock.json                   | Bin 341438 -> 365470 bytes
 package.json                        |   9 ++++++---
 src/main/_includes/post.njk         |  13 ++++++++++++-
 src/main/_posts/2017-03-01-raspi.md |   2 +-
 src/main/css/main.css               |  15 +++++++++++++--
 6 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index af50c81..c537ba3 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,10 +1,15 @@
+const eleventyPluginToc = require("eleventy-plugin-toc")
+const markdownIt = require("markdown-it")
+const markdownItAnchor = require("markdown-it-anchor")
+
+
 module.exports = (eleventyConfig) => {
-    eleventyConfig.addFilter("isoDate", dateObj => {
-        return dateObj.toISOString().substr(0, 10);
-    });
+    eleventyConfig.addFilter("isoDate", it => it.toISOString().substring(0, 10));
+    eleventyConfig.addPlugin(eleventyPluginToc, {tags: ["h2", "h3"], wrapper: "div"});
+    eleventyConfig.setLibrary("md", markdownIt().use(markdownItAnchor));
 
     return {
-        pathPrefix: "/blog/",
+        pathPrefix: "/blog/dist/",
         dir: {
             input: "src/main/",
             output: "dist/",
diff --git a/package-lock.json b/package-lock.json
index 0fc55353600a9f51b11b0b56d217c749bce13281..31b2688f06b0017a5697688cd395482a7d0848ee 100644
GIT binary patch
delta 10546
zcmdU#eQ+G*eaGjyUCHl~j4fHR!IEVgY^|i*-Fw@UP4K<n?Y-~a-dhsK_p<l?vb*<w
zOj8UgGtkgM-r^@s9Bi6|Hi*Gch1^WrG@+B0hV%tD(_tu`0-;UPhDq&qNST3<?ww>s
z22*IK81*kb``oVf_xzsU^ZosPpSwT#>F$SrZ|uP%@cFP}>mqq~@9(a~XOF{AZc>bn
zb49Mfm22%ezF5!X%5$|!a(ZEE`Xsz`2;D86P;7<1-2h!a01N=$`w$p{m#bh9et!uJ
zDNYjbz%ZDA&n<y%BXjX`GFuV*&r<W+dHBqsfx~C++Od2_aW8<+XAnyAq5I*zk0M7|
zTxDU@oqB=M8Z%9vcWBIZ#zGLqBt{wWbhv61g?KU)uBa+%y}yvMSR-XiIG=4h^g>GS
z5`D#t-|i%p?r6JJ_clCDF4;D@q$}q=(!#(CkeWos;Aj69Y=f^%B7>4{@EoAvQ|Q1L
zJooF!R(RJ-il4z3Pa&hyo12D#T3XcXfzQu_t?*}eqJxrh^EA-FM+)dT{L3Y<W4XC`
z0>IiY6(h?Rw){RS{VTGgd)wo{45WWShJbSU^>18U9d?zA;7hAxIQ%#m?~X5^2LYTq
zj?Q)8cnsVIq>+(L%bua%-3yN|0t`Mspr8g%)Y?2(g%2-+Tcof4*<r|EL<WK}e^f~1
ztf6o{-7z(}me|N@_3D5(SE4#(3Tx3t4eN=Qk`2F=%e$gVGRoFE5qmVJO4?HnozGni
zP+Z<lR*Q_mOZ!!1+>?+_r)N=~<3#De=#2E_ZG&*f0*XP!7tn>PMhFY&en7$lzoEc_
zPPg5fZm856svT`(4W)<5<m+j>SL+VMoF;FCk0mv>h$9?sQ}tr1nJ)RtdaA)wL?)(5
z>jR-C6^$B`wM?2O$vBzP8N6;z-k?<z3`I&BxwvV#m@5}@>GoW%)(e{%iBRl@7ycY<
zMpJdM2;VsYw9?4oO^Q+q?ku6x5<Y!wSKnXCQtt-k+{#~g`cY(_<xFZ;?=Cu$byC2c
z{!*mcX_qyILNczz^P<1hG&33A;HKj_onQ<L>UhcF&&JxGcwHTe+G-}w;A(^krKgtf
z(6mOYi^p1N=X<=ieEG<?jt*2R#Y7xldL0~;F8qYLDbc^Ka<W0ILrM4|c4iD^>6kZQ
z(77x6s>f!eFg72^bW*Nbr4Tk0+C(SOskv2Q#$`&xbhuKL3>rKof61F-bZs(&(Kttj
zBkg9JXb03<susl@VqLH_;UWv}kbZG#7GC}j1YQ0I=7$rgys<e*j0{W<;&Wnho{*m6
z^!u{C*@|pca%D6}%;WQ`pFc8vlnn_CRnk%ow_0oTl<P5#r&hKZoeqoAoc7>J#?i^>
z%WB->5cD2zLyyPXEtfH3pwbbOCL`3XjExQi8Nn!!8oEYWOfE*PB6`Pg*VPwRWpzpR
zH}@n22f@Tps#2P(%2vgTxeg~nLaEq4BF|;x<y4Vd5f2S~^)rg`&GKx$mMd1_i6yXq
zXSP-<@^Mjqlw465`09&_ad^>+3~bW$XLOK26cg}CD}s(|=GNUmR}(pIE}n|>HTc$f
zg<tyl+dH9e2H1!D?#WlLx(7Zo1CDK5XF41az|`48;P~XaNqIf%Ji4+#h;KsXgZhTP
zV8dOFj#y0A%b8l4uJJZcD~hE%7L(tZb*e2kIzl##Z7!d4M<})1>hU+#Y|BR%RS9b%
z=x$=>bXBE`#2p1wGZ;&|vQXHK&Ph{yr#G!e7JT&zGC7j0R%JJ?`BnoL1B&sX-fS})
zU-7qgWlnaZd|ydc_}<BZm%s4A4xdV(6Vg=1i=-2pRTUpv{#KDYylM5deZNR2JGYOm
znbC8}+J$tnGtZWr6~;=44TdR~O@a{B)%lc{F<0w?vm-=llENwhcbs;+Gv0VTt4cST
zcEKIcSz^4yCpama3(M$B&X$#E_>{4Hfb--nAv=8LZs57b71vwzdm}2o8N4f^wv=nx
zIeA-?1t{E)jGuX7L{er>tY7j#-<uM@XA)>3I0TN3UiI(lVtcNh(@IZuW?6fX6*CO2
z6V<6|%*kqP`4XRIoP<}W&FXbA%AF1nHr!h2Fj&P(7Hry3nxklow$l^~iB>Mt$@%QL
zvWdnrCSTs5x5SO+8UruwM`opw7jElC?7KE($MW=<?`_|{{y0Ixs5k&m@L*wb{WK@a
z=3YAipE7`Xw&^Gs#CA@oDa#>^#qSjSd_@%qRs!CTp2p4P1T8e3x^P1o6q9<g<1j>H
zYHQJ5$7r85OqkO)YmFjeL6a?Gw!{<ZbcA!Y>HY@wPWcB1U2jj|$P(C&o>b41lJMdb
z{LBo{k6k^L@3OgfIESyDQ%bLYg9K`L`XO*kiaos>sLvinXW2@W*AW_Rz(=_XoXw2e
ztdu66A|iT2PNxsom}-p7v}mDbtat2~o{F*|ZN6Z)IE%4@JCPLgblwr7Jr1)^sS3OF
zO@E={ON4uw0A9EQ%s|uIU{a11ofP<{eaAH`l^*&0et7OBSud`c?&XDRC*YNrz)UYc
zcwLsDF|Tdn-fBE!Y^EY*UrJWqvO8_nS9p(BpR8cIn3zcWY+{P{g*-+!kCRnCr!^8D
zUDK3x`E$Oq+7z%WJ9Hz`)Mzs$`%2urTsj8tnot;#ghnI9%Lm|_Clu3&YzOpy9ytX6
zzJwf~kgryicg4iji#ZL9Yrt$UnQ0aqN+M_V=d5K`uZ=`9j5kZQf*e<?mg$_i8cgbf
zQIpG>(qqc7r{EBL!B)<#r1(IJ3OU4V#1>2wo;D#6S)m>h%(M|2UQx`!Q$}!b^qL^)
zYdATtlH<S*)Y8rjJ1onOrsud-tNQZXU%)>e1k(@~!0}!3r~M?cV*YBr*rk{cc5o_5
z6m?o6=ggX|wRFUbt4+E>Fy%A4a%!T}^u~%f9u80m4VQ~^2@fB|al2Da$W5bwajHgJ
z2z#1gtE%MFM_nu@I7F*-`Mmdf3G8~|zIC15cRZjt(hHa!R~NKmXD^_afBNv?_MPvk
zz@g!*$Ta-BLnw7rK1c5^&*jBlXBO^1j4Fc_jUg5b810nF+34W$7VS6a%cXMA>P;67
zZmU?%#GP{OEqXgDleS`R3N0t)!3rKL$Cn({92fKzL_3yaEMXUoDfM{`ooD-JdUQ1f
z_V;P6j)1}gK(&1NvH7k2{pcM+XxOEgW5c<&QK(c(V$+?n+6WFW2n|CZnl2X;c#)^v
znu^BSB)wKSFg&qVE9ogvjshMj>0GUjF<Z~2$}yvotr>-oDZ_SD1*6xeA)sFm0sx1G
zx50s)Lze^JeC__hmBIjCY9UjAl89eBwr^eXmwmPFYL1fPjagP*3?)iQB9)7obT*du
z*BHO1Z8UJK$whFjw!2xfR>W|Dah03xPS|K|d9*53z~J(^ZP9o*)^KwAJi#+Dnvd5T
zrIy7L;FXr1Ku9l_ZieS42L_~YW_Y5%-Rs_dN0qOXs}=Ef>CzLsq3=<}<oW~3TrZ41
zOeR~?P?dDRqT0Uhg&)5@!aFQr0M0UsgOLBS;y8TeN5}wtkWq}n=xfLmU0DY9*kJ1`
za({O5K5!EZY0#r=1@m|@Dl9TNzr~_f>dH-q&Uy%Ym=Bfcl7=97qg}3<Ts0myvW`Hf
zXyl7tCK@OOlSNaRZukYV=Bz8LnWCx{;tNS#EL`{ZLr22?i0pp%esF#eUj8&drGLAR
zg69{(xU4t5urTQo=^VkvN|ii?`TQ-CjI_CksctM*3YB))@6zz$fDf}cwB-)dF1CZ&
zN<EdTr;}uo@R%J*pT3}pXG$J@+Ql1mArGB)<b)M5mJ2v|`53wrVz;5arWihVMs5hz
z(C{6w0B0pICXb)`3xEX+a<A94Sw*+WZOgV3wnB?`G>YL+s9Z4x_^7F@^JFa^wF;{@
ziW#!uEkwh-KqWZLrSiCo-gJ{w$3&-Jmo;SxODUjkXI)Oo|F&F0o}1`y{%x>tCy=v2
zM-M;!H83I%cOIKz9p-|?XQXf@q0N{KEM~Rj5_nB*<!E(1<gG^tlV5MEHdvJxqYXAk
zrjFCPYMSuI#fUTRG`BOsn4?0sS#2~G>jbS#9g8w}KVLrir{D<09|mN%`Y7-rJz5|K
zz8yV!_A#(`MJS5FVoS`0Ds3_;=IlP4b~0Hn88X}SNwUp{P1PW&(sAaTOUU7Rv6OID
zSgzK#*#)xhbubkspi~yp6*^f6;2hiO6wC}(AbULs9KHwafdBazxOD|mXqUh+yyrL3
z33ze|d~cwSD<HTJos@&`)z{Et@Rwf)+oo12hAbPUxL8P4nq|2;U7ehhv4(W|w`N$M
zgAgosdm-ov2eF9O!RwnCAFq_t4nO9P`Sev2=Z@yox{8psW0q=|GKn-r>r9;xq4$Tp
zd2Oyp8G^QilPm`<raVc;?6yX)JC?i;jljRY1&sB(;Nf3c&{N$R_-Yl5_Q?xW7-XN`
z{5WVF+_YN8!qZ2<ez{jc;e%g8snNCSR$j^47+!iu(JwoSLSD?5;@*m(98SASMxP6d
zc*^Z^EK6e5W-Av_g;@(;Rktm6hqi<nnxd0rV={kmFhx~FsrDypAt68+a<RNsXnSp<
zJCabYMf&Ee{V?45^?oN|UCDe`?SL0%!13<l-+&*F%MrN9Pr^U=9I^mk$)f{98rj}{
zpQoAA$zAM~TW8opldm^BMvQN1!fZy*x1G2n=~Py;#TxC=D7~SqKb~o2O@2=;sE_LX
zOib`ZNsdUC5_S21F<FhvUG69=p<u{m<nz{&JC+T=#e)hjyz3acO>t5_hQFiOB^TJ%
z;aoXasLNDh)rNk_0hRv@25x$9O9_b|qle+CZ!1vv*5LuFZ~rIWd)rFq*{{M^7q(8J
z*Y&2HIH!{g)GTY%>1y7XC<tjbT@EF^BHKu(T#1gFudA5~?=maZjZ$4@XMNRXGiac^
zcHH6)>y5=QLmF|$RLR8{gWbZ`b&eM2BYY`>WwCw^zkW99H_<Zl`o;N`GUff9pwMi9
zjMCeUZtEvtd2<iTQE;J#9)bZ;ri!$yoz=C1L?PFSTN=rD#OrT*lcX}5ZEBq{Z^M@+
z0+bpj*tV-cX-%w7@A9Y`MO~*Bv6Ym342$L~Z3C?qTP1rlQ7}g62-fbymah5VLFz|0
z0%F2v%n1DvQcUT>mbbbxlFR~lmk!z0s~xt%PgRg1_~cj6F=^`Qo6aT?T(0A0;mDon
zEz*~s&cKmH<nYSfKRAr;gQup^-MwlLh3_0jM|!vSk|^H4AKrN@nt>OdM|^APZuqPb
zo$n#yA-Hb=9a?!@vw)65{62(`69KvM<R31qJn4rc_kis^;U0%mN>t{QOL7wFk5o%?
z`_&(PatRz>8GUvM9E2zLBA@8ay{ve2&&P^Zq5n0-E%3q{ijNbn!qfkx(7>qxI{3kO
z^(Z|5hGIkT)nB=;`-7h=o;$b!5G&a|w->?pY#_AS7l)0^R`*G~Vsrx%ROdCw@FS<E
z^WEnN<k_hWfJ@`U2z|}k|BrAf<Ufau4X*IekCTwf--M9eMF#ofEgKMp_MHFWoBFjj
zzK=qC$bVgOmUHeHy!#<=H9O0w6Q01qo_^~5Xn-d?{av}dePx$o3mo}2I=eARXK(*E
z2Gewo$;59R^j_nc2Q0UKNNCA^6wp$x{N;-Be~B$8dV1b<e+oIWb;Co--f4S(NO>!q
zcoQ93e&?}60KWJPx?MW<_+P<Ob@_(^Pn3|&-7ja67YA<y!j!HYCA%FSNs1eVTf$4?
z|3s#){a$uWw0hirYQu?E_oW{q-#>Ok0Aqh+FHEAb8_X8zwMNTz19{^9USb&S-gyK)
zICO)6B79^}&h=l^q30CvMsdWxcK){@G0<zK9{_N80o}6km}1X<3Z8lv8S5_Hj%sh-
zSg_E!Y4vwAJx(~^eI<$#yFNZ3*vlV%Ia>pQ5AGe_aEi9)eHh~ZFBsYL^#{VpiL*s?
WZ&&`|*OkE=M*7I^P#t~pJO2gldH0h5

delta 1874
zcmciBTWphM7zgmY-}`m2ZtJ?O-8vjFhir@vdj7fz3G_gZTi13ytOZHd^?X>ncHPz)
zlo*kOkO;n#=VC@g4I-#aYx0FKmW64CXk?&4@DPR<D3Qo!jHg867OymV$*!K~_W3{m
z-^*{*PW>P_vI%%Ch<jB2%<`-`I=h{W35D>95|tL6NQ21h4ry^Meh$IH=Ttk)m*Em<
zt-vB;Fl;3J3fe6XTl6N6HsQ?5dbDcYpf)r*lI{$~x{dB#(y(0KEjEW_E|<h$W>mcn
zzc&|+m^}Wm;gmm|8nO;Myvo6$KApsnw-^;8U89NKa44w;nFHCNl!w27>Uk_AtHM>V
zsuI5h*(xlAoz0kr$x8eSrEDaqMF@MQP#I@$$5sVH7DKfpGsA}meB4AntEndTWC^(`
z<gtb-T#w*`StKk<xv$YhaqX!!#f<7gD{1~!41AiR*-v+4E+PxgCi3)e^-%c)wh%t9
zC~gfHM8!k<gBy#zr#~t$He4(zFV0=r!X@|jZHK)Vu>j)2r9gHHgm7GlBP6qJ4NM1+
z8U`9DQ*q|2@k8w11k#w`*#|VANMCFPZl11!zE`PMce_KQ_vCVctRWs7HhCRxwKdTd
z$qX4?Nye+`?+GRYTDwn~w;9AKZ<f&;`>okwpL|4Va9Gm4{ZX|zZ0(B2r9o%5Q>_|K
zC=zl-H#zZb4_r8n<m|oo(eV<P)=@NkIgZ<5_B;|53)M9UewsurltN8Toa%sY_R+P=
z`%&X&_n<!B5sTS^TCv0CcR7_YYdq!{OPd_2KDDRaJT$6G`;8L6&aNJfhXPSqr&*j+
znT>M4&mG9gG@ac{R6CaPDj54vu-)lYhSJfzp1k{Y8)>YsXQfl<kt*0ygC2(iR}der
z&LFY7E2(ifJY9yUF`@LjHB2NE&K0DNLjQo(E*0C7I<3X&aoX&oqdn$8JgW;h7}Y>F
zW6>)No`S{Z@621I`Sf6?N?iys+LYcGG4=H<H>eGymyn+wpF?&GN)Z;2iLp&^_Btvn
ziUidZTXzEuZ(tAniSCHl^9@vSHR$gybv*qj#ewzL==GrAy!4_l!&nO=J|iPmD*D2a
zU6S^=#F&oR3WZ2Q5*SG90-2mxtk{)xT61P!!f4EA3d2&hQ{J6Wr8;7a+C11VcF7~M
zkj8Cv+sC|7pQ}J_-`l|+Y^H*DR@_w^%q#JF;PUYGhk%Pnx!;iqo)9L>F^^m+FJVuu
z!7tRYZ!!4t2KM-FEU9DP9KjzpvS-KfWGTDnZM=yKf4Dgn?ACMm=hgp%3iy*$BilTK
z`?GNPce<R7C(t?subf=E<V+G>T2>3UHgd|~mWtB^(q>u!6H1N@Y=@~Dc6u9K)$t$v
zTn~dEEO2NA`*EK3|63j@RKK$v{yI22i5PftAH8w}VUa`2*^^Jv8+a??k6is;4mZ!y
zeD=&7YC?aXeg7(ITrLM|d7iFA|0GF7f+^V9vZQW*J$?*qvvdX7EIhWv18sqAHxLiz
zZ{l9kUD*b6xA9tXq%r~vLsThDGn^f4$1$2|VDG+1OKaH0%k*N&ic*%dKVG9JrvCyq
CZHY?&

diff --git a/package.json b/package.json
index 9f5a8b2..a6815d0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "blog",
-    "version": "1.3.1",
+    "version": "1.4.0",
     "description": "Florine's personal blog.",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
@@ -16,7 +16,8 @@
         "deploy": "grunt deploy"
     },
     "devDependencies": {
-        "@11ty/eleventy": "^1.0.1",
+        "@11ty/eleventy": "^1.0.2",
+        "eleventy-plugin-toc": "^1.1.5",
         "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.1",
@@ -24,6 +25,8 @@
         "grunt-contrib-watch": "^1.1.0",
         "grunt-exec": "^3.0.0",
         "grunt-focus": "^1.0.0",
-        "grunt-text-replace": "^0.4.0"
+        "grunt-text-replace": "^0.4.0",
+        "markdown-it": "^13.0.1",
+        "markdown-it-anchor": "^8.6.5"
     }
 }
diff --git a/src/main/_includes/post.njk b/src/main/_includes/post.njk
index 66bb882..f4536bc 100644
--- a/src/main/_includes/post.njk
+++ b/src/main/_includes/post.njk
@@ -5,7 +5,10 @@ layout: default
 <div class="row">
     <div class="column">
         <p><a href="{{ '/' | url }}">&larr; home</a></p>
-
+    </div>
+</div>
+<div class="row">
+    <div id="innerBody" class="column{% if content | toc %} column-75{% endif %}">
         <h2 class="inline-header">{{ title }}</h2>
         {% if date %}<u>{{ date | isoDate }}</u>{% endif %}
 
@@ -15,4 +18,12 @@ layout: default
 
         <a href="{{ '/' | url }}">&larr; home</a><br />
     </div>
+    {% if content | toc %}
+    <div class="column column-25">
+        <div id="toc">
+            <h3>Contents</h3>
+            {{ content | toc | safe }}
+        </div>
+    </div>
+    {% endif %}
 </div>
diff --git a/src/main/_posts/2017-03-01-raspi.md b/src/main/_posts/2017-03-01-raspi.md
index d8ba743..8012ab0 100644
--- a/src/main/_posts/2017-03-01-raspi.md
+++ b/src/main/_posts/2017-03-01-raspi.md
@@ -76,7 +76,7 @@ Example output will be given directly after it in a separate code block.
 
 3. Enjoy!
 
-### Disconnecting
+### 2.1 Disconnecting
 To unmount the Raspi:
 
     $ umount /mnt/raspi
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 1a1c7bf..725a84c 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,7 +1,8 @@
-#contents .container {
-    max-width: 80rem;
+#innerBody {
+    max-width: 75rem;
 }
 
+
 p {
     text-align: justify !important;
     text-justify: inter-word !important;
@@ -11,6 +12,16 @@ ol {
     list-style: decimal outside !important;
 }
 
+
+#toc {
+    position: fixed;
+}
+
+#toc ol {
+    list-style-type: none !important;
+}
+
+
 .inline-header {
     display: inline-block;