Upgrade website to Docsy 0.10.0 and Hugo 0.134

[SayakMukhopadhyay]

This PR updates Docsy to the latest version available and makes it compatible to use with the latest Hugo.

In details, the following are the changes:

• Updated the docsy submodule to use v0.10.0 tag
• Updated dependencies in the package.json to the latest autoprefixer and postcss-cli and added postcss which is needed by postcss-cli now.
• Update the Hugo version in netlify to 0.134.3 and added NODE_VERSION = 20.16.0 env var to force netlify to use the current LTS of Node.js as older versions won't be able to compile native code in some of the dependencies. (If this value is configured on the infra side, we should look into either updating the value there and remove it from here, or remove it from infra and keep it here.)
• Update the Makefile to add a target to download the dependencies of docsy. (WIP: right now, only added as a dependency of the preview-build target to get the CI in the PR to work)
• Partials removed:
  • head.html: it was the same as the theme except without the _internal/google_news.html template. This template has since been removed.
  • navbar.html: it was the same as the theme except removing the minification of the navbar logo due to Hugo not having tdewolff/minify >= 2.7.3. The latest Hugo has v2.20.37 so that removal is not needed.
  • sidebar-html: it was the same as the theme except wrapping an or conditional method with cond method to work with newer versions of Hugo which Docsy was not supporting. The latest Docsy version does support the latest version of Hugo and this wrapping is no longer needed.
• Layouts removed:
  • docs & layout: this layout was an exact copy from the theme with the only difference being the page-meta-lastmod.html partial was removed in the override. But the partial itself doesn't activate unless both .GitInfo and Site.Params.github_repo are truthy, which is not, hence the override is not needed.
  • events: this layout was unnecessary as all the content files in the events folder are using type: docs in its front matter and so the events layout will never be used. And anyway, docs layout and events layout were exactly the same.
