Port Hugo theme to Hextra for the website

[zelfroster]

What does this change

Changes the hugo theme to Hextra for Porter website.

What issue does it fix

Closes #2885

Checklist

• Did you write tests?
• Did you write documentation?
• Did you change porter.yaml or a storage document record? Update the corresponding schema file.
• If this is your first pull request, please add your name to the bottom of our Contributors list. Thank you for making Porter better! 🙇‍♀️

Reviewer Checklist

• Comment with /azp run test-porter-release if a magefile or build script was modified
• Comment with /azp run porter-integration if it's a non-trivial PR

[zelfroster]

@schristoff The theme porting has almost finished, I am fixing the internal links. Way too many need fix 😵, Also, I am running mage -v Docs to build docs and everything works fine, but idk why netlify build is failing. Please help me on that 😅

[schristoff]

Hey!

This is looking amazing. A couple of comments:

• Is there anyway we can make the Porter logo in the left hand corner larger - and the favicon is currently the Hextra logo (we would love to have it the Porter logo!)?
• It would be cool if we could change the colors to align more with the Porter colors, especially with the white themed website. But we can work on this later!
• Can we delete the "Why Porter" section on the front page, and just have the "What is Porter" and "When Porter"
• Lastly, I've found some icons for the "When Porter" section for each section. If you could add these, it would be greatly appreciated! If not, let me know :) (I'll add the new porter emojis into here too)

I am so excited for this redesign thank you for doing all this work

[zelfroster]

Is there anyway we can make the Porter logo in the left hand corner larger - and the favicon is currently the Hextra logo (we would love to have it the Porter logo!)?

I increased logo size, but the favicon doesn't seem to work as specified in their docs. I will open a issue in hextra.

It would be cool if we could change the colors to align more with the Porter colors, especially with the white themed website. But we can work on this later!

hextra allows changing the hue via custom.css file and I have changed it to the red color in the porter Logo and the site now looks like this, not sure if that looks good or bad 😅.

Can we delete the "Why Porter" section on the front page, and just have the "What is Porter" and "When Porter"

Done 👍🏼

Lastly, I've found some icons for the "When Porter" section for each section. If you could add these, it would be greatly appreciated! If not, let me know :) (I'll add the new porter emojis into here too)

Done 👍🏼

I am so excited for this redesign thank you for doing all this work

Thanks <3 : )

[schristoff]

Okay, we're almost there!
Here's my last final nitpicks:

• The main tagline (Your application, and everything you need to deploy, together 💖) has this blue highlight and so it's not readable. I think we just need to switch it from highlight to text color or something
• I ran Google Lighthouse over the Netlify page to see where we could help make the page more accessible. Two big takeaways was bigger font, and contrast between font color and background. I think by making the font larger and have more weight (be bolder) this will satisfy that.
• I need to make a white version of the icons so when people turn on dark mode at the bottom of the page they don't go away (I'll do that by EOD)
• Should the "when would I use Porter" also be in a little box like "Why Porter"? 🤷🏻 Up to hearing your opinion
• I am 100% cool with the footer at the bottom saying "Powered by Hextra" but it should also have our existing footer which is like:

[We are a Cloud Native Computing Foundation Sandbox Project. ](https://www.cncf.io/)We are a Cloud Native Computing Foundation Sandbox Project
© The Porter Authors 2023
© 2023 The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see the [Trademark Usage](https://www.linuxfoundation.org/trademark-usage) page.

I think that's it, then we can merge this big PR and iterate on it from here! :)

[zelfroster]

The main tagline (Your application, and everything you need to deploy, together 💖) has this blue highlight and so it's not readable. I think we just need to switch it from highlight to text color or something

Extremely sorry, I forgot we need to add CSS for different browsers (chromium browser specifically) as well.
In firefox, It looks fine

In brave, chrome, chromium etc, looks bad

I will fix it.

I ran Google Lighthouse over the Netlify page to see where we could help make the page more accessible. Two big takeaways was bigger font, and contrast between font color and background. I think by making the font larger and have more weight (be bolder) this will satisfy that.

Hmm, Are you talking about overall font for the website, or just the homepage? I think you are talking about these probably..

I need to make a white version of the icons so when people turn on dark mode at the bottom of the page they don't go away (I'll do that by EOD)

I have converted these the icons provided by you to SVG's for ease of use. I can make a white version for them.

Should the "when would I use Porter" also be in a little box like "Why Porter"? 🤷🏻 Up to hearing your opinion

I actually did that earlier, but then everything below and above it looked the same. But I can change the colors and then they might look good. I will try to add red gradient. Let's see.
Also, Have you looked at the docs pages? Please check them as I have changed the accent color of the whole website.

I am 100% cool with the footer at the bottom saying "Powered by Hextra" but it should also have our existing footer which is like:

[We are a Cloud Native Computing Foundation Sandbox Project. ](https://www.cncf.io/)We are a Cloud Native Computing Foundation Sandbox Project
© The Porter Authors 2023
© 2023 The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see the [Trademark Usage](https://www.linuxfoundation.org/trademark-usage) page.

This Hextra issue is also there, I have already added code for copyright by following the docs, but they don't work for some reason. Will try to fix or raise issue in Hextra.

[schristoff]

Looking through docs, the font size is great - but in light mode we are getting some weird highlighting issues and then this weird effect around the right hand "on this page"

Attached some screenshots :)

[zelfroster]

Looking through docs, the font size is great - but in light mode we are getting some weird highlighting issues and then this weird effect around the right hand "on this page"

Attached some screenshots :)

This is not an issue of the website, It's probably some browser extension, something like DarkReader causing the effect. Please give it a try after disabling any extension of that kind, or maybe in a different browser as well.

[schristoff]

This is not an issue of the website, It's probably some browser extension, something like DarkReader causing the effect. Please give it a try after disabling any extension of that kind, or maybe in a different browser as well.

You're 100% right 🤦🏻 it is darkreader good call

[schristoff]

One more and then I'm mergin'

[zelfroster]

One more and then I'm mergin'

Which one? Copyright?

Also, I forgot to add myself to contributors.md, gonna do it now.

[zelfroster]

Hey @schristoff, I am done for now on this PR. The copyright and favicon issue need to be resolved with Hextra and Unless I missed something, I think it's good to go.

[zelfroster]

Lemme fix the CNCF logo at the footer, just few minutes.

[zelfroster]

@schristoff Done Finally 🎉