-
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.
* release v0.23.0 blog post * PR feedback, fix typos, update issues link filter
- Loading branch information
1 parent
f4d225a
commit d0914be
Showing
5 changed files
with
125 additions
and
3 deletions.
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
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,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 ` | ||
| <body> | ||
| <h1>Hello from the server rendered artists page! 👋</h1> | ||
| <table> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Image</th> | ||
| </tr> | ||
| ${ | ||
| artists.map((artist) => { | ||
| const { name, imageUrl } = artist; | ||
| return ` | ||
| <tr> | ||
| <td>${name}</td> | ||
| <td><img src="${imageUrl}"/></td> | ||
| </tr> | ||
| `; | ||
| }); | ||
| } | ||
| </table> | ||
| </body> | ||
| ` | ||
| } | ||
|
|
||
| export { getBody } | ||
| ``` | ||
|
|
||
| You can then access `/artists/` and see the content! 💥 | ||
|
|
||
|  | ||
|
|
||
| > _In the above screenshot, we can also see a demonstration of our custom rendering using LitSSR and the `<simple-greeting>` 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 `<meta>` 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 | ||
|
|
||
| <img src="${globalThis.page.image}" alt="Banner image for ${globalThis.page.description}"> | ||
|
|
||
| Lorum Ipsum. | ||
| ``` | ||
|
|
||
| ```html | ||
| <html> | ||
| <head> | ||
| <title>My Blog - ${globalThis.page.title}</title> | ||
| <meta property="og:title" content="My Blog"> | ||
| <meta property="og:type" content="website"> | ||
| <meta property="og:url" content="https://www.myblog.dev"> | ||
| <meta property="og:image" content="https://www.myblog.dev/${globalThis.page.image}"> | ||
| <meta property="og:description" content="My Blog - ${globalThis.page.description}"> | ||
| </head> | ||
| <body> | ||
| <content-outlet></content-outlet> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| ## 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! 🙏 |
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