• Layouts updated:
  • calendar: updated to the current docs layout provided by the theme while keeping the customization of including some scripts.
  • community: updated to the current docs layout provided by the theme as it was the same before. (The only reason this layout is needed is because all generated files in content/en/community doesn't contain the type or layout in its front matter and thus will default to type: page if a community layout is not created.)
  • resources: updated to the current docs layout provided by the theme as it was the same before. (The only reason this layout is needed is because of a generated file content/en/resource/release/index.md which doesn't contain the type or layout in its front matter and thus will default to type: page if a resources layout is not created.)
• _variables.scss has been updated from the theme. This change is introduced by docsy updating to bootstrap 5 in 0.7.0. This change introduces multiple changes to the default layout, including margins, padding, colors, font sizes among others. _variables.scss has been replace by _variables_project.scss which is the recommended way to customize the variables of Docsy. This file only lists the properties that need to be customized and not everything in Docsy's _variables.scss
• _styles_project.scss has been added to include the CSS to make the copyright statement visible. This is the file that all customisations should go to.
• In the cover page, the color parameter is removed else it is setting the wrong text color.
• The Hugo config has been changed from TOML to YAML. Some properties which are redundant have also been commented out. Also, since FontAwesome was upgraded to v6 in Docsy, the icon names have been updated. Also fixes Update X logo to 𝕏 on the website's footer  #503

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: SayakMukhopadhyay
Once this PR has been reviewed and has the lgtm label, please assign jberkus for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[k8s-ci-robot]

Welcome @SayakMukhopadhyay!

It looks like this is your first PR to kubernetes/contributor-site 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes/contributor-site has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[SayakMukhopadhyay]

The biggest "change" in this upgrade is the fact that Bootstrap was updated to v5 by Docsy. This has led to changes to stylistic elements, mostly padding, margins, text sizes and some colours. I will try to document some of them here. (Left is the current site and right is the PR site)

1. The page title is no longer capitalised by default (see navbar title follows config.toml file (removes uppercase by default) google/docsy#797) but the title and menu items are now aligned.
   
2. In the welcome page, margins are calculated based on screensize instead of being harcoded in bootstrap. Should these margins be changed to reflect the current state? Do note, the current site is using defaults. Also, the link colours are a bit different.
   
3. The blog list also has very minor margin differences. Also, note the slight difference in the link colours. Another difference that is present in all list pages is that the left hand side navigation looks a little different with an underline below the page title instead of the items being indented and the search box being squarish.
   
4. Disabled buttons in pagination also have a different colour
   
5. Feedback buttons look a bit different
   

These are all that I have found out. I am not too sure if there is a need to make the upgrade look pixel-accurate to the current site.

Also, I have another branch that adds some changes that might need more discussion. These changes include

1. Moving to YAML config for Hugo instead of TOML as Docsy itself has moved and well...YAML is the language of K8s right 😄 ? Also, while moving, I figured out which config variables are redundant due to them just repeating the default values. Removing those properties can help make it more maintainable. I have commented those right now but depending on the consensus, I can remove them.
2. Deletion of _variables.scss as it just redefines values in the Docsy theme with maybe a couple of changes. Instead, I have added _variables_project.scss which is the recommended way to customise variables by Docsy. This file only has what is needed to be overridden.

If the maintainers agree with the above changes, I will include them in this PR.

[SayakMukhopadhyay]

/assign @SayakMukhopadhyay

[tokt]

Thank you so much!! This will take awhile to review, sorry.
Personally: +1 on moving from toml to yaml and also on deletion of _variables.scss.

[SayakMukhopadhyay]

Alright, I will bring in those changes from the other branch to make it easier to review. The config file will contain commented properties which are not needed but I have kept them for now to make it easier to review the YAML->TOML change. I can remove them before merging this PR once the format change itself is reviewed.

[chris-short]

This is amazing! Thank you so much. As mentioned, we'll need some time to review all this but, I greatly appreciate the time, effort, and energy.

[SayakMukhopadhyay]

I have tried to make the commits as atomic as possible so if any changes are required, we can drop those commits.

[sftim]

Should we set $primary too?

[SayakMukhopadhyay]

The value of $primary has been the same as docsy and so I didn't change it

site

contributor-site/assets/scss/_variables.scss

Line 20 in cea0531

$primary: #30638E;

docsy
https://github.com/google/docsy/blob/25f73360dc4b72c7606531b37edace0417b40858/assets/scss/_variables.scss#L20

If the primary colour needs to be changed, we can set the $primary and maybe others too.

[sftim]

We should use #326CE5 - see https://github.com/kubernetes/kubernetes/blob/master/logo/colors.md

If we don't use that already, oops, let's get a small PR merged so that we do, and then rebase / adapt this one.
I checked and we seem to use #3176D9. Maybe that's what early Docsy defaults to? I guess that's $primary-light.

[SayakMukhopadhyay]

Sorry, I can't figure out where we use #3176D9. I checked and it cannot be $primary-light as it lightens $primary by 75% which is practically white when $primary is #3063de.

[sftim]

@SayakMukhopadhyay an aside: if you'd be willing to work on part of the equivalent change for https://k8s.io/, I can make time to pair up with you on that.

I'm @sftim on Kubernetes' Slack workspace.

[sftim]

Does this need adapting for make container-server?

[SayakMukhopadhyay]

Yeah, the Makefile needs to be updated. The dependencies target itself is ok but needs to be added as dependencies on docker-server, container-server and production-build. I have not added them as I wanted to know the sentiment regarding overhauling the Makefile. There is a lot of repetition (like git submodule update --init --recursive --depth 1) that can be moved to its own target and used as a dependency. Let me know if its ok to do that and I will make the changes to this PR.

[sftim]

Where possible, split out refactorings like that into their own (separate, smaller) PR.

[SayakMukhopadhyay]

Which is why I haven't made any changes to the Makefile. The dependencies target though is necessary for the latest Docsy and it was needed to get the preview-build target to work and will be needed for the other targets. Essentially, that command creates 2 folders inside themes, FortAwesome and twbs.

[sftim]

Omit this comment, but once you have, comment on this line in your own PR to call out the change.

[SayakMukhopadhyay]

I have removed the comment from the file. Where do you want me to recomment? I have already called out this change in the last line of this PR's description.

Also, what about the other properties that I have commented in hugo.yaml. I have kept those properties commented on to get some feedback, should I remove those properties altogether or should I uncomment them.

[sftim]

community: updated to the current docs layout provided by the theme as it was the same before.
(The only reason this layout is needed is because all generated files in content/en/community doesn't contain the type or layout in its front matter and thus will default to type: page if a community layout is not created.)

Could we add that front matter via the generator? Maybe in a separate PR (which I'd prefer to merge ahead of this one)

[SayakMukhopadhyay]

community: updated to the current docs layout provided by the theme as it was the same before.
(The only reason this layout is needed is because all generated files in content/en/community doesn't contain the type or layout in its front matter and thus will default to type: page if a community layout is not created.)

Could we add that front matter via the generator? Maybe in a separate PR (which I'd prefer to merge ahead of this one)

I plan to work on it but I was thinking of doing it in a separate PR as the current workaround works for now.