[redesign] Better ways to share Less/EJS across sites

[savetheclocktower]

Have you checked for existing feature requests?

• Completed

Summary

I don't even know if there's a good solution here, but this is our current situation:

• For all the redesigns, the documentation repo is the CSS source of truth; it emits a stylesheet that the others consume. The blog and pulsar-edit.github.io repos define their own CSS overrides, but often want to consult the original Less includes (i.e., the breakpoints and mixins) and can't; so they get duplicated across repos.
• The sites may or may not want to highlight different things in their navigation areas, but otherwise should basically have the same page header and page footer. Right now, this is another thing that must be duplicated across three repos.

I don't have a preferred recommendation here because they'd all involve some pain. But here are some ideas:

• Git submodule? (Ugh.)
  • Pros: would allow us to reference the individual files rather easily.
  • Cons: Now we've got four repos instead of three, and keeping everything in sync still requires manual submodule updates and redeploys of each site.
• Extend 11ty-config-pulsar?
  • Not sure how easy it is to even reference Less or EJS resources from a Node module, but maybe it's possible via require.resolve or something. And maybe it can define some EJS helpers that can do most of the work instead of forcing us to reach in and include the module's own EJS files.
  • Pros: We're already using it in the other two repos.
  • Cons: Same deployment headaches as above, though they may be slightly mitigated if the package.json version just points to github:confused-Techie/11ty-config-pulsar#main and therefore always gets the latest upon redeploy.

What benefits does this feature provide?

Less duplication; more consistency.

Any alternatives?

The two possible solutions above are the only ones I can think of for now, but I'm eager to hear others if folks have ideas.

Other than that, the alternative is living with the status quo — which is annoying but not debilitating.

Other examples:

No response

[confused-Techie]

I think personally the best solution is extending 11ty-config-pulsar. Since that's already another repo we have to live with, and would mean that all shared data between our sites is in a single location, making life a bit easier.

And for referencing the EJS within may be done by adding something in the shared 11ty config to move the file from the submodule folder into the EJS views folder of the repo? Maybe something like that could work to have them shared?

But I do want to point out that the documentation website does have a very different header than the home page, and even the blog website.

Since as it is currently looking at headers:

documentation

• Pulsar : Links to the root of the docs site at docs.pulsar-edit.dev
• Pulsar API : Links to the Pulsar API docs on docs.pulsar-edit.dev/api/pulsar
• Package Registry API : Links to the swagger UI docs on api.pulsar-edit.dev
• Homepage : Links to pulsar-edit.dev

main site

• Pulsar : Links to the root of the main site at pulsar-edit.dev
• Download : Links to the download page
• Docs : Links to the documentation site
• Blog : Links to the blog site
• About Us : Links to our about us section
• Community : Links to our community sections page
• Packages : Links to the PPR frontend

blog

• Pulsar : Links to the root of the blog site
• Homepage : Links back to the main homepage

---

So that is to say the content of each header is unique for each repo and arguably should be, although the styling of it we would want to remain consistent. So this may actually be harder than just sharing an EJS template, it'd be sharing an EJS template and injecting it with site specific information.

Although the footer while currently not at all the same on each site, I'd argue should be identical between them.

But all that said I think we would first have to determine what exactly we want to share, and find a good way to share it.

---

CSS

Now for the CSS this may be more solvable in 11ty-config-pulsar via the use of virtual templates, where we can put all of our CSS in there and inject it into every single site. Meaning each site would have the same CSS files on their own deployment, but I'm not sure if that would make things any easier for mixins tbh.