Add a release post on Astro 0.18 (#869)

* Add a release post on Astro 0.18

* Add a better description

* Add links to the post

* More attention grabbing intro

* Add additional links in the post

* Update www/src/pages/blog/astro-018.astro

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>

* try using responsive images to improve lighthouse

* Adds an overview section in the intro

* freds edits

* Update a couple of images and minor edits

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>
Co-authored-by: Fred K. Schott <fkschott@gmail.com>
This commit is contained in:
Matthew Phillips 2021-07-27 12:32:18 -04:00 committed by GitHub
parent 365f3bd230
commit 918e3831f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 316 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 200">
<view id="flame" viewBox="0 0 160 200" />
<view id="name" viewBox="240 78 185 122" />
<path d="M394.5 78v28.8H425v15.6h-30.5V158c0 3.6.1 7.2.5 10.3.8 5.3 4 10.5 8.4 12.5 5.7 2.6 9.7 2.1 21.6 1.7l-2.9 17.2c-.8.4-4 .3-7 .3-7 0-33.4 2.5-38.8-24.7-.9-4.7-.7-9.5-.7-16.9v-35.8H362l.2-15.9h13.4V78zm-51.7 28.7v91.5H324v-91.5zm0-28.7v16.3h-19V78zm-83.6 102.2h48.2l-18 18H240V78h19.2z"/>
<path fill="#324fff" d="M0 80v80a70.3 70.3 0 0040-40z"/>
<path fill="#283198" d="M40 120c5.7 27.3 5.3 47 0 80L0 160z"/>
<path fill="#0ff" d="M40 120v80l40-40a149.9 149.9 0 00-40-40z"/>
<path fill="#324fff" d="M80 0v80S48.3 55.7 40 40z"/>
<path fill="#324fff" d="M40 40v80a84.8 84.8 0 0040-40z"/>
<path fill="#00e8ff" d="M80 80a182 182 0 010 80l-40-40z"/>
<path fill="#283198" d="M80 80v80c17-7.5 31.5-19 40-40-5.9-17-18.1-30.9-40-40z"/>
<path fill="#283198" d="M120 40v80L80 80z"/>
<path fill="#00e8ff" d="M120 120c6.1 27 4.9 53.6 0 80l-40-40z"/>
<path fill="#324fff" d="M120 120v80l40-40c-5.4-15-18.3-27.9-40-40z"/>
<path fill="#324fff" d="M160 80v80l-40-40z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 621 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View file

@ -0,0 +1 @@
<svg enable-background="new 0 0 341.7 155.3" viewBox="0 0 341.7 155.3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.513" x2="152.027" y1="3.551" y2="63.991"><stop offset=".118" stop-color="#bbbdbf"/><stop offset=".299" stop-color="#f1f1f2"/><stop offset="1" stop-color="#d0d2d3"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.792" x2="73.994" y1="33.088" y2="105.748"><stop offset="0" stop-color="#bbbdbf"/><stop offset=".475" stop-color="#929497"/><stop offset="1" stop-color="#58595b"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.417" x2="144.251" y1="64.728" y2="150.269"><stop offset="0" stop-color="#58595b"/><stop offset=".539" stop-color="#929497"/><stop offset="1" stop-color="#58595b"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.248" x2="24.386" y1="75.009" y2="261.284"><stop offset="0" stop-color="#4377bb"/><stop offset="0" stop-color="#808184"/><stop offset=".475" stop-color="#404041"/><stop offset="1" stop-color="#231f20"/></linearGradient></defs><path d="m169.2 100.9s3.2 3.4 8.1 3.4c3.4 0 6.2-2 6.2-5.4 0-7.8-15.5-5.9-15.5-15.5 0-4.5 4-8.3 9.7-8.3 5.4 0 8.3 3 8.3 3l-1.5 2.6s-2.7-2.7-6.8-2.7c-4 0-6.5 2.6-6.6 5.3 0 7.4 15.5 5.3 15.5 15.5 0 4.6-3.6 8.4-9.4 8.4-6.4 0-9.8-4-9.8-4zm49.1-25.6c8.8 0 15.8 7 15.8 15.9.1 8.8-7 16.1-15.8 16.2h-.1c-8.8-.1-15.9-7.4-15.8-16.2v-.1c.1-8.9 7.1-15.9 15.9-15.8zm-.1 29.3c7.2-.2 12.9-6.1 12.7-13.3v-.1c0-7.4-5.6-13.1-12.6-13.1s-12.7 5.6-12.7 13c0 7.6 5.6 13.4 12.6 13.5zm33.9-28.7h3l-.1 28.3h14.4v2.7h-17.5zm33.9.1h3l-.1 31.1h-3zm23.2 0h10c9.3 0 15.6 5.7 15.6 15.6s-6.3 15.5-15.6 15.5h-10zm9.6 28.4c7.6 0 12.7-4.5 12.8-12.8 0-8.3-5.1-12.8-12.7-12.8h-6.7l-.1 25.6z" fill="#fff"/><path d="m163 35.8s-52.7-39.8-93.6-30.5c-1.2.3-2.5.6-3.6 1-6.3 2-11 5.5-13.9 9.7-.6.8-1 1.7-1.5 2.5l-15.1 25.7 26.1 5.1c10.3 7.4 24.8 10.5 37.2 7.3l46.5 9.1z" fill="#bbbdbf"/><path d="m163 35.8s-52.7-39.8-93.6-30.5c-1.2.3-2.5.6-3.6 1-6.3 2-11 5.5-13.9 9.7-.6.8-1 1.7-1.5 2.5l-15.1 25.7 26.1 5.1c10.3 7.4 24.8 10.5 37.2 7.3l46.5 9.1z" fill="url(#a)" opacity=".29"/><path d="m51.5 35.3c-1.2.3-2.5.6-3.6 1-16.7 5.4-22.4 21-12.8 34.7s30.9 20.4 47.6 15l62.3-20.2s-52.6-39.8-93.5-30.5z" fill="#929497"/><path d="m51.5 35.3c-1.2.3-2.5.6-3.6 1-16.7 5.4-22.4 21-12.8 34.7s30.9 20.4 47.6 15l62.3-20.2s-52.6-39.8-93.5-30.5z" fill="url(#b)" opacity=".34"/><path d="m133.6 80.3c-9.6-13.7-30.9-20.5-47.6-15.1l-62.4 20.2-19.6 35 111.6 19.1 20-35.6c4-7 3.6-15.6-2-23.6z" fill="url(#c)"/><path d="m114 115.2c-9.6-13.7-30.9-20.5-47.6-15.1l-62.4 20.3s52.7 39.8 93.6 30.5c1.2-.3 2.5-.6 3.6-1 16.7-5.4 22.4-21 12.8-34.7z" fill="url(#d)"/></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -1,3 +1,5 @@
@use './code.scss';
:root {
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
--font-body: 'IBM Plex Sans', var(--font-fallback);
@ -168,7 +170,6 @@ small,
a {
color: var(--theme-accent);
font-weight: 400;
text-underline-offset: 0.08em;
text-decoration: none;
align-items: center;

155
www/public/code.scss Normal file
View file

@ -0,0 +1,155 @@
.language-css > code,
.language-sass > code,
.language-scss > code {
color: #fd9170;
}
[class*='language-'] .namespace {
opacity: 0.7;
}
.token.atrule {
color: #c792ea;
}
.token.attr-name {
color: #ffcb6b;
}
.token.attr-value {
color: #a5e844;
}
.token.attribute {
color: #a5e844;
}
.token.boolean {
color: #c792ea;
}
.token.builtin {
color: #ffcb6b;
}
.token.cdata {
color: #80cbc4;
}
.token.char {
color: #80cbc4;
}
.token.class {
color: #ffcb6b;
}
.token.class-name {
color: #f2ff00;
}
.token.comment {
color: #616161;
}
.token.constant {
color: #c792ea;
}
.token.deleted {
color: #ff6666;
}
.token.doctype {
color: #616161;
}
.token.entity {
color: #ff6666;
}
.token.function {
color: #c792ea;
}
.token.hexcode {
color: #f2ff00;
}
.token.id {
color: #c792ea;
font-weight: bold;
}
.token.important {
color: #c792ea;
font-weight: bold;
}
.token.inserted {
color: #80cbc4;
}
.token.keyword {
color: #c792ea;
}
.token.number {
color: #fd9170;
}
.token.operator {
color: #89ddff;
}
.token.prolog {
color: #616161;
}
.token.property {
color: #80cbc4;
}
.token.pseudo-class {
color: #a5e844;
}
.token.pseudo-element {
color: #a5e844;
}
.token.punctuation {
color: #89ddff;
}
.token.regex {
color: #f2ff00;
}
.token.selector {
color: #ff6666;
}
.token.string {
color: #a5e844;
}
.token.symbol {
color: #c792ea;
}
.token.tag {
color: #ff6666;
}
.token.unit {
color: #fd9170;
}
.token.url {
color: #ff6666;
}
.token.variable {
color: #ff6666;
}

View file

@ -0,0 +1,7 @@
---
import BaseHead from './BaseHead.astro';
const { title, description, permalink } = Astro.props;
---
<BaseHead title={title} description={description} permalink={permalink} />
<link rel="stylesheet" href="/blog.css" />

View file

@ -0,0 +1,9 @@
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-TEL60V1WM9');
</script>

View file

@ -7,3 +7,8 @@ export const sidebar = [
],
},
];
export const mediaQueries = {
mobile: '(max-width: 600px)',
desktop: '(min-width: 601px)'
}

View file

@ -2,5 +2,9 @@
"fred": {
"name": "Fred K. Schott",
"twitter": "FredKSchott"
},
"matthew": {
"name": "Matthew Phillips",
"twitter": "matthewcp"
}
}

