Создаем первый «Astroвной» проект

---

Шаблон «Острова интерактивности» в последнее время на слуху: его применяют во многих фреймворках. К примеру, на нем основана вся архитектура недавно появившегося Fresh 1.0.

Но сегодня поговорим о фреймворке Astro, с которым веб-приложения создаются, как вам нужно. Хотите задействовать React? И немного Vue? Без проблем! Интегрировать компонент Svelte? Почему бы нет!

С Astro вы реализуете островную архитектуру: в приложения переносится только необходимый JavaScript, и ничего более.

Итак, приступим!

---

Начало работы с Astro

Проект с Astro подготовить очень просто, особенно для создания статического блога с одним интерактивным компонентом, то есть островом.

npm create astro@latest

Этой командой запустится пошаговое руководство. Ответьте на вопросы (просто укажите, что создаете блог), и сформируется все необходимое для его немедленного запуска.

Если возникнут проблемы, загляните в документацию.

---

Как создается блог

Автоматически, командой create.

Используя шаблон Astro islands, добавим в блог поле поиска в реальном времени и индексатор, для которого создадим настаиваемую интеграцию.

Конечный результат:

Акцент не на поиске, а на факте добавления статичному сайту интерактивного компонента.

Начнем с индексирования контента.

---

Создание первой интеграции Astro

Интеграции Astro подобны создаваемым для сайта плагинам, с помощью которых одному или нескольким этапам процесса сборки добавляется поведение.

Нам нужно индексировать генерируемый контент, поэтому интеграцию подключим в самом конце процесса сборки. Так проиндексируется каждый пост в блоге.

Для этого перейдем к файлу astro.config.mjs в корне папки проекта, добавим функцию indexMySite и установим пакет parse-md для считывания титульных листов файлов Markdown:

function indexMySite() {
  return {
    name: "Index my site",
    hooks: {
      'astro:build:done': ({
        pages,
        routes
      }) => {
        let blogPages = routes.filter(r => {
          return r.type == 'page' && r.component.indexOf(".md") != -1;
        });
        let myIndex = [];
        const currentFiile = fileURLToPath(import.meta.url);

        const __dirname = path.dirname(currentFiile);

        blogPages.forEach(p => {
          console.log("Reading...", p.component);
          let mdContent = fs.readFileSync(__dirname + "/" + p.component);
          let {
            metadata
          } = parseMD(mdContent.toString());
          myIndex.push({
            title: metadata.title,
            description: metadata.description,
            path: p.route
          });
        });
        fs.writeFileSync('public/index.json', JSON.stringify(myIndex));
        console.log(myIndex);
      }
    }
  };
}

Этой функцией возвращается объект с обязательными свойствами name (название интеграции) и hooks (хуки, в нашем случае это astro:build:done, чтобы код запускался сразу по завершении процесса сборки).

Другие хуки см. в документации.

Для ключа хука определим функцию, которой принимается массив pages (страниц) и routes (маршрутов). Последние используем для этой сборки, выполняя итеративный обход и учитывая только страницы блога (отфильтровываем все, что не имеет расширения .md), а затем с помощью parse-md получаем метаданные файла и добавляем в массив.

В конце создаем «индекс» поисковой системы, сохранив массив в JSON-файле общего каталога блога. Так он доступнее для островного компонента.

Функция готова. Убедимся в ее работоспособности на Astro: внутри того же файла переходим к функции defineConfig и добавляем вызов новой функции внутри массива integrations.

// https://astro.build/config
export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap(), indexMySite()]
});

---

Добавление компонента search

Теперь сделаем поиск. С помощью Astro интегрируются компоненты разных фреймворков, мы будем использовать React.

Сначала добавим его поддержку: командой npx astro add react установим React и добавим как интеграцию в файл astro.config.mjs.

Затем создадим собственный компонент Search в папке src/components: для интерактивных компонентов специальная папка не нужна (в отличие от Fresh, где такая папка имеется  —  islands).

Компонент очень прост: загружаем из общей папки файл index.json и выполняем в нем поиск.

import { createRef, useEffect, useState} from "react"

let myIndex = null;

function ResultList({results}) {
    if(results.length == 0) return ;
    return (
        <div id="results-list">
            <ul>
                {results.map( r => (
                    <li><a href={r.path}>{r.title}</a></li>
                ))}
            </ul>
        </div>
    )
}

export default function Search() {

    let inputRef = createRef()
    const [results, setResults] = useState([])

    useEffect(() => {
        async function loadIndex() {
            myIndex = await fetch('/index.json')
            myIndex = await myIndex.json()
        }
        loadIndex()
    }, [])

    function doSearch() {
        let q = inputRef.current.value
        let matches = myIndex.filter( page => {
            return page.title.indexOf(q) != -1
        })
        setResults(matches)
        console.log(matches)
    }

    return (
        <div>
            <input placeholder="Search..." onChange={doSearch} ref={inputRef} />
            <ResultList results={results} />
        </div>
    )
}

В этом файле мы определили два компонента: экспортируемый Search для отображения поля ввода и выполнения поиска при вводе пользователем текста и ResultsList, используемый из первого компонента для отображения списка результатов.

Теперь перейдем к файлу Header.astro с кодом для заголовка блога и добавим готовый компонент:

---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../config';
import Search from './Search';
---

<header>
 <h2>
  {SITE_TITLE}
 </h2>
 <nav>
  <HeaderLink href="/">Home</HeaderLink>
  <HeaderLink href="/blog">Blog</HeaderLink>
  <HeaderLink href="/about">About</HeaderLink>
  <HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
  <HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
  <Search />
 </nav>
</header>
<style>
 header {
  margin: 0em 0 2em;
 }
 h2 {
  margin: 0.5em 0;
 }
</style>

Но здесь есть нюанс. Добавленный так (см. строку 17) компонент будет в Astro как любой другой: отобразится на сервере, но без добавления интерактивного кода на стороне клиента.

По умолчанию все компоненты в Astro отображаются на сервере. А этот нужно гидратировать на клиенте, сделав островом интерактивности.

Но как? Чтобы указать, когда гидратировать компонент, добавляются директивы client:.

В нашем случае это client:load, так как гидратация нужна сразу по завершении загрузки страницы:

---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../config';
import Search from './Search';
---

<header>
 <h2>
  {SITE_TITLE}
 </h2>
 <nav>
  <HeaderLink href="/">Home</HeaderLink>
  <HeaderLink href="/blog">Blog</HeaderLink>
  <HeaderLink href="/about">About</HeaderLink>
  <HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
  <HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
  <Search client:load/>
 </nav>
</header>
<style>
 header {
  margin: 0em 0 2em;
 }
 h2 {
  margin: 0.5em 0;
 }
</style>

Директива в строке 17 добавлена, и теперь компонент отобразится корректно, с кодом JavaScript внутри.

Мы отрисовали первый остров в Astro!

---

С островами все очень просто: из фреймворков клиенту передается только необходимый JavaScript, остальное остается на сервере.

Определить компонент как остров  —  так же просто, как передать директиву client: при добавлении в HTML. Наконец, мы расширили поведение Astro, добавив настаиваемую интеграцию.

Читайте также:

• Почему все веб-сайты выглядят одинаково?
• Прощай, Adobe
• 9 лучших примеров макетов сайта и идей для веб-дизайна

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Fernando Doglio: Building Your First Island-based Project with Astro