-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
content/v0.29.0 release blog post (#1174)
* release v0.29.0 blog post * add MDN links to URL and import.meta.url * add whats next section content * fix markdown snippet linting * minor grammar and phrasing revisions * PR feedback and revisions * final revisions * feature callouts and embed video example * final nits and grammar
- Loading branch information
1 parent
7c9c23f
commit a1d247f
Showing
4 changed files
with
118 additions
and
1 deletion.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,116 @@ | ||
--- | ||
label: 'blog' | ||
title: v0.29.0 Release | ||
template: blog | ||
--- | ||
|
||
# Greenwood v0.29.0 | ||
|
||
**Published: Nov 8, 2023** | ||
|
||
<img src="/assets/serverless.webp" style="display:block; width: 35%; margin: 0 auto;" alt="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! 🚀 | ||
|
||
<video width="100%" controls> | ||
<source src="//s3.amazonaws.com/hosted.greenwoodjs.io/greenwood-full-stack-ssr-htmx.mov"> | ||
</video> | ||
|
||
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 = ` | ||
<h2>${title}</h2> | ||
<p>${body}</p> | ||
`; | ||
} | ||
} | ||
``` | ||
|
||
> _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 = ` | ||
<header> | ||
<h1>Welcome to My Site</h1> | ||
<!-- handles nested routes / deeplinking, e.g. https://www.mysite.com/some/page/ --> | ||
<img src="${logo.pathname.replace(window.location.pathname, '/')}" alt="My logo"/> | ||
</header> | ||
`; | ||
} | ||
} | ||
|
||
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. ✌️ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters