From f7b6e150d42877f16397fd5b87768e9afc8fb226 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Tue, 17 Aug 2021 23:58:59 -0700 Subject: [PATCH] Astro v0.19 release blog post (#1135) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * [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] * code review comments Co-authored-by: Tony Sullivan Co-authored-by: Tony Sullivan Co-authored-by: matthewp Co-authored-by: FredKSchott 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] --- docs/public/favicon.ico | Bin 15406 -> 4286 bytes www/public/code.scss | 4 +- www/public/favicon.ico | Bin 15406 -> 4286 bytes www/src/components/Author.astro | 5 - www/src/components/BaseHead.astro | 11 +- www/src/components/BlogHead.astro | 4 +- www/src/components/BlogPost.astro | 4 +- www/src/components/BlogPostPreview.astro | 4 +- www/src/components/GithubStarButton.astro | 4 +- www/src/pages/blog/astro-018.astro | 5 +- www/src/pages/blog/astro-019.astro | 187 ++++++++++++++++++++++ www/src/pages/blog/index.astro | 10 +- 12 files changed, 211 insertions(+), 27 deletions(-) create mode 100644 www/src/pages/blog/astro-019.astro diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico index 6f864efe38da506618e2ee1c87fdd7cba7004190..578ad458b8906c08fbed84f42b045fea04db89d1 100644 GIT binary patch literal 4286 zcmchZF=!M)6ox0}Fc8GdTHG!cdIY>nA!3n2f|wxIl0rn}Hl#=uf>?-!2r&jMEF^_k zh**lGut*gwBmoNv7AaB&2~nbzULg{WBhPQ{ZVzvF_HL8Cb&hv$_s#qN|IO^o>?+mA zuTW6tU%k~z<&{z+7$G%*nRsTcEO|90xy<-G5&JTt%CgZZCDT4%R?+{Vd^wh>P8_)} z`+dF$HQb9!>1o`Ivn;GInlCw{9T@Rt%q+d^T3Ke%cxkk;$v`{s^zCB9nHAv6w$Vbn z8fb<+eQTNM`;rf9#obfGnV#3+OQEUv4gU;{oA@zol%keY9-e>4W>p7AHmH~&!P7f7!Uj` zwgFeQ=<3G4O;mwWO`L!=R-=y3_~-DPjH3W^3f&jjCfC$o#|oGaahSL`_=f?$&Aa+W z2h8oZ+@?NUcjGW|aWJfbM*ZzxzmCPY`b~RobNrrj=rd`=)8-j`iSW64@0_b6?;GYk zNB+-fzOxlqZ?`y{OA$WigtZXa8)#p#=DPYxH=VeC_Q5q9Cv`mvW6*zU&Gnp1;oPM6 zaK_B3j(l^FyJgYeE9RrmDyhE7W2}}nW%ic#0v@i1E!yTey$W)U>fyd+!@2hWQ!Wa==NAtKoj`f3tp4y$Al`e;?)76?AjdaRR>|?&r)~3Git> zb1)a?uiv|R0_{m#A9c;7)eZ1y6l@yQ#oE*>(Z2fG-&&smPa2QTW>m*^K65^~`coP$ z8y5Y?iS<4Gz{Zg##$1mk)u-0;X|!xu^FCr;ce~X<&UWE&pBgqfYmEJTzpK9I%vr%b z3Ksd6qlPJLI%HFfeXK_^|BXiKZC>Ocu(Kk6hD3G-8usLzVG^q00Qh gz)s7ge@$ApxGu7=(6IGIk+uG&HTev01^#CH3$(Wk5&!@I literal 15406 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 Bvp@g< diff --git a/www/public/code.scss b/www/public/code.scss index ec735a676..ec0e8dea2 100644 --- a/www/public/code.scss +++ b/www/public/code.scss @@ -49,11 +49,11 @@ } .token.comment { - color: #616161; + color: #888888; } .token.constant { - color: #c792ea; + color: #f2ff00; } .token.deleted { diff --git a/www/public/favicon.ico b/www/public/favicon.ico index 6f864efe38da506618e2ee1c87fdd7cba7004190..578ad458b8906c08fbed84f42b045fea04db89d1 100644 GIT binary patch literal 4286 zcmchZF=!M)6ox0}Fc8GdTHG!cdIY>nA!3n2f|wxIl0rn}Hl#=uf>?-!2r&jMEF^_k zh**lGut*gwBmoNv7AaB&2~nbzULg{WBhPQ{ZVzvF_HL8Cb&hv$_s#qN|IO^o>?+mA zuTW6tU%k~z<&{z+7$G%*nRsTcEO|90xy<-G5&JTt%CgZZCDT4%R?+{Vd^wh>P8_)} z`+dF$HQb9!>1o`Ivn;GInlCw{9T@Rt%q+d^T3Ke%cxkk;$v`{s^zCB9nHAv6w$Vbn z8fb<+eQTNM`;rf9#obfGnV#3+OQEUv4gU;{oA@zol%keY9-e>4W>p7AHmH~&!P7f7!Uj` zwgFeQ=<3G4O;mwWO`L!=R-=y3_~-DPjH3W^3f&jjCfC$o#|oGaahSL`_=f?$&Aa+W z2h8oZ+@?NUcjGW|aWJfbM*ZzxzmCPY`b~RobNrrj=rd`=)8-j`iSW64@0_b6?;GYk zNB+-fzOxlqZ?`y{OA$WigtZXa8)#p#=DPYxH=VeC_Q5q9Cv`mvW6*zU&Gnp1;oPM6 zaK_B3j(l^FyJgYeE9RrmDyhE7W2}}nW%ic#0v@i1E!yTey$W)U>fyd+!@2hWQ!Wa==NAtKoj`f3tp4y$Al`e;?)76?AjdaRR>|?&r)~3Git> zb1)a?uiv|R0_{m#A9c;7)eZ1y6l@yQ#oE*>(Z2fG-&&smPa2QTW>m*^K65^~`coP$ z8y5Y?iS<4Gz{Zg##$1mk)u-0;X|!xu^FCr;ce~X<&UWE&pBgqfYmEJTzpK9I%vr%b z3Ksd6qlPJLI%HFfeXK_^|BXiKZC>Ocu(Kk6hD3G-8usLzVG^q00Qh gz)s7ge@$ApxGu7=(6IGIk+uG&HTev01^#CH3$(Wk5&!@I literal 15406 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 Bvp@g< diff --git a/www/src/components/Author.astro b/www/src/components/Author.astro index 56013ceb7..0743f8f82 100644 --- a/www/src/components/Author.astro +++ b/www/src/components/Author.astro @@ -8,11 +8,6 @@ export interface Props { const { authorId } = Astro.props; const author = authorData[authorId]; --- -

by {author.name}{' '}@{author.twitter}

diff --git a/www/src/components/BaseHead.astro b/www/src/components/BaseHead.astro index 03e1ac852..08206b831 100644 --- a/www/src/components/BaseHead.astro +++ b/www/src/components/BaseHead.astro @@ -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; --- @@ -18,21 +18,22 @@ const { title, description, permalink } = Astro.props; {title} + - + - + - + diff --git a/www/src/components/BlogHead.astro b/www/src/components/BlogHead.astro index 866929725..30dc2f4ed 100644 --- a/www/src/components/BlogHead.astro +++ b/www/src/components/BlogHead.astro @@ -1,7 +1,7 @@ --- import BaseHead from './BaseHead.astro'; -const { title, description, permalink } = Astro.props; +const { title, description, canonicalURL } = Astro.props; --- - + \ No newline at end of file diff --git a/www/src/components/BlogPost.astro b/www/src/components/BlogPost.astro index 04d8e4324..8db1b305c 100644 --- a/www/src/components/BlogPost.astro +++ b/www/src/components/BlogPost.astro @@ -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 && }

