Skip to content

Commit

Permalink
Content/release v0.27.0 blog post (#1009)
Browse files Browse the repository at this point in the history
* first draft of v0.27.0 release blog post

* home page content refresh

* final blog post draft

* home page banner punctuation

* blog post image

* adjust docs heading for experimental callout
  • Loading branch information
thescientist13 committed Nov 23, 2022
1 parent 47ee8c7 commit 82c91bb
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 6 deletions.
Binary file not shown.
8 changes: 7 additions & 1 deletion www/components/banner/banner.css
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@
}

& h3 {
padding-top: 10px;
padding: 10px 0;
max-width: 50%;
margin: 0 auto;
color: #201e2e;
}

Expand Down Expand Up @@ -104,6 +106,10 @@

& .content {
margin-top: 0;

& h3 {
width: 100%;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion www/components/banner/banner.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ class Banner extends LitElement {
../../assets/greenwood-logo-1000w.png 4x,
../../assets/greenwood-logo-1500w.png 5x"/>
<h3>Ready to help you build your next. . . <br /><span class="${this.animateState}">${currentProjectType}.</span></h3>
<h3>Your full stack <span class="emphasis-text">workbench for the web</span>. Ready to help you build your next. . . <span class="${this.animateState}">${currentProjectType}.</span></h3>
<eve-button size="md" href="/getting-started/" style="${buttonCss}">Get Started</eve-button>
</div>
Expand Down
1 change: 1 addition & 0 deletions www/pages/blog/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ template: blog

# News and Announcements

- [Release: v0.27.0](/blog/release/v0-27-0/) 📝
- [Release: v0.26.0](/blog/release/v0-26-0/) 📝
- [Release: v0.24.0](/blog/release/v0-24-0/) 📝
- [State of Greenwood (2022)](/blog/state-of-greenwood-2022/) 📣
Expand Down
88 changes: 88 additions & 0 deletions www/pages/blog/release/v0-27-0.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
---
label: 'blog'
title: v0.27.0 Release
template: blog
---

# Greenwood v0.27.0

**Published: November 23, 2022**

## What's New

Innovations in the industry like with [serverless and edge platforms](https://github.com/thescientist13/web-components-at-the-edge), combined with the emergence of [Web API based JavaScript runtimes](https://wintercg.org/), have been motivating the Greenwood team for a while now. In particular, how to make the experience of writing sites and applications more consistent across the entire stack, especially for web standards and Web Components. In our [last release](/blog/release/v0-26-0), we introduced [**Web Components Compiler (WCC)**](https://github.com/ProjectEvergreen/wcc), which made writing native Web Components for SSR even easier for developers, and enabled us to introduce our own innovation of [custom elements as pages](/blog/release/v0-26-0/#custom-elements-as-pages).

![Full Stack Web Components](/assets/blog-images/full-stack-web-components.webp) Greenwood is ecstatic to embrace this future for the web, in which there is a world where dynamic can be just as practical as static, and the web can be all around you. With this release, Greenwood is able to deliver another step towards making sure it's just as easy to write a Web Component on the server, as it is in the browser; introducing _**Full Stack Web Components**_! ✨

<style>
.gwd-content img {
width: 30%!important;
margin-left: 2%;
float: right;
}
</style>

Let's explore this concept through the first feature highlight of this release, _Custom Imports_.

### Custom Imports

While Greenwood has plugins to support using ESM for non standard module formats like CSS and JSON, these were only supported for client side (browser) based and bundling use cases. When we introduced SSR and custom elements as pages, trying to `import` a CSS file in a server route would break. But, no more!

Starting with _.css_ and _.json_, you can now use native ESM to include these assets right into your SSR pages!

```js
// src/pages/index.js
import packageJson from '../../package.json';
import css from '../main.css';

export default class Home extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<head>
<title>${packageJson.name}</title>
<style>
${css}
</style>
</head>
<body>
<!-- ... -->
</body>
`;
}
}
```

What's really neat is that there is no bundling going on, just a real time transformation from source format to ESM, using the NodeJS runtime!

This currently depends on an experimental feature in NodeJS `v16.17.0`, so checkout our [documentation](/docs/server-rendering/#custom-imports) for full details and usage instructions.


> _Before the Greenwood `v1.0.0` release, do we aim to align this syntax on the [**Import Assertions** spec](https://github.com/ProjectEvergreen/greenwood/issues/923), while also looking to support [additional formats](https://github.com/ProjectEvergreen/greenwood/issues/1004) like TypeScript._
### CSS Bundling and Minification

One goal Greenwood had from the outset was to minimize as much as possible the reliance on external dependencies and third party libraries, choosing to [eschew the common trend of building a "meta" framework](https://projectevergreen.github.io/blog/always-bet-on-html/). It's this perspective that we feel classifies Greenwood better as a "workbench", and not a framework per se. Although **PostCSS** is an invaluable tool in the ecosystem, we felt that for what we were using it for (minification and bundling relative `@import` rules), Greenwood should be able to support this basic functionality itself.

So that is what we did! From this release forward, all CSS minification and bundling will be done by Greenwood. Along with that, we have been able to drop two dependencies from our _package.json_. No need to change anything, it will happen automatically when you upgrade. And you can still use this with our [PostCSS plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss).

> _If you do find any issues or regressions in the CSS output, please file a bug report and we will make sure to fix it ASAP!_
### Build Capacity

The last highlight we would like to feature from this release was the introduction of thread pooling for static builds that rely on SSR based page generation, like when using the [`prerender` configuration option](/docs/configuration/#prerender). In adopting this [SSG benchmark](https://github.com/thescientist13/bench-framework-markdown), it was clear that without some work, Greenwood would not be able to build thousands of pages in this way, let alone quickly.

So under the hood, Greenwood now introduces thread pooling to avoid crashing NodeJS through the spawning of too many Worker threads, based on our [_Getting Started_ repo](https://github.com/ProjectEvergreen/greenwood-getting-started). While it might not be the fastest, at least Greenwood will now be able handle the [thousands of pages](https://github.com/thescientist13/bench-framework-markdown) you may throw at it! 😅


## What's Next

With another release complete, the Greenwood team already has its sights set on the next one. In keeping with our goal to make _**Full Stack Web Components**_ the best experience possible, we are looking to explore these key features and enhancements next.

- [_NodeJS v18_](https://github.com/ProjectEvergreen/greenwood/issues/957) - This will bring native support for `fetch`, JSON Modules, and import assertions! We plan to make this the new minimum version.
- _Standard and Conventions_ - Runtime wise, Greenwood would like to move in a direction less coupled to NodeJS ([agnostic runtime](https://github.com/ProjectEvergreen/greenwood/issues/1008)) by adopting a more web-centric based architecture and plugin model, leveraging standard [`Request` and `Response`](https://github.com/ProjectEvergreen/greenwood/issues/948) APIs.
- [_API Routes_](https://github.com/ProjectEvergreen/greenwood/issues/1007) - We want to make `/api/*` routes happen in Greenwood!
- As a project showcase, check out the recently launched **Tuesday's Tunes** [website](https://www.tuesdaystunes.tv/) and [repo](https://github.com/AnalogStudiosRI/www.tuesdaystunes.tv), built with Greenwood and WCC, leveraging Tailwind CSS, content and webhooks powered by Contentful, and built on Netlify!

Thanks for reading!
4 changes: 3 additions & 1 deletion www/pages/docs/server-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,9 @@ async function getTemplate(compilation, route) {
}
```

### Custom Imports (Experimental)
### Custom Imports

> ⚠️ _This feature is experimental._
Through the support of the following plugins, Greenwood also supports loading custom file formats on the server side using ESM
- [CSS](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/plugin-import-css/README.md#usage)
Expand Down
5 changes: 2 additions & 3 deletions www/pages/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
<body>

<div class="gwd-content-outlet">

<app-banner></app-banner>

<div class='gwd-content-wrapper'>
Expand All @@ -26,10 +25,10 @@ <h2>Greenwood embraces web standards to keep the focus on your work, not the fra

<div class="min-card-container">
<div class="mini-card"><p><a href="/docs/layouts/" title="Layout docs" target="_blank" rel="noopener noreferrer">HTML first, ESM friendly</p></div>
<div class="mini-card"><p>Filesystem based routing</p></div>
<div class="mini-card"><p>Prerendered, server rendered, or client rendered. <a href="/docs/server-rendering/" title="Server Rendering" target="_blank" rel="noopener noreferrer">Even your Web Components!</a></p></div>
<div class="mini-card"><p>A fast, unbundled, local development workflow</p></div>
<div class="mini-card"><p>Filesystem based routing</p></div>
<div class="mini-card"><p><a href="/about/goals/" title="Goals" target="_blank" rel="noopener noreferrer">Easy to get started with</a></p></div>
<div class="mini-card"><p>Prerendered, server rendered, or client rendered. <a href="/docs/server-rendering/" title="Server Rendering" target="_blank" rel="noopener noreferrer">Even your Web Components!</a></p></div>
<div class="mini-card"><p>Extensible <a href="/plugins/" title="Plugins" target="_blank" rel="noopener noreferrer">plugin system</a></p></div>
</div>
</div>
Expand Down

0 comments on commit 82c91bb

Please sign in to comment.