Hello Bar Syndication

[thetwopct]

• The hello bar JS file is generated/updated when Hello Bar settings are updated in Settings. Any change to the content or the function needs to have the Settings saved again to regenerate the latest version of the file.
• My thinking was that we could keep the Hello Bar embed on microsite, as the Show option will turn it on or off (it blanks the JS file). Pondered over this approach but figured it would work.
• The JS file generated and put in to uploads:

https://pr-886-cncfci.pantheonsite.io/wp-content/uploads/hello-bar.js

Above script is implemented on Glossary preview site via this PR

Outstanding:

• UTM tracking question
• Might have to remove or dynamically include z-index on the banner (need to test with menu on Jobs site/Shop)

[cjyabraham]

Looks good. Here are some comments:

1. Some time ago we had issues with Fastly over-cacheing images in the uploads directory. I wonder whether we may have similar problems with over-cacheing of this js script resulting in the hello bar persisting on subsites longer than we would want. This doesn't seem to be a problem on dev sites, as noted in that issue, but we should test when we deploy live. If it is a problem, we could go back to using an API call which can be cached in the user's browser with more precision. Alternatively we could try adding a dynamically added ?v=2024-08-22 date to the end of the script url on the subsite so that it would try and force a cache reset once/day.
2. Should we have a separate checkbox to make deploying the hello bar to subsites explicit, rather than tying it in with deploying the hello bar on the main CNCF site?
3. For setting the utm_source correctly for each subsite, would this code work?
4. I don't think it's a priority to run this bar on the jobs board, community site or store since we already have separate mechanisms there for advertising. Well, we don't currently have an ad on the store but I assume we could add one easily enough.
5. There's a FOUC when the page loads as the hello bar is added and pushes down the header. I assume that's unavoidable due to needing to wait for the script to run, however, might look better if you could animate the hello bar to unfurl and smoothly lower the nav?
6. When you scroll the page, there's a gap as the hello bar scrolls off the page and you can see the background behind it:

Since we've already forked this version of the docsy theme, I think it'd be ok to hack into the way the navbar works, if necessary, so we could get a better implementation of the hello bar that scrolls together as one piece, like the one on the CNCF site. Do you think that's achievable?

7. When you go to an anchor that is part-way down a page, such as this one, the topnav doesn't reposition to be at the top of the browser but leaves a gap:

[cjyabraham]

I've addressed 3, 6, and 7. I'd say we could try deploying it to test issue 1?

[thetwopct]

2 - Yes there are many options we can introduce.

4 - OK, the sites where the bar is to be used was not clear in the task specification. I was working on the basis of all sub-sites as per the all-CNCF page. If it's just Hugo sites that changes the parameters somewhat.

5 - is that FOUC? The bar is coded to be inserted once it's loaded. I would think that's a layout shift issue, but even animating the height would trigger that I believe. I could add some kind of effect on it (animating the height), strictly speaking we would then need to turn that off depending on a users browser settings for animations.

Perhaps with this new information about the cache and Hugo only compatibility requirements this isn't the approach to take.

[cjyabraham]

To address issue 1 I've started a new PR that keeps the API call in place so that cacheing can be precisely controlled. I've combined it with some of the code from this PR.