diff --git a/www/assets/blog-images/ssr.webp b/www/assets/blog-images/ssr.webp new file mode 100644 index 000000000..6c207f59c Binary files /dev/null and b/www/assets/blog-images/ssr.webp differ diff --git a/www/pages/blog/index.md b/www/pages/blog/index.md index 323af2fb8..4b3622e36 100644 --- a/www/pages/blog/index.md +++ b/www/pages/blog/index.md @@ -19,6 +19,7 @@ template: blog # News and Announcements +- [Release: v0.23.0](/blog/release/v0-23-0/) 📝 - [Release: v0.21.0](/blog/release/v0-21-0/) 📝 - [Release: v0.20.0](/blog/release/v0-20-0/) 📝 - [Release: v0.19.0](/blog/release/v0-19-0/) 📝 diff --git a/www/pages/blog/release/v0-15-0.md b/www/pages/blog/release/v0-15-0.md index 9445249de..dd002c479 100644 --- a/www/pages/blog/release/v0-15-0.md +++ b/www/pages/blog/release/v0-15-0.md @@ -17,7 +17,7 @@ Being a developer is a lot of work. Being a designer is also lot of work. Bein With Greenwood [_**Theme Packs**_](https://www.greenwoodjs.io/guides/theme-packs/), now developers and designers can create and share reusable HTML / CSS / JS as npm packages that other Greenwood users can pull into their Greenwood projects as a plugin. Now anyone can get up and running with a fully designed and themed site and all they have to do is just add the content! 🥳 ## In Practice -For those unfamiliar with [**CSS Zen Garden**](http://www.csszengarden.com/), it is a site aimed at showcasing the power of CSS through static HTML. +For those unfamiliar with [**CSS Zen Garden**](http://www.csszengarden.com/), it is a site aimed at showcasing the power of CSS through static HTML. > _The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really._ diff --git a/www/pages/blog/release/v0-23-0.md b/www/pages/blog/release/v0-23-0.md new file mode 100644 index 000000000..cd7151bc0 --- /dev/null +++ b/www/pages/blog/release/v0-23-0.md @@ -0,0 +1,121 @@ +--- +label: 'blog' +title: v0.23.0 Release +template: blog +--- + +# Greenwood v0.23.0 + +**Published: Feb 11, 2022** + +## What's New + +With this new release, the Greenwood team is excited to (soft) launch the ability to add Server Side Rendering (SSR) to your Greenwood project as well as support for using a custom renderer like [**Lit** SSR](https://www.npmjs.com/package/@lit-labs/ssr). Additionally, to enhance the ability of purely static sites to benefit from some build time templating, a new feature called "interpolate frontmatter" was introduced to easily reuse frontmatter similar to how you would use JavaScript interpolation, but in your HTML and markdown. Let's highlight them both below! 👇 + +## Server Side Rendering (SSR) + +As mentioned above, we are soft launching the ability to incorporate server rendering into your Greenwood projects. By simply adding a JavaScript file to your project, you will be able to have server rendered content available when running `greenwood serve`. You can also combine static and server rendered content all in the same project for a hybrid application! Let's take a look at a quick example. + +### How It Works +You can add a file to your project in the _pages/_ directory and implement either of the three supported APIs, and you will have a server rendered route available! +```shell +. +└── src + └── pages + ├── artists.js + ├── about.md +   └── index.html +``` + +```js +// artists.js +import fetch from 'node-fetch'; // this needs to be installed from npm + +async function getBody(compilation) { + const artists = await fetch('http://www.example.com/api/artists').then(resp => resp.json()); + + return ` + +

Hello from the server rendered artists page! 👋

+ + + + + + ${ + artists.map((artist) => { + const { name, imageUrl } = artist; + return ` + + + + + `; + }); + } +
NameImage
${name}
+ + ` +} + +export { getBody } +``` + +You can then access `/artists/` and see the content! 💥 + +![Server Side Rendering example](/assets/blog-images/ssr.webp) + +> _In the above screenshot, we can also see a demonstration of our custom rendering using LitSSR and the `` component._ + +## Interpolate Frontmatter +At the risk of (re) implementing a templating system (handlebars, nunjucks, etc) but still recognizing that having a JavaScript only solution though our [_graph.json_](/docs/data/) for static sites can be a bit cumbersome, the Greenwood team is introducing the `interpolateFrontmatter` feature. With this new feature, when setting the corresponding flag in your _greenwood.config.js_, frontmatter in your markdown will be available in your HTML or markdown similar to how variable interpolation works in JavaScript. Great for `` tags! + +### How It Works +So given the following frontmatter +```md +--- +template: 'post' +title: 'Git Explorer' +emoji: '💡' +date: '04.07.2020' +description: 'Local git repository viewer' +image: '/assets/blog-post-images/git.png' +--- +``` + +And enabling the feature in _greenwood.config.js_ +```js +export default { + interpolateFrontmatter: true +} +``` + +You access the frontmatter data in the markdown or HTML on a _per page instance_ following the convention of JavaScript [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), and Greenwood will interpolate those values at build time. + +```md +# My Blog Post + +Banner image for ${globalThis.page.description} + +Lorum Ipsum. +``` + +```html + + + My Blog - ${globalThis.page.title} + + + + + + + + + + +``` + +## Learn More + +To learn more about SSR and the full API please check out our docs on [SSR](/docs/server-rendering/) and [interpolateFrontmatter](/docs/config#interpolateFrontmatter). For custom SSR, we have [plugin docs](/plugins/renderer/) and a [Lit Renderer plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-lit) you can start using. As referenced at the start of the blog post, the SSR feature is brand new and we have many plans to incorporate new features and enhancements related to [hydration, statically exporting content from server routes, and more](https://github.com/ProjectEvergreen/greenwood/issues?q=is%3Aissue+is%3Aopen+label%3Assr)! Feedback is appreciated and we cant wait to see what you end building! 🙏 \ No newline at end of file diff --git a/www/pages/docs/server-rendering.md b/www/pages/docs/server-rendering.md index 247265ad9..414aeb12f 100644 --- a/www/pages/docs/server-rendering.md +++ b/www/pages/docs/server-rendering.md @@ -6,7 +6,7 @@ index: 8 linkheadings: 3 --- -## Server Rendering +## Server Rendering (Beta) In addition to supporting [static and Single Page application project types](/docs/layouts/), you can also use Greenwood to author routes completely in JavaScript and host these on a server. @@ -33,7 +33,7 @@ In your _[page].js_ file, Greenwood supports three functions you can `export` fo - `getTemplate`: Effectively the same as a [page template](/docs/layouts/#page-templates). ```js -async function getFrontmatter(compilation, route, route, id) { +async function getFrontmatter(compilation, route, label, id) { return { /* ... */ }; }