mirror of
https://github.com/withastro/astro.git
synced 2024-12-30 22:03:56 -05:00
Astro v0.19 release blog post (#1135)
* wip * Add support for `client:only` hydrator (#935) * Adding support for client:only hydration * Adding documentation for client:only * Adding changeset * Updating the test to use a browser-only API * Adding a browser-specific import script, this reproduces the issue where client:only imports must be removed * typo fix * removing mispelled test component * WIP: delaying inclusion of component imports until the hydration method is known * WIP: tweaking the test to use window instead of document * When only one renderer is included, use that for client:only hydration * temporary test script snuck into the last commit * WIP: adding check for a client:only renderer hint * refactor: Remove client:only components instead of delaying all component import statements * Updating the changeset and docs for the renderer hint * refactor: pull client:only render matching out to it's own function * Updating renderer hinting to match full name, with shorthand for internal renderers Co-authored-by: Tony Sullivan <tony.f.sullivan@gmail.com> * [ci] yarn format * Update CONTRIBUTING.md (#1131) * [ci] yarn format * docs: fix select language in Safari (#1127) (#1128) * docs: fix select language in Safari (#1127) * docs: fix select language top position * docs: fix select language position * Make congratsbot not run in forks (#1145) * add back dark-mode aware favicons * make example favicons prefer non-dark mode * Version Packages (next) (#1129) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * code review comments Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com> Co-authored-by: Tony Sullivan <tony.f.sullivan@gmail.com> Co-authored-by: matthewp <matthewp@users.noreply.github.com> Co-authored-by: FredKSchott <FredKSchott@users.noreply.github.com> Co-authored-by: Oleg <64708593+olejech@users.noreply.github.com> Co-authored-by: Marcus Otterström <35617441+MarcusOtter@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Fred K. Schott
GitHub
parent
8bdda81fd1
commit
f7b6e150d4
12 changed files with 211 additions and 27 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 4.2 KiB |
|
|
@ -49,11 +49,11 @@
|
|||
}
|
||||
|
||||
.token.comment {
|
||||
color: #616161;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.token.constant {
|
||||
color: #c792ea;
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 4.2 KiB |
|
|
@ -8,11 +8,6 @@ export interface Props {
|
|||
const { authorId } = Astro.props;
|
||||
const author = authorData[authorId];
|
||||
---
|
||||
<style>
|
||||
.author {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
<div class="author">
|
||||
<p>by {author.name}{' '}<a href={`https://twitter.com/${author.twitter}`}>@{author.twitter}</a></p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
permalink: string;
|
||||
canonicalURL: URL | string,
|
||||
}
|
||||
const { title, description, permalink } = Astro.props;
|
||||
const { title, description, canonicalURL } = Astro.props;
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
|
|
@ -18,21 +18,22 @@ const { title, description, permalink } = Astro.props;
|
|||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonicalURL}/>
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={permalink} />
|
||||
<meta property="og:url" content={canonicalURL} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content="https://astro.build/social.jpg?v=1" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={permalink} />
|
||||
<meta property="twitter:url" content={canonicalURL} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content="https://astro.build/social.jpg?v=1" />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;700&display=swap">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import BaseHead from './BaseHead.astro';
|
||||
|
||||
const { title, description, permalink } = Astro.props;
|
||||
const { title, description, canonicalURL } = Astro.props;
|
||||
---
|
||||
<BaseHead title={title} description={description} permalink={permalink} />
|
||||
<BaseHead title={title} description={description} canonicalURL={canonicalURL} />
|
||||
<link rel="stylesheet" href="/blog.css" />
|
||||
|
|
@ -4,7 +4,7 @@ import GithubStarButton from './GithubStarButton.astro';
|
|||
|
||||
export interface Props {
|
||||
title: string;
|
||||
author: string;
|
||||
author?: string;
|
||||
publishDate: string;
|
||||
heroImage: string;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ const { title, author, publishDate, heroImage } = Astro.props;
|
|||
{heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} />}
|
||||
<p class="publish-date">{publishDate}</p>
|
||||
<h1 class="title">{title}</h1>
|
||||
<Author authorId={author} />
|
||||
{author && <Author authorId={author} />}
|
||||
<GithubStarButton />
|
||||
</header>
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,7 @@ const { title, publishDate, href } = Astro.props;
|
|||
<a href={href}><h1 class="title">{title}</h1></a>
|
||||
</header>
|
||||
<main>
|
||||
<slot />
|
||||
|
||||
<a href={href}>Read more</a>
|
||||
<slot />{' '}<a href={href}>Read more →</a>
|
||||
</main>
|
||||
</article>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- Place this tag where you want the button to render. -->
|
||||
<div class="hidden-mobile" style="text-align: center; height: 36px;">
|
||||
<a class="github-button" href="https://github.com/snowpackjs/astro" data-icon="octicon-star"
|
||||
<div class="hidden-mobile" style="text-align: center; height: 36px; margin-top: 0.75rem;">
|
||||
<a class="github-button" href="https://github.com/snowpackjs/astro" data-icon="octicon-star"
|
||||
data-size="large" data-show-count="true" aria-label="Star snowpackjs/astro on GitHub">Star</a>
|
||||
</div>
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
|
|
|
|||
|
|
@ -10,17 +10,16 @@ import Shell from '../../components/Shell.astro';
|
|||
import { mediaQueries } from '../../config.js';
|
||||
|
||||
let title = 'Astro 0.18 Release';
|
||||
let description = `Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support • and more!`;
|
||||
let description = `Introducing: Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support • and more!`;
|
||||
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} />
|
||||
<BlogHead title={title} description={description} canonicalURL={Astro.request.canonicalURL} />
|
||||
<style global>
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
187
www/src/pages/blog/astro-019.astro
Normal file
187
www/src/pages/blog/astro-019.astro
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
---
|
||||
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.19';
|
||||
let description = `Introducing: Next.js-inspired dynamic routing • Astro.resolve() • client:only components • translations • and more!`;
|
||||
let publishDate = 'Tuesday, August 17 2021';
|
||||
let heroImage = '/social.jpg';
|
||||
let lang = 'en';
|
||||
---
|
||||
|
||||
<html lang={ lang ?? 'en' }>
|
||||
<head>
|
||||
<BlogHead title={title} description={description} canonicalURL={Astro.request.canonicalURL} />
|
||||
<style global>
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BlogHeader />
|
||||
<BlogPost title={title} heroImage={heroImage} publishDate={publishDate}>
|
||||
<Markdown>
|
||||
We are excited to introduce Astro 0.19, featuring:
|
||||
|
||||
* __[Next.js-inspired routing:](#file-based-routing-inspired-by-nextjs)__ Define new dynamic URL params.
|
||||
* __[`client:only` directive:](#clientonly-loading-directive)__ Opt-out of SSR for individual components.
|
||||
* __[`Astro.resolve()`:](#astroresolve)__ Resolve relative URLs to assets in `src/`.
|
||||
* __[Community translations:](#docs-translations)__ Read our docs in 10 different languages.
|
||||
* __[Astro Open Collective:](#open-collective)__ Now accepting donations & sponsorship!
|
||||
|
||||
## File-based routing, inspired by Next.js
|
||||
|
||||
Astro has always supported basic file-based routing, where every file in your `pages/` directory becomes a new page at that same URL. Astro 0.19 takes this one step further with support for real file-based route parameters.
|
||||
|
||||
Inspired by [Next.js](https://nextjs.org/docs/routing/dynamic-routes) and [SvelteKit](https://kit.svelte.dev/docs#routing-pages), you can now add brackets to your page filename (ex: `src/pages/[slug].astro`) to create a dynamic page that matches many different URLs. With this new syntax, you can add URL params, slugs, pretty URLs, pagination and more to your website.
|
||||
|
||||
To create a dynamic route, create a file in your pages directory like `pages/posts/[slug].astro`. Create a [`getStaticPaths()`](https://docs.astro.build/reference/api-reference#getstaticpaths) function in your frontmatter script and tell Astro exactly what paths to build for that route:
|
||||
|
||||
```astro
|
||||
---
|
||||
// src/pages/posts/[slug].astro
|
||||
// Tell Astro what pages to build for your route "/pages/:slug"
|
||||
export async function getStaticPaths() {
|
||||
return [
|
||||
// Generates: /pages/hello-world
|
||||
{ params: { slug: 'hello-world' } },
|
||||
// Generates: /pages/my-first-blog-post
|
||||
{ params: { slug: 'my-first-blog-post' } },
|
||||
// Generates: /pages/astro-ftw
|
||||
{ params: { slug: 'astro-ftw' } },
|
||||
// ...
|
||||
];
|
||||
}
|
||||
---
|
||||
/* your page HTML here! */
|
||||
```
|
||||
|
||||
Astro is a static site builder, so you need to tell Astro what pages to build for every dynamic route. Defining your paths manually might feel like boilerplate, but ahead-of-time page building is exactly what makes static websites so fast for your users.
|
||||
|
||||
`getStaticPaths()` is an async function, you can -- and should! -- use it to load external data into your website. We normally love to use the [Pokemon API](https://pokeapi.co/) in our examples, but you'd probably rather use your favorite headless CMS:
|
||||
|
||||
```js
|
||||
// src/pages/posts/[id].astro
|
||||
// Tell Astro what pages to build for your route "/pages/:id"
|
||||
export async function getStaticPaths() {
|
||||
// Lets fetch posts from CSS Tricks' Headless CMS:
|
||||
const CSS_TRICKS_CMS = 'https://css-tricks.com/wp-json/wp/v2/posts?per_page=12&_embed';
|
||||
const allPosts = await fetch(CSS_TRICKS_CMS).then(r => r.json());
|
||||
// Then, create a new page from every post:
|
||||
return allPosts.map((post) => ({
|
||||
// Set the URL param ":id" in the page URL
|
||||
params: {id: post.id},
|
||||
// Pass the post object as a prop to the page
|
||||
props: {post},
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
To learn more, check out our new documentation on [Routing](https://docs.astro.build/core-concepts/routing) and the new [`getStaticPaths()` API.](https://docs.astro.build/reference/api-reference#getstaticpaths) Or, if you prefer to learn by example, check out this great [Wordpress Headless CMS project](https://github.com/chriscoyier/astro-css-trickzz) from Chris Coyier and this [Shopify Ecommerce example](https://github.com/cassidoo/shopify-react-astro) by Cassidy Williams of Netlify.
|
||||
|
||||
If you were a previous user of our original Collections API, this new file-based routing system completely replaces Collections with plenty of friendly warning messages to help you upgrade. We hope that this new API removes all common frustrations that users had reported with the Collections API.
|
||||
|
||||
## `client:only` loading directive
|
||||
|
||||
Sometimes, a UI component can't render on the server. Maybe it's because you've hit a bug in one of your dependencies, or maybe you're just using a library like D3 that can't run without the browser's `window` object.
|
||||
|
||||
You can attempt to wrap browser-only code with your own static server-side fallback UI. However, most users wanted a way to render a browser-only component without the extra boilerplate. Enter, `client:only`.
|
||||
|
||||
Astro 0.19 ships with the new `client:only` loading directive to hydrate your component in the browser without server-side rendering. This provides a simple, straightforward fallback for any browser-only components.
|
||||
|
||||
```html
|
||||
<!-- only renders in the browser, no placeholder HTML -->
|
||||
<MyReactComponent client:only />
|
||||
```
|
||||
|
||||
`client:only` is now our fifth directive to let you completely control you component loading behavior. Visit our docs site to [check out the entire set](https://docs.astro.build/core-concepts/component-hydration#hydrate-interactive-components) and learn more about [Partial Hydration](https://docs.astro.build/core-concepts/component-hydration).
|
||||
|
||||
🎉 This awesome feature was contributed by [Tony Sull](https://github.com/tony-sull) of [Navillus](https://navillus.dev/). Thanks, Tony!
|
||||
|
||||
## `Astro.resolve()`
|
||||
|
||||
Astro 0.19 includes a new [`Astro.resolve()`](https://docs.astro.build/reference/api-reference#astroresolve) helper function to resolve relative file references in your templates. With this new feature, you can reference relative assets (like images) inside of your components and Astro will return the correct URL for the browser.
|
||||
|
||||
Previously, you always had to place files in the `public/` directory and reference them by absolute URL path. Relative paths within the `src/` directory didn't work because they'd be shipped directly to the browser, as-is. Different pages would end up creating different URLs:
|
||||
|
||||
```html
|
||||
<!-- This works the same on every page: -->
|
||||
<img src="/logo.png" />
|
||||
<!-- But this means different things on different pages: -->
|
||||
<img src="../logo.png" />
|
||||
```
|
||||
|
||||
Starting in Astro 0.19, you can now use the new `Astro.resolve()` helper function to create an absolute URL reference from any relative path:
|
||||
|
||||
```html
|
||||
<!-- Astro component input: -->
|
||||
<img src={Astro.resolve('../images/logo.png')} />
|
||||
<!-- HTML output: -->
|
||||
<img src="/_astro/src/images/logo.png" />
|
||||
```
|
||||
|
||||
If it helps, you can think of `Astro.resolve()` as a simplified alternative to doing `new URL(yourRelativePath, import.meta.url).pathname` in the browser.
|
||||
|
||||
[`Astro.resolve()`](https://docs.astro.build/reference/api-reference#astroresolve) gives you more options and more control over how you structure your project. In the future, this will also unlock our ability to serve optimized images right out of your `src/` directory.
|
||||
|
||||
🎉 This awesome feature was contributed by [Jonathan Neal](https://github.com/jonathantneal) & [Matthew Phillips!](https://github.com/matthewp)
|
||||
|
||||
## Docs Translations
|
||||
|
||||
Not all developers speak English. In fact, most don't. Luckily, some amazing contributors in our community came together to translate the Astro docs site for a global audience. We are currently working on translations in 10 different languages, including:
|
||||
|
||||
- [简体中文](https://docs.astro.build/zh-CN/getting-started)
|
||||
- [正體中文](https://docs.astro.build/zh-TW/getting-started)
|
||||
- [Български](https://docs.astro.build/bg/getting-started)
|
||||
- [Deutsch](https://docs.astro.build/de/getting-started)
|
||||
- [English](https://docs.astro.build/getting-started)
|
||||
- [Español](https://docs.astro.build/es/getting-started)
|
||||
- [Français](https://docs.astro.build/fr/getting-started)
|
||||
- [Nederlands](https://docs.astro.build/nl/getting-started)
|
||||
- [Português](https://docs.astro.build/pt-br/getting-started)
|
||||
- [Suomi](https://docs.astro.build/fi/getting-started)
|
||||
|
||||
These are still a work in progress, and we'll keep working towards 100% translation as we creep closer to a v1.0 release. If you know a few languages and are able to contribute, [we could really use your help!](https://github.com/snowpackjs/astro/blob/main/CONTRIBUTING.md#translations)
|
||||
|
||||
## Open Collective
|
||||
|
||||
It's been a little over two months since [the first release](https://astro.build/blog/introducing-astro) of Astro. In that release, we outlined our commitment to both **a free, open source Astro** and **long-term financial sustainability** for the project. Today, we're announcing our first experiment towards long-term sustainability:
|
||||
|
||||
**Companies and individuals can now sponsor Astro's development with Open Collective. [Visit our Open Collective →](https://opencollective.com/astrodotbuild)**
|
||||
|
||||
We created an Open Collective because corporate sponsorship is one of the few proven paths towards financial sustainability in open source. However, [it's far from a perfect model.](https://stackoverflow.blog/2021/01/07/open-source-has-a-funding-problem/) Most contributions only go to a handful of popular projects, and the rest never see any meaningful support. The odds are against us but we believe in Astro, our community, and the excitement that keep growing around this project.
|
||||
|
||||
Chances are, your company benefits from open source software. Invest in the technologies that power your business by sponsoring Astro and any other open source projects that you use. **Bonus:** thousands of developers will see your logo on our README and the [astro.build homepage](https://astro.build), every day.
|
||||
|
||||
1005 of funds raised are invested directly back into the project and our community. You can read more about how funds are distributed by reading our [FUNDING.md](https://github.com/snowpackjs/astro/blob/main/FUNDING.md) doc on GitHub.
|
||||
|
||||
We'll be tweeting out personal "thank you" messages to every person and company who hits the ["Sponsor"](https://opencollective.com/astrodotbuild) button in the next 48 hours. Our first, very special THANK YOU goes out to [Chris Jennings](https://twitter.com/ckj), CCO and co-founder of [Sentry](https://sentry.io/), for being our first official sponsor! 🎉
|
||||
|
||||
## ICYMI (In case you missed it)
|
||||
|
||||
[Github added official support](https://twitter.com/astrodotbuild/status/1423001137905651714?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1423001137905651714%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fastro.build%2Fblog%2Fastro-019%2F) for `.astro` files and `'''astro` syntax highlighting across their entire platform. Not to be outdone, CodeSandbox [quickly followed up](https://twitter.com/codesandbox/status/1425438635357257728) with support of their own!
|
||||
|
||||
This is such a huge milestone for Astro, especially considering how young the project is! Thank you to everyone who used Astro, created projects, and showed these platforms how valuable Astro really is!
|
||||
|
||||
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">It's official! 🎉 <a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a> now supports syntax highlighting for .astro files!<br><br>You can also use code blocks starting with "'''astro" to get proper highlighting in Markdown files, issues, and PR comments! <a href="https://t.co/CDiGw66Qw6">pic.twitter.com/CDiGw66Qw6</a></p>— Astro (@astrodotbuild) <a href="https://twitter.com/astrodotbuild/status/1423001137905651714?ref_src=twsrc%5Etfw">August 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
## 👋
|
||||
|
||||
Thanks for reading! [Follow us on Twitter](https://twitter.com/astrodotbuild) to stay up to date as we move closer to a v1.0 release. Also, you can check out [our previous release post](https://astro.build/blog/astro-018) for even more updates on Astro.
|
||||
|
||||
And, if you've read this far, you should definitely [join us on Discord.](https://astro.build/chat) ;)
|
||||
</Markdown>
|
||||
</BlogPost>
|
||||
|
||||
<GoogleAnalytics />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -67,12 +67,16 @@ 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 title="Astro 0.19" publishDate="Tuesday, August 17 2021" href="/blog/astro-019">
|
||||
<span>Introducing: Next.js-inspired file routing • Astro.resolve() • client:only components • translations.</span>
|
||||
</BlogPostPreview>
|
||||
|
||||
<BlogPostPreview title="Astro 0.18" publishDate="Tuesday, July 27 2021" href="/blog/astro-018">
|
||||
<span>Introducing: Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support.</span>
|
||||
</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>
|
||||
<span>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.</span>
|
||||
</BlogPostPreview>
|
||||
</section>
|
||||
</article>
|
||||
|
|
|
|||
Loading…
Reference in a new issue