Make the website code more modular

[dominickta]

Motivation: There was an issue in the past where some navbar links were broken on only some pages (capitalization in the html code was different or something...). Editing the code is messy because if you make a change in one place, you have to edit it in all the other files.

Improvement Idea: Make the HTML code more modular. For example, instead of having the html for the navbar in each page, have a "navbar.html" file and then the pages that require a navbar can just include the navbar.

Suggested modules:

• head.html
• navbar.html
• footer.html

[dominickta]

HTML doesn't have a built-in way of including code from other files, but jquery is probably the best way to go: https://stackoverflow.com/a/54924982

[infrared0]

I agree with this change, if someone is available to implement

[kylejonesdev]

For the sake of discussion, this would also be a good use case for a static site generator. What about Jekyll? It's already implemented for the SCN documentation. The biggest issue I see with using jQuery to add portions of the page is that it will impact accessibility and SEO. On the other hand, moving the whole site to Jekyll makes it a bit less approachable for contributors not familiar with it. Thoughts?

[abacef]

Svelte may be a good idea since it is easier to work with than pure JS/HTML and has a low barrier to entry. I am not sure how it can integrate into github pages though since it needs to be compiled.

[dominickta]

For the sake of discussion, this would also be a good use case for a static site generator. What about Jekyll? It's already implemented for the SCN documentation. The biggest issue I see with using jQuery to add portions of the page is that it will impact accessibility and SEO. On the other hand, moving the whole site to Jekyll makes it a bit less approachable for contributors not familiar with it. Thoughts?

I think Jekyll would be nice for the website but like you said it's less approachable for newcomers. We've had people try contributing to the documentation before but it can be intimidating and stopped a couple people (getting jekyll setup can be a mess, and anything beyond simple text changes requires Jekyll to make sure you did it correctly). It could be worth switching to if it adds a lot of value though. I kinda like it vanilla HTML because it allows people learning web design to immediately take what they've learned from tutorials and apply it to the website.

I also don't know much about jQuery and it's affects on accessibility/SEO though. I also haven't heard much about Svelte.

[kevinkace]

Hey I took a swing at this using Sveltekit

https://kevinkace.github.io/Local-Connectivity-Lab.github.io/

https://github.com/kevinkace/Local-Connectivity-Lab