Static timeline generator

Easily create a static timeline webpage using Jekyll based on Molly White's wonderful work at https://github.com/molly/static-timeline-generator - adapted for Jekyll by Jan Wildeboer

Install

Clone this repository, add some posts to the _posts directory as is the Jekyll Way. Then run bundle install from the directory.

• bundle exec jekyll serve will build the project and serve the static files locally at http://localhost:4000.
• bundle exec jekyll build just runs the build step without starting the development server and puts the static files ine the _site directory. You can now copy these files to your webserver to publish the whole site.

Customize

Almost all of the templates you want to change are in _layouts/. default.html builds the main page. page.html is a generic template for additional pages.

Primary content

• header (HTML, optional): The content to display in the header at the top of the page.
• footer (HTML, optional): The content to display in the footer at the bottom of the page.
• entries (array of objects, required): The list of entries to display on the timeline, in the order they should display.
  • id (string, required): A unique ID for this timeline entry.
  • categories (array of strings, optional): A list of categories that apply to this entry. These will show up as checkboxes at the top of the page, and allow readers to filter the timeline. They may not contain commas. They can be hyphen or space separated (sample category or sample-category will both display on the page as Sample category). Entries without any categories will always display.
  • color (string, optional): The color of the circle that displays on the timeline line. The options already defined are green, red, and grey. You can define additional colors in css/custom.css (see below).
  • faicon (string, optional): The name of a Font Awesome icon to use in the circle on the timeline line. Explore the options. This is just the icon name (without the fa- prefix). For example: anchor.
  • datetime (string, either datetime or date must be present): A date and time specifier for the item. This can be in any format that moment.js recognizes. I normally do "YYYY-MM-DD HH-SS". If there is no time, only a date, use the date parameter instead of datetime.
  • date (string, either datetime or date must be present): A date specifier for the item. "YYYY-MM-DD".
  • title (HTML, required): The title of the timeline entry.
  • image (optional): An image to display in the entry
    • src (string, required): A direct URL to the image file to be embedded on the page, or a relative link to an image in this directory (for example img/filename.png).
    • link (string, optional): A hyperlink to the page containing the image, if you'd like people to be able to click it to see a larger version, etc.
    • alt (string, optional): Alt text describing the image.
    • caption (HTML, optional): A caption describing the image.
  • body (HTML, required): The text of the timeline entry. If you want multiple paragraphs, you have to include <p> tags yourself; otherwise, it will be added.
  • links (array of objects, optional): An array of links to display at the bottom of the entry.
    • href (string, required): The target of the link.
    • linkText (HTML, required): Link text.
    • extra (HTML, optional): Extra HTML to display at the end of the link.

Meta

• pageTitle (string, required): The text to go in the <title> tag, to set the title of the page in the browser.
• pageDescription (string, optional): Page description to go into meta tags.
• pageAuthor (string, optinal): Page author to go into meta tags.

Additional customization

If you would like to add more color options for the circles on the timeline, you can edit the src/css/custom.css file to add your own. You can use this tool to pick colors and get their hex color codes. They are defined like so:

.timeline-icon.yourcolorhere {
  background-color: #hexcolorcode;
}

You would then use color: yourcolorhere in the content.js file.

Replace the images in the src/img folder to customize the page favicon and OpenGraph image.

Responsiveness

Timelines will render well on tablets:

or mobile devices:

Browser compatibility

This should work well on all modern browsers. IE <9 is not supported.

Without JavaScript enabled, the page degrades gracefully. However, posts will show in a single-column timeline and filters will not show.

Under the hood

This project uses

• FontAwesome
• normalize.css

It is released under the MIT license.