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]

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

Name	Link
🔨 Latest commit	294fa1c
🔍 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:

• fix dead link in news, the github workflow to check link is already in place, another advantage of using sphinx! ;)
• 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
• 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.

[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 hyperspy/jupyterlite-hyperspy#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)
• adjust the columns setting to play well with changing the width of the page

[ericpre]

To be reverted/updated before merging.

Suggested change

	if: ${{ github.event_name != 'pull_request' && github.repository_owner == 'ericpre' }}
	if: ${{ github.event_name != 'pull_request' && github.repository_owner == 'hyperspy' }}

[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 Update Website #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!