Generate anchor in body headings

3 files changed, 59 insertions, 10 deletions

diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
index f09481e..3802f5a 100644
--- a/assets/css/scopes/_headlines.scss
+++ b/assets/css/scopes/_headlines.scss
@@ -1,6 +1,10 @@
 @include namespace('headlines') {
     @include store((
         --colors: (
+            --link: (
+                --idle-fg:  prop(--colors --obj, $global: true),
+                --hover-fg: prop(--colors --fg-lo, $global: true),
+            ),
             --emph: (
                 --bg:      prop(--colors --bg-hi, $global: true),
                 --body-bg: prop(--colors --bg-hi, $global: true),
@@ -74,5 +78,39 @@
                 );
             }
         }
+
+        @include element('link') {
+            display:        none;
+            margin:         -.5rem 0;
+            padding:        .5rem;
+            vertical-align: -.1em;
+
+            svg {
+                width:  1 / 16 * 14em;
+                height: 1 / 16 * 14em;
+            }
+
+            &:link,
+            &:visited {
+                color: prop(--colors --link --idle-fg);
+
+                &:hover {
+                    color: prop(--colors --link --hover-fg);
+                }
+            }
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            &:hover {
+                @include element('link') {
+                    display: inline-block;
+                }
+            }
+        }
     }
 }
diff --git a/content/symbols.svg b/content/symbols.svg
index 00ea701..6964327 100644
--- a/content/symbols.svg
+++ b/content/symbols.svg
@@ -69,5 +69,13 @@
          <path d="m5.75 5.75v1.5" fill="none" stroke="currentColor" />
       </symbol>
 
+      <symbol id="icon-link" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path
+            d="m8.25 3.15 0.4519-0.4481c1.2692-1.2692 3.327-1.2692 4.5962 0s1.2692 3.327 0 4.5962l-2 2c-1.2692 1.2692-3.327 1.2692-4.5962 0"
+            fill="none" stroke="currentColor" />
+         <path
+            d="m7.75 12.85-0.45662 0.45281c-1.2692 1.2692-3.327 1.2692-4.5962 0s-1.2692-3.327 0-4.5962l2-2c1.2692-1.2692 3.327-1.2692 4.5962 0"
+            fill="none" stroke="currentColor" />
+      </symbol>
    </defs>
 </svg>
diff --git a/filters/common_actions.lua b/filters/common_actions.lua
index 5b6c86b..8383ada 100644
--- a/filters/common_actions.lua
+++ b/filters/common_actions.lua
@@ -1,15 +1,12 @@
 function CodeBlock(el)
     if el.classes[1] == "plain" then
-        el = pandoc.Div({el}, {class = 's-code'})
+        el = pandoc.Div({ el }, { class = 's-code' })
     elseif el.classes[1] then
         local formatted = pandoc.pipe('pygmentize', {
-            '-l', el.classes[1], '-f', 'html', '-O',
-            'cssclass=s-code s-code--highlight'
+            '-l', el.classes[1], '-f', 'html', '-O', 'cssclass=s-code s-code--highlight',
         }, el.text)
 
-        if formatted then
-            el = pandoc.RawBlock('html', formatted)
-        end
+        if formatted then el = pandoc.RawBlock('html', formatted) end
     end
 
     return el
@@ -18,11 +15,17 @@ end
 function Header(el)
     if el.level == 1 then
         local newchildren = pandoc.List()
-
-        newchildren:insert(pandoc.Span(el.content, {class = 's-headlines__title-inner'}))
-
+        newchildren:insert(pandoc.Span(el.content, { class = 's-headlines__title-inner' }))
         el.content = newchildren
     end
+
+    if el.level <= 3 and el.identifier ~= '' then
+        el.content:insert(pandoc.Space())
+        el.content:insert(pandoc.Link(pandoc.RawInline('html',
+            '<svg class="o-icon"><use href="/symbols.svg#icon-link"></use></svg>'),
+            '#' .. el.identifier, nil, { class = 's-headlines__link' }))
+    end
+
     return el
 end
 
@@ -36,7 +39,7 @@ function Div(el)
 
         for _, children in ipairs(el.content[1].content) do
             newchildren:insert(pandoc.RawBlock('html',
-                                               '<li class="c-page__prefixed c-page__prefixed--ref">'))
+                '<li class="c-page__prefixed c-page__prefixed--ref">'))
             newchildren:extend(children)
             newchildren:insert(pandoc.RawBlock('html', '</li>'))
         end