{"id":38841755,"url":"https://github.com/ericreboisson/lifecycle-timeline","last_synced_at":"2026-01-25T13:00:26.861Z","repository":{"id":331084717,"uuid":"1123357366","full_name":"ericreboisson/lifecycle-timeline","owner":"ericreboisson","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-12T22:16:26.000Z","size":1029,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-13T02:40:21.057Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/ericreboisson.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-26T17:46:52.000Z","updated_at":"2026-01-12T22:16:48.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ericreboisson/lifecycle-timeline","commit_stats":null,"previous_names":["ericreboisson/lifecycle-timeline"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ericreboisson/lifecycle-timeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericreboisson%2Flifecycle-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericreboisson%2Flifecycle-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericreboisson%2Flifecycle-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericreboisson%2Flifecycle-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericreboisson","download_url":"https://codeload.github.com/ericreboisson/lifecycle-timeline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericreboisson%2Flifecycle-timeline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28753411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T10:25:12.305Z","status":"ssl_error","status_checked_at":"2026-01-25T10:25:11.933Z","response_time":113,"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":[],"created_at":"2026-01-17T14:00:29.586Z","updated_at":"2026-01-25T13:00:26.855Z","avatar_url":"https://github.com/ericreboisson.png","language":"JavaScript","readme":"# 🕒 Lifecycle Timeline\n\nA premium, interactive Vanilla JS component for visualizing product lifecycles, including OSS support, Enterprise support, and EOL (End-Of-Life) dates.\n\n\n[**🚀 View Live Demo**](https://ericreboisson.github.io/lifecycle-timeline/)\n\n![Lifecycle Timeline Screenshot](assets/screenshot.png)\n\n\n## ✨ Features\n\n- **Interactive Table**: A clear data table between the filter and tracks for quick reference.\n- **Smart Filtering**: Real-time search to filter versions across both table and timeline.\n- **Dark Mode**: Native support with a persistent toggle.\n- **Rich Legend**: Detailed explanation of support states.\n- **Responsive Design**: Works on all screen sizes with horizontal scroll support.\n- **Sticky Labels**: Version names stay visible while scrolling through time.\n- **Interactive Tooltips**: Detailed date information on hover.\n- **Live Indicator**: Pulsing badge showing the current date line.\n- **Fully Typed**: Includes TypeScript definitions out of the box.\n\n## 🚀 Installation\n\n### Via NPM\n```bash\nnpm install lifecycle-timeline\n```\n\n\u003e [!TIP]\n\u003e Using Angular? Check out our [Angular Integration Guide](ANGULAR_INTEGRATION.md).\n\n### Manual Installation\nDownload the files from the `dist` folder: `timeline.js` (ESM), `timeline.umd.cjs` (UMD), and `timeline.css`.\n\n## 🛠 Usage\n\n### Modern JavaScript (ESM)\n```javascript\nimport Timeline from 'lifecycle-timeline';\nimport 'lifecycle-timeline/style.css';\n\nconst data = [\n  {\n    version: \"6.0.x\",\n    ossStart: \"2025-01-01\",\n    ossEnd: \"2026-08-20\",\n    enterpriseEnd: \"2027-02-15\",\n    releaseNotesUrl: \"https://example.com/notes\"\n  }\n];\n\nnew Timeline('timeline-root', data, { visibleCount: 3 });\n```\n\n### Browser (UMD)\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/lifecycle-timeline/dist/timeline.css\"\u003e\n\u003cdiv id=\"timeline-root\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"https://unpkg.com/lifecycle-timeline/dist/timeline.umd.cjs\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const data = [...];\n  new Timeline('timeline-root', data);\n\u003c/script\u003e\n```\n\n## ⚙️ Configuration \u0026 API\n\n### Constructor\n`new Timeline(elementId, data, options)`\n\n#### `options` Object\n\n| Property | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `visibleCount` | `number` | `3` | Initial versions shown before \"Show More\" appears. |\n| `locale` | `string` | `auto` | UI language (`'en'`, `'fr'`). |\n| `i18n` | `object` | `{}` | Custom translations or new languages. |\n| `showTable` | `boolean` | `true` | Shows/hides the summary data table. |\n| `showLegend` | `boolean` | `true` | Shows/hides the legend below the timeline. |\n| `filterVersions` | `boolean` | `true` | Shows/hides the version filter input. |\n| `splitSupport` | `boolean` | `false` | If `true`, Ent. starts after OSS end. If `false`, overlaps. |\n| `compactMode` | `boolean` | `false` | Reduces vertical spacing for a denser view. |\n| `showMajorFilter` | `boolean` | `false` | Adds a checkbox to filter for major versions only. |\n\n### 🌐 Internationalization (i18n)\n\nYou can easily override existing labels or add new languages:\n\n```javascript\nnew Timeline('timeline-root', data, {\n  locale: 'fr',\n  i18n: {\n    fr: {\n      filter: \"Rechercher une version...\",\n      more: \"Afficher {n} de plus\"\n    }\n  }\n});\n```\n\n### 🛡️ Data Validation\nThe component automatically validates your data. If required fields (`version`, `ossStart`, `ossEnd`) are missing or if date formats are invalid, a warning is logged in the browser console.\n\n## 🎨 Theming\nThe component uses CSS variables for easy customization:\n```css\n:root {\n  --accent-oss: #99e67d;     /* Community support color */\n  --accent-ent: #ffe88e;     /* Enterprise support color */\n  --current-date: #086dc3;   /* Today's indicator color */\n  --accent-eol: #ef4444;     /* End of life color */\n}\n```\n\n## 🧪 Testing\nWe use **Vitest** for unit testing.\n```bash\nnpm test\n```\n\n## 🛠 Development\n1. `npm install`\n2. `npm run dev`\n3. `npm run build`\n4. `npm run release` (Build + Publish)\n\n## 📄 License\nMIT © Eric REBOISSON\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Dates"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericreboisson%2Flifecycle-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericreboisson%2Flifecycle-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericreboisson%2Flifecycle-timeline/lists"}