Update website

[FireIsGood]

This isn't actually everything I can think of to bring the website to the 21st century yet, this is a pull to get the main site up to date so further edits don't explode and cause merge conflicts on my end.

Adds a lot of things and fixes up a lot of styles.

• Adds Prettier and Markdownlint for formatting and linting
  • Formats everything (agony)
• Fixes pagination (blog didn't have the UI to actually see more posts)
• Adds a favicon
• Adds meta tags (embeds will work now!)
• Fixes styles
  • Main page cards now look nice at all resolutions
  • Colors are now based on variables (roughly based on the Google Material guidelines and Pico CSS)
  • Read More and other semantically button links now look like buttons
  • OSU logo now matches the main website's
  • Blog posts are now card styled and have cool icons for the metadata
  • Bottom section is now consistent for mobile
  • Many other small nudges to styles

[ramereth]

@FireIsGood can you please rebase so that the history is linear without any merge commits? That will make it easier for me to see the changes you made

[FireIsGood]

Should be rebased to history now I think. Should I continue with rebasing as the standard?

[ramereth]

@FireIsGood yes, but make sure you rebase on the up to date main branch. This shows conflicts you need to resolve.

[ramereth]

Overall this looks great. I still need to run a comparison between the old/new to make sure nothing is missing.

While you're at it, can you fix the hugo output such as the following:

Web Server is available at //localhost:1313/ (bind address 127.0.0.1) 

So that it actually shows http://localhost:1313 instead? I know on other hugo sites, it does that but I'm not sure why this happens here. I also pushed a minor fix on the opence page.

[FireIsGood]

The lack of http in the serve URL seems to be due to the baseURL being set to / so I have changed it to https://osuosl.org/

[FireIsGood]

I'm researching into GitHub actions, did you want the action to just tell the user that the formatting was incorrect or to introduce new commits by the action that fix changes automatically? The linked Prettier action does a --fix.

I'm leaning more to the checking part as I feel it is better DX to not have a bot making changes.

[FireIsGood]

Here's a repo I made to test a Prettier action that just checks but does not make commits: https://github.com/FireIsGood/gh-workflows/

• A CLOSED pull request that causes issues: evil: breaking change FireIsGood/gh-workflows#1
• A CLOSED pull request that does not cause issues: good: this will not cause issues FireIsGood/gh-workflows#2
• An OPEN pull request that causes issues: evil: breaks FireIsGood/gh-workflows#3
• An OPEN pull request that does not cause issues: feat: commit that doesn't break anything FireIsGood/gh-workflows#4
• A commit on main that causes issues: https://github.com/FireIsGood/gh-workflows/tree/af80099b33cf3c4a1db73f29f6fdab9f8cc273ad
  • This can be disabled if we never intend to push commits directly to main

[FireIsGood]

And here's adding the markdownlint checker commit:

• A commit on main that causes issues: https://github.com/FireIsGood/gh-workflows/tree/c7554ff4946f5bcf4d3b447503b60f5ac7c8175f
• A pull that causes issues: evil: markdownlint hates this FireIsGood/gh-workflows#5
• A pull that does not cause issues: docs: this should not make markdownlint angry FireIsGood/gh-workflows#6

[FireIsGood]

So the question is whether we want:

• GitHub Action workflows that make changes to the code on commits (not pictured)
• GitHub Actions that check if tests pass and report with passes or fails (pictured in previous comments)

As noted previously, I would prefer the tests approach and I believe it to be better for our use case here but I'm open to either if you have a preference.

[ramereth]

I'm researching into GitHub actions, did you want the action to just tell the user that the formatting was incorrect or to introduce new commits by the action that fix changes automatically? The linked Prettier action does a --fix.

I'm leaning more to the checking part as I feel it is better DX to not have a bot making changes.

Just tell them if it was incorrect.

[ramereth]

So the question is whether we want:

• GitHub Action workflows that make changes to the code on commits (not pictured)
• GitHub Actions that check if tests pass and report with passes or fails (pictured in previous comments)

As noted previously, I would prefer the tests approach and I believe it to be better for our use case here but I'm open to either if you have a preference.

I'd rather it just checks and doesn't make changes.

[FireIsGood]

Pull is ready for merging. The checks have been added and I'm going to freeze pushing features to remote until this is merged so we can start getting blog posts with the new formatting/linting setup ready.

[ramereth]

@FireIsGood so I just noticed that the front page boxes are all vertical instead of being in a grid when on a wider screen. Is that intentional or not? I'd rather it be on a grid on a non-mobile site.

[FireIsGood]

I'm not sure how that is happening for you. On chromium and firefox I see them in a grid. Do you mean vertical as in not wrapping?

Firefox

Chromium

[ramereth]

This is what I see with Google Chrome:

[ramereth]

I also noticed this: