Pydata sphinx theme

[ericpre]

Preview at https://ericpre.github.io/hyperspy-website

Alternative to #49 using pydata-sphinx-theme. I have used the current hyperspy banner which doesn't look nice in dark theme but I think that we can do better. I think with some tweaks, we can make it to look nicer, particularly the top part of the landing page.

I found a nice website made with pydata_sphinx_theme: https://www.fatiando.org

This is how the landing page looks like:

And the news page:

[netlify[bot]]

✅ Deploy Preview for bucolic-pixie-58f008 ready!

Name	Link
🔨 Latest commit	294fa1c947fa7a4a58da9f6053280cdca9b0c97b
🔍 Latest deploy log	https://app.netlify.com/sites/bucolic-pixie-58f008/deploys/65a25d1b2482940009b1d95f
😎 Deploy Preview	https://deploy-preview-50--bucolic-pixie-58f008.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jlaehne]

I found a nice website made with pydata_sphinx_theme: https://www.fatiando.org

That is indeed a decent website considering it being built with sphinx.

[ericpre]

This website is nice too: https://www.aiida.net.

I had a go at embedding jupyterlite in the website, it works fine, however it is very small, instead I added the link to jupyterlite-hyperspy.

If we are happy with this approach, the next steps are:

• [x] fix dead link in news, the github workflow to check link is already in place, another advantage of using sphinx! ;)
• [x] update news with recent workshop
• [ ] Improve logos black/write, transparency, etc.
• [ ] improve landing page: width, top part of the page with hyperspy logo and short description
• [x] add README.md and write documentation on how to add news entry

[jlaehne]

The preview link does not work for me.

[ericpre]

Netlify will only work for #49: we will need to use readthedocs for preview on PR but I think that it needs to be merged to the main branch before enabling build on PR. In the meantime, you can download the html code at https://github.com/ericpre/hyperspy-website/actions/runs/7422128052

[CSSFrancis]

@ericpre I looked at this a little bit and this looks like a good option.

One thing to note is that both of those websites use a fair bit of html/ css to get things to look how they want them to. That seems like it might be the case either way we go and I'm willing to do a little bit of web design if needed.

[ericpre]

I set up the github page on my repo to help visualising the website: https://ericpre.github.io/hyperspy-website.

What do you think? Anyone want to have a go at the banner / top part of the page? I don't know how to do that and if someone have some idea, that would save me figuring it out! @CSSFrancis? 😉

[CSSFrancis]

I set up the github page on my repo to help visualising the website: https://ericpre.github.io/hyperspy-website.

What do you think? Anyone want to have a go at the banner / top part of the page? I don't know how to do that and if someone have some idea, that would save me figuring it out! @CSSFrancis? 😉

Sounds good! I'll give it a go.

[CSSFrancis]

@ericpre I gave it a bit of a shot, but I don't know how much I love it so far.

It might be better (and easier) to just put a large banner image up top and not have a little "get started" button. There are lots of html/css elements that you have to control between the custom ones and editing the sphinx ones.

For reference:

Here is what I got when trying to copy the two websites above. Note that the dark light switching doesn't really work which is why the logo background is white.

When I replace the old banner with a newer one we get something like this:

[ericpre]

Thank you @CSSFrancis, this looks much better! Can you please push two different branches for the two screenshots above to see how the code looks like?

[jlaehne]

Thanks for the great work @ericpre and @CSSFrancis. From a first impression, I have a preference for the second of the two screenshots. Both for the font and the centralized banner.

A few thoughts:

• Should we add the demos to the links at the top?
• Should we add something like "including non-uniform axes" to the axes box.
• I don't really like the "fostering of ecosystem", I would rather add something like "with several packages already adding functionality for specific experimental methods."

[jlaehne]

I'm still wondering whether for the ecosystem, a table with small banners instead of the large icons would look better, e.g. like array libraries list on numpy.org:

[jlaehne]

