BioSchemas
T7a6 Breadcrumbs
As raised in issue 695, Cologne Hackathon task T7a6 is to add breadcrumbs across the Bioschemas website. We were advised to use Bootstrap (version 5.1 is already used) and to add page frontmatter metadata to determine the locations rather than rely on directories/paths.
I have implemented breadcrumbs on most of the site, with a few exceptions and one workaround (described below). The homepage is unchanged. I have also fixed a few menu items which were put into the wrong order in a previous PR #836.
Fly-out submenu workaround
I've also considered task T7a4: Fly-out submenu navigation, issue 697. There was no flyout menu directly in the Bootstrap code, it would require much work with Javascript to borrow from elsewhere then thoroughly test. So I have instead put the nested menu items into one level deeper ul which means they display with a bullet. I believe this is clearer. I'm looking for feedback on this too.
Breadcrumbs implemented fully
-
/tutorials/Getting Started (22 pages) -
/developer/Deploy & Develop (2 pages) -
/community/Community (5 pages) -
/groups/Community > Groups (26 pages) -
/about/About (4 pages) - Several index pages mentioned later.
These pages have additional front-matter page metadata to describe which breadcrumb to show. They use the default layout which calls the new breadcrumb.html include file. The new <nav> item uses the same design as the side menu boxes (tea green with rounded corners and shadow).
Breadcrumbs working fine, displays slightly off
-
/profiles/Specifications > Profiles -
/news/Community > News -
/meetings/Community > Meetings -
/useCases/Community > Use Cases
These pages have a non-default layout (except their index pages). There are too many pages to add the front-matter to each of them, and I am not touching the mechanics of the specifications. I included the same breadcrumb.html file as with the default layout pages, but since it is called from the layout pages later, there it is too late to set the page metadata, so there are parameters passed to the included file with the same fields. Unfortunately, it is only possible to call the include from within the <main> element, so there is an extra margin above the navigation which I cannot remove. Operationally, the links work fine, but it is a little jarring to see the space appear and disappear when navigating between affected and unaffected pages.
The Profiles pages work, though they show the breadcrumb with the profile version number but not its name. This is because the page title metadata of a profile is just the version number, without the title of the profile. I believe this to be an error of the profile implementation which is highlighted by my new code. I'm not going to work around it. Perhaps we should raise this matter separately?
Breadcrumbs not working
-
/types/Specifications > Types -
/properties/Specifications > Properties.
These pages do not define a layout at all (except their index pages which use default). They are part of the specifications code which I am not touching. So I cannot add breadcrumbs to these.
Screenshots
I've improved the difference in non-default layout pages. Now, the breadcrumb is at the same height wherever it appears (using CSS transform). The width is still a little different on the non-default pages (described above). I think this is much less jarring now.
@PhilReedData is this PR ready to go for revision? If yes, could you please remove the "draft" tag? thanks
This is how it looks for the page /profiles/ChemicalSubstance/0.4-RELEASE. Is the profile name missing?
The profile name is missing in the breadcrumb for all profiles. I used the page title, the same attribute used to populate the <html><head><title> field. All profile pages work this way, they show the version number in the html title but not the name of the profile. You normally see the html title in the browser tab/window. This issue is made more visible in the breadcrumbs.
Can we change the page title for the profiles to include the profile name before the version? That would be applied to the html head title and also to the breadcrumb. I don't know where that change would be required, presumably there is a script which generates the html for each profile?
... or should there be another level between, like Home > Specifications > Profiles > ChemicalSubstance > 0.4 Release?
@PhilReedData is this PR ready to go for revision? If yes, could you please remove the "draft" tag? thanks
It is nearly ready to go, I wanted to check about the profiles, types and properties pages first. It may be easier if I remove the Profiles breadcrumbs for consistency (since there are no breadcrumbs for types and properties), then I could remove the draft tag?
I've removed the breadcrumbs from the Profiles pages since it isn't working.
From the layouts/profiles.html page, I no longer add this first line after the frontmatter:
{% include breadcrumb.html title1="Specifications" title2="Profiles" link2="/profiles/" %}
Later (in a future PR), we can either:
- Update the html head title include the name of the profile, or
- Write a more complicated layout script that makes the profile name appear as a separate crumb in the breadcrumb, eg Home > Specifications > Profiles > Beacons > 0.4 Release. (That is more work than I can do now.)
- Perhaps this solution could be extended to support Types and Properties too.
Discussed in https://github.com/BioSchemas/bioschemas.github.io/pull/826 I have implemented the agreed change as part of this PR instead. Replace the link in the navbar menu 'Markup Generator' to the DDE one, replacing the deprecated one.