{"id":13341635,"url":"https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component","last_synced_at":"2025-03-11T22:31:19.106Z","repository":{"id":41372309,"uuid":"475624841","full_name":"MarketingPipeline/GitHub-Ribbon-Web-Component","owner":"MarketingPipeline","description":"A custom web element to easily add a GitHub Fork Me ribbon to your web pages!","archived":false,"fork":false,"pushed_at":"2022-11-09T20:52:48.000Z","size":80,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T16:09:56.565Z","etag":null,"topics":["css","custom-elements","fork-me","github","github-ribbon","github-ribbons","html","html-css-javascript","javascript","js","ribbon","web-component","web-components","web-elements"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/MarketingPipeline.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}},"created_at":"2022-03-29T21:26:51.000Z","updated_at":"2022-11-08T11:41:11.000Z","dependencies_parsed_at":"2022-08-25T11:40:45.637Z","dependency_job_id":null,"html_url":"https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FGitHub-Ribbon-Web-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FGitHub-Ribbon-Web-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FGitHub-Ribbon-Web-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FGitHub-Ribbon-Web-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarketingPipeline","download_url":"https://codeload.github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243125149,"owners_count":20240263,"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":["css","custom-elements","fork-me","github","github-ribbon","github-ribbons","html","html-css-javascript","javascript","js","ribbon","web-component","web-components","web-elements"],"created_at":"2024-07-29T19:25:39.385Z","updated_at":"2025-03-11T22:31:18.777Z","avatar_url":"https://github.com/MarketingPipeline.png","language":"JavaScript","readme":"# GitHub-Ribbon-Web-Component\n\n\n\u003cp align=\"right\"\u003e\n\u003ca href=\"https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component\" class=\"ui-container\"\n      \u003e\u003cimg\n        class=\"fork me\"\n        style=\"position: absolute; top: 0; right: 0; border: 0;\"\n        src=\"https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67\"\n        alt=\"Fork me on GitHub\"\n        data-canonical-src=\"https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png\"\n    /\u003e\u003c/a\u003e \u003c/p\u003e\n    \u003cp align=\"center\"\u003e\n  \u003cb\u003eEasily add a GitHub Fork Me button to any page!\u003c/b\u003e\n\n  \u003cbr\u003e\n  \u003csmall\u003e \u003cb\u003e\u003ci\u003eShow your support!\u003c/i\u003e \u003c/b\u003e\u003c/small\u003e\n  \u003cbr\u003e\n   \u003ca href=\"https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component\"\u003e\n    \u003cimg title=\"Star on GitHub\" src=\"https://img.shields.io/github/stars/MarketingPipeline/GitHub-Ribbon-Web-Component.svg?style=social\u0026label=Star\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/fork\"\u003e\n    \u003cimg title=\"Fork on GitHub\" src=\"https://img.shields.io/github/forks/MarketingPipeline/GitHub-Ribbon-Web-Component.svg?style=social\u0026label=Fork\"\u003e\n  \u003c/a\u003e\n   \u003c/p\u003e  \n\n\nA custom web element to easily add a GitHub Fork Me ribbon to your web pages!\n\n\n## Example and usage\n\nYou can view a demo of this Web Component in use [here.](https://marketingpipeline.github.io/GitHub-Ribbon-Web-Component)\n\n\nHow to use \u003cb\u003e\u003ci\u003eGitHub Ribbon Web Component\u003c/b\u003e\u003c/i\u003e:\n\n\nAdd a ```github-ribbon``` element in your HTML document with your link etc like the example below -\n\n```html\n\u003cgithub-ribbon link=\"https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/\"\u003e\u003c/github-ribbon\u003e\n```\n\n\n\n\n   include this [script](https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/blob/main/dist/github-ribbon-wc.min.js) in your HTML document.\n         \n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/MarketingPipeline/GitHub-Ribbon-Web-Component/dist/github-ribbon-wc.min.js\" defer\u003e\u003c/script\u003e \n\n\n\n\n\n###                                                                                                                    Options\n\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth\u003eAttribute\u003c/th\u003e\n\u003cth\u003eMeaning\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003cth\u003eRequired\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003elink\u003c/td\u003e\n\u003ctd\u003eThe      link                                                               to your GitHub  repo / source code etc...\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd\u003eside\u003c/td\u003e\n              \u003ctd\u003eChange the side of the ribbon, options are \u003ccode\u003etop-left, top-right, bottom-right, bottom-left \u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003etop-right\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003emessage\u003c/td\u003e\n\u003ctd\u003eSet                            your                     own      custom message instead   of  \"Fork  me  on  GitHub\" \u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd\u003ecolor\u003c/td\u003e\n\u003ctd\u003eChange the   color  of the ribbon  background \u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003ered\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\n\u003ctr\u003e\n\u003ctd\u003etext-color\u003c/td\u003e\n\u003ctd\u003eChange  the   text  color of the ribbon\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003e#fff\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\n\u003ctr\u003e\n\u003ctd\u003enew-window\u003c/td\u003e\n\u003ctd\u003eIf                    \u003ccode\u003eTrue\u003c/code\u003e, link with  open in a new window\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eFalse\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\n     \n      \n  \n\u003ctr\u003e\n\u003ctd\u003efixed\u003c/td\u003e\n\u003ctd\u003eIf \u003ccode\u003eFalse\u003c/code\u003e  non fixed CSS will be applied\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eTrue\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n    \n      \n      \n \n\n\n\n\n\u003c/table\u003e\n\n\n\n## Contributing ![GitHub](https://img.shields.io/github/contributors/MarketingPipeline/GitHub-Ribbon-Web-Component)\n\nWant to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!\n\nSee also the list of\n[contributors](https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/graphs/contributors) who\nparticipate in this project.\n\n## License ![GitHub](https://img.shields.io/github/license/MarketingPipeline/GitHub-Ribbon-Web-Component)\n\nThis project is licensed under the GPL-3.0 License - see the\n[LICENSE.md](https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/blob/main/LICENSE) file for\ndetails.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMarketingPipeline%2FGitHub-Ribbon-Web-Component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMarketingPipeline%2FGitHub-Ribbon-Web-Component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMarketingPipeline%2FGitHub-Ribbon-Web-Component/lists"}