* Should we add something like "including non-uniform axes" to the axes box.

We could also combine the Demos, and Try links on a "Learn" page like at https://www.fatiando.org/learn/ - either including the Documentation or with a separate Documentation link as for https://numpy.org

From https://www.fatiando.org I also like the Community/Contributing and Citing pages.

Such content need not be separate pages, but could come further down on the main page despite being linked from the top? (probably best with different background colors per section).

By the way, our news are currently 90% an "events" section.

[CSSFrancis]

@ericpre the two different ones are

With some html and css: https://github.com/CSSFrancis/hyperspy-website/tree/pydata-sphinx-theme

New logo but pure sphinx: https://github.com/CSSFrancis/hyperspy-website/tree/pydata-sphinx-theme-2

[jlaehne]

For the record, here are three more past workshops/tutorials (I can also do a PR later to include them):

• https://clebic2023.sciencesconf.org/resource/page/id/11
• https://github.com/the-microanalysis-society/2023-IUMAS-workshop
• https://colloque2023.sfmu.fr/index.php/2023/02/20/atelier-3-hyperspy/#pll_switcher

Also the ebeam2024 school will feature an intro and tutorials for HyperSpy:

• https://ebeam2024.sciencesconf.org/resource/page/id/3

Probably more complicated to implement, but I would tend to feature all upcoming events on the main page.

[ericpre]

@jlaehne, for the news, I update with what I could remember off the top of my head. Please push to this branch with some more. I think that this is useful to add them now, in order to give people an idea of where/when they could attend such one of the workshop but also provide the link to teaching materials, etc.

• Should we add the demos to the links at the top?

Currently, each library have their tutorials page. I think that this should be sorted in the https://github.com/hyperspy/jupyterlite-hyperspy/issues/7, maybe rename the button Try to Tutorial in the top bar?

• Should we add something like "including non-uniform axes" to the axes box.
• I don't really like the "fostering of ecosystem", I would rather add something like "with several packages already adding functionality for specific experimental methods."

Yes, this needs some improvement, can you please push to this PR and/or make some suggestion?

I'm still wondering whether for the ecosystem, a table with small banners instead of the large icons would look better, e.g. like array libraries list on numpy.org:

Yes, one limitation with the cards is that it is not possible to add links or badges, for example to put the DOI or the pypi badge.

[ericpre]

• Should we add the demos to the links at the top?

An alternative would be to have a gallery with the a git submodule of other demos/tutorials repositories in the page of this website. One drawback would be that it would make the website "heavier": longer to build, and possibly larger git history.

[ericpre]

I improved the banner with @CSSFrancis's pictures. If we are happy with this approach, there are two things that need tweaking:

• [ ] the light and dark doesn't match exactly (size and position)
• [x] adjust the columns setting to play well with changing the width of the page

[ericpre]

@jlaehne, @CSSFrancis, I would suggest to merge this PR and we can tweak later in future PR. There are two things that can be improved further:

• logo/banner for light and dark theme,
• convert ecosystem cards to table as suggested by @jlaehne above.

[CSSFrancis]

@ericpre sounds good! Let's merge and then we can open some more PRs separately :)

[jlaehne]

Sounds good. I sent out a last PR to this branch. A few more points to consider:

• Increase the size of the logo banner
• Can we change the font (at least the for headlines), e.g. using Noto Sans like in the logo

[jlaehne]

A few more thoughts on the website:

• How about copying the events timeline from https://www.aiida.net/
• Like for https://www.aiida.net/, we could consider splitting news into events and a blog (like proposed by @CSSFrancis in #49) that contains other news as well as blog posts (but then we have to fill both with contents!)

(I think we should allow issues for this repo and open a tracking issue for the ideas we still have)

PS: The website is still a fork of https://github.com/ipython/ipython-website -- if we now use a different framework, we should see whether we can cut that link?

[ericpre]

(I think we should allow issues for this repo and open a tracking issue for the ideas we still have)

Done!