{"id":18417564,"url":"https://github.com/radio4000/components","last_synced_at":"2026-04-02T14:46:35.001Z","repository":{"id":61490609,"uuid":"551905134","full_name":"radio4000/components","owner":"radio4000","description":"web-components to build the r4 interfaces, uses the sdk","archived":false,"fork":false,"pushed_at":"2026-03-18T08:59:18.000Z","size":2102,"stargazers_count":4,"open_issues_count":26,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-19T00:30:37.218Z","etag":null,"topics":["lit-element","web-components"],"latest_commit_sha":null,"homepage":"https://components.radio4000.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/radio4000.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-10-15T11:05:42.000Z","updated_at":"2026-03-18T08:58:26.000Z","dependencies_parsed_at":"2023-10-11T19:24:23.084Z","dependency_job_id":"7a727164-913b-486d-9370-b51e754cf834","html_url":"https://github.com/radio4000/components","commit_stats":{"total_commits":1465,"total_committers":6,"mean_commits":"244.16666666666666","dds":0.4443686006825939,"last_synced_commit":"9b0ba675b5b83ac41cf33442d77e1c9fd68f0c36"},"previous_names":[],"tags_count":133,"template":false,"template_full_name":null,"purl":"pkg:github/radio4000/components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radio4000%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radio4000%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radio4000%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radio4000%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/radio4000","download_url":"https://codeload.github.com/radio4000/components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radio4000%2Fcomponents/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31308395,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["lit-element","web-components"],"created_at":"2024-11-06T04:10:00.819Z","updated_at":"2026-04-02T14:46:34.987Z","avatar_url":"https://github.com/radio4000.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Publish Package to npm](https://github.com/radio4000/components/actions/workflows/publish-to-npm-registry.yml/badge.svg)](https://github.com/radio4000/components/actions/workflows/publish-to-npm-registry.yml)\n\n# Web components for Radio4000\n\nThese components can be inserted in the HTML of any web pages, and are made to interact with [Radio4000](https://radio4000.com) through the use of its\n[@radio4000/sdk](https://github.com/radio4000/sdk), which talks to [@radio4000/supabase](https://github.com/radio4000/supabase).\n\n- [View examples of all components](https://radio4000.github.io/components/examples/)\n- [View example of the `\u003cr4-app\u003e` component](https://radio4000.com)\n\n## Usage\n\nDepending on whether you have a build system or not, you can either import the module from NPM, from a CDN or download it locally.\n\nAll methods are available on the imported `sdk` module.\n\n### With build system and NPM\n\n```js\nimport '@radio4000/components'\n// use any \u003cr4-component*\u003e in your templates\n```\n\n### With browser via CDN\n\n```html\n\u003cscript type=\"module\"\u003e\n  import 'https://cdn.jsdelivr.net/npm/@radio4000/components'\n  // use any \u003cr4-*\u003e component in your HTML\n\u003c/script\u003e\n```\n\n## Changelog\n\nSee https://github.com/radio4000/components/releases\n\n## Development\n\n- The components are in the `./src` folder\n- Inside `./examples` you'll find demos of all components\n- The `./index.html` file renders the `\u003cr4-app\u003e` component, which requires a SPA router.\n\nIf you'd like to help out, clone the repository, install dependencies and start the local server.\n\n```bash\ngit clone git@github.com:radio4000/components.git radio4000-components\ncd radio4000-components\nnpm install\nnpm run dev\n```\n\n### Linting\n\nUse `npm run lint` to check the project for potential code problems and style using eslint. It's configured to look out for web components, lit and jsdoc.\n\n### Themes\n\nSee the [themes github repo](https://github.com/4www/themes)\n\n## Build and releases\n\nTo release this package under `@radio4000/components` on NPM, bump the version in package.json, create a commit, tag it. Create a new release on Github and let the Github action publish it.\n\nTo make sure the build workflows:\n\n- npm run build\n- npm run dev\n- open - open http://localhost:4000/ and http://localhost:4000/tests/dist-test.html and click around, see if things work\n\n## Deploying to radio4000.com\n\nTo update radio4000.com, publish a new release of `@radio4000/components` and update it in the repo https://github.com/radio4000/radio4000.com.\n\n## Creating a new component\n\n- create a `./src/components/r4-*.js` file\n- export default HTMLElement\n- import and export it in `./src/components/index.js`\n- create an demo in `./examples/r4-*/index.html`\n- reference the demo HTML page in `./vite.config.js`\n\n## Connection to the Radio4000 database\n\nAll components use the @radio4000/sdk. The exact db is configured in https://github.com/radio4000/components/blob/main/src/libs/sdk.js.\n\n# Production\n\nCurrently deployed on cloudflare pages (which has the env vars manually added).\n\n\u003e Github pages is not used because it does not support SPA redirects\n\u003e (like in the public folder for other hosting; @TODO: wait then migrate)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradio4000%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradio4000%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradio4000%2Fcomponents/lists"}