{"_id":"@apostrophecms/anchors-stable","name":"@apostrophecms/anchors-stable","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@apostrophecms/anchors-stable","version":"1.1.0","description":"A module bundle that supports linking to individual Apostrophe widgets.","main":"index.js","scripts":{"eslint":"eslint .","lint":"npm run eslint","mocha":"mocha","test":"npm run lint && npm run mocha"},"repository":{"type":"git","url":"git+https://github.com/apostrophecms/apostrophe.git","directory":"packages/anchors"},"keywords":["apostrophecms","apostrophe"],"homepage":"https://github.com/apostrophecms/apostrophe/tree/main/packages/anchors#readme","author":{"name":"Apostrophe Technologies"},"license":"MIT","devDependencies":{"apostrophe":"workspace:^","eslint":"^9.39.1","eslint-config-apostrophe":"workspace:^","mocha":"^11.7.5"},"publishConfig":{"access":"public"},"gitHead":"b3e29f004f514041e1e389293ae67017c60d006e","_id":"@apostrophecms/anchors-stable@1.1.0","bugs":{"url":"https://github.com/apostrophecms/apostrophe/issues"},"_nodeVersion":"24.10.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-MMo3WsGWzOxKOqxgboAyVEmX3yMdh3NnoItlMKRWL5gueoNFwyfjLYK+klOePfvY+VLOFUSwRw4g+IzBXZCgXQ==","shasum":"7abb07a05eb747902a6ed3189a6c8d4aea337950","tarball":"https://registry.npmjs.org/@apostrophecms/anchors-stable/-/anchors-stable-1.1.0.tgz","fileCount":18,"unpackedSize":14550,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDnZe1DtQpPHIAuwNXnD2n2SZ+WtDJ7/ovtydwi5rDc0AiEA7B1JDADVTX/aNaH+tKye1L821h97expjqkj8OXZwdxI="}]},"_npmUser":{"name":"boutell","email":"tom@apostrophecms.com"},"directories":{},"maintainers":[{"name":"alexgilbert","email":"alex@apostrophecms.com"},{"name":"boutell","email":"tom@apostrophecms.com"},{"name":"romanek","email":"stuart+npm@apostrophecms.com"},{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/anchors-stable_1.1.0_1781112720025_0.4494622675450137"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-10T17:31:59.765Z","1.1.0":"2026-06-10T17:32:00.214Z","modified":"2026-06-10T17:32:00.578Z"},"maintainers":[{"name":"alexgilbert","email":"alex@apostrophecms.com"},{"name":"boutell","email":"tom@apostrophecms.com"},{"name":"romanek","email":"stuart+npm@apostrophecms.com"},{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"}],"description":"A module bundle that supports linking to individual Apostrophe widgets.","homepage":"https://github.com/apostrophecms/apostrophe/tree/main/packages/anchors#readme","keywords":["apostrophecms","apostrophe"],"repository":{"type":"git","url":"git+https://github.com/apostrophecms/apostrophe.git","directory":"packages/anchors"},"author":{"name":"Apostrophe Technologies"},"bugs":{"url":"https://github.com/apostrophecms/apostrophe/issues"},"license":"MIT","readme":"
\n \"ApostropheCMS\n\n

Apostrophe Anchors

\n\n

\n \n \n \n \n \"\"\n \n \n \"\"\n \n

\n
\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
\n \n
\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
\n

Made with ❤️ by the ApostropheCMS team. Found this useful? Give us a star on GitHub! ⭐\n

\n
\n","readmeFilename":"README.md","_rev":"1-757d4154bfe2ac5eac3d58375105735a"}