Add support for clickable headers

This commit is contained in:
Melora Hugues 2024-07-02 22:53:20 +02:00
parent d3d859baa9
commit 9160cd88ed
3 changed files with 23 additions and 0 deletions

View file

@ -0,0 +1,9 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}">
<a class="hash-link nohover" href="#{{ .Anchor | safeURL }}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Link to this section</title>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
</a>&nbsp;{{ .Text | safeHTML }}
</h{{ .Level }}>

13
static/css/heading.css Normal file
View file

@ -0,0 +1,13 @@
.hash-link {
/* -webkit-transform: translateX(-100%); */
/* left: 0;
opacity: 0;
padding: 0 5px;
position: absolute;
transform: translateX(-100%);
transition: opacity .1s ease-in;
will-change: transform, opacity; */
svg {
stroke: rgb(138, 173, 244);
}
}

View file

@ -4,6 +4,7 @@
<head>
{{ partial "head.html" . }}
<link rel="stylesheet" href="/mermaid.css">
<link rel="stylesheet" href="/css/heading.css">
</head>
{{ block "body" . }}