{publishDate}

{title}

- + {author && }
diff --git a/www/src/components/BlogPostPreview.astro b/www/src/components/BlogPostPreview.astro index bb44c4abb..235ca6371 100644 --- a/www/src/components/BlogPostPreview.astro +++ b/www/src/components/BlogPostPreview.astro @@ -15,9 +15,7 @@ const { title, publishDate, href } = Astro.props;

{title}
- - - Read more + {' '}Read more →
diff --git a/www/src/components/GithubStarButton.astro b/www/src/components/GithubStarButton.astro index e8152cb46..9613c9e72 100644 --- a/www/src/components/GithubStarButton.astro +++ b/www/src/components/GithubStarButton.astro @@ -1,6 +1,6 @@ -
- + Star
diff --git a/www/src/pages/blog/astro-018.astro b/www/src/pages/blog/astro-018.astro index 29e99d39a..ec30c4640 100644 --- a/www/src/pages/blog/astro-018.astro +++ b/www/src/pages/blog/astro-018.astro @@ -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'; --- - + + + + + + + + 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 + + + ``` + + `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 + + + + + ``` + + 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 + + + + + ``` + + 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! + + + + ## 👋 + + 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) ;) + + + + + + diff --git a/www/src/pages/blog/index.astro b/www/src/pages/blog/index.astro index 719b9b629..73bd21fa8 100644 --- a/www/src/pages/blog/index.astro +++ b/www/src/pages/blog/index.astro @@ -67,12 +67,16 @@ let lang = 'en';

{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.

+ + Introducing: Next.js-inspired file routing • Astro.resolve() • client:only components • translations. + + + + Introducing: Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support. -

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.

+ 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.