create IOOS parent navbar for WebCRs

bbest commented 2 years ago

See WebCR_IOOS_structure - Google Slides:

Seperate _site.yml to generate navbar.html. See:

bbest commented 2 years ago

Hi @superjai,

Might you have availability to look at this issue? My antigen test for covid came up positive. Jenn & Chris are presenting to NMS leadership Wednesday and we're hoping to have a demonstration of this.

I mostly sorted the structural elements me thinks but am feeling feverish and foggy to continue:

Include IOOS menu as __navbar.html and _site.yml configuration:

output:
html_document:
includes:
  before_body: __navbar.html

Use regular navbar configuration for regular website content, e.g. CINMS, in _site.yml:

navbar:
title: "My Website"
left:
- text: "Index"
  href: index.html
- text: "About"
  href: about.html

Make manual tweaks to HTML, e.g. index.html, (see commit 3bd992f):

.navbar-2{
  top: 45px;
}
</style>

<div class="navbar-2 navbar...

Ideally the fixed IOOS navbar gets differentiated from the regular website navbar so that these changes can be made simply by CSS referencing differences, e.g. class navbar-ioos or similar.

Resulting in https://noaa-onms.github.io/rmarkdown-website/:

Here are a few more refs:

bbest commented 2 years ago

from @superjai:

Hi all, I thought I would give you all an update on the whole "updating the Web CR's to include the IOOS navigation bar" thing. Unfortunately, the task has proven to be a little tricky (meaning, I couldn't do it). The task given to me was to take the top navigation bar from the following site: https://noaa-onms.github.io/ and then to replicate that navigation bar on the top of the Sanctuary Web CR's, such as the following: https://noaa-onms.github.io/cinms/

If you take a look at both sites, you'll find that they have a different look and feel (different fonts, layout, etc.). Much of this difference is caused by the fact that the Web CR's use a different theme (a theme called Lumen) than the IOOS site (a theme called Yeti). The trouble is that code incompatibilities between Lumen and Yeti mean that you can't just copy and paste navigation elements from one theme to another.

There is an underlying Javascript library that is a pretty key part of the functionality of both themes, which is known as Bootstrap. The trouble is that Lumen is using version 3 of Bootstrap and Yeti is using version 5. These versions of Bootstrap are pretty different and, consequently, the code you build on top of each of these versions also looks pretty different. This is why you can't really copy and paste features from a Yeti theme (the IOOS site) into a Lumen theme (the Web CR's). I should mention that I did vainly try to copy and paste though in multiple ways - failure.

The simplest solution is to swap the theme of the IOOS site from Yeti to Lumen. By doing so, everything will be using the same theme, and copying and pasting features back and forth should be no problem. The only issue is that the Lumen theme doesn't look exactly the same as the Yeti theme - hence the look and feel of the IOOS site would change to an extent.

I figure it would be worth a conversation to see if you wanted to go forward with my suggested approach. Perhaps you have a better idea. Jai

bbest commented 2 years ago

from Jenn Brown:

Hi all (added Pike to this message to keep him in the loop),

Jai - thank you for looking into this on such short notice and for providing a clear explanation of the issue. I am not sure that we have the latitude to alter the IOOS site look from Yeti to Lumen so I wouldn't say we head down that path without a discussion with IOOS.

Alternatively, I am wondering whether it would make sense to change the WebCRs from Lumen to Yeti. Is that idea fairly straightforward and quickly applied or would it be time intensive or possibly cause a breakdown in other features, etc.?

I am curious to hear your thoughts on my question above but don't think we should rush into a decision just to accommodate the presentation today. I am confident that Chris and I can give a good overview and demo today given the changes you were able to accomplish yesterday. Thank you Jenn

bbest commented 2 years ago

from @superjai:

Hi Jenn, The theme of the WebCR's could certainly be changed to Yeti, but it is unclear to me how straightforward the theme change process would be, without doing some testing. My main concern would be to determine if the theme change causes something (or somethings) to break in the WebCRs. So, yes, I agree that this is a decision to be made at a later point.

I also fixed the title issue in the IOOS landing page that you mentioned in another email. Jai

bbest commented 2 years ago

Hi @superjai,

I don't believe themes are so much the issue here, not that there will be some inevitable quirks to be fixed with translating to a different theme. You can now easily customize to any color, font, etc with bslib, the Bootstrap library for R. For instance, see Custom themes - Get started • bslib. Also, much of the IOOS specific colors, fonts and even disappearing top logo we sorted out here:

sanctsound.ioos.us
- with bslib settings in _site.yml

The bigger problem is getting two navbars to show up and play nice with each other, e.g. CINMS-WebCR and Sanctuary-IOOS. I was able to inject the IOOS navigation within the _site.yml using the directive includes: before_body: _navbar-ioos.html, while still allowing the navbar: configuration to generate the CINMS site menu. The problem was that the two menus wrote on top of each other, so I had to distinguish one from the other with some CSS, except they both have all the same classes and its the first auto-generated menu from the navbar: that is the CINMS one that I need to move below the IOOS one. Then I realized I could do this with a little JQuery directive with the following _site.yml:

name: "Channel Islands WebCR"
navbar:
  title: "Channel Islands"
  left:
    - text: "Deep Seafloor"
      href: deep-seafloor.html
    - text: "Kelp Forest"
      href: kelp-forest.html
    - text: "Pelagic"
      href: pelagic.html
    - text: "Rocky Shore"
      href: rocky-shore.html
    - text: "Sandy Beach"
      href: sandy-beach.html
    - text: "Sandy Seafloor"
      href: sandy-seafloor.html
output:
  html_document:
    theme:
      version: 5
      bootswatch: yeti
      fg: '#003087'
      bg: '#FFF'
    css: _styles.css
    includes:
      before_body: _navbar-ioos.html    # HTML for IOOS menu
      after_body: _navbar-update.html  # JavaScript to update menus

So the _navbar-ioos.html contains the navbar for IOOS and _navbar_update.html does a little JQuery magic to add the CSS class navbar-lower to the first autogenerated CINMS menu with:

<script>
$('.navbar').first().addClass('navbar-lower')
</script>

This navbar-lower then gets lowered 45 pixels per _style.css:

.navbar-lower{
  top: 45px;
}

I renamed the Github repository of my original experiment which borrowed from RStudio's demonstration of using a fixed _navbar.html from rmarkdown-website to double-navbar. It still looks a bit janky (white spaces on IOOS menu; dropdowns of IOOS menu appear behind CINMS menu), but the basics are there:

https://noaa-onms.github.io/double-navbar/

noaa-onms / noaa-onms.github.io

create IOOS parent navbar for WebCRs #2