{"id":13405852,"url":"https://github.com/warengonzaga/fork-corner","last_synced_at":"2025-10-26T00:30:49.084Z","repository":{"id":53146928,"uuid":"309305892","full_name":"warengonzaga/fork-corner","owner":"warengonzaga","description":"A modern and global open source fork corner label for your project's landing page.","archived":false,"fork":false,"pushed_at":"2022-10-08T05:55:22.000Z","size":336,"stargazers_count":27,"open_issues_count":7,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-29T00:29:01.236Z","etag":null,"topics":["badge","badges","bitbucket","bitbucket-corner","corner","corner-label","fork","fork-me","github","github-corner","github-fork-coner","gitlab","gitlab-corner","hacktoberfest","labels","landing-page","modern","ribbon","ribbons","webpage"],"latest_commit_sha":null,"homepage":"https://fork-corner.warengonzaga.com","language":"SCSS","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/warengonzaga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"security.md","support":null},"funding":{"custom":["https://warengonzaga.com/donate"]}},"created_at":"2020-11-02T08:35:19.000Z","updated_at":"2025-06-24T06:02:49.000Z","dependencies_parsed_at":"2022-08-29T21:23:59.286Z","dependency_job_id":null,"html_url":"https://github.com/warengonzaga/fork-corner","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/warengonzaga/fork-corner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Ffork-corner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Ffork-corner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Ffork-corner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Ffork-corner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/warengonzaga","download_url":"https://codeload.github.com/warengonzaga/fork-corner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Ffork-corner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281042865,"owners_count":26434432,"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","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["badge","badges","bitbucket","bitbucket-corner","corner","corner-label","fork","fork-me","github","github-corner","github-fork-coner","gitlab","gitlab-corner","hacktoberfest","labels","landing-page","modern","ribbon","ribbons","webpage"],"created_at":"2024-07-30T19:02:13.881Z","updated_at":"2025-10-26T00:30:48.758Z","avatar_url":"https://github.com/warengonzaga.png","language":"SCSS","readme":"# Fork Corner [![Featured on Openbase](https://badges.openbase.com/js/featured/fork-corner.svg?style=openbase)](https://openbase.com/js/fork-corner?utm_source=embedded\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n\n\n[![created by](https://img.shields.io/badge/created%20by-Waren%20Gonzaga-blue.svg?longCache=true\u0026style=flat-square)](https://github.com/warengonzaga) [![release](https://img.shields.io/github/release/warengonzaga/fork-corner.svg?style=flat-square)](https://github.com/warengonzaga/fork-corner/releases) [![star](https://img.shields.io/github/stars/warengonzaga/fork-corner.svg?style=flat-square)](https://github.com/warengonzaga/fork-corner/stargazers) ![Size](https://img.shields.io/github/repo-size/warengonzaga/fork-corner?color=green\u0026style=flat-square) ![NPM](https://img.shields.io/npm/dm/fork-corner?color=red\u0026style=flat-square) ![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/fork-corner?color=orange\u0026style=flat-square) [![license](https://img.shields.io/github/license/warengonzaga/fork-corner.svg?style=flat-square)](https://github.com/warengonzaga/fork-corner/blob/main/license)\n\n![Banner](./.github/img/fork-corner-github-banner.jpg)\n\nA modern and global open source fork corner label for your project's landing page.\n\n## What is Fork Corner\n\nA modern approach to the old style of adding \"Fork Me\" ribbon or label in an open source project's landing page.\n\n## 😎 Demo\n\nVisit **[fork-corner.warengonzaga.com](https://fork-corner.warengonzaga.com)** for the demo.\nWatch the video demo via **[Waren Gonzaga's YouTube Channel](https://www.youtube.com/watch?v=XYUxx-BvSYM)**.\n\n\u003e Fork corner generator page coming soon...\n\n## 📖 Documentation\n\nThe complete documentation can be found here:\n\n[![docs](https://img.shields.io/badge/Docs-docs.warengonzaga.com/fork--corner-blue.svg?longCache=true\u0026style=for-the-badge)](https://docs.warengonzaga.com/fork-corner)\n\n## ⚡ Features\n\n\u003c!-- markdownlint-disable MD033 MD014 --\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eModern Design\u003c/summary\u003e\u003cbr/\u003e\n\n\u003e _The Fork Corner design inspired by [Tholman's GitHub Corners](https://github.com/tholman/github-corners), I made my own version by adding more control to it using CSS and JS. Instead of using SVG I use icons from [Devicons](https://devicons.dev)._\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eResponsive\u003c/summary\u003e\u003cbr/\u003e\n\n\u003e _Fork Corner is responsive to any screen sizes. Focus on your landing page while fork corner do the rest of responsive design._\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eCustomizable\u003c/summary\u003e\u003cbr/\u003e\n\n\u003e _It uses class to quickly customize your Fork Corner. It allows you to change themes, animations, and which want you want to position your Fork Corner. You can edit the source file if you want more advance customization._\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eLightweight\u003c/summary\u003e\u003cbr/\u003e\n\n\u003e _Fork Corner is very lightweight and optimized so don't worry about the performance of your landing page._\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eCSS3 Animations\u003c/summary\u003e\u003cbr/\u003e\n\n\u003e _Fork Corner author is a core contributor to the popular [animate.css](https://animate.style). You can customize your Fork Corner animations by using utility classes just like using [animate.css](https://animate.style) utility classes._\n\n\u003c/details\u003e\n\n\u003c!-- markdownlint-enable MD033 --\u003e\n\n---\n\n## 📦 Installation\n\nInstall with [npm](https://www.npmjs.com/package/fork-corner):\n\n\u003c!-- markdownlint-disable MD014 --\u003e\n\n```bash\n$ npm i fork-corner --save\n```\n\n\u003c!-- markdownlint-enable MD014 --\u003e\n\nor add it directly to your webpage using a CDN:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.js\" defer\u003e\u003c/script\u003e\n```\n\n## 🕹️ Usage\n\nAfter installing Fork Corner simply add this one line of code to the ``\u003cbody\u003e`` of your webpage:\n\n```html\n\u003ca href=\"https://github.com/user/repo\" target=\"_blank\" id=\"fork-corner\" class=\"fork-corner fc-pos-tr fc-animate fc-theme-git\"\u003e\u003c/a\u003e\n```\n\nFork Corner uses _``fork-corner``_ as ID to identify which element should be use in creating the fork corner. The class _``fork-corner``_ is use to identify which element to be controlled by the class. We have few important classes to quickly customize the fork corner's look and feel.\n\n### Position Class\n\nClass to position the Fork Corner on your webpage. By default, the position is _``top right``_.\n\n| Class | Position |\n|-------|----------|\n| ``fc-pos-tr`` | Top, Right |\n| ``fc-pos-tl`` | Top, Left |\n| ``fc-pos-tr-sticky`` | Top, Right, Sticky |\n| ``fc-pos-tl-sticky`` | Top, Left, Sticky |\n| ``fc-pos-br`` | Bottom, Right _(sticky by default)_ |\n| ``fc-pos-bl`` | Bottom, Left _(sticky by default)_ |\n\n### Animation Class\n\nClass to animate the Fork Corner on your webpage. By default, when you hover your mouse to the icon it will rotate.\n\n| Class | Animation |\n|-------|-----------|\n| ``fc-animate`` | Icon rotation on cursor hover |\n| ``fc-animate-slideup`` | Icon slide up on cursor hover |\n| ``fc-animate-slidedown`` | Icon slide down on cursor hover |\n| ``fc-animate-grow`` | Icon grow on cursor hover |\n| ``fc-animate-shrink`` | Icon shrink on cursor hover |\n| ``fc-animate-fade`` | Icon fade out on cursor hover |\n\n\u003e More animation will come, have animation in mind? Contribute today!\n\n### Theme Class\n\nClass to select pre-defined theme or style you want to use. By default, it will show the official **Git** logo.\n\n| Class | Theme/Brand |\n|-------|-----------|\n| ``fc-theme-animate`` | Git Logo |\n| ``fc-theme-github`` | GitHub Logo |\n| ``fc-theme-gitlab`` | Gitlab Logo |\n| ``fc-theme-bitbucket`` | Bitbucket Logo |\n\n\u003e More theme and brand will come, have one in mind? Contribute today!\n\n### Size Class\n\nClass to select pre-defined corner size. By default, it is set as 200px. To set the default size just don't add the size class.\n\n| Class | Corner Size |\n|-------|-----------|\n| ``fc-size-small`` | 150px corner size |\n| ``fc-size-medium`` | 250px corner size |\n| ``fc-size-large`` | 300px corner size |\n\n\u003e If you're looking for specific size please edit the source file and build it.\n\n## 🎯 Contributing\n\nContributions are welcome, create a pull request to this repo and I will review your code. Please consider to submit your pull request to the ```dev``` branch. Thank you!\n\nRead the project's [contributing guide](./contributing.md) for more info.\n\n## 💬 Discussions\n\nFor any questions, suggestions, ideas, or simply you want to share your experience in using this project, feel free to share and discuss it to the [community](https://github.com/warengonzaga/fork-corner/discussions)!\n\n## 🐛 Issues\n\nIf you're facing a problem in using Fork Corner please let me know by [creating an issue here](https://github.com/warengonzaga/fork-corner/issues/new). I'm here to help you!\n\n## 🍀 Sponsors and Supporters\n\n[![BuyMeaCoffee](https://wrngnz.ga/badge-buymeacoffee)](https://buymeacoff.ee/warengonzaga) [![Vercel](https://wrngnz.ga/badge-vercel)](https://vercel.com) [![CircleCI](https://wrngnz.ga/badge-circleci)](https://vercel.com) [![GitBook](https://wrngnz.ga/badge-gitbook)](https://gitbook.io) [![Digital Ocean](https://wrngnz.ga/badge-digitalocean)](https://digitalocean.com) [![Deepware](https://wrngnz.ga/badge-deepware)](https://deepware.ai/) [![NOWPayments](https://wrngnz.ga/badge-nowpayments)](https://nowpayments.io) [![StackHawk](https://img.shields.io/badge/Stackhawk-%2300CBC6.svg?\u0026style=for-the-badge\u0026logoColor=white)](https://stackhawk.com)\n\n\u003e Love what I do? **[Send me some coffees](https://buymeacoff.ee/wareneutron)**!\n\u003e\n\u003e Your coffee donation and support will help me to continue working on open-source projects like this.\n\n## 🌏 Community\n\nJoin to my growing tech community and get the latest updates!\n\n[![community](https://discordapp.com/api/guilds/659684980137656340/widget.png?style=banner2)](https://wrngnz.ga/discord) [![community](https://discordapp.com/api/guilds/694612151444439081/widget.png?style=banner2)](https://wareneutron.com/discord)\n\n## 📋 Code of Conduct\n\nRead the project's [code of conduct](./code_of_conduct.md).\n\n## 📃 License\n\nFork Corner is licensed under [The MIT License](https://opensource.org/licenses/MIT).\n\n## 📝 Author\n\nFork Corner is created by **[Waren Gonzaga](https://github.com/warengonzaga)**, with the help of awesome [contributors](https://github.com/warengonzaga/fork-corner/graphs/contributors).\n\n---\n\n💻 Made with 💖 and ☕ by **Waren Gonzaga** with **YHWH** 🙏 | Citizen of Heaven\n\n[personal website]: https://warengonzaga.com\n[business website]: https://wgcompanyhq.com\n[biolink]: https://bio.link/warengonzaga\n[facebook]: https://facebook.com/warengonzagaofficial\n[twitter]: https://twitter.com/warengonzaga\n[instagram]: https://instagram.com/warengonzagaofficial\n[youtube]: https://youtube.com/warengonzaga\n","funding_links":["https://warengonzaga.com/donate"],"categories":["SCSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarengonzaga%2Ffork-corner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarengonzaga%2Ffork-corner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarengonzaga%2Ffork-corner/lists"}