1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
---
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 18 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 dynamic URL params in your filename.
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. `[...slug].astro` catch-all syntax is also supported.
With this new feature you can add support for 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 page 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' } },
// ...
];
}
---
<html>
<head><title>My Page</title></head>
<body>URL Param is {Astro.request.params.slug}</body>
</html>
```
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, so 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'll probably want to 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';
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.
100% 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>
## 👋
Thank you 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>
|
