Astro 0.19 | Astro

Представляем Astro 0.19:

Next.js-inspired routing: новые динамические URL params.
client:only directive: opt-out из SSR для отдельных компонентов.
Astro.resolve(): разрешение относительных URL к ассетам в src/.
Community translations: документация на 10 языках.
Astro Open Collective: пожертвования и спонсорство!

File-based routing, inspired by Next.js

Astro всегда поддерживал file-based routing: каждый файл в pages/ — страница по тому же URL. Astro 0.19 добавляет динамические URL params в имени файла.

По образцу Next.js и SvelteKit — скобки в имени (src/pages/[slug].astro) для динамической страницы на множество URL. Поддерживается catch-all [...slug].astro.

URL params, slugs, pretty URLs, пагинация и др.

Динамический маршрут: pages/posts/[slug].astro. Функция getStaticPaths() в frontmatter — какие пути строить:

---
// 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 — static site builder: нужно указать, какие страницы строить для каждого динамического маршрута. Ручное определение путей — boilerplate, но ahead-of-time сборка делает статику быстрой.

getStaticPaths() — async, используйте для загрузки внешних данных. Обычно headless CMS вместо Pokemon API:

// 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 },
  }))
}

Подробнее: Routing и getStaticPaths(). Примеры: Wordpress Headless CMS от Chris Coyier и Shopify Ecommerce от Cassidy Williams.

Пользователи Collections API: новая file-based routing полностью заменяет Collections с предупреждениями для миграции. Надеемся, API устраняет frustrations с Collections.

`client:only` loading directive

Иногда UI-компонент не рендерится на сервере — баг в зависимости или библиотека вроде D3 без window.

Можно обернуть browser-only код в server-side fallback. Большинству нужен browser-only компонент без boilerplate. Вот client:only.

Astro 0.19 — директива client:only для гидратации в браузере без SSR.

<!-- only renders in the browser, no placeholder HTML -->
<MyReactComponent client:only />

client:only — пятая директива для контроля загрузки. Весь набор и Partial Hydration.

🎉 Функцию внёс Tony Sull из Navillus. Спасибо, Tony!

`Astro.resolve()`

Astro 0.19 — Astro.resolve() для относительных ссылок в шаблонах. Ассеты (изображения) в компонентах — Astro вернёт правильный URL.

Раньше файлы в public/ по абсолютному пути. Относительные пути в src/ не работали — уходили в браузер как есть, разные URL на разных страницах:

<!-- This works the same on every page: -->
<img src="/logo.png" />
<!-- But this means different things on different pages: -->
<img src="../logo.png" />

С Astro 0.19 Astro.resolve() создаёт абсолютную ссылку из относительного пути:

<!-- Astro component input: -->
<img src={Astro.resolve('../images/logo.png')} />
<!-- HTML output: -->
<img src="/_astro/src/images/logo.png" />

Astro.resolve() — упрощённая альтернатива new URL(yourRelativePath, import.meta.url).pathname.

Astro.resolve() — больше контроля над структурой проекта. В будущем — оптимизированные изображения из src/.

🎉 Функцию внесли Jonathan Neal и Matthew Phillips!

Docs Translations

Не все разработчики говорят по-английски. Большинство — нет. Сообщество перевело документацию Astro на 10 языков:

简体中文
正體中文
Български
Deutsch
English
Español
Français
Nederlands
Português
Suomi
Русский

Работа в процессе — к v1.0 стремимся к 100%. Можете помочь — CONTRIBUTING.md#translations

Open Collective

Чуть больше двух месяцев с первого релиза Astro. Мы обязались к бесплатному open source Astro и долгосрочной финансовой устойчивости. Первый эксперимент:

Компании и частные лица могут спонсировать Astro через Open Collective. Open Collective →

Open Collective — один из проверенных путей устойчивости open source. Но модель далека от идеала. Большинство вкладов — горстке популярных проектов. Шансы против нас, но мы верим в Astro, сообщество и интерес к проекту.

Ваша компания, вероятно, пользуется open source. Инвестируйте в технологии бизнеса — спонсируйте Astro и другие проекты. Бонус: тысячи разработчиков увидят логотип в README и на astro.build каждый день.

100% средств — в проект и сообщество. FUNDING.md на GitHub.

Мы твитнем «спасибо» каждому, кто нажмёт “Sponsor” в ближайшие 48 часов. Первое СПАСИБО — Chris Jennings, CCO и co-founder Sentry — первый официальный спонсор! 🎉

ICYMI (In case you missed it)

GitHub добавил поддержку .astro и подсветку astro на всей платформе. CodeSandbox последовал!

Огромная веха для молодого проекта! Спасибо всем, кто использовал Astro и показал ценность платформам.

It’s official! 🎉 @github now supports syntax highlighting for .astro files!

You can also use code blocks starting with astro to get proper highlighting in Markdown files, issues, and PR comments!

pic.twitter.com/CDiGw66Qw6
— Astro (@astrodotbuild) August 4, 2021

👋

Спасибо за чтение! Twitter — новости к v1.0. Также предыдущий релиз.

И Discord. ;)