Re-enable anchors links feature as optional

rg-wood · rg-wood · commit 14b393e4209e · 2024-07-10T11:33:44.000+01:00
This reverts commit 9579118.
diff --git a/README.md b/README.md
@@ -39,6 +39,19 @@ Example HTML:
 </vellum-doc>
 ```
 
+Anchor style links can be dynamically added to document headers using the
+`anchors` attribute:
+
+```html
+<script type="module">
+  import 'vellum-doc/vellum-doc.js'
+</script>
+
+<vellum-doc anchors>
+  <h1>Commodi</h1>
+</vellum-doc>
+```
+
 ### Styling
 
 `<vellum-doc>` exposes the `index` **part**, which can be used to style the
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
   </head>
 
   <body>
-    <vellum-doc>
+    <vellum-doc anchors>
       <section id="document">
         <h1>Commodi</h1>
         <p>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vellum-doc",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A simple document web component for web publishing",
   "main": "vellum-doc.js",
   "module": "vellum-doc.js",
diff --git a/src/vellum-doc.ts b/src/vellum-doc.ts
@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { slugifyWithCounter } from '@sindresorhus/slugify'
 
 @customElement('vellum-doc')
@@ -74,6 +74,9 @@ export class VellumDocument extends LitElement {
     }
   `
 
+  @property({ type: Boolean })
+  anchors?: boolean
+
   private slugify = slugifyWithCounter()
 
   get headings(): HTMLElement[] {
@@ -97,6 +100,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 +144,10 @@ export class VellumDocument extends LitElement {
         html`<a href="#${id}">${heading}</a>`
     )
   }
+
+  override updated() {
+    if (this.anchors) this.anchorHeadings()
+  }
 }
 
 declare global {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vellum-doc",`
`3`		`- "version": "0.7.0",`
	`3`	`+ "version": "0.8.0",`
`4`	`4`	`"description": "A simple document web component for web publishing",`
`5`	`5`	`"main": "vellum-doc.js",`
`6`	`6`	`"module": "vellum-doc.js",`