hello astro

привет-астро

Hello Astro — это полнофункциональная многоцелевая стартовая тема Astro, написанная на Typescript и TailwindCSS. Он поддерживает страницы и сообщения в блогах на основе Markdown и MDX.

Hello Astro можно использовать для любого/всех следующих действий:

• корпоративный/маркетинговый сайт
• блог
• сайт документации
• сайт-портфолио с поддержкой фотогалерей

Использует следующие интеграции:

• @astrojs/mdx
• @astrojs/markdoc
• @astrojs/карта сайта
• @astrojs/rss
• @astrojs/попутный ветер
• @astrojs/alpinejs
• астро-икона
• астро-сео
• astro-robots-txt

Кроме того, иллюстрации SVG и PNG взяты из Undraw.

Этот проект изначально начинался как простой порт hello-gatsby-starter, но теперь содержит больше функций (светлый/темный режимы, страницы категорий, поиск, диаграммы, математика и многое другое!)

Функции

• Полнофункциональный блог с заголовком (название, описание, автор, дата, изображение, теги)
• Высокая производительность, низкие накладные расходы и минимальный Javascript (AlpineJS)
• Полнотекстовый клиентский поиск по страницам блога через lunrjs (индекс поиска загружается только при первом вызове поиска на странице)
• Индексная страница и отдельные страницы для авторов, категорий и тегов, включая нумерацию страниц.
• Поддержка RSS-канала, карты сайта и robots.txt.
• SVG-дизайн (unDraw, Hero Patterns, Iconify)
• Поддержка подсветки синтаксиса кода.
• Полная поддержка SEO, включая Open Graph, Twitter Cards и Schema.org через JSON-LD.
• Полная поддержка светлых и темных режимов пользовательского интерфейса, а также следующих системных настроек в соответствии с рекомендацией TailwindCSS.
• Персонализированная страница ошибки 404
• Отображение математических уравнений с использованием KaTeX через примечание-математику/rehype-katex (заключенное в $ ... $ или $$ ... $$ )
• Отображение диаграмм Mermaid, Markmap, PlantUML (авторизовано как блок кода с языками mermaid , markmap и plantuml )
• Отобразить карту с географическими координатами и уровнем масштабирования с помощью компонента Map (необходимо также включить extra: ['map'] является основным элементом для загрузки ресурсов CSS/JS для страницы)
• Рассчитывает и показывает время чтения сообщений в блоге.
• Ресурсы CSS/JS внешних библиотек загружаются только при необходимости для каждой страницы и для каждого пакета — без ненужного раздувания
• Фотогалерея и лайтбокс с использованием PhotoSwipe (включая отображение тегов EXIF)
• Компонент карусели с использованием Swiper
• Страницы документации (созданные по образцу стартовой версии astro docs, но с использованием Tailwind)

Внешние пакеты

При запуске используются следующие внешние пакеты:

• Астро
• Машинопись
• TailwindCSS и TailwindUI
• Иконизировать
• Выкройки героев
• unDraw для иллюстраций
• MDX и Markdown
• Schema.org и JSON для связывания данных, проверка типа с помощью Schema-dts.
• Открытый график, используемый Facebook
• Твиттер-карты
• АльпайнJS
• Локальный полнотекстовый поиск с использованием Lunr
• Математические уравнения с использованием KaTeX через примечания-математику и rehype-katex
• Диаграммы с использованием Mermaid, Markmap и PlantUML
• Откройте карту улиц с помощью листовки
• время чтения
• ФотоПроведите пальцем по экрану
• эксифр
• Свипер
• Примечание смайликов

Он следует архитектуре JAMstack, автоматически создавая статическую версию из репозитория Git. Демо-версия развернута на Github Pages.

Структура проекта

Внутри этого стартера вы увидите следующие папки и файлы:

 /
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── image.png
│   │   └── gallery/
│   │       └── gallery-name/
│   │           └── image.jpg
│   ├── components/
│   │   └── header.astro
│   ├── content/
│   │   ├── blog/
│   │   |   └── 2022-08-01-post.md
│   │   ├── doc/
│   │   |   └── documentation-page.md
|   │   └── config.ts
│   ├── layouts/
│   │   ├── base.astro
│   │   ├── blog.astro
│   │   └── doc.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── contact.astro
│   └── config.ts
└── package.json

Astro ищет файлы .astro , .md или .mdx в каталоге src/pages/ . Каждая страница отображается как маршрут на основе имени ее файла.

src/components/ — это место, куда мы помещаем любые компоненты Astro, а также src/layouts/ для макетов.

Изображения можно поместить в src/assets/ .

Содержимое блога и документации создается как коллекции файлов Markdown или MDX в src/content .

Любые статические активы, например. изображения можно разместить в каталоге public/ .

? Команды

Все команды запускаются из корня проекта, из терминала:

Команда	Действие
pnpm install	Устанавливает зависимости
pnpm dev	Запускает локальный сервер разработки по адресу localhost:3000
pnpm build	Создайте свой производственный сайт в ./dist/
pnpm preview	Предварительный просмотр сборки локально перед развертыванием
pnpm lint	Довольно распечатать исходный код
pnpm check	Проверьте исходный код на наличие ошибок
pnpm astro ...	Запустите команды CLI, такие как astro add , astro preview
pnpm astro --help	Получите помощь по использованию Astro CLI

История выпусков

