Improve www blog page layout (#1898)
* wip * Update Shell.astro to not introduce additional newlines * fix recursive markdown in Note Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com>
This commit is contained in:
Fred K. Schott
GitHub
parent
3f76849a0b
commit
1acedb5ce8
14 changed files with 410 additions and 500 deletions
|
|
@ -8,8 +8,8 @@ export interface Props {
|
|||
title: string;
|
||||
author?: string;
|
||||
publishDate: string;
|
||||
heroImage: string;
|
||||
heroImageAlt: string;
|
||||
heroImage?: string;
|
||||
heroImageAlt?: string;
|
||||
}
|
||||
|
||||
const { title, author, publishDate, heroImage, heroImageAlt } = Astro.props;
|
||||
|
|
@ -18,7 +18,7 @@ const { title, author, publishDate, heroImage, heroImageAlt } = Astro.props;
|
|||
<div class="layout">
|
||||
<article>
|
||||
<header>
|
||||
{heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} alt={heroImageAlt}/>}
|
||||
<img width="720" height="420" class="hero-image" loading="lazy" src={heroImage || '/social.jpg'} alt={heroImageAlt || ""} />
|
||||
<p class="publish-date">{publishDate}</p>
|
||||
<h1 class="title">{title}</h1>
|
||||
{author && <Author authorId={author} />}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@ export interface Props {
|
|||
}
|
||||
const { code } = Astro.props;
|
||||
---
|
||||
|
||||
<pre><code>{code.trim().split('\n').map(ln => <span class="line">
|
||||
{ln.startsWith('#') ? <span class="comment">{ln}</span> : ln}
|
||||
</span>)}</code></pre>
|
||||
<pre><code>{String(code).trim().split('\n').map(
|
||||
line => <span class="line">{
|
||||
line.startsWith('#') ? <span class="comment">{line}</span> : line
|
||||
}</span>)
|
||||
}</code></pre>
|
||||
|
||||
<style>
|
||||
pre, code {
|
||||
|
|
|
|||
73
www/src/data/blog-posts/astro-018.md
Normal file
73
www/src/data/blog-posts/astro-018.md
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
title: 'Astro 0.18 Release'
|
||||
description: 'Introducing: Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support • and more!'
|
||||
publishDate: 'July 27, 2021'
|
||||
author: 'matthew'
|
||||
lang: 'en'
|
||||
---
|
||||
|
||||
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
|
||||
|
||||
|
||||
<!-- 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
|
||||
|
||||
|
||||
|
||||
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)
|
||||
161
www/src/data/blog-posts/astro-019.md
Normal file
161
www/src/data/blog-posts/astro-019.md
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
---
|
||||
title: 'Astro 0.19'
|
||||
description: 'Introducing: Next.js-inspired dynamic routing • Astro.resolve() • client:only components • translations • and more!'
|
||||
publishDate: 'August 18, 2021'
|
||||
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 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)
|
||||
- [Русский](https://docs.astro.build/ru/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) ;)
|
||||
95
www/src/data/blog-posts/astro-021-preview.md
Normal file
95
www/src/data/blog-posts/astro-021-preview.md
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
title: 'Astro 0.21 Preview: Vite + WASM = ⚡️'
|
||||
description: 'Get a sneak preview of what is next for Astro, including our new Vite build engine and WASM-powered Go compiler.'
|
||||
publishDate: 'October 6, 2021'
|
||||
permalink: 'https://astro.build/blog/astro-021-preview'
|
||||
lang: 'en'
|
||||
heroImage: '/assets/blog/astro-021-preview/hero.png'
|
||||
heroImageAlt: 'Spacecraft overlooking Earth'
|
||||
---
|
||||
|
||||
Astro v0.21.0 will be our biggest release yet. At a high-level, it includes:
|
||||
|
||||
- [A new build engine, powered by Vite](#hello-vite)
|
||||
- [A new WASM compiler, written in Go](#hello-wasm)
|
||||
- [Brand new features, like Components-in-Markdown](#components-in-markdown)
|
||||
- [A new system for HTML live-updating via HMR](#hmr-meet-html)
|
||||
|
||||
You can try out our latest release today [in the browser](https://gitpod.io#snapshot/5e7cf2f1-8108-4fa5-99d3-ed8de70d8c23) or by running `npm install astro@next--compiler` in a new project directory on your machine.
|
||||
|
||||
Astro is quickly becoming the production-ready framework for building faster, content-focused websites. To celebrate this milestone, here are some highlights and details on what you can expect in Astro v0.21.0 and beyond.
|
||||
|
||||
## Hello, Vite!
|
||||
|
||||
Astro 0.21 is getting an internal build engine upgrade, replacing Snowpack with [Vite](https://vitejs.dev) going forward.
|
||||
|
||||
We ran some early experiments with Vite and came away extremely impressed. Vite is well-maintained, well-documented, a bit faster, has great error messages, and has been building clear community buy-in across multiple frameworks. SSR handling can be a bit flakey, but the Vite team is aware of this and actively working on it.
|
||||
|
||||
So now, when Evan You tweets about [some great performance optimization](https://twitter.com/youyuxi/status/1440718351802646550) that they're making in Vite you can be certain that the same speed is coming to Astro as well.
|
||||
|
||||
The reverse is also true: we can now contribute fixes and improvements back to the larger Vite community. Now, when we fix an SSR bug in Astro (like [adding support for ESM-only npm packages](https://github.com/vitejs/vite/pull/5197)) we're also fixing it for every other Vite user, including [SvelteKit](https://kit.svelte.dev/docs#routing-endpoints).
|
||||
|
||||
There's one other huge benefit to choosing Vite: Rollup plugins. Starting in v0.21.0, you'll be able to connect the entire ecosystem of Rollup plugins to Astro. Enable new features like [image optimizations](https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite) and [icon loading](https://github.com/antfu/unplugin-icons) with just a few simple plugins. Magic!
|
||||
|
||||
This switch from Snowpack to Vite might come as a surprise to some: Both Drew and myself are maintainers on both projects. This was [a hard decision](https://dev.to/fredkschott/5-more-things-i-learned-building-snowpack-to-20-000-stars-5dc9) for us to make. But ultimately, after working with both tools I can confidently say that Vite will be a great choice for Astro's future.
|
||||
|
||||
|
||||
## Hello, WASM!
|
||||
|
||||
Astro 0.21 features another huge low-level improvement: the brand new [@astrojs/compiler](https://github.com/snowpackjs/astro-compiler-next). Astro's new compiler is written in Go and distributed as WASM. You can run it right in your browser, or on the server in Node.js and Deno.
|
||||
|
||||
The new [@astrojs/compiler](https://github.com/snowpackjs/astro-compiler-next) unlocks:
|
||||
|
||||
- **Flexibility:** Run the compiler anywhere with WASM.
|
||||
- **Speed:** Build sites faster with Go's compiled-language performance.
|
||||
- **Stability:** Writing our own compiler allowed us to fix some long-standing bugs.
|
||||
|
||||
You can play with the new compiler today right in your browser at https://astro.build/play. This REPL is just one example of what is now possible when you have a fast, runs-anywhere compiler.
|
||||
|
||||
Shout out to [Nate Moore](https://twitter.com/n_moore) who did an incredible job with this project.
|
||||
|
||||
|
||||
## Components in Markdown
|
||||
|
||||
Our most requested feature ***by far*** has been the ability to use components directly in Markdown. After months of work, we're excited to announce that this feature is finally coming to Astro.
|
||||
|
||||
Starting in v0.21.0, you can import components inside of your Markdown frontmatter via an optional `setup` script. Once imported, your components can be used anywhere on the page:
|
||||
|
||||
<!-- Pre-formatted due to an Astro v0.21 components-in-markdown error. This is a tricky snippet. -->
|
||||
<pre class="astro-code" style="background-color: #0d1117; overflow-x: auto;"><code><span class="line"><span style="color: #8B949E">---</span></span>
|
||||
<span class="line"><span style="color: #FFA657">title</span><span style="color: #C9D1D9">: </span><span style="color: #A5D6FF">'Astro 0.21 Early Preview'</span></span>
|
||||
<span class="line"><span style="color: #FFA657">setup</span><span style="color: #C9D1D9">: </span><span style="color: #FF7B72">|</span></span>
|
||||
<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> Logo </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">'../components/Logo.astro'</span><span style="color: #C9D1D9">;</span></span>
|
||||
<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> ReactCounter </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">'../components/Counter.jsx'</span><span style="color: #C9D1D9">;</span></span>
|
||||
<span class="line"><span style="color: #8B949E">---</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color: #C9D1D9"># Astro now supports components in Markdown!</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color: #C9D1D9"><</span><span style="color: #7EE787">Logo</span><span style="color: #C9D1D9"> /></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color: #C9D1D9">- Back to markdown here. </span></span>
|
||||
<span class="line"><span style="color: #C9D1D9">- Supports static Astro components.</span></span>
|
||||
<span class="line"><span style="color: #C9D1D9">- Supports dynamic React/Vue/Svelte components!</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color: #C9D1D9"><</span><span style="color: #7EE787">ReactCounter</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">start</span><span style="color: #C9D1D9">={</span><span style="color: #79C0FF">0</span><span style="color: #C9D1D9">} </span><span style="color: #79C0FF">client:load</span><span style="color: #C9D1D9"> /> </span></span>
|
||||
<span class="line"></span></code></pre>
|
||||
|
||||
This new `setup` script was designed for maximum flexibility. We'll keep improving this API going forward with planned support for default components, default layouts, and markdown component overrides.
|
||||
|
||||
|
||||
## HMR, meet HTML
|
||||
|
||||
Starting in v0.21.0, Astro will support full HMR for Astro components and pages. Change any `.astro` file in your codebase, and watch the dev server update the page without a full refresh and without losing any client state.
|
||||
|
||||
Astro has always supported powerful HMR updates for client-side JavaScript components like React, Preact, Svelte, Vue, and Solid.js. But adding this for Astro was a fun challenge because Astro components are just static HTML. Our "Zero JavaScript" approach meant that there was no "Astro runtime" to hook into for updates. We had to get creative.
|
||||
|
||||
Now, Astro's dev server sends HTML updates to the browser and then runs a small script to diff those updates against the current page. This creates a more granular, component-level HMR update that won't impact the rest of the page.
|
||||
|
||||
|
||||
## Try it today
|
||||
|
||||
If you've read this far, we'd love your help trying out the latest release before launch. You can try out our latest release today [in the browser](https://gitpod.io#snapshot/5e7cf2f1-8108-4fa5-99d3-ed8de70d8c23) or by running `npm install astro@next--compiler` in a new project directory. You can follow our progress and leave feedback in the `next` PR on GitHub: https://github.com/snowpackjs/astro/pull/1406
|
||||
|
||||
Leave feedback, report bugs, and get involved with Astro's development in our [Discord server](https://astro.build/chat). You can also [follow along](https://twitter.com/astrodotbuild) on Twitter.
|
||||
|
||||
Keep your eyes on the sky, 👩🚀 Astronaut!
|
||||
16
www/src/data/blog-posts/astro-repl.md
Normal file
16
www/src/data/blog-posts/astro-repl.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: 'Introducing the Astro REPL'
|
||||
description: 'The power of Astro, right in your browser.'
|
||||
publishDate: 'September 17, 2021'
|
||||
permalink: 'https://astro.build/blog/astro-repl/astro-repl.png'
|
||||
lang: 'en'
|
||||
heroImage: '/assets/blog/astro-repl/astro-repl-hero.jpg'
|
||||
heroImageAlt: 'Hills with stars above'
|
||||
---
|
||||
The Astro team proudly presents the new [Astro REPL:](https://astro.build/play) compile Astro right in your browser. Use it to explore Astro's HTML-based component language, debug issues, or even prototype an entire webpage. It's powered by Astro’s **new WASM compiler** (written in Go) that runs anywhere and can rebuild files in an instant.
|
||||
|
||||
|
||||
|
||||
Try it today at [astro.build/play →](https://astro.build/play)
|
||||
|
||||
To learn more about our new compiler, [join us on Discord](https://astro.build/chat) and tune in to [Astro Demo Days](https://www.youtube.com/watch?v=-ExcBJrXOd8) next Monday, September 20, 2021 at 11am PST.
|
||||
25
www/src/data/blog-posts/demo-day-2021-09.md
Normal file
25
www/src/data/blog-posts/demo-day-2021-09.md
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
title: 'Astro Demo Day September Edition'
|
||||
description: 'Astro September Demo Day was today and we had 4 amazing talks, including one with big announcements on the future direction of Astro.'
|
||||
publishDate: 'September 20, 2021'
|
||||
permalink: 'https://astro.build/blog/demo-day-2021-09'
|
||||
lang: 'en'
|
||||
heroImage: '/assets/blog/demo-day-2021-09/hero.png'
|
||||
heroImageAlt: 'Spacecraft overlooking Earth'
|
||||
---
|
||||
**Astro Demo Day** was today! We had **4** amazing talks, including one big announcement on the future direction of Astro. If you missed the livestream, fear not! You can see the full event [on YouTube](https://www.youtube.com/watch?v=-ExcBJrXOd8) or watch the talks in any order by visiting the links below. Subscribe to the [Astro YouTube channel](https://www.youtube.com/channel/UCeFjmvZEK-MoefuYXptnX6A) to make sure you don't miss our next demo day. Today's demos were:
|
||||
|
||||
* [Developing the Astro VSCode extension](https://youtu.be/-ExcBJrXOd8?t=109) 🧑💻 from [Matthew Phillips](https://twitter.com/matthewcp)
|
||||
* [Integrating a CMS - Astro+Forestry+Netlify](https://youtu.be/-ExcBJrXOd8?t=763) 🌳 from [Tony Sullivan](https://twitter.com/navillus_dev)
|
||||
* [The Astro SEO component](https://youtu.be/-ExcBJrXOd8?t=1384) 🗃 from [Jonas Schumacher](https://twitter.com/jonasmerlin1)
|
||||
* [Astro's v2 Compiler and a Surprise](https://youtu.be/-ExcBJrXOd8?t=2070) 🪄 from [Drew Powers](https://twitter.com/drwpow) and [Nate Moore](https://twitter.com/n_moore)
|
||||
|
||||
As always, our Discord community brought the hype:
|
||||
|
||||
<img alt="Messages from the Demo Day chat room on Discord" src="/assets/blog/demo-day-2021-09/discord-chat.jpg" class="chat-messages" />
|
||||
|
||||
## The next Astro release
|
||||
|
||||
Astro's next release will be our biggest ever, featuring a new WASM-powered compiler plus a new Vite-powered runtime. You can expect a preview release on [npm](https://www.npmjs.com/package/astro) later today or tomorrow. Over the next few weeks, we will continue to polish the new code as we prepare for its official release!
|
||||
|
||||
If you haven't already, follow [@astrodotbuild](https://twitter.com/astrodotbuild) on Twitter for more news and announcements, and [join our Discord](https://astro.build/chat) to learn how you can try out the new previous release.
|
||||
31
www/src/pages/blog/[slug].astro
Normal file
31
www/src/pages/blog/[slug].astro
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
import { Markdown, Code, Debug } from 'astro/components';
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import BlogHeader from '../../components/BlogHeader.astro';
|
||||
import BlogPost from '../../components/BlogPost.astro';
|
||||
import GoogleAnalytics from '../../components/GoogleAnalytics.astro';
|
||||
|
||||
export function getStaticPaths() {
|
||||
const posts = Astro.fetchContent('../../data/blog-posts/*.md');
|
||||
return (posts.map(p => ({
|
||||
params: {slug: p.file.pathname.split('/').pop().split('.').shift()},
|
||||
props: {post: p},
|
||||
})));
|
||||
}
|
||||
|
||||
const {title, author, description, publishDate, heroImage, heroImageAlt, permalink, lang, content} = Astro.props.post;
|
||||
---
|
||||
|
||||
<html lang={ lang ?? 'en' }>
|
||||
<head>
|
||||
<BaseHead title={title} description={description} canonicalURL={permalink} image="https://astro.build/assets/blog/astro-021-preview/social.png" />
|
||||
<link rel="stylesheet" href={Astro.resolve('../../scss/blog.scss')} />
|
||||
</head>
|
||||
<body>
|
||||
<BlogHeader />
|
||||
<BlogPost title={title} author={author} publishDate={publishDate} heroImage={heroImage} heroImageAlt={heroImageAlt}>
|
||||
{content.html}
|
||||
</BlogPost>
|
||||
<GoogleAnalytics />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
---
|
||||
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.ts';
|
||||
|
||||
let title = 'Astro 0.18 Release';
|
||||
let description = `Introducing: Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support • and more!`;
|
||||
let publishDate = 'July 27, 2021';
|
||||
let author = 'matthew';
|
||||
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} author={author} heroImage={heroImage} publishDate={publishDate} heroImageAlt="Astro text on space background">
|
||||
<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
|
||||
|
||||
|
||||
<!-- 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
|
||||
|
||||
|
||||
|
||||
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>
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
---
|
||||
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.ts';
|
||||
|
||||
let title = 'Astro 0.19';
|
||||
let description = `Introducing: Next.js-inspired dynamic routing • Astro.resolve() • client:only components • translations • and more!`;
|
||||
let publishDate = '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} heroImageAlt="Astro text on space background">
|
||||
<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)
|
||||
- [Русский](https://docs.astro.build/ru/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>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
---
|
||||
import { Markdown, Code } from 'astro/components';
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import BlogHeader from '../../components/BlogHeader.astro';
|
||||
import BlogPost from '../../components/BlogPost.astro';
|
||||
import GoogleAnalytics from '../../components/GoogleAnalytics.astro';
|
||||
|
||||
let title = 'Astro 0.21 Preview: Vite + WASM = ⚡️';
|
||||
let description = `Get a sneak preview of what's next for Astro, including our new Vite build engine and WASM-powered Go compiler.`;
|
||||
let publishDate = 'October 6, 2021';
|
||||
let permalink = 'https://astro.build/blog/astro-021-preview';
|
||||
let lang = 'en';
|
||||
---
|
||||
|
||||
<html lang={ lang ?? 'en' }>
|
||||
<head>
|
||||
<BaseHead title={title} description={description} canonicalURL={permalink} image="https://astro.build/assets/blog/astro-021-preview/social.png" />
|
||||
<link rel="stylesheet" href={Astro.resolve('../../scss/blog.scss')} />
|
||||
<style>
|
||||
.chat-messages {
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BlogHeader />
|
||||
<BlogPost title={title} author="fred" heroImage="/assets/blog/astro-021-preview/hero.png" publishDate={publishDate} heroImageAlt="Spacecraft overlooking Earth">
|
||||
<Markdown>
|
||||
Astro v0.21.0 will be our biggest release yet. At a high-level, it includes:
|
||||
|
||||
- [A new build engine, powered by Vite](#hello-vite)
|
||||
- [A new WASM compiler, written in Go](#hello-wasm)
|
||||
- [Brand new features, like Components-in-Markdown](#components-in-markdown)
|
||||
- [A new system for HTML live-updating via HMR](#hmr-meet-html)
|
||||
|
||||
You can try out our latest release today [in the browser](https://gitpod.io#snapshot/5e7cf2f1-8108-4fa5-99d3-ed8de70d8c23) or by running `npm install astro@next--compiler` in a new project directory on your machine.
|
||||
|
||||
Astro is quickly becoming the production-ready framework for building faster, content-focused websites. To celebrate this milestone, here are some highlights and details on what you can expect in Astro v0.21.0 and beyond.
|
||||
|
||||
## Hello, Vite!
|
||||
|
||||
Astro 0.21 is getting an internal build engine upgrade, replacing Snowpack with [Vite](https://vitejs.dev) going forward.
|
||||
|
||||
We ran some early experiments with Vite and came away extremely impressed. Vite is well-maintained, well-documented, a bit faster, has great error messages, and has been building clear community buy-in across multiple frameworks. SSR handling can be a bit flakey, but the Vite team is aware of this and actively working on it.
|
||||
|
||||
So now, when Evan You tweets about [some great performance optimization](https://twitter.com/youyuxi/status/1440718351802646550) that they're making in Vite you can be certain that the same speed is coming to Astro as well.
|
||||
|
||||
The reverse is also true: we can now contribute fixes and improvements back to the larger Vite community. Now, when we fix an SSR bug in Astro (like [adding support for ESM-only npm packages](https://github.com/vitejs/vite/pull/5197)) we're also fixing it for every other Vite user, including [SvelteKit](https://kit.svelte.dev/docs#routing-endpoints).
|
||||
|
||||
There's one other huge benefit to choosing Vite: Rollup plugins. Starting in v0.21.0, you'll be able to connect the entire ecosystem of Rollup plugins to Astro. Enable new features like [image optimizations](https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite) and [icon loading](https://github.com/antfu/unplugin-icons) with just a few simple plugins. Magic!
|
||||
|
||||
This switch from Snowpack to Vite might come as a surprise to some: Both Drew and myself are maintainers on both projects. This was [a hard decision](https://dev.to/fredkschott/5-more-things-i-learned-building-snowpack-to-20-000-stars-5dc9) for us to make. But ultimately, after working with both tools I can confidently say that Vite will be a great choice for Astro's future.
|
||||
|
||||
|
||||
## Hello, WASM!
|
||||
|
||||
Astro 0.21 features another huge low-level improvement: the brand new [@astrojs/compiler](https://github.com/snowpackjs/astro-compiler-next). Astro's new compiler is written in Go and distributed as WASM. You can run it right in your browser, or on the server in Node.js and Deno.
|
||||
|
||||
The new [@astrojs/compiler](https://github.com/snowpackjs/astro-compiler-next) unlocks:
|
||||
|
||||
- **Flexibility:** Run the compiler anywhere with WASM.
|
||||
- **Speed:** Build sites faster with Go's compiled-language performance.
|
||||
- **Stability:** Writing our own compiler allowed us to fix some long-standing bugs.
|
||||
|
||||
You can play with the new compiler today right in your browser at https://astro.build/play. This REPL is just one example of what is now possible when you have a fast, runs-anywhere compiler.
|
||||
|
||||
Shout out to [Nate Moore](https://twitter.com/n_moore) who did an incredible job with this project.
|
||||
|
||||
|
||||
## Components in Markdown
|
||||
|
||||
Our most requested feature ***by far*** has been the ability to use components directly in Markdown. After months of work, we're excited to announce that this feature is finally coming to Astro.
|
||||
|
||||
Starting in v0.21.0, you can import components inside of your Markdown frontmatter via an optional `setup` script. Once imported, your components can be used anywhere on the page:
|
||||
|
||||
<Code code={`---
|
||||
title: 'Astro 0.21 Early Preview'
|
||||
setup: |
|
||||
import Logo from '../components/Logo.astro';
|
||||
import ReactCounter from '../components/Counter.jsx';
|
||||
---
|
||||
|
||||
# Astro now supports components in Markdown!
|
||||
|
||||
<Logo />
|
||||
|
||||
- Back to markdown here.
|
||||
- Supports static Astro components.
|
||||
- Supports dynamic React/Vue/Svelte components!
|
||||
|
||||
<ReactCounter start={0} client:load />
|
||||
`} lang="astro" />
|
||||
|
||||
This new `setup` script was designed for maximum flexibility. We'll keep improving this API going forward with planned support for default components, default layouts, and markdown component overrides.
|
||||
|
||||
|
||||
## HMR, meet HTML
|
||||
|
||||
Starting in v0.21.0, Astro will support full HMR for Astro components and pages. Change any `.astro` file in your codebase, and watch the dev server update the page without a full refresh and without losing any client state.
|
||||
|
||||
Astro has always supported powerful HMR updates for client-side JavaScript components like React, Preact, Svelte, Vue, and Solid.js. But adding this for Astro was a fun challenge because Astro components are just static HTML. Our "Zero JavaScript" approach meant that there was no "Astro runtime" to hook into for updates. We had to get creative.
|
||||
|
||||
Now, Astro's dev server sends HTML updates to the browser and then runs a small script to diff those updates against the current page. This creates a more granular, component-level HMR update that won't impact the rest of the page.
|
||||
|
||||
|
||||
## Try it today
|
||||
|
||||
If you've read this far, we'd love your help trying out the latest release before launch. You can try out our latest release today [in the browser](https://gitpod.io#snapshot/5e7cf2f1-8108-4fa5-99d3-ed8de70d8c23) or by running `npm install astro@next--compiler` in a new project directory. You can follow our progress and leave feedback in the `next` PR on GitHub: https://github.com/snowpackjs/astro/pull/1406
|
||||
|
||||
Leave feedback, report bugs, and get involved with Astro's development in our [Discord server](https://astro.build/chat). You can also [follow along](https://twitter.com/astrodotbuild) on Twitter.
|
||||
|
||||
Keep your eyes on the sky, 👩🚀 Astronaut!
|
||||
</Markdown>
|
||||
</BlogPost>
|
||||
|
||||
<GoogleAnalytics />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
---
|
||||
import { Markdown } from 'astro/components';
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import BlogHeader from '../../components/BlogHeader.astro';
|
||||
import BlogPost from '../../components/BlogPost.astro';
|
||||
|
||||
let title = 'Introducing the Astro REPL';
|
||||
let description = 'The power of Astro, right in your browser.';
|
||||
let publishDate = 'September 17, 2021';
|
||||
let permalink = 'https://astro.build/blog/astro-repl/astro-repl.png';
|
||||
let lang = 'en';
|
||||
---
|
||||
|
||||
<html lang={ lang ?? 'en' }>
|
||||
<head>
|
||||
<BaseHead title={title} description={description} canonicalURL={permalink} image="https://astro.build/assets/blog/astro-repl/astro-repl-social.jpg" />
|
||||
<link rel="stylesheet" href={Astro.resolve('../../scss/blog.scss')} />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BlogHeader />
|
||||
<BlogPost title={title} author="drew" heroImage="/assets/blog/astro-repl/astro-repl-hero.jpg" publishDate={publishDate} heroImageAlt="Hills with stars above">
|
||||
<Markdown>
|
||||
The Astro team proudly presents the new [Astro REPL:](https://astro.build/play) compile Astro right in your browser. Use it to explore Astro's HTML-based component language, debug issues, or even prototype an entire webpage. It's powered by Astro’s **new WASM compiler** (written in Go) that runs anywhere and can rebuild files in an instant.
|
||||
|
||||
|
||||
|
||||
Try it today at [astro.build/play →](https://astro.build/play)
|
||||
|
||||
To learn more about our new compiler, [join us on Discord](https://astro.build/chat) and tune in to [Astro Demo Days](https://www.youtube.com/watch?v=-ExcBJrXOd8) next Monday, September 20, 2021 at 11am PST.
|
||||
</Markdown>
|
||||
</BlogPost>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
---
|
||||
import { Markdown } from 'astro/components';
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import BlogHeader from '../../components/BlogHeader.astro';
|
||||
import BlogPost from '../../components/BlogPost.astro';
|
||||
|
||||
let title = 'Astro Demo Day September Edition';
|
||||
let description = 'Astro September Demo Day was today and we had 4 amazing talks, including one with big announcements on the future direction of Astro.';
|
||||
let publishDate = 'September 20, 2021';
|
||||
let permalink = 'https://astro.build/blog/demo-day-2021-09';
|
||||
let lang = 'en';
|
||||
---
|
||||
|
||||
<html lang={lang ?? 'en'}>
|
||||
<head>
|
||||
<BaseHead title={title} description={description} canonicalURL={permalink} image="https://astro.build/assets/blog/demo-day-2021-09/social.png" />
|
||||
<link rel="stylesheet" href={Astro.resolve('../../scss/blog.scss')} />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BlogHeader />
|
||||
<BlogPost title={title} author="matthew" heroImage="/assets/blog/demo-day-2021-09/hero.png" publishDate={publishDate} heroImageAlt="Spacecraft overlooking Earth">
|
||||
<Markdown>
|
||||
**Astro Demo Day** was today! We had **4** amazing talks, including one big announcement on the future direction of Astro. If you missed the livestream, fear not! You can see the full event [on YouTube](https://www.youtube.com/watch?v=-ExcBJrXOd8) or watch the talks in any order by visiting the links below. Subscribe to the [Astro YouTube channel](https://www.youtube.com/channel/UCeFjmvZEK-MoefuYXptnX6A) to make sure you don't miss our next demo day. Today's demos were:
|
||||
|
||||
* [Developing the Astro VSCode extension](https://youtu.be/-ExcBJrXOd8?t=109) 🧑💻 from [Matthew Phillips](https://twitter.com/matthewcp)
|
||||
* [Integrating a CMS - Astro+Forestry+Netlify](https://youtu.be/-ExcBJrXOd8?t=763) 🌳 from [Tony Sullivan](https://twitter.com/navillus_dev)
|
||||
* [The Astro SEO component](https://youtu.be/-ExcBJrXOd8?t=1384) 🗃 from [Jonas Schumacher](https://twitter.com/jonasmerlin1)
|
||||
* [Astro's v2 Compiler and a Surprise](https://youtu.be/-ExcBJrXOd8?t=2070) 🪄 from [Drew Powers](https://twitter.com/drwpow) and [Nate Moore](https://twitter.com/n_moore)
|
||||
|
||||
As always, our Discord community brought the hype:
|
||||
|
||||
<img alt="Messages from the Demo Day chat room on Discord" src="/assets/blog/demo-day-2021-09/discord-chat.jpg" class="chat-messages" />
|
||||
|
||||
## The next Astro release
|
||||
|
||||
Astro's next release will be our biggest ever, featuring a new WASM-powered compiler plus a new Vite-powered runtime. You can expect a preview release on [npm](https://www.npmjs.com/package/astro) later today or tomorrow. Over the next few weeks, we will continue to polish the new code as we prepare for its official release!
|
||||
|
||||
If you haven't already, follow [@astrodotbuild](https://twitter.com/astrodotbuild) on Twitter for more news and announcements, and [join our Discord](https://astro.build/chat) to learn how you can try out the new previous release.
|
||||
</Markdown>
|
||||
</BlogPost>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -39,6 +39,7 @@ let lang = 'en';
|
|||
Here's what Jason told us about Astro:
|
||||
|
||||
<Note>
|
||||
|
||||
"Astro is tackling an extremely hard problem: **how do we keep the advantages of powerful frameworks but stop making end users pay the cost of developer experience?** Shipping only HTML and CSS for the vast majority of web content that doesn't need to be dynamic and only including JavaScript when it's actually necessary is a huge win for developers and users alike."
|
||||
<br>-- [Jason Lengstorf](https://twitter.com/jlengstorf), VP of Developer Experience, Netlify
|
||||
</Note>
|
||||
|
|
|
|||
Loading…
Reference in a new issue