Build a simple timeline with sphinx-design#

One of the nice things about MyST Markdown is that it is extensible. Any Sphinx extension will work with MyST Markdown (in the context of Jupyter Book, anyway).

One of my favorite Sphinx extensions is Sphinx Design, this brings you flexible UI components that use Bootstrap CSS under the hood (though without heavy javascript). They let you do things like this:

A card!

With some content!

A second card!

With some more content!

I wanted to have a nice-looking timeline for my blog, and it turns out this was surprisingly easy to do with Sphinx Panels and a bit of custom CSS. You can check out my about page for an example, or see the little example below:

2020

2020 body

2017

2017 body

2011

2011 body

2009

2009 body

````{grid} 2
:class-container: timeline

```{grid-item-card}
:class-item: entry left

2020
^^^

2020 body
```
```{grid-item}
:class: right
```
```{grid-item}
:class: left
```
```{grid-item-card}
:class-item: entry right

**2017**
^^^

2017 body
```
```{grid-item-card}
:class-item: entry left

**2011**
^^^

2011 body
```
```{grid-item}
:class: right
```
```{grid-item}
:class: left
```
```{grid-item-card}
:class-item: entry right

**2009**
^^^

2009 body
```
````