• 1.0.0: Начальная версия
• 1.0.1: Изображения из социальных сетей перемещены в src, улучшена обработка CoverImage.
• 1.0.2: Обновите пакеты до последней версии
• 1.1.0: Обновление до astro v2.x, теперь работает с узлами 18 и 19.
• 2.0.0: Новая версия с поддержкой коллекций Astro! Также уточнил, что это многофункциональная тема. Поиск теперь может включать как страницы Markdown, так и MDX!
• 2.0.1: Обновлены скриншоты и улучшена целевая страница.
• 2.1.0: обновлены до последних пакетов, исправлены ссылки для разработчиков, перенесены функции из личного блога, включая ссылки «Следующий/Предыдущий», поддержка фотогалереи в Markdown и улучшенное управление нумерацией страниц.
• 2.2.0: Исправлены ошибки lint, переработана карта, лайтбокс и карусель для использования пакетов листовок, фотосвайпов и свайперов вместо использования внешнего CDN.
• 2.2.1: Обновление до astro 2.0.10, исправлена ​​проблема с загрузкой активов с базой.
• 2.3.0: Удален макет из содержимого блога и документа.
• 2.4.0: @astrojs/images теперь поддерживает svg , поэтому нет необходимости в специальной обработке.
• 2.4.1: Использование визуализированной заставки для публикаций в блогах и документах, исправлена ​​проблема с неотрисовкой диаграмм.
• 2.4.2: Обновленные пакеты
• 3.0.0: Основное обновление:
  • Используйте новую поддержку активов, оптимизированную для Astro.
  • новый логотип Астро
  • оптимизированная фильтрация черновиков сообщений
  • почистил галерею
  • исправлены ошибки SEO
  • почистил ошибки lint
  • авторы и категории перенесены в коллекции и используются ссылочная целостность на основе Astro 2.5.0.
  • преобразованы социальные ссылки в набор данных (требуется Astro > 2.5.0)
  • обновлены метаданные значка и заголовка
  • улучшить поиск, включив в него документацию
• 3.1.0: Обновление улучшений:
  • Менеджер пакетов перенесен с Yarn на pnpm.
  • Справочная база по ссылкам в шапке
  • Добавлен eslint и красивее с помощью плагинов
  • Исправлена ​​ошибка атрибутов изображения в SEO-компоненте.
  • Обновлен tsconfig для соответствия astro strict.
  • Обновить ссылку Katex CSS
  • Исправлен автор, не отображавшийся в карточке блога.
  • Добавлена ​​поддержка Markdoc.
• 3.1.1: Небольшое обновление:
  • Ленивая загрузка изображений
  • Поддержка смайлов Github через примечание-emoji
• 3.1.2: Мелкие исправления:
  • Проверьте наличие нулевых категорий
  • Немного улучшена страница контактов
  • Улучшена обработка следующего/предыдущего
  • Обновленные пакеты
  • Уменьшите размер кнопки поиска, чтобы она соответствовала минимальной ширине.
  • Изменена опция изображения для страниц с «объект-содержание» на «объект-обложка».
  • Исправлен site.webmanifest.
• 3.1.3: Мелкие исправления:
  • Обновите @astrojs/markdoc 0.4.x и последнюю версию astro.
  • Исправлено объявление Props в [slug].astro.
  • отключен образец файла Markdoc из-за этой проблемы: withastro/astro#7520
• 3.1.4: Небольшое улучшение:
  • Унифицированная обработка изображений для SVG и растровых изображений.
  • Включены ViewTransitions
• 3.1.5: Незначительные улучшения:
  • Обновите пакеты до последней версии
  • Исправлена ​​небольшая ошибка астро-проверки.
• 3.2.0: Значительное улучшение:
  • Обновлено до Astro 3.x.
  • Внедрить разрешительную политику безопасности контента
• 3.2.1: Небольшое улучшение:
  • Обновлены пакеты, исправлены ошибки астро-проверки.
• 3.2.2: Незначительные улучшения:
  • Обновленные пакеты
  • Исправлен тип возвращаемого значения json.ts для поиска.
• 3.2.3: Техническое обслуживание:
  • Исправлена ​​ошибка, из-за которой русалка v9 больше не работала после обновления до последней версии русалки.
  • Пакеты обновления
• 3.2.4: Незначительные улучшения:
  • Обновление до Astro 4.x
• 3.2.5: Незначительные улучшения:
  • Пакеты обновления
  • Удалить mermaid.initialize()
• 3.2.6: Техническое обслуживание:
  • Отключите ViewTransition, так как он не работает с русалкой.
• 3.3.0: Техническое обслуживание:
  • Обновлены до последних пакетов и astro-icon 1.x.
• 3.3.1: Техническое обслуживание:
  • Обновлены до последних пакетов и исправлены ошибки астропроверки.
• 3.3.2: Техническое обслуживание:
  • Обновлены до последних пакетов
  • Исправлен поиск, который не работал из-за более строгой альпийской проверки.
  • Перенесен на стандартный astro tsconfig.json.
  • Исправлены ошибки астропроверки
• 3.4.0: Незначительные изменения:
  • Обновленные пакеты
  • Заменены герои-иконки на v2.
  • Улучшены RSS и поисковые индексы, включающие имя автора и адрес электронной почты.
  • Заставьте BlogHero воспринимать публикацию как реквизит, а не как вступление
  • Страницы Markdown перенесены в коллекцию контента.
  • Устранен тип Frontmatter
• 4.0.0: Основные изменения:
  • Обновленные пакеты
  • Удалены @types/photoswipe и photoswipe tsconfig.
  • Перенесено в схему RSS.
  • функция getPosts()
  • теги схемы
  • автоматически генерируемые ссылки на боковой панели
  • улучшенные метаданные RSS и поиска