Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dejankify header/footer loading #8

Open
AlnisS opened this issue Sep 17, 2023 · 3 comments
Open

Dejankify header/footer loading #8

AlnisS opened this issue Sep 17, 2023 · 3 comments
Labels
enhancement New feature or request

Comments

@AlnisS
Copy link
Collaborator

AlnisS commented Sep 17, 2023

Currently, the header & footer are injected using document.write() which is not a best practice due to blocking page load until a round trip completes.

It would be good to find a way to handle page loads without this hackery.

I would really love it if we did it in a way where:

  1. It is compatible with nojs users
  2. Doesn't require a build step (currently the site doesn't have one)

Is this possible maybe? I'm not sure.
@AlnisS AlnisS added the enhancement New feature or request label Sep 17, 2023
@AlnisS
Copy link
Collaborator Author

AlnisS commented Sep 21, 2023

Idea: we could write a build script that precomputes this.

That way, the site is fully functional as static files, and a build step can increase performance.

@manforowicz
Copy link
Member

manforowicz commented Sep 21, 2023 •
edited
Loading

We could totally write a simple script to just paste the header and footer into each output file.
Though, as you probably guessed, I'm a fan of eleventy ;). Here's an example of what this would look like in eleventy:

src/_includes/base.njk (think of this as a "template" which wraps any actual content that uses it):

<!DOCTYPE html>
<html lang="en">
  <head>
      <title> {{ title }} </title> 
      OUR META AND CSS STUFF
  </head>
  <body>
    <header> OUR NAV BAR STUFF </header>
    <h1> {{ heading }} </h1>
    <main> {{ content | safe }} </main>
    <footer> OUR FOOTER STUFF </footer>
  </body>
</html>

src/index.njk (this will be outputted as index.html):

---
layout: base.njk {# Specifies if and what "template" to use #}
title: Husky Satellite {# custom "title" attribute, which base.njk reads and puts in the head #}
heading: The Husky Satellite Lab is taking the University of Washington to space {# custom "heading" attribute #}
---

<p>Actual content html goes here.</p>

<div class="sponsors">

   {% for sponsor in sponsors %} {# automatically reads data form src/_data/sponsors.json #}
      <p>Hello, I'm {{ sponsor.name }} and here's my image:</p>
      <img src="images/{{ sponsor.image }}">
   {% endfor %}

</div class = "sponsors">

In this case, index.njk content will be put into the {{ content | safe }} of base.njk, and outputted as _site/index.html.

Then we add a simple config option to .eleventy.js to blindly copy css and images to to _site/css/ and _site/images:

eleventyConfig.addPassthroughCopy("src/css/");
eleventyConfig.addPassthroughCopy("src/images");

And that's it. Just run npx @11ty/eleventy to output stuff into _site/. Netlify can automatically run this right before deploying.

I'm currently working on making an eleventy-built version of this site, though it might take me a while.

@manforowicz
Copy link
Member

manforowicz commented Sep 22, 2023 •
edited
Loading

Ok, I finished making an experimental prototype version of this website that works without javascript:
https://github.com/manforowicz/hsl-website-eleventy

Note: I did a major overhaul of the CSS, so some things still aren't correct.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@AlnisS @manforowicz