Style active link in SSG #1434

EskiMojo14 · 2025-03-05T18:20:59Z

EskiMojo14
Mar 5, 2025

Hi! Been learning Lit for the last few days and using Greenwood for a framework, and I'm really liking it so far. I've just run into a hiccup I don't know how to solve, and would love some insight if what I'm trying to do is possible.

I have a sidebar component which styles the current link differently, using a class:

I achieve this via a utility function that checks the given href against window.location.pathname:
https://github.com/EskiMojo14/neocities/blob/6faa09bc5acd82da9ebf0142303e7c64b27b1ea7/src/utils/lit.ts#L29-L38

This of course can't work during SSG, as there's no window. Is there a way of getting what page is currently being rendered for SSG, so this can render correctly? Currently I'm just falling back to returning false during SSR/SSG, but I don't think that's working correctly as the sidebar just ends up rendering twice.

Any help would be really appreciated!

Answered by thescientist13

Mar 6, 2025

Hey @EskiMojo14 , thanks for checking out Greenwood and glad you are enjoying it so far!

So Greenwood has a config setting called "Active Content" that I think is what you're looking for here, as I use it for just this kind of thing! Specifically, you would be looking to leverage the Active Frontmatter pattern, which is similar in nature to an ESI (edge side include).

For example, on the Greenwood website we use this pattern a lot to do the underline styles for the header navigation, and side nav "highlight" styling based on the current page

