https://github.com/capjamesg/html-timelines
Make a timeline with HTML.
https://github.com/capjamesg/html-timelines
html html-table html-timelines web-development
Last synced: 3 months ago
JSON representation
Make a timeline with HTML.
- Host: GitHub
- URL: https://github.com/capjamesg/html-timelines
- Owner: capjamesg
- Created: 2024-02-26T21:27:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-26T21:52:41.000Z (about 2 years ago)
- Last Synced: 2025-03-28T19:16:38.551Z (about 1 year ago)
- Topics: html, html-table, html-timelines, web-development
- Language: HTML
- Homepage: https://capjamesg.github.io/html-timelines/table.html
- Size: 13.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML Timelines
Make a timeline with HTML.
## Inspiration
The 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.
## How to Use
First, clone this project and install the required dependencies:
```
git clone https://github.com/capjamesg/html-timelines/
cd html-timelines/
pip3 install jinja2
```
Then, create a new file called `data.json` with the following structure:
```json
{
"row name": {
"row item (i.e. a month or year)": {
"url": "https://example.com..."
},
"color": "lightgreen"
}
}
```
`color` is a required key in a row name. It is used to set the colour for the row. Valid HTML colours are accepted.
Here is an example that represents a year of blog posts in a category and includes links to each category page:
```json
{
"IndieWeb": {
"January": {
"url": "https://jamesg.blog/january/",
},
"February": {
"url": "https://jamesg.blog/february/",
},
"March": {
"url": "https://jamesg.blog/march/",
},
"April": {
"url": "https://jamesg.blog/april/",
},
"May": "",
"June": {
"url": "https://jamesg.blog/june/",
},
"July": {
"url": "https://jamesg.blog/july/",
},
"August": {
"url": "https://jamesg.blog/august/",
},
"September": {
"url": "https://jamesg.blog/september/",
},
"October": {
"url": "https://jamesg.blog/october/",
},
"November": {
"url": "https://jamesg.blog/november/",
},
"December": {
"url": "https://jamesg.blog/december/",
},
"color": "lightgreen"
}
}
```
If you want to leave a value blank, set the value of a key to an empty string.
Then, run the script:
```bash
python3 html_table.py
```
A file called `table.html` will be created with the results of your table.
Here is an example of the result above rendered, with an additional row for effect:
## Known limitations
The tables generated by this project do not work well on mobile devices if you have more than four columns.
## License
This project is licensed under a Creative Commons Zero Attribution license.
## Contributing
See a way this project can be improved? File a PR on the project GitHub repository!