Add: anchors links for headings

Author: rg-wood

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vellum-doc",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "A simple document web component for web publishing",
   "main": "vellum-doc.js",
   "module": "vellum-doc.js",

package.json

@@ -97,6 +97,21 @@ export class VellumDocument extends LitElement {
     })
   }
 
+  anchorHeadings() {
+    this.headings.forEach(heading => {
+      const spacing = document.createTextNode(' ')
+      heading.append(spacing)
+
+      const anchor = document.createElement('a')
+      anchor.href = `#${heading.id}`
+      anchor.innerHTML = '#'
+      anchor.className = 'anchor'
+      anchor.title = heading.textContent ? heading.textContent : ''
+
+      heading.append(anchor)
+    })
+  }
+
   override render() {
     return html`
       <div id="sidebar">
@@ -126,6 +141,10 @@ export class VellumDocument extends LitElement {
         html`<a href="#${id}">${heading}</a>`
     )
   }
+
+  override updated() {
+    this.anchorHeadings()
+  }
 }
 
 declare global {