{"id":15908445,"url":"https://github.com/capjamesg/html-timelines","last_synced_at":"2026-01-16T01:41:41.942Z","repository":{"id":224618565,"uuid":"763754795","full_name":"capjamesg/html-timelines","owner":"capjamesg","description":"Make a timeline with HTML.","archived":false,"fork":false,"pushed_at":"2024-02-26T21:52:41.000Z","size":14,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T19:16:38.551Z","etag":null,"topics":["html","html-table","html-timelines","web-development"],"latest_commit_sha":null,"homepage":"https://capjamesg.github.io/html-timelines/table.html","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/capjamesg.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}},"created_at":"2024-02-26T21:27:18.000Z","updated_at":"2024-03-10T05:05:30.000Z","dependencies_parsed_at":"2024-02-26T23:07:37.707Z","dependency_job_id":null,"html_url":"https://github.com/capjamesg/html-timelines","commit_stats":null,"previous_names":["capjamesg/html-timelines"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capjamesg%2Fhtml-timelines","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capjamesg%2Fhtml-timelines/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capjamesg%2Fhtml-timelines/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capjamesg%2Fhtml-timelines/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/capjamesg","download_url":"https://codeload.github.com/capjamesg/html-timelines/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246912545,"owners_count":20853875,"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":["html","html-table","html-timelines","web-development"],"created_at":"2024-10-06T14:21:36.288Z","updated_at":"2026-01-16T01:41:41.914Z","avatar_url":"https://github.com/capjamesg.png","language":"HTML","readme":"# HTML Timelines\n\n\u003cimg width=\"1381\" alt=\"timeline\" src=\"https://github.com/capjamesg/html-timelines/assets/37276661/f06afb3e-bd48-44cc-983b-dc62f9bb27a1\"\u003e\n\u003cbr\u003e\u003cbr\u003e\n\nMake a timeline with HTML.\n\n## Inspiration\n\nThe IndieWeb wiki has a HTML timeline that documents the history of [IndieWeb events](https://indieweb.org/IndieWebCamps). The existing timeline was made by hand by [Tantek](https://tantek.com). This project is intended to make creating similar timelines easier.\n\n## How to Use\n\nFirst, clone this project and install the required dependencies:\n\n```\ngit clone https://github.com/capjamesg/html-timelines/\ncd html-timelines/\npip3 install jinja2\n```\n\nThen, create a new file called `data.json` with the following structure:\n\n```json\n{\n  \"row name\": {\n      \"row item (i.e. a month or year)\": {\n        \"url\": \"https://example.com...\"\n      },\n      \"color\": \"lightgreen\"\n  }\n}\n```\n\n`color` is a required key in a row name. It is used to set the colour for the row. Valid HTML colours are accepted.\n\nHere is an example that represents a year of blog posts in a category and includes links to each category page:\n\n```json\n{\n    \"IndieWeb\": {\n        \"January\": {\n            \"url\": \"https://jamesg.blog/january/\",\n        },\n        \"February\": {\n            \"url\": \"https://jamesg.blog/february/\",\n        },\n        \"March\": {\n            \"url\": \"https://jamesg.blog/march/\",\n        },\n        \"April\": {\n            \"url\": \"https://jamesg.blog/april/\",\n        },\n        \"May\": \"\",\n        \"June\": {\n            \"url\": \"https://jamesg.blog/june/\",\n        },\n        \"July\": {\n            \"url\": \"https://jamesg.blog/july/\",\n        },\n        \"August\": {\n            \"url\": \"https://jamesg.blog/august/\",\n        },\n        \"September\": {\n            \"url\": \"https://jamesg.blog/september/\",\n        },\n        \"October\": {\n            \"url\": \"https://jamesg.blog/october/\",\n        },\n        \"November\": {\n            \"url\": \"https://jamesg.blog/november/\",\n        },\n        \"December\": {\n            \"url\": \"https://jamesg.blog/december/\",\n        },\n        \"color\": \"lightgreen\"\n    }\n}\n```\n\nIf you want to leave a value blank, set the value of a key to an empty string.\n\nThen, run the script:\n\n```bash\npython3 html_table.py\n```\n\nA file called `table.html` will be created with the results of your table.\n\nHere is an example of the result above rendered, with an additional row for effect:\n\n\u003cimg width=\"1381\" alt=\"timeline\" src=\"https://github.com/capjamesg/html-timelines/assets/37276661/35267e59-8eee-4fa8-bfde-22e8fa5729e9\"\u003e\n\n## Known limitations\n\nThe tables generated by this project do not work well on mobile devices if you have more than four columns.\n\n## License\n\nThis project is licensed under a Creative Commons Zero Attribution license.\n\n## Contributing\n\nSee a way this project can be improved? File a PR on the project GitHub repository!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapjamesg%2Fhtml-timelines","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcapjamesg%2Fhtml-timelines","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapjamesg%2Fhtml-timelines/lists"}