View file

@ -0,0 +1,105 @@
---
import { Markdown, Prism } from 'astro/components';
import BlogHead from '../../components/BlogHead.astro';
import BlogHeader from '../../components/BlogHeader.astro';
import BlogPost from '../../components/BlogPost.astro';
import BlockQuote from '../../components/BlockQuote.astro';
import GoogleAnalytics from '../../components/GoogleAnalytics.astro';
import Note from '../../components/Note.astro';
import Shell from '../../components/Shell.astro';
import { mediaQueries } from '../../config.js';
let title = 'Astro 0.18 Release';
let description = `Astro 0.18 is our biggest release since Astro launch. It includes a new responsive hydrator, named slots, global stylesheets, and two new renderers. Ready on to learn more on this release.`;
let publishDate = 'Tuesday, July 27 2021';
let author = 'matthew';
let heroImage = '/social.jpg';
let permalink = 'https://astro.build/blog/astro-0-18';
let lang = 'en';
---
<html lang={ lang ?? 'en' }>
<head>
<BlogHead title={title} description={description} permalink={permalink} />
<style global>
img {
max-width: 100%;
}
</style>
</head>
<body>
<BlogHeader />
<BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate}>
<Markdown>
A little over a month ago, the first public beta for Astro was released to the world. Since then, we have been fixing bugs and gathering your feedback on what to tackle next. Today, we are excited to announce the release of some of our most requested features.
We are excited to introduce Astro v0.18, featuring:
* __[Responsive partial hydration:](#responsive-component-hydration)__ Hydrate components with CSS media queries.
* __[Named slots:](#named-slots)__ Support multiple content entrypoints inside of Astro components.
* __[Solid.js support:](#solid-support)__ Use [Solid.js](https://www.solidjs.com/) components in Astro.
* __[Lit support:](#solid-support)__ Use [Lit SSR](https://lit.dev/) to get server-side rendering for web components.
* [`<style global>` support](https://docs.astro.build/guides/styling#overview), [GitHub syntax highlighting](https://twitter.com/n_moore/status/1417881860051509250) and a [shiny new docs site.](https://docs.astro.build/)
## Responsive partial hydration
<img src="/assets/blog/astro-018/responsive-hydration.jpg" alt="Code example that shows off using the new client:media hydrator." />
<!-- Saved from https://carbon.now.sh/16xchqPVdt5IEAY3Czg3 -->
Responsive websites often load components that are only visible on certain device sizes, like a mobile sidebar menu. As a developer, it can be difficult (impossible?) to avoid loading mobile-only code on non-mobile devices. The result is wasted time spent on code that will never even be seen by the end user.
Astro solves the problem of unnecessary JavaScript with [partial hydration](https://docs.astro.build/core-concepts/component-hydration), a technique that involves only hydrating the components that need interactivity and leaving the rest as static HTML. **Astro v0.18 adds a new way to customize partial hydration using [CSS media queries](https://docs.astro.build/core-concepts/component-hydration#mycomponent-clientmediaquery-) that avoid sending code to devices that don't need it.**
Add the `client:media` directive to a component and it will only hydrate once the media condition is met. On a mobile phone? Skip any expensive and unneccesary JavaScript for the desktop header that you'll never see. On a desktop or laptop? Don't load that mobile hamburger menu. This is all part of Astro's commitment to minimizing the unnecesary JavaScript that you send to your users.
## Named slots in Astro components
![Using multiple slots to provide the head and body parts of a Layout component.](/assets/blog/astro-018/named-slots.png)
<!-- https://carbon.now.sh/9UwJkMCezRIOhzac5VVp -->
[Named slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots) are a standard web feature used in [browser APIs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots) and web frameworks like [Vue](https://vuejs.org/v2/guide/components-slots.html#Named-Slots). In this release, [Astro adds support for named slots](https://docs.astro.build/core-concepts/astro-components#slots) to Astro components, pages, and layouts.
Named slots are particularly useful for page layouts. A layout can now specify slots for different sections of the page. You can put metadata tags in "head" slot, and page content in the "body" or "content" slot. Your layout is now completely customizable, with as many or as few slots as you need.
## Solid support
<img src="/assets/blog/astro-018/solid-logo-dark.svg" alt="Solid.js logo" style="background-color: rgb(65, 64, 66); padding: 2rem 4rem;" />
[Solid](https://www.solidjs.com/) is a JSX-based UI framework that bills itself as the familiar, modern, more reactive alternative to React. We're really excited about Solid, and with the new [Solid renderer](https://github.com/snowpackjs/astro/tree/main/packages/renderers/renderer-solid) for Astro you can use Solid as a first-class framework in your project.
Adding support for Solid (our third officially-supported JSX framework) wasn't easy, and required a major refactoring of how Astro handles JSX. The final result was worth it: Astro is now much better at supporting different types of JSX and can even support the new React v17 JSX transform. This new foundation for Astro should support us well into the future.
The release of Solid v1.0 is the perfect showcase for Astro's multi-framework promise: try out your first Solid component in an existing project side-by-side with the rest of your components. Where other build tools force you to choose a single framework and stick with it, Astro makes multi-framework projects easy for short-term code migrations or long-term site architectures.
## Lit SSR support
![Lit logo](/assets/blog/astro-018/lit-logo.svg)
Server-side rendering (SSR) for web components is finally here, thanks to Lit and the new [Lit renderer for Astro](https://github.com/snowpackjs/astro/tree/main/packages/renderers/renderer-lit).
Thanks to the [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/) -- a new HTML feature that's now available in Chrome -- the Lit project was able to release experimental SSR support for Lit. Define a custom element in JavaScript and server render it with Astro as you would any other component from React or Vue. Unlike other JS components, you still use the custom element tag name in your HTML.
The Lit SSR renderer is experimental, and some existing web components may not work with the new API. As other web component libraries adopt declarative shadow DOM and common APIs emerge for rendering, we hope to bring support to those libraries as well. We will keep refining and improving this support as we move towards Astro v1.0.
## Community
We've been absolutely blown away by the love Astro has recieved in such a short amount of time:
- Featured articles and guides from [Netlify](https://www.netlify.com/blog/2021/07/23/build-a-modern-shopping-site-with-astro-and-serverless-functions/), [Cloudflare](https://developers.cloudflare.com/pages/framework-guides/astro), [CSS Tricks](https://css-tricks.com/a-look-at-building-with-astro/), and more.
- Over 2,000 developers have downloaded the [Astro VSCode extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)
- Over 500 weekly visitors to our [amazing Discord](https://astro.build/chat)
- Over 300 public projects using Astro [on Github](https://github.com/snowpackjs/astro)
- 2 (TWO!) Astro jobs already posted on Discord!
- [GitHub adds support for Astro component syntax highlighting](https://twitter.com/n_moore/status/1417881860051509250)
To learn more about Astro and start building your first site, check out [the Getting Started guide.](https://docs.astro.build)
</Markdown>
</BlogPost>
<GoogleAnalytics />
</body>
</html>

View file

@ -67,6 +67,10 @@ let lang = 'en';
<p>{description}</p>
</section>
<section>
<BlogPostPreview title="Astro 0.18 Release" publishDate="Tuesday, July 27 2021" href="/blog/astro-018">
<p>Astro 0.18 is our biggest release since Astro launch. It includes a new responsive hydrator, named slots, global stylesheets, and two new renderers. Ready on to learn more on this release.</p>
</BlogPostPreview>
<BlogPostPreview title="Introducing Astro: Ship Less JavaScript" publishDate="Tuesday, June 8 2021" href="/blog/introducing-astro">
<p>We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.</p>
</BlogPostPreview>

View file

@ -41,7 +41,7 @@ let lang = 'en';
This post marks the first public beta release of Astro. **Missing features and bugs are still to be expected at this early stage.** There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.
<Note>
To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides)
To learn more about Astro and start building your first site, check out [our Getting Started guide.](https://docs.astro.build)
</Note>
## Getting Started
@ -62,7 +62,7 @@ npm start
`} />
<Note>
To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides)
To learn more about Astro and start building your first site, check out [our Getting Started guide.](https://docs.astro.build)
</Note>
@ -81,7 +81,7 @@ npm start
This new approach to web architecture is called [islands architecture](https://jasonformat.com/islands-architecture/). We didn't coin the term, but Astro may have perfected the technique. We are confident that an HTML-first, JavaScript-only-as-needed approach is the best solution for the majority of content-based websites.
<Note>
To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides)
To learn more about Astro and start building your first site, check out [our Getting Started guide.](https://docs.astro.build)
</Note>
## Embracing the Pit of Success
@ -111,7 +111,7 @@ npm start
Finally, I'd like to give a **HUGE** thanks to the 300+ developers who joined our earliest private beta. Your feedback has been essential in shaping Astro into the tool it is today. If you're interested in getting involved (or just following along with development) please [join us on Discord.](https://astro.build/chat)
<Note>
To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides)
To learn more about Astro and start building your first site, check out [our Getting Started guide.](https://docs.astro.build)
</Note>
</Markdown>
</BlogPost>

View file

@ -50,8 +50,8 @@ let lang = 'en';
<br/>
<a class="action-button" href="/blog/introducing-astro">
New Blog Post - Introducing Astro: Ship Less JavaScript
<a class="action-button" href="/blog/astro-018">
New Blog Post - Astro 0.18 Release
<span style="float: right;">&#8594;</span>
</a>