Add getting started and installation instructions to the welcome page

[weiji14]

Editing the front page to include a one-click Binder link to run the Jupyter notebooks, and steps for people to get a conda virtual environment set up locally for the AGU24 pre-conference workshop.

Screenshot

TODO:

• Adding quickstart binder button and installation instructions
• Add sphinx-design cards in 3x2 grid layout for the 6 tutorials
• Include thumbnails of the best looking figure in each tutorial (do after all tutorials are ready)
• etc

References:

• Based on Add getting started and installation instructions to the welcome page egu22pygmt#10
• Sphinx design cards - https://sphinx-design.readthedocs.io/en/sbt-theme/cards.html

[yvonnefroehlich]

Not sure about this; I would prefer to include "choropleth map"

Suggested change

	{bdg-info-line}`airbnb`
	{bdg-info-line}`choropleth map`

[weiji14]

Yeah, I could use some advice on what tags/badges to add. My current thought process is to include:

• bdg-primary: pygmt or gmt
• bdg-primary-line: GMT module used (e.g. coast, plot, etc)
• bdg-info: External library used (e.g. pandas, xarray)
• bdg-secondary-line: GMT remote-dataset used (e.g. earth_relief, earth_age, etc)

The {bdg-info-line}`airbnb` here was intended to show external non GMT remote-datasets used, but I do agree that having AirBnB here looks weird. We could maybe add some tags for concepts being taught such as choropleth-map as you suggested, or scatterplot, etc.

Ref: color of badges/tags: https://sphinx-design.readthedocs.io/en/sbt-theme/badges_buttons.html#badges

[yvonnefroehlich]

Yep, I got your main idea behind the structure of these tags / badges and I definitely like this idea! And I think mentioning special concept / specific visualization is a good addition.

Even the file contains "airbnb" currently the column “population” is used for the choropleth-map (there are a lot of different columns / quantities in this dataset).

[weiji14]

Ok, spent way too much time on the grid layout, but this PR is finally ready for review! Screenshot of the thumbnail images on the front page:

Had to do mamba install 'pydata-sphinx-theme=0.15.3' to get the left sidebar to hide away properly (xref jupyter-book/jupyter-book#2160). I might pin that dependency later, but otherwise, please review this and I'll try to merge this tomorrow.

[yvonnefroehlich]

Just a few typo fixes for now - but this looks already very nice @weiji14 🙂! Will give this PR a more detailed review later the day!

[yvonnefroehlich]

Suggested change

	:::{grid-item-card} Tutorial 2 - Integration with the Scientific Python Ecosystem: Pandas / GeoPandas
	:::{grid-item-card} Tutorial 2 - Integration with the scientific Python ecosystem: pandas / GeoPandas

[jhtong33]

I guess @weiji14 try to maintain consistency across all titles by capitalizing the first letter of each word throughout the page. Maybe it's just to ensure consistency on this page or to align with the style used in EGU22?

[weiji14]

I'll take @yvonnefroehlich's suggestions on capitalization, we should try to match with the titles on the left side bar too.

[yvonnefroehlich]

Thanks, @weiji14, for working on the introduction page. This looks nice 🙂!

I personally like equal-sized cards more, at least a common horizontal line at which the upper edges of the cards of one row align. But if this is difficult to set up, we can leave the layout as is. Also for the EGU workshop, the height of the cards scales with the size of the images (please see https://www.generic-mapping-tools.org/egu22pygmt/intro.html).

[weiji14]

Thanks, @weiji14, for working on the introduction page. This looks nice 🙂!

I personally like equal-sized cards more, at least a common horizontal line at which the upper edges of the cards of one row align. But if this is difficult to set up, we can leave the layout as is. Also for the EGU workshop, the height of the cards scales with the size of the images (please see https://www.generic-mapping-tools.org/egu22pygmt/intro.html).

Yeah, so the previous EGU22 short course used sphinx-panels which is now deprecated in favour of sphinx-design (see https://sphinx-design.readthedocs.io/en/sbt-theme/get_started.html#migrating-from-sphinx-panels), and I couldn't quite work out how to get 2 rows with a range of different heights to look nice (the EGU22 one only had 1 rows which was easier). I did try with equal-height cards per-row, but because each thumbnail figure has very different heights (e.g. Tutorial 4 had an extremely tall figure, compared to Tutorial 5 which is very short), there would be a lot of whitespace that didn't look very nice, so I've adapted the grid layout in commit ecf863f.

I'll merge this in first, so we at least have the installation instructions on the website (and @maxrjones can send the email to the participants). If anyone has time to alter the thumbnail layout, feel free to do that (but I'm guessing there are more important things to fix before that)!

[yvonnefroehlich]

I personally like equal-sized cards more, at least a common horizontal line at which the upper edges of the cards of one row align. But if this is difficult to set up, we can leave the layout as is. Also for the EGU workshop, the height of the cards scales with the size of the images (please see https://www.generic-mapping-tools.org/egu22pygmt/intro.html).

Yeah, so the previous EGU22 short course used sphinx-panels which is now deprecated in favour of sphinx-design (see https://sphinx-design.readthedocs.io/en/sbt-theme/get_started.html#migrating-from-sphinx-panels), and I couldn't quite work out how to get 2 rows with a range of different heights to look nice (the EGU22 one only had 1 rows which was easier). I did try with equal-height cards per-row, but because each thumbnail figure has very different heights (e.g. Tutorial 4 had an extremely tall figure, compared to Tutorial 5 which is very short), there would be a lot of whitespace that didn't look very nice, so I've adapted the grid layout in commit ecf863f.

No worries. I already thought based on the comment "spent way too much time on the grid layout" that you already tried different layouts 🙈.
If people really want to work with the materials and play around with the codes, they will download the JNs. So, I do not think the layout of the cards is too important, and we should focus on more relevant aspects first.