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** + +Serverless function cloud + +## 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 = ` +

${title}

+

${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 = ` +
+

Welcome to My Site

+ + My logo +
+ `; + } +} + +customElements.define('app-header', Header); +``` + +> _We are looking to improve the developer experience around this pattern so please feel free to follow along or comment in this [GitHub issue](https://github.com/ProjectEvergreen/greenwood/issues/1163)._ + +## What's Next + +We're really excited to see the progress **Greenwood** has been able to make this year, and are looking forward to seeing where the community can take it. As we get closer to finalizing our [1.0 Roadmap](https://github.com/ProjectEvergreen/greenwood/milestone/3), we've been playing around with more ecosystem projects and making little demos to share with you all. We encourage you to check them out to see what Greenwood is capable of and help us push the boundaries of the _**full-stack web**_! 🙌 + +- [Server rendering custom elements with WCC on Vercel Serverless functions using htmx](https://github.com/thescientist13/greenwood-htmx) +- [Rendering Lit+SSR on Vercel Serverless functions](https://github.com/thescientist13/greenwood-demo-adapter-vercel-lit) + +We're also planning a significant [redesign of the Greenwood website](https://github.com/ProjectEvergreen/greenwood/issues/978) to help better showcase all of Greenwood's capabilities and to streamline and simplify the documentation. + +So stay tuned, join our [Slack](https://join.slack.com/t/thegreenhouseio/shared_invite/enQtMzcyMzE2Mjk1MjgwLTU5YmM1MDJiMTg0ODk4MjA4NzUwNWFmZmMxNDY5MTcwM2I0MjYxN2VhOTEwNDU2YWQwOWQzZmY1YzY4MWRlOGI) or [Discord](https://discord.gg/pFbynPar) communities to be part of the conversation, and we look forward to seeing you for the next release. ✌️ \ No newline at end of file diff --git a/www/pages/docs/css-and-images.md b/www/pages/docs/css-and-images.md index 893c01557..6b0d5d310 100644 --- a/www/pages/docs/css-and-images.md +++ b/www/pages/docs/css-and-images.md @@ -61,7 +61,7 @@ You can do the same in your HTML ``` -In your JavaScript, you can also use a combination of `new URL` and `import.meta.url` which means you can put the file anywhere in your project, not just the _assets/_ directory and it will be resolved automatically! For production builds, Greenwood will generate a unique filename for the asset as well, e.g. _logo-83bc009f.svg_. +In your JavaScript, you can also use 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) which means you can put the file anywhere in your project, not just the _assets/_ directory and it will be resolved automatically! For production builds, Greenwood will generate a unique filename for the asset as well, e.g. _logo-83bc009f.svg_. > _We are looking to improve the developer experience around using `new URL` + `import.meta.url` as part of an overall isomorphic asset bundling strategy. You can visit this [GitHub issue](https://github.com/ProjectEvergreen/greenwood/issues/1163) to follow along._