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

dynamic runtime layouts for SSR #1248

Open
thescientist13 opened this issue Jun 21, 2024 · 4 comments
Open

dynamic runtime layouts for SSR #1248

thescientist13 opened this issue Jun 21, 2024 · 4 comments
Labels
CLI documentation Greenwood specific docs feature New feature or request SSR
Milestone
1.x

Comments

@thescientist13
Copy link
Member

thescientist13 commented Jun 21, 2024 •
edited
Loading

Summary

Coming out of #955 / #1212 , one follow up feature to track is supporting dynamic layouts during SSR. So while this has been possible

src/
  layouts/
    blog.js

The layout was executed only once at bundle time which means it was only a one time render.
https://github.com/ProjectEvergreen/greenwood/blob/v0.30.0-alpha.2/packages/cli/src/lifecycles/bundle.js#L243

Details

Our "Web Server Components" pattern combined with #882 would be useful for layouts that want to customize <head> tags from an external service, like a CMS for example.

export default class BlogLayout extends HTMLElement {
  constructor(request) {
    super();

    const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
    this.postId = params.get('id');
  }

  async connectedCallback() {
    const { postId } = this;
    const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(resp => resp.json());
    const { title } = post;

    this.innerHTML = `
      <head>
        <title>Greenwood - Blog: ${title}</title>
      </head>
    `;
  }
}

For compatible build outputs (greenwood serve, serverless adapters), the main trick is that I think this this will require bundling layouts into SSR pages like we do for the page itself. Not sure how tricky this will be though. 🤔

Additionally, would be nice to support dynamic context layouts too, as currently they are hardcoded to only support HTML.
https://github.com/ProjectEvergreen/greenwood/blob/v0.30.0-alpha.2/packages/cli/src/lib/templating-utils.js#L13
@thescientist13 thescientist13 added documentation Greenwood specific docs CLI SSR feature New feature or request labels Jun 21, 2024
@thescientist13 thescientist13 added this to the 1.x milestone Jun 21, 2024
@thescientist13 thescientist13 mentioned this issue Jun 21, 2024
Merged
20 tasks
@thescientist13 thescientist13 changed the title dynamic layouts for SSR dynamic runtime layouts for SSR Aug 30, 2024
@lschierer
Copy link
Contributor

if I'm doing things correctly (never a sure thing) then dynamic layouts partly work. with a dynamic page, I got the dynamic layout working by importing the getLayout function into the dynamic page then re-exporting in the same object as getFrontmatter():

import { getLayout } from "../../../layouts/standard.ts";
export { getFrontmatter, getLayout };

however either in the dynamic page or in a markdown page, using the "layout" attribute of the frontmatter to refer to the dynamic layout file appears to be nonfunctional.

@thescientist13
Copy link
Member Author

A minimal reproduction would help but if I am understanding you correctly, doing this
https://greenwoodjs.dev/docs/resources/markdown/#layouts

---
layout: blog
---

# My First Blog Post

This is my first blog post, I hope you like it!

Will map to a matching filename in the layouts directory, e.g.

src/
  layouts/
    blog.html # or blog.js

Looking at the docs, I can see how this is not as clear as it could be, so if that's what you're referring to, I can definitely make that clarification as part of ProjectEvergreen/www.greenwoodjs.dev#160

This was referenced Jan 23, 2025
Open
Merged
@lschierer
Copy link
Contributor

I have layouts/blog.ts instead of .js

@thescientist13
Copy link
Member Author

Ah, I see now.

Yeah, in that case that is just something we need to implement, see #1395 .

(FWIW, the next batch of ecosystem compat work will primarily focus around TypeScript enhancements for the project, so expect a lot of those related issues to get resolved as part of the 0.32.0 release which should be starting development soon, so hang tight! 🙏 )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CLI documentation Greenwood specific docs feature New feature or request SSR
Projects
[Greenwood] Phase 11 - Burndown to 1.0
Status: 📋 Backlog
Milestone
1.x
Development

No branches or pull requests
2 participants
@thescientist13 @lschierer