Implement the middle panes for EU Galaxy servers

NickSto commented 2 years ago

I'm copying this here from #1117, since it outgrew that list.

Basics

galaxyproject.eu provides the middle panes for all the *.usegalaxy.eu servers.

Each of the index-*.md files in the root directory generates a page that's hotlinked from an iframe in a Galaxy instance.

For instance:
index-rna.md generates https://usegalaxy-eu.github.io/index-rna.html, which is the center pane of https://rna.usegalaxy.eu/

Most (all?) of them seem to be for subdomains of usegalaxy.eu.

Static content

The most common pattern seems to be that they contain some intro text, a table with links to relevant GTN tutorials, tables that list relevant tools, and things like acknowledgments, a list of contributors, and citation guidelines.

Dynamic features

But there are a number of elements in these pages which are not contained in the Markdown files, and are instead dynamic features injected by the framework:

Header: Things like server maintenance announcements or the Ukraine support message
- These seem to be the same on every page.
{{ page.website }}
- Many pages use this variable notation, which expands to the galaxy server's domain (e.g. https://rna.usegalaxy.eu).
- This is set in the .md file metadata header.
- We could just replace these with hardcoded strings. It's pretty easy to Replace All if the domain ever changes.
- Or we could use a similar syntax that vue-remark provides: {{ $frontmatter.website }}
page.subdomain
- This is also set in some pages' metadata, and not directly referenced in the content. But it's used in the tool.html include.
Footer: Things like the data retention policy and a widget showing the currently running jobs (jobs_graph.html)
- Same on every page.
They also include the site-wide footer present on every galaxyproject.eu page.
Finally, 11 of the middle panes use the tool.html function to generate tool urls (see below)

Exceptions

28 of these 32 pages follow the above patterns, but 4 do not:

galaxy/index.md: This includes the header and footer, but the body is dynamic, not static content: the homepage carousel, plus recent news and events.
index-metabolomics.md: Normal except that it also includes the same dynamic stuff that galaxy/index.md does.
index-proteomics.md: Same. It also includes a Twitter widget, but using static HTML.
index-live.md: Ditches the header and footer, replacing it with a totally custom page. At least it's all static. But it's all HTML.

tool.html

11 pages use _includes/tool.html to translate a tool id to its url on the Galaxy instance:

index-cheminformatics.md
index-climate.md
index-erasmusmc.md
index-graphclust.md
index-humancellatlas.md
index-ml.md
index-nanopore.md
index-rna.md
index-singlecell.md
index-spatialomics.md
index-virology.md

This requires looking up the id in the https://github.com/usegalaxy-eu/website/blob/master/_data/tools.yml database (and knowing the domain name of the Galaxy instance).

Details are here: #1410

NickSto commented 2 years ago

The tool.html/tools.yml issue is now tracked in #1410.

NickSto commented 2 years ago

Links

One major consideration: navigation from the middle panes. I.e. what happens when a user clicks an internal link in the middle pane?

Currently, on the .eu-hosted pages, they get taken to a navbar-less plain.html version of the post. The response to #1385 will determine if we need to also do this. Otherwise, we could just add target="_blank" to every link.

Implementation

So how would we actually add the target="_blank" to every link? It's actually not trivial when you think about it.

Option 1

Just add {: target="_blank" } to every link in each Markdown file.

Pros: Simple, allows maximum customization (we can choose which links to apply it to). Cons: Painstaking, manual, verbose.

Option 2

Add a <base> tag to the HTML?

Apparently you can use this element to set a default target on every link in the document.

But I'm not even sure if this would work. It looks like it's only allowed in the <head>, meaning we can't just stick it in the BareArticle template. Instead we'd have to do messy things to get it into the <head>, but only on BareArticles.

Pros: Automatically applies to all links on the page Cons: Hidden magic, no per-link customization, hacky or impossible to get it into the <head>.

Option 3

Add a client-side bit of Javascript that adds target="_blank" to every link in the Markdown.

Pros: Relatively simple, automatically applies to all links, slightly customizable Cons: Kludgy

NickSto commented 2 years ago

Update: Apparently almost* every EU Member Site has its own middle pane, and they all seem to list news and events.

*elixir-it doesn't have one.

Site	Galaxy instance	Notes
freiburg	?
erasmusmc	erasmusmc.usegalaxy.eu	Landing page doesn't use the middle pane.
belgium	usegalaxy.be	Instance currently serving a redirect loop.
pasteur	galaxy.pasteur.fr	Landing page doesn't use the middle pane.
genouest	galaxy.genouest.org	Private instance.
ifb	usegalaxy.fr	Landing page doesn't use the middle pane.

@bgruening @beatrizserrano Do you know if/where these middle panes are used in these Galaxy instance? Because I haven't found them in use yet. Maybe traffic stats for each of the middle panes could show whether they're used.

galaxyproject / galaxy-hub