{"_id":"@daviddarnes/heading-anchors","_rev":"3-f61b35cc19eb5029778d230a6e89d68c","name":"@daviddarnes/heading-anchors","dist-tags":{"latest":"2.0.2"},"versions":{"1.0.0":{"name":"@daviddarnes/heading-anchors","version":"1.0.0","keywords":["web","component","components","web components","custom elements"],"author":{"url":"https://darn.es/","name":"David Darnes","email":"me@daviddarnes.com"},"license":"MIT","_id":"@daviddarnes/heading-anchors@1.0.0","maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"homepage":"https://github.com/daviddarnes/heading-anchors#readme","bugs":{"url":"https://github.com/daviddarnes/heading-anchors/issues"},"dist":{"shasum":"217ce6e2de235f0b9b006f5b030dac702f419d93","tarball":"https://registry.npmjs.org/@daviddarnes/heading-anchors/-/heading-anchors-1.0.0.tgz","fileCount":8,"integrity":"sha512-1JRPKjODcM3fAVWz3MQXhS7sqCasSzWJotHppDwkgv1SgohvRmZtgf+/2D/DYNeQkUTP3JPYZi8o6w5wcFjPHA==","signatures":[{"sig":"MEUCIQC58kgiOIlrU5jM2zTCzSiti3z0TVBuU+6DmEOCNu/YzgIgOjrw0ywtiL03Z2MWm51AsE4gWl4iPWbLOKuyJlNvHNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10079},"main":"heading-anchors.js","gitHead":"94c6aa3fa72516db60014f8272c7ee8d7542c96f","scripts":{"start":"npx http-server ."},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"repository":{"url":"git+https://github.com/daviddarnes/heading-anchors.git","type":"git"},"_npmVersion":"8.19.4","description":"A Web Component to add anchor links to headings with IDs","directories":{},"_nodeVersion":"16.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/heading-anchors_1.0.0_1702336753764_0.35955374213667035","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@daviddarnes/heading-anchors","version":"2.0.0","keywords":["web","component","components","web components","custom elements"],"author":{"url":"https://darn.es/","name":"David Darnes","email":"me@daviddarnes.com"},"license":"MIT","_id":"@daviddarnes/heading-anchors@2.0.0","maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"homepage":"https://github.com/daviddarnes/heading-anchors#readme","bugs":{"url":"https://github.com/daviddarnes/heading-anchors/issues"},"dist":{"shasum":"37ff19a12aaa09194d982ca4e35e1b8e1ec26427","tarball":"https://registry.npmjs.org/@daviddarnes/heading-anchors/-/heading-anchors-2.0.0.tgz","fileCount":9,"integrity":"sha512-P9KfsSqYjId41CUzcyFd/uOkbzQ6jM+UyfFkXX83bcChXyvn+LUBjKzZ9tI9xzCFRBD1FrOlDQxQgTaTB/Fk5Q==","signatures":[{"sig":"MEUCIFW8VwW2KDgOr/ncA46VmOtKdHQhfaa/Skucop91hqveAiEAtLhsezdaadZwFuAdZ3YBxnJgdkBBaMiXTW0KCJyssHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16089},"main":"heading-anchors.js","gitHead":"faa6ed76ef3237260cb9150e01440f9b5d4436bb","scripts":{"start":"npx http-server ."},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"repository":{"url":"git+https://github.com/daviddarnes/heading-anchors.git","type":"git"},"_npmVersion":"8.19.4","description":"A Web Component to add anchor links to headings with IDs","directories":{},"_nodeVersion":"16.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/heading-anchors_2.0.0_1721644562317_0.37595983552033063","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@daviddarnes/heading-anchors","version":"2.0.1","keywords":["web","component","components","web components","custom elements"],"author":{"url":"https://darn.es/","name":"David Darnes","email":"me@daviddarnes.com"},"license":"MIT","_id":"@daviddarnes/heading-anchors@2.0.1","maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"homepage":"https://github.com/daviddarnes/heading-anchors#readme","bugs":{"url":"https://github.com/daviddarnes/heading-anchors/issues"},"dist":{"shasum":"a257e3249b246b1448f4f73af7a79669a3bff475","tarball":"https://registry.npmjs.org/@daviddarnes/heading-anchors/-/heading-anchors-2.0.1.tgz","fileCount":9,"integrity":"sha512-xX+1bAAeObGuEPDMbHAzgqnjXx/TnYYknTHr+ikIcBlidmVUVF2L9hTTmtUJJbSkK/vAVWXofFsKdkCmW6/ikw==","signatures":[{"sig":"MEYCIQCs1pzpjWn5ZKZsFdxkGQ1qpVNzaPxqMRSP8nCBKZNCnAIhAOGmxzDdYMWsCAht8xCQ5qYbWsJGgGxAYE0dgJ72jCcN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16336},"main":"heading-anchors.js","gitHead":"759c973a86926719d21fb52ff117cf917150f95c","scripts":{"start":"npx http-server ."},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"repository":{"url":"git+https://github.com/daviddarnes/heading-anchors.git","type":"git"},"_npmVersion":"8.19.4","description":"A Web Component to add anchor links to headings with IDs","directories":{},"_nodeVersion":"16.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/heading-anchors_2.0.1_1728652092340_0.40623053963646694","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@daviddarnes/heading-anchors","version":"2.0.2","description":"A Web Component to add anchor links to headings with IDs","main":"heading-anchors.js","scripts":{"start":"npx http-server ."},"repository":{"type":"git","url":"git+https://github.com/daviddarnes/heading-anchors.git"},"keywords":["web","component","components","web components","custom elements"],"license":"MIT","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/daviddarnes/heading-anchors/issues"},"author":{"name":"David Darnes","email":"me@daviddarnes.com","url":"https://darn.es/"},"homepage":"https://github.com/daviddarnes/heading-anchors#readme","gitHead":"32ddeac9797cd9fe01fba63677c4f9f0960db5bf","_id":"@daviddarnes/heading-anchors@2.0.2","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-tRYT986xNTjVD1kXFP1gzxD6PPhF5EE6HMmFfC8Sxx4XAzunh0NO+B5/DiDv55iFCOI2SJWTQvGOXesBDMRP3A==","shasum":"ddded9df156dac50dc92362b8e65ea6201a92f38","tarball":"https://registry.npmjs.org/@daviddarnes/heading-anchors/-/heading-anchors-2.0.2.tgz","fileCount":11,"unpackedSize":16688,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQF8qVNfdgLaxApYlAXilFubry9YSIVBbAP2rftMXEhAiAI9vjf8D9YnxILHdRJhQw2n/x4TLM/n4EFSgtsJ3OG5Q=="}]},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"directories":{},"maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/heading-anchors_2.0.2_1728989855719_0.6351394765066805"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-11T23:19:13.665Z","modified":"2024-10-15T10:57:36.073Z","1.0.0":"2023-12-11T23:19:13.955Z","2.0.0":"2024-07-22T10:36:02.466Z","2.0.1":"2024-10-11T13:08:12.510Z","2.0.2":"2024-10-15T10:57:35.899Z"},"bugs":{"url":"https://github.com/daviddarnes/heading-anchors/issues"},"author":{"name":"David Darnes","email":"me@daviddarnes.com","url":"https://darn.es/"},"license":"MIT","homepage":"https://github.com/daviddarnes/heading-anchors#readme","keywords":["web","component","components","web components","custom elements"],"repository":{"type":"git","url":"git+https://github.com/daviddarnes/heading-anchors.git"},"description":"A Web Component to add anchor links to headings with IDs","maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"readme":"# `heading-anchors`\n\nA Web Component to add anchor links to headings with IDs.\n\n**[Demo](https://daviddarnes.github.io/heading-anchors/demo.html)** | **[Styling demo](https://daviddarnes.github.io/heading-anchors/demo-styling.html)** | **[Further reading](https://darn.es/heading-anchors-web-component/)**\n\n## Examples\n\n```html\n<script type=\"module\" src=\"heading-anchors.js\"></script>\n\n<heading-anchors>\n  <h2 id=\"heading-level-2\">Heading level 2</h2>\n  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>\n\n  <h3 id=\"heading-level-3\">Heading level 3</h3>\n  <p>\n    Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis\n    dolorem porro cupiditate quam eaque voluptates.\n  </p>\n</heading-anchors>\n```\n\n## Features\n\nThis Web Component allows you to:\n\n- Add anchor links to headings which have an ID attribute and value\n- Customise which elements will be appended with an anchor link using the `selector` attribute\n- Customise where the anchor link is appended using the `position` attribute\n\n## Installation\n\nYou have a few options (choose one of these):\n\n1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/heading-anchors): `npm install @daviddarnes/heading-anchors` (also avaialbe on [jsr](https://jsr.io/@daviddarnes/heading-anchors))\n1. [Download the source manually from GitHub](https://github.com/daviddarnes/heading-anchors/releases) into your project.\n1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)\n\n### Usage\n\nMake sure you include the `<script>` in your project (choose one of these):\n\n```html\n<!-- Host yourself -->\n<script type=\"module\" src=\"heading-anchors.js\"></script>\n```\n\n```html\n<!-- 3rd party CDN, not recommended for production use -->\n<script\n  type=\"module\"\n  src=\"https://www.unpkg.com/@daviddarnes/heading-anchors@2.0.2/heading-anchors.js\"\n></script>\n```\n\n```html\n<!-- 3rd party CDN, not recommended for production use -->\n<script\n  type=\"module\"\n  src=\"https://esm.sh/@daviddarnes/heading-anchors@2.0.2\"\n></script>\n```\n\n### Using `selector` and `position`\n\nBy default `heading-anchors` will select all the `h2[id]`, `h3[id]` and `h4[id]` elements within it to append an anchor link to. However with the `selector` attribute you can pass in a different selector string to select:\n\n```html\n<heading-anchors selector=\"h2[id]\">\n  <!-- ... -->\n</heading-anchors>\n```\n\n_Note: It's recommended you use selectors that utilise the `[id]` attribute selector for better reliability_\n\nBy default `heading-anchors` will append anchor links right after the element, using the [`insertAdjacentHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) API. However you can adjust this using the `position` attribute:\n\n```html\n<heading-anchors position=\"beforeend\">\n  <!-- ... -->\n</heading-anchors>\n```\n\n## Credit\n\nWith thanks to the following people:\n\n- [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/component-template)\n- [Curtis Wilcox](https://github.com/extra808) for the accessibility feedback\n","readmeFilename":"README.md"}