{"id":19152766,"url":"https://github.com/traefik/traefiklabs-hub-button-app","last_synced_at":"2025-10-19T09:29:15.232Z","repository":{"id":180358356,"uuid":"651117085","full_name":"traefik/traefiklabs-hub-button-app","owner":"traefik","description":"Traefik Hub Button with WebComponents","archived":false,"fork":false,"pushed_at":"2024-04-09T14:12:55.000Z","size":637,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-14T05:15:37.802Z","etag":null,"topics":["traefik-hub"],"latest_commit_sha":null,"homepage":"https://hub.traefik.io","language":"HTML","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/traefik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2023-06-08T14:28:35.000Z","updated_at":"2024-04-09T14:12:09.000Z","dependencies_parsed_at":"2024-02-06T17:28:00.605Z","dependency_job_id":"c3180a2a-65d3-4a8a-8e7e-78cbd1d357d0","html_url":"https://github.com/traefik/traefiklabs-hub-button-app","commit_stats":null,"previous_names":["traefik/traefiklabs-hub-button-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traefik%2Ftraefiklabs-hub-button-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traefik%2Ftraefiklabs-hub-button-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traefik%2Ftraefiklabs-hub-button-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traefik%2Ftraefiklabs-hub-button-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/traefik","download_url":"https://codeload.github.com/traefik/traefiklabs-hub-button-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240236360,"owners_count":19769580,"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":["traefik-hub"],"created_at":"2024-11-09T08:19:20.091Z","updated_at":"2025-10-19T09:29:15.212Z","avatar_url":"https://github.com/traefik.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Traefik Hub Button with WebComponents\n\nThis Project aims to solve the issue to have a Hub button in the Traefik dashboard.\n\nWebComponents are a way to define a custom component that runs as any other HTML component, so it can be used in any framework or even in pure HTML files, after importing the JS file with the component definition.\n\nFor this project, it was used a React version of the Header, encapsulated in a custom component called \"hub-button-app\".\n\nAny future changes in the header must be done in this Repo, and should be automatically propagated to all pages that uses it.\n\n## How to test\n\n- Clone the project\n- `yarn install`\n- `yarn start`\n\nCheck the page that opens if the Header is properly rendered and if the latest post has been fetched.\n\n## How to build\n\n- `yarn install`\n- `yarn build`\n\nIt will create a `build` folder with the compiled assets.\n\n## How to use\n\nPut the full URL of the script file in the `src` attribute of a `\u003cscript\u003e` tag:\n\n```html\n\u003cscript src=\"https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js\"\u003e\u003c/script\u003e\n```\n\nYou can place the script reference in head or body tag, as you like.\n\nThen, you can use the **hub-button-app** custom element wherever you need it.\n\n### Embed into another project (local fallback)\n\nThe script (and its sourcemap) can be embedded in another project codebase, this can be useful as a local fallback in\ncase the remote source became unavailable.\n\nTo make the static assets on your computer please run `make static-assets`.\n\nPlease notice that in macOS `''` must be added after `-i` in each sed command, e.g.\n`sed -i 's@something@something@' dest.file` become `sed -i '' 's@something@something@' dest.file`.\n\nWhen you have the static assets available please remember to update, in both the script and its sourcemap, the following\nlines:\n\n| File | Line | Key | Value (example) |\n| - | - | - | - |\n| main-v1.js | 23 | `sourceMappingURL` | `/traefiklabs-hub-button-app/main-v1.js.map` |\n| main-v1.js.map | 1 | `file` | `/traefiklabs-hub-button-app/main-v1.js` |\n\n### Deployment URLs\n\n- https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js\n- https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js.map\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftraefik%2Ftraefiklabs-hub-button-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftraefik%2Ftraefiklabs-hub-button-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftraefik%2Ftraefiklabs-hub-button-app/lists"}