diff --git a/www/assets/serverless.webp b/www/assets/serverless.webp new file mode 100644 index 000000000..7ec47d815 Binary files /dev/null and b/www/assets/serverless.webp differ diff --git a/www/pages/blog/index.md b/www/pages/blog/index.md index 6e7f78b55..fd8fb6e08 100644 --- a/www/pages/blog/index.md +++ b/www/pages/blog/index.md @@ -19,6 +19,7 @@ template: blog # News and Announcements +- [Release: v0.29.0](/blog/release/v0-29-0/) 📝 - [State of Greenwood (2023)](/blog/state-of-greenwood-2023/) 📣 - [Release: v0.28.0](/blog/release/v0-28-0/) 📝 - [Release: v0.27.0](/blog/release/v0-27-0/) 📝 diff --git a/www/pages/blog/release/v0-29-0.md b/www/pages/blog/release/v0-29-0.md new file mode 100644 index 000000000..e5f3e97bf --- /dev/null +++ b/www/pages/blog/release/v0-29-0.md @@ -0,0 +1,116 @@ +--- +label: 'blog' +title: v0.29.0 Release +template: blog +--- + +# Greenwood v0.29.0 + +**Published: Nov 8, 2023** + + + +## What's New + +The Greenwood team is back with a new release and we're excited to share with you what we've been up to. From this latest release, here are three features we'd like to highlight: + +1. Serverless Adapters (Netlify, Vercel) +1. Web Server Components +1. Static Asset Bundling + +Let's check them out! 👇 + +### Serverless Adapters + +The simplicity of serverless hosting can be a great advantage in achieving dynamic with the ease of static. As part of this release, the Greenwood team has now made it so that you can easily adapt a Greenwood project's SSR pages or API endpoints to run on [**Netlify**](https://www.netlify.com/) and [**Vercel**](https://vercel.com/) serverless hosting. + +In the demo video below, you can see a mix of static (HTML) pages and templates rendering alongside purely SSR pages and API endpoints, all running on serverless hosting. SSR pages and API endpoints are capable of server rendering real custom elements, meaning you can get **_full-stack Web Components_** with Greenwood! 🚀 + + + +It's as easy as installing and adding the plugin to your _greenwood.config.js_. +```js +// import { greenwoodPluginAdapterVercel } from '@greenwood/plugin-adapter-vercel'; +import { greenwoodPluginAdapterNetlify } from '@greenwood/plugin-adapter-netlify'; + +export default { + plugins: [ + greenwoodPluginAdapterNetlify() + ] +}; +``` + +Check out the README docs for our currently supported [**Netlify**](https://github.com/ProjectEvergreen/greenwood/tree/rmaster/packages/plugin-adapter-netlify) and [**Vercel**](https://github.com/ProjectEvergreen/greenwood/tree/rmaster/packages/plugin-adapter-vercel) plugins, and keep your eyes out for future plugins as we look to land support for [**AWS**](https://github.com/ProjectEvergreen/greenwood/issues/1142) and [**Cloudflare**](https://github.com/ProjectEvergreen/greenwood/issues/1143). 👀 + +> _You can check out our showcase repos for each platform [here](https://github.com/ProjectEvergreen/greenwood-demo-adapter-netlify) and [here](https://github.com/ProjectEvergreen/greenwood-demo-adapter-vercel)._ + + +### Web Server Components + +Although [Custom Elements as pages](/blog/release/v0-26-0/#custom-elements-as-pages) are not a new feature, as Greenwood continues to enhance its capabilities on the backend, hooking these pages into the request / response lifecycle was an obvious need, and so we are now "promoting" these custom elements to a new name; _Web Server Components_. ✨ + +The API is still the same and continues to run only on the server, except now Greenwood will provide the `Request` object for the incoming request as a ["constructor prop"](/docs/server-rendering/#data-loading), allowing dynamic request time handling to occur within the custom element. + +```js +export default class PostPage 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, body } = post; + + this.innerHTML = ` +
${body}
+ `; + } +} +``` + +> _We plan to continue [building on this concept for response handling](https://github.com/ProjectEvergreen/greenwood/issues/1177) and fleshing out Greenwood's capabilities through features like [dynamic routing](https://github.com/ProjectEvergreen/greenwood/issues/882) and [hydration](https://github.com/ProjectEvergreen/greenwood/issues/880)._ + + +### Static Asset Bundling + +As an alternative to the pre-defined [_assets/_ directory](/docs/css-and-images/), Greenwood now handles static asset "bundling" when referencing resources like images in your JavaScript. Through a combination of [`new URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) and [`import.meta.url`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta), your resource can now be located anywhere in your project's workspace. + +For production builds, Greenwood will generate a unique filename for the asset as well, e.g. _logo-83bc009f.svg_. 💯 + +```js +const logo = new URL('../path/to/images/logo.svg', import.meta.url); + +class Header extends HTMLElement { + connectedCallback() { + this.innerHTML = ` +