Have a custom element that accepts an attribute, like say the current route (just using a vanilla HTMLElement here, but a LitElement should work j…

View full answer

thescientist13 · 2025-03-06T02:48:55Z

thescientist13
Mar 6, 2025
Maintainer

Hey @EskiMojo14 , thanks for checking out Greenwood and glad you are enjoying it so far!

So Greenwood has a config setting called "Active Content" that I think is what you're looking for here, as I use it for just this kind of thing! Specifically, you would be looking to leverage the Active Frontmatter pattern, which is similar in nature to an ESI (edge side include).

For example, on the Greenwood website we use this pattern a lot to do the underline styles for the header navigation, and side nav "highlight" styling based on the current page

Have a custom element that accepts an attribute, like say the current route (just using a vanilla HTMLElement here, but a LitElement should work just the same)

export default class Header extends HTMLElement {
  connectedCallback() {
    const currentRoute = this.getAttribute('route');

    this.innerHTML = '...';
  }
}

customElements.define('app-header', Header);

Then you can pass in active frontmatter as an attribute to your custom element through HTML, e.g. src/pages/index.html

<html>
  <head>
   <title>My Website</title>
    <script type="module" src="../path/to/components/header.js"></script>
  </head>
  <body>
    <app-header route="${globalThis.page.route}"></app-header>
    <h1>Welcome to my website!</h1>
  </body>
<html>

To super charge it, like on our website, we make a collection out of all of the pages we want in the header navigation, which we can then loop over and compare against the incoming route attribute (but the hardcoded side nav array you have would work just as well)

import { getContentByCollection } from "@greenwood/cli/src/data/client.js";

export default class Header extends HTMLElement {
  async connectedCallback() {
    const currentRoute = this.getAttribute("route") ?? "";
    const navItems = await getContentByCollection("nav");

    this.innerHTML = `
      <header>
        <nav>
          <ul>
            ${navItems
              .map((item) => {
                const { route, label } = item;
                const isActiveClass = currentRoute.startsWith(item.route) ? 'class="active"' : "";

                return `
                  <li>
                    <a href="${route}" ${isActiveClass} title="${label}">${label}</a>
                  </li>
                `;
              })
              .join("")
            }
          </ul>
        </nav>
      </header>
    `;
  }
}

customElements.define("app-header", Header);

Here are the code links for you to check, and let me know if you have any other questions!

Hope that helps! ✌️

6 replies

thescientist13 Mar 6, 2025
Maintainer

Ah yes, apologies there. So this double rendering is definitely something i am familiar with, it is typically a symptom of Lit's Hydration support script not getting loaded.

Did a little digging and have some good news and some "bad" news...

✅ The Good News

I did some debugging in your project and in a standalone Lit SSR repo I maintain and was able to debug and track down the issue, and indeed the Lit Renderer plugin was only handling pure SSR pages (e.g. src/pages/index.js), and not also prendered "static" pages (e.g. src/pages/index.html). I filed an issue for this which I can get released pretty soon in our current v0.32.0 alpha release line (and I can help with that follow upgrade at that time).

But with this patch the double rendering is gone!

I've opened a PR to your repo to patch this fix in for you using pnpm patch for now, and will promise to follow up again as soon as the fix is available (probably next weekend 🤞 )

⚠️ The Bad News

So now that the hydration script is loading, and the double rendering is solved, I do now see a template hydration error from Lit. So this might be coming from some conditional logic or something in one of your components maybe, I'm quite sure which at the moment, unfortunately. (I guess can always try commenting stuff out?)

I re-recreated similar conditions in that Lit SSR demo repo and with the patch and can confirm that at least things look to be working as expected when the hydration script is added.

Code - https://github.com/thescientist13/greenwood-lit-ssr/tree/prerendering
PR - thescientist13/greenwood-lit-ssr#32

I will acknowledge that one thing I know need to get in ASAP is for Greenwood to support prerender in development, so I have that issue tracked and will see if I can expedite it to help make some of these issues more obvious in development.

Thanks again for reaching out and providing this all info, and let me know if you have any other questions. 👍

EskiMojo14 Mar 6, 2025
Author

thanks! i'll have a go at tracking the hydration issue down. good to be one step closer 😄

EskiMojo14 Mar 7, 2025
Author

by the way, is there any way to set pages data for HTML pages?

thescientist13 Mar 7, 2025
Maintainer

Do you mean frontmatter in HTML? If so then yeah, something like this would work (data is used for any "extra" data that's not reserved for page schema)

---
title: My Post
author: thescientist13
---

<html>
  <head>
    <title>${globalThis.page.title}</title>
    <meta name="author" content="${globalThis.page.data.author}">
  </head>

  <body>
    <h1>${globalThis.page.title}</h1>
    <h2>Author: ${globalThis.page.data.author}</h2>
  </body>
</html>

EskiMojo14 Mar 7, 2025
Author

perfect, thanks!

thescientist13 · 2025-03-15T01:06:55Z

thescientist13
Mar 15, 2025
Maintainer

So on the topic of production time content as data issue, I figured out what the issue was and so now have that working in the production build * 🥳

However, the hydration issue still persists, and so I'm continuing to take a looking into the <page-header> component as that seems to be what is not working. that is throwing the error. What I think is happening is that the DOM operations being used might not be supported via SSR? When I log out headerText and subTitleText during SSR, their values are just empty strings though it does seem like the values are there as expected before being sent to the SSR plugin

'<meta property="og:description"\n' +
'      content="eskimojo - Where the heart is"\n' +
'    >\n' +
'          <link rel="stylesheet" href="../styles/global.css" crossorigin >\n' +
'<link rel="preconnect" href="https://fonts.googleapis.com" >\n' +
'<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin >\n' +
'          \n' +
'          <script type="module" src="../scripts/initial-theme.ts"></script>\n' +
'<script type="module" src="../components/sidebar/sidebar.ts"></script>\n' +
'<script type="module" src="../components/header/header.ts"></script>\n' +
'        </head>\n' +
'        <body>\n' +
'          \n' +
'    <sidebar-nav current-route="/"></sidebar-nav>\n' +
'    <div class="root">\n' +
'      <page-header>\n' +
'        Home\n' +
'        <p slot="subtitle">Where the heart is</p>\n' +
'      </page-header>\n' +
'      \n' +
'    </div>\n' +
'  \n' +
'        </body>\n' +
'      </html>\n'

{ headerText: '', subtitleText: '' }

So I think then when the client kicks which will support those DOM operations and gets the actual injected values, this then becomes the likely cause of the mismatch? Will keep playing around with it just to make sure it's not a Greenwood thing and get a new release out with everything identified so far at least.

Either way, keep building and keep asking questions; thanks again for helping out with all your reports and feedback. 🏗️

We're getting there!

The site looks really nice btw 💯

4 replies

EskiMojo14 Mar 15, 2025
Author

lovely, thank you - i had a hunch that might be the issue. I'll try switching them to direct string attributes, so I don't have to use any DOM manipulation.

will keep building and reporting where needed - enjoying the experience of being a beta tester haha 😎

EskiMojo14 Mar 15, 2025
Author

confirmed that changing the header to use string attributes means no hydration issue message is logged 😄

thescientist13 Mar 15, 2025
Maintainer

Awesome! That's great 👏

One minor thing I observed with your lit based imports is that you should be able to import everything you need from the top level lit package since it also does a lot of the work of re-exporting from all those underlying libraries, including all the directives.

// before
import { css, LitElement, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
import { html } from "lit-html";
import { when } from "lit-html/directives/when.js";

// after
import { html, css, LitElement, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
import { when } from "lit/directives/when.js";

From there you should be able to remove the lit-html entry in your package.json dependencies. However as I discovered based on lit-html being referenced in Lit's hydrate element script, for PNPM at least you'll want to add lit-html to a .npmrc file using hoist patterns

public-hoist-pattern[]=lit-html

Not a big deal though, just thought I would share. 👍

EskiMojo14 Mar 15, 2025
Author

makes sense, thanks! certainly cleans things up a bit :)

thescientist13 · 2025-03-22T19:12:00Z

thescientist13
Mar 22, 2025
Maintainer

OK, v0.32.0-alpha.7 should now include all reported patches so that any of the PNPM ones can be removed now.🤞
https://github.com/ProjectEvergreen/greenwood/releases/tag/v0.32.0-alpha.7

0 replies

Style active link in SSG #1434

Uh oh!

EskiMojo14 Mar 5, 2025

Replies: 3 comments · 10 replies

Uh oh!

Uh oh!

thescientist13 Mar 6, 2025 Maintainer

Uh oh!

thescientist13 Mar 6, 2025 Maintainer

✅ The Good News

⚠️ The Bad News

Uh oh!

EskiMojo14 Mar 6, 2025 Author

Uh oh!

Uh oh!

EskiMojo14 Mar 7, 2025 Author

Uh oh!

Uh oh!

thescientist13 Mar 7, 2025 Maintainer

Uh oh!

EskiMojo14 Mar 7, 2025 Author

Uh oh!

Uh oh!

thescientist13 Mar 15, 2025 Maintainer

Uh oh!

EskiMojo14 Mar 15, 2025 Author

Uh oh!

EskiMojo14 Mar 15, 2025 Author

Uh oh!

Uh oh!

thescientist13 Mar 15, 2025 Maintainer

Uh oh!

EskiMojo14 Mar 15, 2025 Author

Uh oh!

Uh oh!

thescientist13 Mar 22, 2025 Maintainer

EskiMojo14
Mar 5, 2025

Replies: 3 comments 10 replies

thescientist13
Mar 6, 2025
Maintainer

thescientist13 Mar 6, 2025
Maintainer

EskiMojo14 Mar 6, 2025
Author

EskiMojo14 Mar 7, 2025
Author

thescientist13 Mar 7, 2025
Maintainer

EskiMojo14 Mar 7, 2025
Author

thescientist13
Mar 15, 2025
Maintainer

EskiMojo14 Mar 15, 2025
Author

EskiMojo14 Mar 15, 2025
Author

thescientist13 Mar 15, 2025
Maintainer

EskiMojo14 Mar 15, 2025
Author

thescientist13
Mar 22, 2025
Maintainer