astro frontend masters

Это сопутствующий репозиторий курса Astro на Frontend Masters.

Настраивать

start ветка из этого репозитория содержит некоторые дополнительные ресурсы и используется в качестве отправной точки курса:

Для этого курса мы рекомендуем использовать Node версии 18.

git clone https://github.com/learnwithjason/astro-frontend-masters.git
cd astro-frontend-masters
git checkout start
npm install

Что мы строим?

Сайт для малого бизнеса, использующий несколько общих рабочих процессов, которым в конечном итоге следуют многие (большинство?) веб-сайтов.

• Маркетинговая целевая страница
  • Изображения героев
    • Обработка изображений
  • Карты
    • Рекомендуемые продукты
  • Захват новостной рассылки
• Магазин
  • Расширенный макет (вложенный)
  • Общее состояние
    • Твердая тележка
    • Кнопки товара React (добавить в корзину)
    • Наномагазины поделятся состоянием
• Блог
  • Коллекции контента
    • Уценка
  • Динамические маршруты
  • RSS-канал
• О
  • Страница уценки
• 404 страница

Какие функции мы хотим охватить?

• Инициализация нового сайта Astro
• Местное развитие
• Страницы
  • Поддерживаемые типы файлов
    • Астро
    • Уценка
    • HTML
  • Базовая маршрутизация
  • Ссылки
  • Пользовательские страницы 404
• Астрокомпоненты
  • Фронтматтер
  • Слоты
• Макеты
  • Базовые макеты
  • Расширенные макеты
• Получение данных
  • Использование fetch в Astro и других компонентах
  • Загрузка данных API
  • Загрузка с headless CMS
• Стиль
  • Стилизация в компонентах Astro
    • Стили с ограниченной областью действия
    • Глобальные стили
  • Астро-плюшки для CSS
    • class:list
    • define:vars
  • Импорт таблиц стилей
    • местный
    • npm-пакеты
  • В рамках:
    • CSS-модули
• Динамические маршруты
  • Если вы хотите визуализировать страницы один раз во время сборки
• Пагинация
• Коллекции контента
  • Базовая установка и конфигурация
    • Определение схемы
    • Пользовательские пули
  • Использование коллекций для создания страниц
    • Листинг страниц
    • Полные страницы входа
• Конечные точки
  • RSS
  • API
    • Статический
• Режим ССР
  • Динамическая маршрутизация
  • Если вы хотите отображать страницы при каждом запросе
  • Конечные точки API
• Обработка изображений
  • Каталог assets
• Увлажнение JS-компонентов
  • client:* директивы
  • Использование нескольких фреймворков
  • Разделение состояния между островами
  • Совместное использование состояния между платформами