Работа с Markdown/MDX — непростая задача. Поддерживать согласованные данные среди сотен и даже тысяч локальных материалов — постов блога, рассылок и т.д. — становится всё сложнее по мере роста сайта.
Контент — важнейшая часть веба, так почему мы соглашаемся (каламбур задуман) на посредственный developer experience? Миссия Astro всегда заключалась в том, чтобы помогать разработчикам создавать быстрые контентные сайты… принять этот вызов было очевидным решением.
Astro 2.0 представляет Content Collections API: новый способ работы с локальным Markdown и MDX. Content collections помогают управлять локальным контентом со встроенной типобезопасностью из коробки. Это наш самый захватывающий релиз, и он доступен для вас уже сегодня.
TypeScript для вашего Markdown
Content collections работают, организуя локальный контент в «коллекции» внутри каталога src/content проекта. Это специальный каталог, где похожие Markdown и MDX файлы можно группировать (например: blog/, docs/, newsletter/ и т.д.).
Встроенные функции запросов дают подсказки и автодополнение по мере ввода. Получайте и рендерите контент в HTML внутри Astro-компонента всего за несколько строк кода:
Всё внутри коллекции типобезопасно, включая frontmatter. Определите коллекцию с опциональной схемой, и Astro обеспечит корректный frontmatter в каждом файле с автоматически сгенерированными TypeScript-типами.
const blog = defineCollection({ schema: z.object({ // Define your expected frontmatter properties title: z.string(), // Mark certain properties as optional draft: z.boolean().optional(), // Transform datestrings to full Date objects publishDate: z.string().transform((val) => new Date(val)) // Improve SEO with descriptive warnings description: z.string().max(160, 'Short descriptions have better SEO!') // ... }),});Эта магия возможна благодаря Zod — мощной библиотеке валидации для TypeScript. С выразительным построителем схем Zod вы можете гарантировать, что важные свойства вроде title всегда присутствуют и имеют правильный тип. При ошибке Zod даёт понятные сообщения — от отсутствующих свойств до важных SEO-подсказок.
Подробнее о работе content collections — в руководстве в документации.
Лучшие ошибки для всех
Представьте, что вы разрабатываете сайт, и вдруг… БАХ! Dev-окружение останавливается с этой ошибкой. Что случилось?
Если вы ответили «в случайном файле отсутствовал ожидаемый title в frontmatter» — поздравляем! Вы первый в мире JS-психик. Но если вы, как и остальные, поиск этого бага, вероятно, потребует stack trace, проб и ошибок, нескольких шумных console.log и немного удачи.
Теперь посмотрим на ту же ошибку в Astro 2.0:
Первое, что бросается в глаза — переработанный error overlay Astro 2.0. Но важнее то, что информация стала гораздо подробнее. Имя проблемного файла сразу на поверхности. Включён фрагмент файла, чтобы понять проблему, вместе со ссылкой для открытия файла прямо в редакторе. Приятный бонус — подсказки из документации для отладки.
Начало работы с Content Collections
С content collections есть ещё много интересного — уже сегодня в Astro 2.0. Можете перейти к руководству по content collections, чтобы начать, и изучить обновлённые стартеры blog, docs и portfolio, чтобы увидеть content collections в действии.
Мы также ждём вашу обратную связь по мере расширения возможностей content collections. Благодарим всех, кто участвовал в RFC content collections, и приглашаем предлагать идеи в нашем новом публичном roadmap.
Особая благодарность Contentlayer и Nuxt Content за их исследования и вдохновение в сфере контента ♥