{"id":22863989,"url":"https://github.com/arnavk-09/add-github-badge","last_synced_at":"2025-05-04T04:53:12.430Z","repository":{"id":222260631,"uuid":"754169152","full_name":"ArnavK-09/add-github-badge","owner":"ArnavK-09","description":"🦡 Add a customizable GitHub badge to your website...","archived":false,"fork":false,"pushed_at":"2024-11-08T02:10:33.000Z","size":131,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-25T01:17:32.205Z","etag":null,"topics":["addon","badge","cdn","ci","github","html","portfolio","showcase","template","tsup","typescript","website","widget","workflow"],"latest_commit_sha":null,"homepage":"https://arnavk-09.github.io/add-github-badge/","language":"TypeScript","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/ArnavK-09.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}},"created_at":"2024-02-07T14:34:16.000Z","updated_at":"2025-01-10T10:21:45.000Z","dependencies_parsed_at":"2024-02-13T08:42:36.267Z","dependency_job_id":"b40f9ce4-47fd-4c63-8836-9bb32c458ee2","html_url":"https://github.com/ArnavK-09/add-github-badge","commit_stats":null,"previous_names":["arnavk-09/luonutt"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavK-09%2Fadd-github-badge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavK-09%2Fadd-github-badge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavK-09%2Fadd-github-badge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavK-09%2Fadd-github-badge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArnavK-09","download_url":"https://codeload.github.com/ArnavK-09/add-github-badge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252123381,"owners_count":21698412,"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":["addon","badge","cdn","ci","github","html","portfolio","showcase","template","tsup","typescript","website","widget","workflow"],"created_at":"2024-12-13T11:18:39.187Z","updated_at":"2025-05-03T00:20:07.354Z","avatar_url":"https://github.com/ArnavK-09.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/github.png\" width=\"130\" height=\"130\" style=\"display: block; margin: 0 auto;\"/\u003e\n    \u003ch1\u003e🦡 Add Github Badge 🦡\u003c/h1\u003e\n    \u003cp\u003e\u003ccode\u003eaddGithubBadge\u003c/code\u003e is a simple yet powerful JavaScript library designed to effortlessly add a GitHub badge to any website. With just a script import and a few initialization options, you can display a beautiful badge that showcases your GitHub profile information, enhancing your site's interactivity and providing visitors with quick access to your GitHub profile.\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## ✨ Features\n\n- **Easy Integration:** Simply import the script and initialize it with your GitHub username.\n- **Customizable Badge:** Display additional information such as custom names, links, and trigger text.\n- **Popup Interaction:** Users can click on the badge to reveal a popup with more details and custom links.\n- **Lightweight:** Minimal impact on your website’s performance.\n\n## 📦 Installation\n\nTo include the `addGithubBadge` library in your website, add the following script tag in your HTML:\n\n###### your website root html\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/ArnavK-09/add-github-badge@main/dist/main.js\"\u003e\u003c/script\u003e\n```\n\n- **🍻 CDN URL:- https://cdn.jsdelivr.net/gh/ArnavK-09/add-github-badge@main/dist/main.js**\n\n## 🚀 Usage\n\n### 🚄 Quick Setup\n\nYou can quickly add a GitHub badge using just your GitHub username:\n\n###### javascript\n\n```javascript\naddGithubBadge(\"username\");\n```\n\n### 🚉 Full Configuration\n\nFor more control over the badge, use the full configuration method. Here’s how you can do it:\n\n###### javascript\n\n```javascript\naddGithubBadge({\n  github_username: \"username\", // Your GitHub username (required)\n  custom_name: \"Your Name\", // Custom display name (optional)\n  trigger_options: {\n    // Options for the popup trigger\n    text: \"Open {{username}}'s GitHub\", // Custom text for the popup trigger (optional)\n  },\n  options: {\n    // Additional options\n    debug: true, // Enable debug mode (optional)\n  },\n  links: [\n    // Custom links to display in the popup\n    { title: \"Portfolio\", href: \"https://portfolio.com\" },\n    { title: \"Blog\", href: \"https://blog.com\" },\n  ],\n});\n```\n\n### 🎫 Example\n\n###### index.html\n\n```html\n\u003c!-- ... --\u003e\n\u003cscript\u003e\n  // Quick setup\n  addGithubBadge(\"ArnavK-09\");\n\n  // Full configuration\n  addGithubBadge({\n    github_username: \"ArnavK-09\",\n    custom_name: \"Arnav Kaushal\",\n    trigger_options: {\n      text: \"This project is made by {{username}}\",\n    },\n    options: {\n      debug: true,\n    },\n    links: [{ title: \"Blogs\", href: \"https://dev.to/ArnavK-09\" }],\n  });\n\u003c/script\u003e\n\u003c!-- ... --\u003e\n```\n\n---\n\n## 📖 Props Interface\n\n## Options\n\nThe `addGithubBadge` function accepts the following options in the `addGithubBadgeInitProps` interface:\n\n| Type     | Description                                                     |\n| -------- | --------------------------------------------------------------- |\n| `string` | (Required) GitHub username to fetch user details for the badge. |\n\n\u003cp align=\"center\"\u003eOR\u003c/p\u003e\n\n| Parameter         | Type                                | Description                                                                                     |\n| ----------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------- |\n| `github_username` | `string`                            | (Required) GitHub username to fetch user details for the badge.                                 |\n| `custom_name`     | `string`                            | (Optional) A custom name displayed in the popup instead of the GitHub username.                 |\n| `trigger_options` | `addGithubBadgePopupTriggerOptions` | (Optional) Options to customize the popup trigger button text.                                  |\n| `options`         | `addGithubBadgeExtraOptions`        | (Optional) Additional options like enabling debug mode.                                         |\n| `links`           | `widgetPopupLink[]`                 | (Optional) Array of links displayed in the popup. Each link has an `href` and optional `title`. |\n\n### Sub-Options\n\n#### `addGithubBadgePopupTriggerOptions`\n\n| Parameter | Type     | Description                                                                       |\n| --------- | -------- | --------------------------------------------------------------------------------- |\n| `text`    | `string` | Text for the popup trigger button. Supports `{{username}}` for dynamic insertion. |\n\n#### `addGithubBadgeExtraOptions`\n\n| Parameter | Type      | Description                   |\n| --------- | --------- | ----------------------------- |\n| `debug`   | `boolean` | Enables debug mode if `true`. |\n\n#### `widgetPopupLink`\n\n| Parameter | Type     | Description                                   |\n| --------- | -------- | --------------------------------------------- |\n| `title`   | `string` | (Optional) The link title text to display.    |\n| `href`    | `string` | (Required) The URL for the link in the popup. |\n\n---\n\n\u003ch2 align=\"center\"\u003e📄 License\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\nThis project is licensed under the \u003ccode\u003eMIT\u003c/code\u003e - see the \u003ca href=\"LICENSE\"\u003e\u003cstrong\u003eLICENSE\u003c/strong\u003e\u003c/a\u003e file for details.\n\u003c/p\u003e\n\n---\n\n\u003cp align=\"center\"\u003e\n    \u003cstrong\u003eIf you find this project helpful, please give it a ⭐ on GitHub!\u003c/strong\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnavk-09%2Fadd-github-badge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnavk-09%2Fadd-github-badge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnavk-09%2Fadd-github-badge/lists"}