{"id":13559415,"url":"https://github.com/codesyntax/mastodon-share-button","last_synced_at":"2025-10-25T02:31:18.028Z","repository":{"id":57291761,"uuid":"244742704","full_name":"codesyntax/mastodon-share-button","owner":"codesyntax","description":"This package is a user friendly web component to share in mastodon.","archived":false,"fork":false,"pushed_at":"2023-10-30T13:51:33.000Z","size":560,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-30T00:42:09.525Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codesyntax.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}},"created_at":"2020-03-03T21:11:51.000Z","updated_at":"2023-08-14T02:32:24.000Z","dependencies_parsed_at":"2023-11-11T19:45:56.484Z","dependency_job_id":null,"html_url":"https://github.com/codesyntax/mastodon-share-button","commit_stats":{"total_commits":23,"total_committers":2,"mean_commits":11.5,"dds":0.04347826086956519,"last_synced_commit":"30a5aade8d2b80555015e9aee385b7c285f53e32"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fmastodon-share-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fmastodon-share-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fmastodon-share-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fmastodon-share-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codesyntax","download_url":"https://codeload.github.com/codesyntax/mastodon-share-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238065141,"owners_count":19410587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-08-01T13:00:21.367Z","updated_at":"2025-10-25T02:31:12.623Z","avatar_url":"https://github.com/codesyntax.png","language":"TypeScript","funding_links":[],"categories":["Ecosystem Highlights"],"sub_categories":["Utilities \u0026 Integrations"],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square)\n\n# Mastodon share button\n\nThis package is a user friendly web component to share in mastodon.\n\n## Browsers support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eiOS Safari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png\" alt=\"Samsung\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSamsung |\n| --------- | --------- | --------- | --------- | --------- | --------- |\n| IE11 *([limited](docs/ie.md))*, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions\n\n\u003cbr/\u003e\n\n# [View demos 👁](https://codepen.io/bipoza/pen/XWbegOM?editors=1100)\n# Preview\n\n![](preview.gif)\n\n# Getting Started\n## Installation\n### Via CDN\n```html\n\u003cscript src=\"https://unpkg.com/mastodon-share-button@latest/dist/mastodon-share-button.js\"\u003e\u003c/script\u003e\n```\n### Via NPM\n```bash\n$ npm install mastodon-share-button \n```\n### Usage\n\n```html\n\u003c!-- Basic use --\u003e\n\u003cmastodon-share-button share_message=\"Text to share\"\u003e\u003c/mastodon-share-button\u003e\n\n\u003c!-- Customized --\u003e\n\u003cmastodon-share-button\n    instances='[\"https://mastodon.eus\", \"https://mastodon.jalgi.eus\"]'\n    share_message=\"Text to share\"\n    share_button_text=\"Custom share button text\"\n    close_button_text=\"Custom close text\"\n    send_button_text=\"Custom send text\"\n    modal_title=\"Custom modal title\"\n    other_instance_text=\"Custom other instance select option text\"\n    dark_mode=\"true\"\u003e\n\u003c/mastodon-share-button\u003e\n```\n\n# Documentation\n## Properties\n\n| Property              | Attribute             | Required     | Description                                        | Type     | Default                          |\n| --------------------- | --------------------- | ------------ | -------------------------------------------------- | -------- | -------------------------------- |\n| `share_message`       | `share_message`       | Required     | Text to share in mastodon.                         |`string`  | `undefined`                      |\n| `instances`           | `instances`           | Not Required | List of instances to display in the select option. |`string`  | `'[\"https://mastodon.social\"]'`  |\n| `dark_mode`           | `dark_mode`           | Not Required | Option to activate dark mode.                      |`boolean` | `false`                          |\n| `send_button_text`    | `send_button_text`    | Not Required | Text to show at the bottom of sharing in the modal.|`string`  | `\"Send\"`                         |\n| `icon_url`            | `icon_url`            | Not Required | Icon url. Put it \"\" to not display any icon.       |`string`  | `mastodon oficial logo`          |\n| `modal_title`         | `modal_title`         | Not Required | Title to display in modal.                         |`string`  | `\"Share to Mastodon\"`            |\n| `close_button_text`   | `close_button_text`   | Not Required | Text to display to close modal.                    |`string`  | `\"Close\"`                        |\n| `other_instance_text` | `other_instance_text` | Not Required | Text to display on the form.                       |`string`  | `\"Other instance\"`               |\n| `share_button_text`   | `share_button_text`   | Not Required | Text to show at the bottom of sharing. Put it \"\" to not display any text. |`string`  | `\"Share to Mastodon\"`            |\n| `open`                | `open`                | Not Required | Variable to display the modal opened.              |`boolean` | `false`                          |\n\n## CSS Custom Properties (Styling)\nThe component could be styled with the help of CSS3 variables.\n\nExample:\n\n```html\n\u003cstyle type=\"text/css\"\u003e\n  mastodon-share-button {\n    --share-button-background-color:#259FFC;\n    --share-button-background-color-hover:#C7E7FE;\n  }\n\u003c/style\u003e\n```\n\n* **Important**: If you are using the dark mode, you cannot apply any color variable, because this mode will overlap your css.\n\n### Share button\n| Name                                  | Description\n| -------------------------------       | --------------------------------------------------------------------|\n| --share-button-background-color       | Share button background color. Default to `#cccccc`                 |\n| --share-button-background-color-hover | Share button background hover color. Default to `#949292`           |\n| --share-button-border-radius          | Default to `5px`                                                    |\n| --share-button-padding                | Default to `12px`                                                   |\n| --share-button-color                  | Default to `#ffffff`                                                |\n| --share-button-font-size              | Default to `16px`                                                   |\n| --share-button-font-weight            | Default to `bold`                                                   |\n| --share-button-border                 | Defaul to `none`                                                    |\n\n### Modal\n| Name                                          | Description\n| -------------------------- | -----------------------------------------------------|\n| --modal-title-color        | Text color to modal title. Default to `#2c3e50`      |\n| --modal-background-color   | Modal background color. Default to `#ffffff`         |\n\n\n### Modal close button\n| Name                                          | Description\n| -------------------------------               | --------------------------------------------------------------------|\n| --close-modal-button-background-color         | Close button background color. Default to `#cccccc`                 |\n| --close-modal-button-background-color-hover   | Share button background hover color. Default to `#949292`           |\n| --close-modal-button-border-radius            | Default to `5px`                                                    |\n| --close-modal-button-padding                  | Default to `6px`                                                   |\n| --close-modal-button-color                    | Default to `#ffffff`                                                |\n| --close-modal-button-font-size                | Default to `16px`                                                   |\n| --close-modal-button-font-weight              | Default to `bold`                                                   |\n| --close-modal-button-border                   | Defaul to `none`                                                    |\n\n### Modal select option and input\n| Name                                          | Description\n| -------------------------- | -----------------------------------------------------    |\n| --select-color             | Select and input font color. Default to `#2c3e50`        |\n| --select-background-color  | Select and input background color. Default to `#ffffff`  |\n| --select-border            | Select and input border. Default to `2px solid #2c3e50`  |\n| --select-font-weight       | Select and input font weight. Default to `bolder`        |\n| --select-font-size         | Font size. Default to `18px`                             |\n| --select-padding           | Default to `10px`                                        |\n| --select-border-radius     | Default to `0.25em`                                      |\n| --select-line-height       | Default to `3`                                           |\n\n### Modal send button\n| Name                                          | Description\n| ------------------------------------ | -------------------------------    |\n| --send-modal-button-color            | Default to `#ffffff`               |\n| --send-modal-button-background-color | Default to `#2692da`               |\n| --send-modal-button-border-radius    | Default to `5px`                   |\n| --send-modal-button-width            | Default to `100%`                  |\n| --send-modal-button-height           | Default to `6vh`                   |\n| --send-modal-button-min-height       | Default to `42px`                  |\n| --send-modal-button-font-size        | Default to `4vh`                   |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesyntax%2Fmastodon-share-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodesyntax%2Fmastodon-share-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesyntax%2Fmastodon-share-button/lists"}