Epiverse-TRACE websites redesign

[Bisaloo]

We currently have a large number of pages on https://epiverse-trace.github.io/, built with a variety of frameworks:

• epiverse-trace.github.io is a quarto blog/website
• blueprints is a quarto book
• packages have pkgdown documentation websites (e.g., https://epiverse-trace.github.io/linelist/)
• tutorials are based on the Carpentries' workbench (e.g., https://epiverse-trace.github.io/tutorials/)

This has led to a lack of visual harmony across the different pages, and lack of clarity that they belong to the same project. The website redesign addresses this by applying consistent graphical design rules across the different sites/frameworks.

The redesign is planned to be live on Tuesday 14 November but it can already be beta-tested. In particular, maintainers should test the impact of the redesign on the websites associated to the repositories they are responsible for.

Please report any issues here so we can triage them between blocking & non-blocking for the deployment. In particular, please focus your feedback on how the redesign may be breaking a site and make it less usable or accessible.

Here are the instructions to preview the redesigned pages:

Quarto book (blueprints) & Quarto website (epiverse-trace.github.io)

Switch to the epiversetheme branch and run quarto preview.

pkgdown websites

Install the epiversetheme R package from the dev branch and re-render the pkgdown website. To do so, go to your project folder and run:

pak::pak("epiverse-trace/epiversetheme@dev")
pkgdown::build_site()

Carpentries' workbench lessons

Install the varnish R package from our fork and re-render the lesson materials. To do so, go to your project folder and run:

pak::pak("epiverse-trace/varnish@epiversetheme")
sandpaper::serve()

[bahadzie]

Will this be a good time to incorporate dark mode support in our websites?

I've switched to dark mode for over a year, both online and in Ubuntu (Settings, Appearance) and on my mobile phone and I find it difficult to view website that don't support it natively.

It's one of those one way changes. Once you switch you don't know how you survived previously.

The bslib page now supports dark mode. Here is the issue thread from their GH that includes a PR for implementing dark mode which we can include in {epiversetheme}

Happy to submit a PR if we are going to support it.

[Bisaloo]

Thanks for the feedback!

I would definitely be interested in this from a personal point of view but it seems like a non-trivial change to get it fully right and keep the visual identity. So let's get this change out of the door first and add the dark theme in a second step.

Couple of timing considerations:

• let's wait until it's on main in r-lib/pkgdown so they iron out all issues, and so we don't have to install from a branch that may go out of date
• we need to synchronize this change in pkgdown websites with the same change in the quarto repositories & the workbench repositories

I'll also coordinate with David to get guidance on what an Epiverse dark theme should look like.

[pratikunterwegs]

I would agree with Banky and push back on it being a non-trivial change. The {preferably} package provides a theme that switches based on users' system-wide settings, so I would expect that it should be possible to build off this.

[joshwlambert]

I can confirm that all the packages I maintain render correctly. Nice work on the redesign!

[bahadzie]

I can confirm that numberize renders correctly.

[jamesmbaazam]

I can confirm it renders correctly for {epichains} and {bpmodels}. However, there is an overlap between the last letter of the package and the colon. See screenshots. The alternatives would either to either remove the italisation but alternatively apply a bold format to the package name as in the screenshot.

[Bisaloo]

Thanks for the note. It looks like this problem was already present but is exacerbated by the next font.

Unfortunately, I cannot selectively style this element as there is no way to select it. My first reaction would probably be to recommend sticking to the tidyverse style: package names are not styled (no italics, no bold). I'll keep thinking if there is another solution.

[Juanmontenegro99]

Hi!, I can confirm it renders correctly for {epiCo}.

[pratikunterwegs]

This theme works for the packages I maintain.

I don't think the new design is good, and I would recommend sticking to the default options provided by {pkgdown} via Bootswatch. The default theme includes an option for a black nav bar and it must be possible to add a logo with a link as well. I would also recommend not specifying a font, but rather defaulting to system fonts. The dark grey colour used for the package version does not have enough contrast with the nav bar.

[Bisaloo]

Thanks for the report, the version number colour has been updated.

[avallecam]

On the workbench side, I found some interesting things to share.

First, in full size, it renders ok. I like the white letters over a dark background, this makes the names of the navigation bar much more visible due to colour contrast.

However, I noticed that the title of the lesson is omitted in the output. I refer to the one that is configured in the config.yaml file, example for tutorials repo and a workshop repo. Please see figure below:

Also, when I moved the window to half of the screen, the format disappeared and the organization logo got lost in the white background. But then I was able to read the lesson title, "Epiverse-TRACE" in this example. The threshold appears when the width of the page makes the navigation bar hide in a navigation box in the upper left corner. See the figure below:

Now that the logo will have the full name, we can think of replacing the current title (issue created), but the organization is also hosting other lessons on different topics, so probably we need to keep it visible.

Edit: Does moving the window to half of the screen replicate how it looks on a cellphone?

[avallecam]

Minor note: While testing this half-scree behaviour with the navigation bar now as a navigation box, after opening this navigation menu:

And then closing it with the X in the upper right corner, sometimes it gets like this, white a blank space between the top and the content far below:

But this also happened with the other sites online (web 1, web 2) at the same moment and under the same size conditions, so we should not worry about it. This was solved by refreshing the page. Just reporting in case you also find this.

[Bisaloo]

Thanks for the report! Having other examples of lessons definitely helped. All issues should be fixed now.

[avallecam]

Thank you, I confirm they are solved.

One additional observation. In the movement of the window to the half of the screen, we lose the logo on top. That logo is also visible when we open the tutorial in a cellphone.

Here is the default style:

Here is how it looks:

[GeraldineGomez]

Hi, I can confirm it renders correctly for {sivirep}, {vaccineff} , and {serofoi}. However, the package names appear in black, making it impossible to visualize them in the header. I've tried building the sites several times and visualizing them in different browsers.

[ntorresd]

Hi! I confirm it renders correctly for {serofoi}. I don't seem to have the same issue as @GeraldineGomez in the name of the package though.

[davidsantiagoquevedo]

Hi! Works for {vaccineff}. The name of the package is rendered correctly in my case.

[Bisaloo]

Hi Geraldine, thanks for the report! I've noticed this issue in the screenshot @Juanmontenegro99 posted and it has been fixed yesterday. All should be fine if you update epiversetheme:

pak::pak("epiverse-trace/epiversetheme@dev")

[Bisaloo]

The Harmonization step of the redesign is complete. Middle- & long-term suggestions from this thread, in particular the dark theme, have been written down for potential future next steps.

I'm closing this discussion thread. Please open any issues in the relevant repositories from now on.