{"id":18561199,"url":"https://github.com/apostrophecms/anchors","last_synced_at":"2026-02-03T09:34:41.141Z","repository":{"id":45315148,"uuid":"437025847","full_name":"apostrophecms/anchors","owner":"apostrophecms","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-01T18:27:03.000Z","size":40,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-22T18:48:39.245Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apostrophecms.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-12-10T15:29:07.000Z","updated_at":"2025-10-01T18:26:59.000Z","dependencies_parsed_at":"2024-10-28T20:26:17.406Z","dependency_job_id":"bfdeafd3-fa5d-4946-a0ab-9f52f84ecba4","html_url":"https://github.com/apostrophecms/anchors","commit_stats":{"total_commits":22,"total_committers":5,"mean_commits":4.4,"dds":0.6363636363636364,"last_synced_commit":"27ad6215cd9785dbd971029b15e05d9c89ba71f0"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/apostrophecms/anchors","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apostrophecms%2Fanchors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apostrophecms%2Fanchors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apostrophecms%2Fanchors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apostrophecms%2Fanchors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apostrophecms","download_url":"https://codeload.github.com/apostrophecms/anchors/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apostrophecms%2Fanchors/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29039701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T09:33:44.148Z","status":"ssl_error","status_checked_at":"2026-02-03T09:33:43.343Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T22:06:10.233Z","updated_at":"2026-02-03T09:34:41.133Z","avatar_url":"https://github.com/apostrophecms.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/apostrophecms/apostrophe/main/logo.svg\" alt=\"ApostropheCMS logo\" width=\"80\" height=\"80\" /\u003e\n\n  \u003ch1\u003eApostrophe Anchors\u003c/h1\u003e\n\n  \u003cp\u003e\n    \u003ca aria-label=\"Apostrophe logo\" href=\"https://docs.apostrophecms.org\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/MADE%20FOR%20ApostropheCMS-000000.svg?style=for-the-badge\u0026logo=Apostrophe\u0026labelColor=6516dd\"\u003e\n    \u003c/a\u003e\n    \u003ca aria-label=\"Join the community on Discord\" href=\"http://chat.apostrophecms.org\"\u003e\n      \u003cimg alt=\"\" src=\"https://img.shields.io/discord/517772094482677790?color=5865f2\u0026label=Join%20the%20Discord\u0026logo=discord\u0026logoColor=fff\u0026labelColor=000\u0026style=for-the-badge\u0026logoWidth=20\" /\u003e\n    \u003c/a\u003e\n    \u003ca aria-label=\"License\" href=\"https://github.com/apostrophecms/anchors/blob/main/LICENSE.md\"\u003e\n      \u003cimg alt=\"\" src=\"https://img.shields.io/static/v1?style=for-the-badge\u0026labelColor=000000\u0026label=License\u0026message=MIT\u0026color=3DA639\" /\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n**Enable deep linking and smooth navigation** with automatic anchor generation for all ApostropheCMS widgets. Perfect for landing pages, documentation sites, and content-heavy applications where users need to link directly to specific sections.\n\n## Why Apostrophe Anchors?\n\n- **🎯 Improve User Experience**: Let visitors bookmark and share links to specific content sections\n- **📈 Boost SEO**: Search engines can index and link directly to your content sections\n- **⚡ Zero Configuration**: Works automatically with all widget types out of the box\n- **🛠️ Developer Friendly**: Customize anchor attributes and disable for specific widgets as needed\n- **🔗 Marketing Ready**: Perfect for campaign landing pages where you need to link to specific sections\n\n## Installation\n\nTo install the module, use the command line to run this command in an Apostrophe project's root directory:\n\n```bash\nnpm install @apostrophecms/anchors\n```\n\n## Usage\n\nConfigure the anchor modules in the `app.js` file:\n\n```javascript\nimport apostrophe from 'apostrophe';\n\napostrophe ({\n  root: import.meta,\n  shortName: 'my-project',\n  modules: {\n    '@apostrophecms/anchors': {},\n  }\n});\n```\n\nWhen the modules are active, all widget types will have a new \"HTML Anchor Value\" field. When an editor populates that field with a slug-style string, the widget HTML markup will be wrapped with a new `div` with an attribute (an `id` by default) set to the anchor value. This attribute can be targeted by anchor links, e.g., `href=\"#anchor-id-value\"`.\n\nThe only Apostrophe core widget type with this feature disabled is the rich text widget, `@apostrophecms/rich-text-widget`.\n\nThe \"HTML Anchor Value\" field is a \"slug\" type field, which means it is limited to lowercase characters and dashes for consistent usage.\n\n## Configuration Options\n\n### `anchorAttribute`\n\nBy default, the anchor attribute is an `id`. This makes it easy to link to the widget with a hash `href` matching the anchor value as described above. **Developers have the option to use another anchor attribute** if they prefer to target the HTML element with custom JavaScript instead.\n\nTo do this, include an `anchorAttribute` option on the individual widget type. You can also add this option on the root `@apostrophecms/widget-type` module or the `@apostrophecms/anchors-widget-type` module to set this for all widget types.\n\n```javascript\n// modules/my-banner-widget/index.js\nexport default {\n  options: {\n    anchorAttribute: 'data-anchor'\n  }\n};\n```\n\nIn this example the wrapping `div` element would look like this:\n\n```html\n\u003cdiv data-anchor=\"anchor-id-value\"\u003e\n  \u003c!-- Normal widget markup here --\u003e\n\u003c/div\u003e\n```\n\n### `anchors: false`\n\nDevelopers can choose to disable this module's features for any widget type by setting an `anchors: false` option on the widget type.\n\n```javascript\n// modules/my-banner-widget/index.js\nexport default {\n  options: {\n    anchors: false\n  }\n};\n```\n\nThis is automatically set for the rich text widget. That can be reversed by setting `anchors: true` on `@apostrophecms/rich-text-widget`.\n\n### `anchorDefault`\n\nTo help content editors populate anchor values automatically, set the `anchorDefault` option to the name of an existing field on a widget type. The \"HTML Anchor Value\" field will populate automatically based on the value of the named field [using the `following` field option mechanism](https://docs.apostrophecms.org/reference/field-types/slug.html#optional).\n\n```javascript\n// modules/my-banner-widget/index.js\nexport default {\n  options: {\n    anchorDefault: 'heading'\n  },\n  fields: {\n    add: {\n      heading: {\n        type: 'string',\n        label: 'Heading'\n      }\n    }\n  }\n};\n```\n\n## Use Cases\n\n**Landing Pages**: Create marketing pages where different sections can be linked to directly from emails, ads, or social media.\n\n**Documentation**: Allow readers to bookmark and share links to specific sections of your documentation.\n\n**Long-form Content**: Help readers navigate lengthy articles or reports by providing direct links to sections.\n\n**Campaign Pages**: Enable marketing campaigns to link directly to specific product features or testimonials.\n\n### Getting Started with Astro + ApostropheCMS\n\nNew to using ApostropheCMS with Astro? Check out our starter kits:\n- **[starter-kit-astro-essentials](https://github.com/apostrophecms/starter-kit-astro-essentials)** - Essential features for most projects\n- **[starter-kit-astro-apollo](https://github.com/apostrophecms/starter-kit-astro-apollo)** - Advanced features with Apollo integration\n\n---\n\n\u003cdiv\u003e\n  \u003cp\u003eMade with ❤️ by the \u003ca href=\"https://apostrophecms.com\"\u003eApostropheCMS\u003c/a\u003e team. \u003cstrong\u003eFound this useful? \u003ca href=\"https://github.com/apostrophecms/anchors\"\u003eGive us a star on GitHub!\u003c/a\u003e ⭐\u003c/strong\u003e\n  \u003c/p\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapostrophecms%2Fanchors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapostrophecms%2Fanchors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapostrophecms%2Fanchors/lists"}