{"id":30770428,"url":"https://github.com/usrrname/hit-counter","last_synced_at":"2025-09-04T23:06:44.160Z","repository":{"id":310126540,"uuid":"1036192670","full_name":"usrrname/hit-counter","owner":"usrrname","description":"A web component and service for displaying site visits from Google Analytics ✨","archived":false,"fork":false,"pushed_at":"2025-08-15T21:53:28.000Z","size":106,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-15T23:38:06.831Z","etag":null,"topics":["custom-elements","web-components"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/usrrname.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}},"created_at":"2025-08-11T17:37:53.000Z","updated_at":"2025-08-15T21:53:32.000Z","dependencies_parsed_at":"2025-08-15T23:38:08.656Z","dependency_job_id":"656db214-e4ba-4b76-9adc-0eaa215f9481","html_url":"https://github.com/usrrname/hit-counter","commit_stats":null,"previous_names":["usrrname/hit-counter"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/usrrname/hit-counter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usrrname%2Fhit-counter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usrrname%2Fhit-counter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usrrname%2Fhit-counter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usrrname%2Fhit-counter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usrrname","download_url":"https://codeload.github.com/usrrname/hit-counter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usrrname%2Fhit-counter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273685604,"owners_count":25149722,"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-09-04T02:00:08.968Z","response_time":61,"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":["custom-elements","web-components"],"created_at":"2025-09-04T23:05:08.698Z","updated_at":"2025-09-04T23:06:44.127Z","avatar_url":"https://github.com/usrrname.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🦔 Hit Counter\n\n*A web component and service for displaying site visits from Google Analytics* ✨\n\n\u003cimg width=\"1428\" height=\"735\" alt=\"2\" src=\"https://github.com/user-attachments/assets/91c53d96-d110-4121-ac45-11d94f8c3beb\" /\u003e\n\n\n## 🚀 Quick Start\n\n```html\n\u003cscript type=\"module\" src=\"./component/index.js\"\u003e\u003c/script\u003e\n\u003chit-counter value=\"1234\"\u003e\u003c/hit-counter\u003e\n```\n`pnpm start:server` to start the server with the service at http://localhost:3000/index.html\n`pnpm start:client` to view the component variants at http://localhost:3000/\n\n\n## 📖 Usage\n\n```html\n\u003c!-- Basic --\u003e\n\u003chit-counter value=\"1234\"\u003e\u003c/hit-counter\u003e\n\n\u003c!-- Negative with visitors --\u003e\n\u003chit-counter value=\"1234\" is-negative=\"true\" visitors=\"true\"\u003e\u003c/hit-counter\u003e\n\u003c!-- Output: -1234 visitors --\u003e\n\n\u003c!-- Retro themes --\u003e\n\u003chit-counter value=\"1337\" is-retro=\"true\"\u003e\u003c/hit-counter\u003e\n```\n\n## 🎛️ Attributes\n\n| Attribute     | Type    | Description |\n|---------------|---------|-------------|\n| `value`       | string  | Number to display (auto-formatted) |\n| `is-negative` | boolean | Show minus sign in front of value - just for fun|\n| `visitors`    | boolean | Show \"visitors\" label |\n| `is-retro`    | boolean | Enable 90s beveled styling |\n\n## 🎨 Styling / Theming\n\n### CSS Variables\n\nThere are 13 variables to theme the component.\n\n```css\n/* Basic styling */\n  --hit-counter-text-color: #000 | #00ff00;              /* Main text color */\n  --hit-counter-font-size: 1.25rem;       /* Font size */\n  --hit-counter-negative-color: #e74c3c;  /* Negative sign color */\n```\n\n### All variables (defaults)\n```css\n  /* Font styling */\n  --hit-counter-font-size: 1.25rem;\n\n  /* Text effect \u003clight|dark\u003e */\n  --hit-counter-text-color: #000 | #00ff00;\n  --hit-counter-text-glow: none | 0 0 3px currentColor, 1px 1px 0 #00ff00;\n\n  /* Digit styling */\n  --hit-counter-bg-light: #e0e0e0;\n  --hit-counter-bg-dark: #707070;\n  --hit-counter-border-color: #c0c0c0;\n  --hit-counter-overlay-light: rgba(0,255,0,0.1);\n  --hit-counter-overlay-dark: rgba(0,0,0,0.2);\n  --hit-counter-inner-light: rgba(255,255,255,0.8);\n  --hit-counter-inner-dark: rgba(0,0,0,0.5);\n  --hit-counter-outer-glow: none | 0 0 10px rgba(0,255,0,0.2);\n```\n\n### Retro Theme Variables (defaults)\n\nThere are 10 variables to theme the retro variant.\n```css\n/* Retro variant dark mode defaults */\n--hit-counter-text-color: var(--hit-counter-text-color, #00ff00);\n--hit-counter-bg-light: var(--hit-counter-bg-light, #1b1b1b);\n--hit-counter-bg-dark: var(--hit-counter-bg-dark, #6d6b6b);\n--hit-counter-text-glow: 0 0 3px currentColor, 1px 1px 0 var(--hit-counter-text-glow, #00ff00);\n--hit-counter-inner-light: var(--hit-counter-inner-light, rgba(255,255,255,0.1));\n--hit-counter-inner-dark: var(--hit-counter-inner-dark, rgba(0,0,0,0.8));\n--hit-counter-outer-glow: var(--hit-counter-outer-glow, 0 0 10px rgba(0,255,0,0.2));\n--hit-counter-overlay-light: var(--hit-counter-overlay-light, rgba(0,255,0,0.1));\n--hit-counter-overlay-dark: var(--hit-counter-overlay-dark, rgba(0,0,0,0.2));\n--hit-counter-border-color: var(--hit-counter-border-color, rgb(130, 0, 229));\n\n```\n\n## 🔧 JavaScript API\n\n```javascript\nconst counter = document.querySelector('hit-counter');\ncounter.toggleNegative();\ncounter.toggleVisitors();\ncounter.toggleRetro();\n\n```\n## 🌟 Browser Support\n\nModern browsers with Custom Elements v1, Shadow DOM v1, ES6 Classes  \n*(Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+)*\n\n**Accessibility:** ARIA labels, high contrast support, screen reader friendly\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusrrname%2Fhit-counter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusrrname%2Fhit-counter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusrrname%2Fhit-counter/lists"}