{"id":13688127,"url":"https://github.com/cstate/html-embed","last_synced_at":"2025-08-11T09:06:22.724Z","repository":{"id":109729732,"uuid":"300913560","full_name":"cstate/html-embed","owner":"cstate","description":"✔ SUPER SMALL bits of code that check if a cState-powered status page (using its read-only API) has active issues; if they do, an alert can be shown, or you can write a custom callback. Or, it is possible to simply embed a dot indicator in a place like your footer.","archived":false,"fork":false,"pushed_at":"2022-10-28T15:35:31.000Z","size":186,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-29T20:24:52.673Z","etag":null,"topics":["basic","css","cstate","hacktoberfest","hacktoberfest2020","html","javascript","logic","simple","ui"],"latest_commit_sha":null,"homepage":"https://cstate-embed.pages.dev/dialog.html","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/cstate.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}},"created_at":"2020-10-03T15:32:17.000Z","updated_at":"2024-06-09T13:01:41.000Z","dependencies_parsed_at":"2023-05-17T08:40:45.344Z","dependency_job_id":null,"html_url":"https://github.com/cstate/html-embed","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/cstate/html-embed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstate%2Fhtml-embed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstate%2Fhtml-embed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstate%2Fhtml-embed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstate%2Fhtml-embed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cstate","download_url":"https://codeload.github.com/cstate/html-embed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstate%2Fhtml-embed/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269857469,"owners_count":24486392,"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-08-11T02:00:10.019Z","response_time":75,"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":["basic","css","cstate","hacktoberfest","hacktoberfest2020","html","javascript","logic","simple","ui"],"created_at":"2024-08-02T15:01:07.253Z","updated_at":"2025-08-11T09:06:22.693Z","avatar_url":"https://github.com/cstate.png","language":"HTML","funding_links":[],"categories":["css"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"images/preview.svg?sanitize=true\" alt=\"cState HTML embed lets you add a dot indicator or show an alert if your cState status page has active issues\"\u003e\u003c/p\u003e\n\n✔ SUPER SMALL bits of code that check if a cState-powered status page (using its read-only API) has active issues; if they do, an alert can be shown, or you can write a custom callback. Or, it is possible to simply embed a dot indicator in a place like your footer.\n\n## Prerequisites\n\n* You have a cState status page set up with a [read-only API](https://github.com/cstate/cstate/wiki/API)\n* You have modified your headers (for Netlify users, it's the `netlify.toml` file in the root) to allow for cross-origin access\n* Your browser (or environment) supports `fetch()`\n\nThe demo page uses this for its `netlify.toml`:\n\n```toml\n[[headers]]\n    for = \"/*.json\"\n    [headers.values]\n      Access-Control-Allow-Origin = \"*\"\n```\n\nFor `vercel.json`:\n\n```json\n{\n  \"headers\": [\n    {\n      \"source\": \"/(.*)\",\n      \"headers\": [\n        { \"key\": \"Access-Control-Allow-Origin\", \"value\": \"*\" },\n        { \"key\": \"Access-Control-Allow-Methods\", \"value\": \"GET,OPTIONS\" },\n        { \"key\": \"Access-Control-Allow-Headers\", \"value\": \"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version\" }\n      ]\n    }\n  ]\n}\n```\n\n## No UI needed?\n\nThe `basic-v1.js` file has the basic JavaScript you can use from v1.\n\n\n## First UI: Dot Indicator\n\nGrab the code from `dot-indicator.js` and add it to your page.\n\nModify the embed to your liking. Make sure to define your status page link variable.\n\nThis is a great option for footers and if you want to have a persistent icon showing that your services are online / there are no posted issues.\n\nThis code is only run on page load.\n\nThere is an example in `dot-indicator.html`. [View it here.](https://cstate-embed.pages.dev/dot-indicator.html)\n\n## Second UI: Alert Box\n\nGrab the code from `dialog.js`.\n\nModify the embed to your liking:\n\n- You might also want to change the text if your main user language is not English.\n- You might want to not show this alert if there is a `notice` type issue (like for maintenance announcements). **By default,** the alert shows for all status-impacting alerts.\n- You might want to change the colors if you have, for example, a dark website.\n- By default the code only runs on page load but can be edited to do so every x seconds or programatically.\n\nThere is an example in `dialog.html`. [View it here.](https://cstate-embed.pages.dev/dialog.html)\n\n## License\n\nThe idea for this project was [originally inspired](https://github.com/cstate/cstate/issues/131) by the GitHub / cState user @ririko5834. A big thanks to them!\n\nContributing rules same as on main [cState repository](https://github.com/cstate/cstate)\n\nLicensed MIT, made by Mantas Vilčinskas since 2020. Thank you for your support!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcstate%2Fhtml-embed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcstate%2Fhtml-embed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcstate%2Fhtml-embed/lists"}