Navigation for headings

simonw · web-flow · commit 43100d137fa0 · 2024-12-15T11:21:22.000-08:00
https://gist.github.com/simonw/afebd0bdcfcc8c67a183ecec264523d0
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ Prompts used are linked to from [the commit messages](https://github.com/simonw/
 - [Timezones](https://tools.simonwillison.net/timezones) - select two timezones to see a table comparing their times for the next 48 hours
 - [Social media cropper](https://tools.simonwillison.net/social-media-cropper) - open or paste in an image, crop it to 2x1 and download a compressed JPEG for use as a social media card
 - [Writing Style Analyzer](https://tools.simonwillison.net/writing-style) - identify weasel words, passive voice, duplicate words - adapted from [these shell scripts](https://matt.might.net/articles/shell-scripts-for-passive-voice-weasel-words-duplicates/) published by Matt Might
+- [Navigation for headings](https://tools.simonwillison.net/nav-for-headings) - paste in an HTML document with headings, each heading is assigned a unique ID and the tool then generates a navigation `<ul>`
 
 ## LLM playgrounds and debuggers
 
diff --git a/nav-for-headings.html b/nav-for-headings.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HTML Header Processor</title>
+  <style>
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Helvetica, Arial, sans-serif;
+    line-height: 1.4;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .input-group {
+    margin-bottom: 20px;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  input, textarea {
+    width: 100%;
+    font-size: 16px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  textarea {
+    min-height: 200px;
+    font-family: monospace;
+  }
+
+  button {
+    background: #0066cc;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  button:hover {
+    background: #0052a3;
+  }
+  </style>
+</head>
+<body>
+  <div class="input-group">
+    <label for="urlInput">Page URL:</label>
+    <input type="url" id="urlInput" placeholder="https://example.com/page">
+  </div>
+
+  <div class="input-group">
+    <label for="htmlInput">Input HTML:</label>
+    <textarea id="htmlInput" placeholder="Paste HTML here..."></textarea>
+  </div>
+
+  <div class="input-group">
+    <button onclick="processHTML()">Process Headers</button>
+  </div>
+
+  <div class="input-group">
+    <label for="processedHtml">Processed HTML with IDs:</label>
+    <textarea id="processedHtml" readonly></textarea>
+  </div>
+
+  <div class="input-group">
+    <label for="headerLinks">Header Links:</label>
+    <textarea id="headerLinks" readonly></textarea>
+  </div>
+
+<script type="module">
+function createSlug(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .trim()
+}
+
+function generateUniqueId(text, existingIds) {
+  let baseId = createSlug(text)
+  let id = baseId
+  let counter = 1
+
+  while (existingIds.has(id)) {
+    id = `${baseId}-${counter}`
+    counter++
+  }
+
+  existingIds.add(id)
+  return id
+}
+
+window.processHTML = function() {
+  const html = document.getElementById('htmlInput').value
+  const url = document.getElementById('urlInput').value
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, 'text/html')
+  const existingIds = new Set()
+  const headers = doc.querySelectorAll('h1, h2, h3, h4, h5, h6')
+  const headerLinks = []
+
+  headers.forEach(header => {
+    if (!header.id) {
+      header.id = generateUniqueId(header.textContent, existingIds)
+    }
+    headerLinks.push(`  <li><a href="${url}#${header.id}">${header.textContent}</a></li>`)
+  })
+
+  document.getElementById('processedHtml').value = doc.body.innerHTML
+  document.getElementById('headerLinks').value = '<ul>\n' + headerLinks.join('\n') + '\n</ul>'
+}
+</script>
+</body>
+</html>
