https://github.com/kochrt/cascade.page Skip to content Sign up * Why GitHub? + Features + Mobile + Actions + Codespaces + Packages + Security + Code review + Issues + Integrations + GitHub Sponsors + Customer stories * Team * Enterprise * Explore + Explore GitHub + Learn and contribute + Topics + Collections + Trending + Learning Lab + Open source guides + Connect with others + The ReadME Project + Events + Community forum + GitHub Education + GitHub Stars program * Marketplace * Pricing + Plans + Compare plans + Contact Sales + Education [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this user All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} kochrt / cascade.page Public * Notifications * Fork 17 * Star 185 * Make a timeline AGPL-3.0 License 185 stars 17 forks Star Notifications * Code * Issues 6 * Pull requests 0 * Actions * Projects 0 * Wiki * Security * Insights More * Code * Issues * Pull requests * Actions * Projects * Wiki * Security * Insights This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags 2 branches 0 tags Code Latest commit @kochrt kochrt Get explore working. Fixes #19 ... 6f8da2f Feb 25, 2022 Get explore working. Fixes #19 6f8da2f Git stats * 135 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time components Get explore working. Fixes #19 Feb 25, 2022 layouts Moving to sidebar style Dec 29, 2021 pages Don't prompt about reloading or leaving the page if we're in dev mode Feb 9, 2022 plugins Get explore working. Fixes #19 Feb 25, 2022 server-middleware Get explore working. Fixes #19 Feb 25, 2022 src Flush out some more of the README, support European dates when specif... Feb 22, 2022 static Move to nuxt Sep 4, 2021 store Change server middleware to typescript and add explore stub Feb 25, 2022 .gcloudignore Moving to sidebar style Dec 29, 2021 .gitignore Consistent underlay behind years (instead of on each year header indi... Sep 9, 2021 LICENSE Download, delete, and open shared timelines Sep 9, 2021 README.md Flush out some more of the README, support European dates when specif... Feb 22, 2022 nuxt.config.js The fixed positioning of time markers seems to work. Feb 24, 2022 package-lock.json The fixed positioning of time markers seems to work. Feb 24, 2022 package.json The fixed positioning of time markers seems to work. Feb 24, 2022 scroller.d.ts Fix build errors Sep 6, 2021 tailwind.config.js Properly underline links and make sure they are clickable in EventRows Feb 24, 2022 tsconfig.json Move to nuxt Sep 4, 2021 View code [ ] Cascade.page Table of contents Cascade Header Tags and colors Date formatting Events Date Ranges Dates Event Description Tags Links Locations Photos References Header Quick Reference Event Quick Reference Saving and sharing Public by default README.md Cascade.page Inspired by @cheeaun's life. Cascade.page is a text-to-timeline tool. You write markdown-ish text and it gets converted into a nice looking cascading timeline. Use it here. Table of contents * Cascade.page + Table of contents + Cascade o Header # Tags and colors # Date formatting o Events # Date Ranges @ Dates # Event Description @ Tags @ Links @ Locations @ Photos @ References + Header Quick Reference + Event Quick Reference + Saving and sharing + Public by default Cascade A Cascade is composed of an optional header and one or more events. Header The header of a cascade indicates things about the cascade like visual preferences and metadata. It is the first part of a cascade; that is, anything before the first event is considered the header. Right now there are only two things you can include in the header: tag colors and date formatting. Anything else in the header area (that is, everything else before the first event that is not date formatting or tag colors) will be ignored. Tags and colors You can indicate the color you want certain tagged events to appear like so: #Travel: blue #Education: green #Economics: #abc // hex color CSS color literals are supported (e.g., aliceblue or mediumvioletred) as well as hex colors (e.g., #a13bbb). So, if you have an event like the following 2012-2013: Germany and Italy #Travel it will be colored as blue in the cascade. Date formatting Non-ISO8601 dates default to American formatting (Month/Day/Year). This can be changed to European formatting by adding the following line in the header area (before any event): dateFormat: d/M/y This is a hardcoded line, any other format attempt will not work. Events An event is a Date Range followed by a colon followed by an event description: 12/2012: End of the world 1961: Year after 1960 Later, 1962 would happen 2020-02-22T12:13:14Z-now: How long the pandemic has been going on? 12/7/1941: Pearl Harbor attacked Launched US into WWII 2022-02-22T16:27:08.369Z: More specific thing 2021-01-02T06:27:00Z-2022: ongoing project work until the end of 2022 Date Ranges A date range is a period from one date to another. Every event has an associated date range, whether it has an explicitly written end date or not. A date range is typically Date[-Date]; that is, one date optionally followed by a dash and another date (no spaces). If an end date is not specified, the range is as long as its granularity. For example, the event 2001: A Space Odyssey starts January 1, 2001, and lasts through December 31, 2001. Example Inferred Range Explanation 2024-01-01T00:00:00Z From the 2024 to start of 2025-01-01T00:00:00Z 2024 to the end of 2024 From the 1776-04-01T00:00:00Z start of 04/1776 to July 1776 1776-05-01T00:00:00Z to the end of July 1776 From the start of 2024-01-01T00:00:00Z January 1, 01/01/2024 to 2024, to 2024-01-02T00:00:00Z the end of January 1, 2024 (the whole day). From the start of 2024-11-11T00:00:00Z November 11/11/2024-12/12/2024 to 11, 2024, 2024-12-13T00:00:00Z to the end of December 12, 2024. 2031-11-19T01:35:10Z Exactly as 2031-11-19T01:35:10Z-2099-08-04T18:22:48Z to specific as 2099-08-04T18:22:48Z the ISO dates say. Dates A date can be expressed in a few forms. Human readable dates are supported, like 1665, 03/2222, or 09/11/2001, as well as IO8601 dates, like 2031-11-19T01:35:10Z. Human readable date formatting defaults to the American Month/Day/Year but can be changed to European formatting via the header. Event Description An event description is everything after the date range of the event, up to the next event. Event descriptions can span multiple lines. For 12/2012: End of the world, the event description is just End of the world. For the following event: 1961: Year after 1960 Later, 1962 would happen the event description is Year after 1960 Later, 1962 would happen Everything not on the first line (where the date range is specified) up to the next event will be put in an overflow box that can be expanded by clicking on the event. Such an overflow is indicated in the timeline with an ellipsis (...). Event descriptions can include tags, links, locations, photos, and references. Tags Events can be tagged to visually indicate they belong to some category. Simply add your tag text in any part of an event's description to tag it: 2022: Happy 95th Birthday Queen Elizabeth #UK #Royalty A list of all tags appears at the bottom of the screen to allow for filtering by tags. Links Links are similar to markdown links: link dislpay text in brackets followed by the url in parentheses: 2018-2021: [Google](www.google.com) Locations Events can have zero or more locations associated with them, indicated with the following syntax: [name of location](map|location) 09/2018: Road trip to Seattle [Devil's Tower](location) [Glacier National Park](map) [Seattle](map) Photos An event may include a shareable, public google photos link that will be displayed once the event is clicked on. Only one photos link per event is supported. References Link to other cascades with the @ syntax: 1919: Treaty of Versailles @wwi Header Quick Reference Item Syntax Example Coloring tags #[tag name]: #Movies: aquamarine Date format. Change the formatting to dateFormat: d/ dateFormat: d/ European style. M/y M/y Event Quick Reference Item Syntax Example Event [DateRange]: 08/2015-05/2017: CS [EventDescription] degree #Education DateRange [Date][-Date] 1998-06/01/2000 Date. now is a special keyword [HumanDate|ISO8601|now] 01/30/1888 which means what you think it does HumanDate. Defaults to American formatting (Month/ [m/d-]yyyy 2002 or 01/2002 or 12/25 Day/Year, can be /1901 overridden in header ) ISO8601 format. The T and Z are YYYY-MM-DDTHH:MM:SS:MSZ 1859-05-09T12:01:01Z required. 07/2014: 4th of July in DC https:// ([text]|[Tag]| photos.app.goo.gl/ Event description [Location]|[Link]| d418j6GSkCD5LGmY8 # [Photos])* Travel @sue @greg [Washington, DC] (location) Tag #[tag name] 1999: The Matrix #Movies [location name] 02/23/1836: Battle of Location (location|map) the Alamo (The Alamo, TX)[map] 05/25/2021: [cascade.page](https:// Link [display text](link) cascade.page) featured on [Hacker News](https:/ /news.ycombinator.com/ item?id=27282842) Photos. Has to be a 07/2017: 4th of July in public link! d418j6GSkCD5LGmY8 is supported. Reference. Reference 09/2019: Dinner with and link to other @[other cascade name] @karl or 2020-2022: cascades. COVID-19 Pandemic @jenny /covid @covidcascade Comment //[text] // this is a comment Saving and sharing To save a cascade to your computer, click the Save... button while on the Editor tab of the sidebar. It will be saved locally, and you can come back and edit or view it later, as long as it's on the same device. You can view cascades that you've saved from the profile tab of the sidebar. To share a cascade with a link, you will need to make an account. You can make an account by sending yourself a signin link from the profile page. Once signed in, you will need to choose a username from which your cascades will be hosted. For example, if you choose the name jeff, all your cascades will be accessible from https:// cascade.page/jeff/.... If you share a cascade with the same name as your username, it will be accessible from https://cascade.page/[your username]/, otherwise, it will be accessible from https:// cascade.page/[your username]/[cascade name]. All in all, the steps are: 1. Send yourself a signin link from the profile tab. 2. Click the link to login. 3. Choose a username - all your shared cascades will be available from https://cascade.page/[your username]/... 4. Share your cascade Public by default Any cascade you share is public by default - anyone could view it. Any cascade you save locally only on your computer is, of course, only accessible on that device. About Make a timeline Resources Readme License AGPL-3.0 License Stars 185 stars Watchers 5 watching Forks 17 forks Releases No releases published Packages 0 No packages published Contributors 2 * @kochrt kochrt Rob Koch * @nwtgck nwtgck Ryo Ota Languages * Vue 64.2% * TypeScript 33.6% * JavaScript 2.2% * (c) 2022 GitHub, Inc. * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.