{"id":32832104,"url":"https://github.com/kylereddoch/eleventy-plugin-mastodon-share","last_synced_at":"2026-04-28T16:01:47.364Z","repository":{"id":323043181,"uuid":"1091964577","full_name":"kylereddoch/eleventy-plugin-mastodon-share","owner":"kylereddoch","description":"A drop-in Eleventy plugin that adds a Share on Mastodon button and a small instance picker with an optional remember my instance feature. Works with Nunjucks, Liquid, and JS templates.","archived":false,"fork":false,"pushed_at":"2026-04-07T17:00:07.000Z","size":21,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-07T17:07:18.658Z","etag":null,"topics":["11ty","eleventy","eleventy-plugin","mastodon","nunjucks","open-source","plugin","share"],"latest_commit_sha":null,"homepage":"https://eleventy-plugin-mastodon-share.vercel.app","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/kylereddoch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-11-07T19:31:12.000Z","updated_at":"2026-04-07T16:49:43.000Z","dependencies_parsed_at":"2025-11-07T20:00:29.947Z","dependency_job_id":"12bf9270-aa29-4a1d-ab61-b83ad96b7c1a","html_url":"https://github.com/kylereddoch/eleventy-plugin-mastodon-share","commit_stats":null,"previous_names":["kylereddoch/eleventy-plugin-mastodon-share"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/kylereddoch/eleventy-plugin-mastodon-share","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylereddoch%2Feleventy-plugin-mastodon-share","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylereddoch%2Feleventy-plugin-mastodon-share/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylereddoch%2Feleventy-plugin-mastodon-share/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylereddoch%2Feleventy-plugin-mastodon-share/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kylereddoch","download_url":"https://codeload.github.com/kylereddoch/eleventy-plugin-mastodon-share/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylereddoch%2Feleventy-plugin-mastodon-share/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32387923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T14:34:11.604Z","status":"ssl_error","status_checked_at":"2026-04-28T14:32:37.009Z","response_time":56,"last_error":"SSL_read: 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":["11ty","eleventy","eleventy-plugin","mastodon","nunjucks","open-source","plugin","share"],"created_at":"2025-11-07T21:01:00.179Z","updated_at":"2026-04-28T16:01:47.358Z","avatar_url":"https://github.com/kylereddoch.png","language":"JavaScript","funding_links":["https://github.com/sponsors/kylereddoch","https://ko-fi.com/kylereddoch","https://buymeacoffee.com/kylereddoch"],"categories":[],"sub_categories":[],"readme":"# eleventy-plugin-mastodon-share\n\n[![npm version](https://img.shields.io/npm/v/@kylereddoch/eleventy-plugin-mastodon-share)](https://www.npmjs.com/package/@kylereddoch/eleventy-plugin-mastodon-share)\n[![Eleventy](https://img.shields.io/badge/Eleventy-3.x-222222?logo=eleventy\u0026logoColor=white)](https://www.11ty.dev/)\n[![License](https://img.shields.io/badge/license-MIT-2ea44f.svg)](#license)\n\nA simple Eleventy plugin that helps readers share your posts to Mastodon without forcing them to manually edit instance URLs.\n\nIt adds a share button, an instance picker, a saved-instance flow, and shortcode helpers so Eleventy users can drop it into a site without rewriting the same markup for every post.\n\n## What It Does\n\n- Adds a Mastodon share button for Eleventy sites\n- Lets visitors enter their own Mastodon instance\n- Offers a list of popular instances\n- Lets visitors save a preferred instance for future shares\n- Provides shortcodes for Nunjucks, Liquid, and Eleventy JavaScript templates\n- Ships with its own styles and front-end behavior\n\n## Why Use It\n\nMastodon sharing is not as straightforward as networks with one global share endpoint. Readers need a server, and site authors usually end up rebuilding the same UI and logic from scratch.\n\nThis plugin gives Eleventy users a reusable solution that feels native to static sites and keeps setup light.\n\n## Requirements\n\n- Node.js `18+`\n- Eleventy `3.x`\n\n## Install\n\n```bash\nnpm install @kylereddoch/eleventy-plugin-mastodon-share\n```\n\n## Quick Start\n\nRegister the plugin in your Eleventy config:\n\n```js\nimport mastodonShare from \"@kylereddoch/eleventy-plugin-mastodon-share\";\n\nexport default function (eleventyConfig) {\n  eleventyConfig.addPlugin(mastodonShare, {\n    siteUrl: \"https://example.com\",\n    emitStylesheetLink: false,\n  });\n}\n```\n\nIf your Eleventy config is CommonJS:\n\n```js\nconst mastodonShare = require(\"@kylereddoch/eleventy-plugin-mastodon-share\");\n\nmodule.exports = function (eleventyConfig) {\n  eleventyConfig.addPlugin(mastodonShare, {\n    siteUrl: \"https://example.com\",\n    emitStylesheetLink: false,\n  });\n};\n```\n\nLoad the plugin assets once in your base layout:\n\n```njk\n\u003chead\u003e\n  {% mastodonShareAssets %}\n\u003c/head\u003e\n```\n\nRender the share UI in your post layout:\n\n```njk\n{% mastodonSharePost title=title, description=description, hashtags=mastodon_hashtags %}\n```\n\nFront matter example:\n\n```yaml\nmastodon_hashtags:\n  - eleventy\n  - mastodon\n  - fediverse\n```\n\n## How Visitors Use It\n\nWith JavaScript enabled:\n\n1. Clicking the main button opens the visitor's saved instance, if they already chose one.\n2. If they have not saved one yet, they are prompted for an instance host.\n3. The dropdown lets them choose or save from a list of popular instances.\n4. Their preferred instance is stored locally in the browser.\n\nWithout JavaScript:\n\n- the button falls back to your configured `fallbackHost`\n\n## Shortcodes\n\nThe plugin includes five helpers:\n\n| Shortcode | Purpose |\n| --- | --- |\n| `mastodonShare` | Render the share UI with custom text you provide |\n| `mastodonSharePost` | Render the share UI and build the share text from page data |\n| `mastodonShareStyles` | Output the plugin stylesheet |\n| `mastodonShareScript` | Output the plugin script |\n| `mastodonShareAssets` | Output both stylesheet and script |\n\n### `mastodonShare`\n\nUse this when you want full control over the share text:\n\n```njk\n{% mastodonShare text=\"Read this post on Eleventy and Mastodon.\", hashtags=mastodon_hashtags %}\n```\n\n### `mastodonSharePost`\n\nUse this when you want the plugin to build the share text from your content metadata:\n\n```njk\n{% mastodonSharePost title=title, description=description, hashtags=mastodon_hashtags %}\n```\n\nIf you provide `siteUrl` in your plugin config, the plugin uses `page.url` to build a full URL automatically.\n\n## Template Examples\n\n### Nunjucks\n\nUse named arguments, separated with commas:\n\n```njk\n{% mastodonSharePost title=title, description=description, hashtags=mastodon_hashtags %}\n```\n\n### Liquid\n\nUse positional arguments:\n\n```liquid\n{% mastodonSharePost title, description, mastodon_hashtags %}\n```\n\n### Eleventy JavaScript Templates\n\n```js\nexport default class PostPage {\n  data() {\n    return {\n      permalink: \"posts/example/index.html\",\n      title: \"Example Post\",\n      description: \"A post rendered from a JavaScript template.\",\n      mastodon_hashtags: [\"eleventy\", \"javascript\"],\n    };\n  }\n\n  render(data) {\n    return [\n      this.mastodonShareStyles(),\n      this.mastodonSharePost({\n        title: data.title,\n        description: data.description,\n        hashtags: data.mastodon_hashtags,\n      }),\n      this.mastodonShareScript(),\n    ].join(\"\\n\");\n  }\n}\n```\n\n## Configuration\n\nAll options are optional.\n\n| Option | Type | Default | Notes |\n| --- | --- | --- | --- |\n| `siteUrl` | `string` | `\"\"` | Base URL used to build full canonical URLs |\n| `label` | `string` | `\"Share on Mastodon\"` | Main button label |\n| `pickerLabel` | `string` | `\"Choose instance\"` | Dropdown trigger label |\n| `fallbackHost` | `string` | `\"mastodon.social\"` | No-JS fallback and first prompt suggestion |\n| `instances` | `string[]` | default popular list | Instances shown in the picker |\n| `storageKey` | `string` | `\"mastoPreferredInstance\"` | Browser storage key |\n| `className` | `string` | `\"\"` | Extra class added to the root element |\n| `inlineCss` | `boolean` | `false` | Inline CSS instead of linking it |\n| `emitStylesheetLink` | `boolean` | `true` | Prevent duplicate stylesheet output when assets are loaded globally |\n| `cssUrlPath` | `string` | `\"/assets/masto-share.css\"` | Public stylesheet path |\n| `jsUrlPath` | `string` | `\"/assets/masto-share.js\"` | Public script path |\n| `icon` | `\"svg\" \\| \"fa\"` | `\"svg\"` | Bundled SVG or Font Awesome |\n| `svgUrlPath` | `string` | `\"/assets/mastodon.svg\"` | Public SVG path |\n| `faClass` | `string` | `\"fa-brands fa-mastodon\"` | Font Awesome class |\n\nExample:\n\n```js\nimport mastodonShare from \"@kylereddoch/eleventy-plugin-mastodon-share\";\n\nexport default function (eleventyConfig) {\n  eleventyConfig.addPlugin(mastodonShare, {\n    siteUrl: \"https://example.com\",\n    emitStylesheetLink: false,\n    label: \"Boost this post\",\n    pickerLabel: \"Choose your server\",\n    fallbackHost: \"fosstodon.org\",\n    instances: [\n      \"hachyderm.io\",\n      \"fosstodon.org\",\n      \"mastodon.social\",\n      \"infosec.exchange\",\n    ],\n  });\n}\n```\n\n## Styling\n\nThe plugin ships with self-contained default styles so it works out of the box.\n\nThe root class is `.masto-share`.\n\nUseful CSS variables:\n\n```css\n.masto-share {\n  --masto-share-accent: #0f62fe;\n  --masto-share-accent-hover: #0043ce;\n  --masto-share-border: #d0d7de;\n  --masto-share-surface: #ffffff;\n  --masto-share-surface-muted: #f6f8fa;\n  --masto-share-text: #18212f;\n  --masto-share-text-muted: #5f6c80;\n  --masto-share-radius: 0.85rem;\n}\n```\n\nIf your site already uses Font Awesome:\n\n```js\neleventyConfig.addPlugin(mastodonShare, {\n  icon: \"fa\",\n  faClass: \"fa-brands fa-mastodon\",\n});\n```\n\n## Demo\n\nThis repository includes a working demo site in [`demo/`](./demo).\n\nRun it locally:\n\n```bash\ncd demo\nnpm install\nnpm run dev\n```\n\nIf you want the demo to build full canonical links, set `SITE_URL` before running it.\n\n## Accessibility and Privacy\n\n- Uses a keyboard-friendly `\u003cdetails\u003e` based instance menu\n- Includes live status messaging for saved-instance actions\n- Stores only the preferred Mastodon host in `localStorage`\n- Does not collect personal data\n\n## Troubleshooting\n\n### The button has no styling\n\nIf you set `emitStylesheetLink: false`, make sure you loaded either:\n\n- `mastodonShareStyles`\n- `mastodonShareAssets`\n\n### The shared URL is relative instead of absolute\n\nSet `siteUrl` in the plugin config so the plugin can combine it with `page.url`.\n\n### My Nunjucks shortcode will not parse\n\nNamed arguments in Nunjucks shortcodes need commas:\n\n```njk\n{% mastodonSharePost title=title, description=description, hashtags=mastodon_hashtags %}\n```\n\n### I only want one stylesheet tag on the page\n\nSet `emitStylesheetLink: false` and load assets once in your layout with `mastodonShareStyles` or `mastodonShareAssets`.\n\n## Contributing\n\nContributions are welcome.\n\nIf you want to help:\n\n- open an issue for bugs or feature ideas\n- submit a pull request with a clear description of the change\n- update docs when the public API changes\n- add or adjust tests when behavior changes\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for a quick contributor guide.\nFor maintainers and release notes, see [RELEASING.md](./RELEASING.md).\n\n## Development\n\nInstall dependencies:\n\n```bash\nnpm install\nnpm --prefix demo install\n```\n\nRun verification:\n\n```bash\nnpm run verify\n```\n\nThe automated checks currently cover:\n\n- Nunjucks\n- Liquid\n- Eleventy JavaScript templates\n- CommonJS package loading\n- ESM package loading\n\n## Support\n\nIf this project helps you, here are a few great ways to support it:\n\n- star the repository\n- share the plugin with other Eleventy users\n- open issues when something can be improved\n- contribute fixes, docs, or examples\n- sponsor the project if you want to support ongoing maintenance\n\nSponsor links:\n\n- [GitHub Sponsors](https://github.com/sponsors/kylereddoch)\n- [Ko-fi](https://ko-fi.com/kylereddoch)\n- [Buy Me a Coffee](https://buymeacoffee.com/kylereddoch)\n\nThere is also a short support guide in [SUPPORT.md](./SUPPORT.md).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylereddoch%2Feleventy-plugin-mastodon-share","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkylereddoch%2Feleventy-plugin-mastodon-share","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylereddoch%2Feleventy-plugin-mastodon-share/lists"}