spinnaker.io icon indicating copy to clipboard operation
spinnaker.io copied to clipboard

docs(infra): Upgrade Docsy and Hugo

Open aimeeu opened this issue 2 years ago • 0 comments

Fixes: https://github.com/spinnaker/spinnaker.io/issues/377 Upgrade Docsy to 0.7.1 as a Go module. Upgrade Hugo to 0.110.0, which is the minimum version required by Docsy. I didn't upgrade to the latest Hugo because Docsy hasn't been tested with it yet.

Note: --minify in the build command causes failure

  • moved custom script out of partials/scripts.html and into partials/hooks/head-end.html; scripts.html is a theme file and should not be overridden https://www.docsy.dev/docs/adding-content/lookandfeel/#add-code-to-head-or-before-body-end
  • NEED TO REMOVE partials/navbar.html -> this is an override of the theme file, which is not ideal. The only custom code in partials/navbar.html is fetching the Spinnaker logo. That logo should be an SVG file located in assets/icons. Once we have a new SVG logo in the correct place, we can remove partials/navbar.html. https://www.docsy.dev/docs/adding-content/iconsimages/
  • Removed files that overrode theme files for no reason
  • Removed docs.scss because it messed up the docs pages layouts

There is an awful lot of custom CSS, and this is causing issues with the landing page. The latest version of Docsy uses a newer version of Bootstrap than when this site was ported to Hugo/Docsy 3+ years ago. I'm not a front end developer so CSS at this level is really not in my skillset.

What's broken:

  1. Landing page CSS
  2. Promo banner

The landing page was implemented as a template (partials/index.html). Looks like this was done to be able to iterate through and render the data in data folder. The index template is all CSS styling rather than Docsy's blocks shortcodes because you can't use shortcodes in templates. The landing page has some sections that are supposed to display data in card format (and it's broken). Docsy has a new Card shortcode, but we can't call that in the index.html template. Bootstrap 5 also has a card component, so I'm wondering if the spinnaker.io's custom CSS (assets/scss) is overriding the Bootstrap styles.

The landing page jumbrotron image is supposed to look like: image

but instead what happens is the text appears for an instant and then is gone - poof! Also I can almost see the "Spinnaker" site title, so again I think this is a CSS issue. I don't know why there is so much custom styling overriding the core theme components' styling. image

aimeeu avatar Sep 07 '23 16:09 aimeeu