search

unitaryfund / unitary.fund

🕸️ 💛 Unitary Fund Website 💛 🕸️
https://unitary.fund
47 stars 54 forks source link

Clean up HTML #223

Closed natestemen closed 2 years ago

natestemen commented 2 years ago

This PR ensures the main/root HTML files pass the important parts of an HTML validator, such as https://validator.w3.org/, so that a formatter can be run.

The need for this arose when adding myself to the UF team section (https://github.com/unitaryfund/unitary-fund/pull/221), and I found my editor not being able to format the html due to problems in the file. Browsers are very adaptable creatures, and hence still render the technically ill-formed HTML, but I think have standardized formatting helps prevent future issues.

Things to note:

  1. A formatter was applied to html previously (https://github.com/unitaryfund/unitary-fund/commit/7d248f13d5d54ba3bed0eb214a8b65d9db51fffc), yet problems have crept in since, as there is no specification for what formatter was used. Hence, I've added prettier to the repo, which has integrations with major editors and can run on save.
  2. I've set the line width — somewhat arbitrarily — to 120. The default is 80, and they recommend not going much above this, but because we are only using prettier for HTML, I think this is okay.
  3. I did not format any HTML in jobs/, since those pages are not frequently used, but I can if desired. I also did not format anything in posts/ as I believe the HTML there to be auto-generated in some way and hence should not be edited manually. Please correct me if that is wrong.
  4. There are some validations that still do not pass. E.g. I did not remove all occurrences of the frameborder found in iframes. However, as you can read on stackoverflow, it's not that important. Another example is that the <center> tag is no longer valid HTML5, and should be replaced using CSS (replace center with p and add inline style="text-align:center").
  5. Finally, there are some very subtle differences in styling this PR introduces, and I've done my best to keep it to an absolute minimum. The following is the only visual difference I have noticed (subtle spacing differences above grant year).
before after
Screen Shot 2022-05-17 at 11 32 02 PM Screen Shot 2022-05-17 at 11 31 58 PM

Merging this into the ns-add-me branch as it was easier to start development from there.

natestemen commented 2 years ago

@nathanshammah After reviewing the few other minor validation issues I mentioned, I figured they were easy enough and added a few more commits covering them.