From c469a64a65a2a7972d854268c4bb84359605b6c0 Mon Sep 17 00:00:00 2001
From: Steven Engler <sengler@uwaterloo.ca>
Date: Tue, 17 Sep 2019 14:22:13 -0400
Subject: [PATCH] Added heading links to URL fragments
---
layouts/_default/single.html | 2 +-
static/css/styles.css | 37 ++++++++++++++++
static/images/chain-link.svg | 81 ++++++++++++++++++++++++++++++++++++
3 files changed, 119 insertions(+), 1 deletion(-)
create mode 100644 static/images/chain-link.svg
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 5e3a900..75f71d5 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -27,5 +27,5 @@
</details>
</div>
{{ end }}
- {{ .Content }}
+ {{ .Content | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" (printf "${1}<a href=\"#${2}\" class=\"heading-anchor\" aria-label=\"Anchor\"><img src=\"%s\" class=\"color-adapting-image\" height=\"20\"></a>${3}" ("images/chain-link.svg" | relURL)) | safeHTML }}
{{ end }}
diff --git a/static/css/styles.css b/static/css/styles.css
index 1cc1991..b43a677 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -13,6 +13,43 @@ h1, h2, h3, h4, h5, h6 {
margin-top: 1.5em;
}
+@media (hover: hover) {
+ /* For devices which support hover, hide the heading URL fragment
+ link/icon until the mouse hovers over the heading */
+
+ h1:hover .heading-anchor,
+ h2:hover .heading-anchor,
+ h3:hover .heading-anchor,
+ h4:hover .heading-anchor,
+ h5:hover .heading-anchor,
+ h6:hover .heading-anchor {
+ visibility: visible;
+ }
+
+ h1 .heading-anchor,
+ h2 .heading-anchor,
+ h3 .heading-anchor,
+ h4 .heading-anchor,
+ h5 .heading-anchor,
+ h6 .heading-anchor {
+ visibility: hidden;
+ }
+}
+
+.heading-anchor {
+ color: grey;
+ margin-left: 0.5em;
+ font-size: 0.75em;
+}
+
+.heading-anchor:hover {
+ text-decoration: none;
+}
+
+.heading-anchor img {
+ height: 1em;
+}
+
a {
text-decoration: none;
}
diff --git a/static/images/chain-link.svg b/static/images/chain-link.svg
new file mode 100644
index 0000000..a9947b2
--- /dev/null
+++ b/static/images/chain-link.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="36.329693mm"
+ height="36.329624mm"
+ viewBox="0 0 36.329693 36.329624"
+ version="1.1"
+ id="svg1143"
+ inkscape:version="0.92.3 (2405546, 2018-03-11)"
+ sodipodi:docname="chain-link.svg">
+ <defs
+ id="defs1137" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="0.98994949"
+ inkscape:cx="41.183747"
+ inkscape:cy="-1.0638373"
+ inkscape:document-units="mm"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:window-width="1920"
+ inkscape:window-height="1015"
+ inkscape:window-x="0"
+ inkscape:window-y="30"
+ inkscape:window-maximized="0"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />
+ <metadata
+ id="metadata1140">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-106.18932,-64.144405)">
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:15.11811066;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ mask="none"
+ d="m 499.69727,242.43555 c -5.63871,0 -11.27655,2.12809 -15.53321,6.38476 L 467.125,265.85742 c -8.23333,8.23336 -8.50042,21.63554 -0.80859,30.20899 l 10.73437,-10.73438 c -1.97467,-2.71509 -1.72344,-6.29608 0.76563,-8.78515 l 17.03711,-17.03711 c 2.77595,-2.77592 6.91155,-2.77594 9.6875,0 l 17.0371,17.03711 c 2.77592,2.7759 2.77592,6.91158 0,9.6875 l -17.0371,17.03906 c -2.48897,2.48893 -6.06818,2.73797 -8.78321,0.76367 l -10.73828,10.73633 c 8.57338,7.69283 21.97725,7.42317 30.21094,-0.81055 l 17.03906,-17.03711 c 8.51335,-8.51334 8.51331,-22.55504 0,-31.06836 l -17.03906,-17.03711 c -4.25666,-4.25667 -9.8945,-6.38476 -15.5332,-6.38476 z"
+ transform="scale(0.26458333)"
+ id="rect917"
+ inkscape:connector-curvature="0" />
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:15.11811066;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ mask="none"
+ d="m 440.30078,301.83008 c -5.6387,0 -11.27655,2.1281 -15.5332,6.38476 l -17.03711,17.03907 c -8.51335,8.51333 -8.51335,22.55306 0,31.0664 l 17.03711,17.03907 c 8.51331,8.5133 22.55501,8.51334 31.06836,0 l 17.03711,-17.03907 c 8.23369,-8.23371 8.50337,-21.63755 0.81054,-30.21093 l -10.73632,10.73828 c 1.9743,2.71502 1.72525,6.29426 -0.76368,8.7832 l -17.03906,17.03711 c -2.77591,2.77592 -6.91159,2.7759 -9.6875,0 l -17.03711,-17.03711 c -2.77595,-2.77593 -2.77595,-6.91158 0,-9.6875 l 17.03711,-17.03711 c 2.48932,-2.48932 6.06998,-2.74094 8.78516,-0.76563 l 10.73437,-10.73437 c -4.14095,-3.71513 -9.40796,-5.57617 -14.67578,-5.57617 z"
+ transform="scale(0.26458333)"
+ id="rect919"
+ inkscape:connector-curvature="0" />
+ <path
+ style="display:inline;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 119.41373,87.24996 9.88087,-9.88087"
+ id="path860-2"
+ inkscape:connector-curvature="0"
+ mask="none" />
+ </g>
+</svg>