Flaky Filament - Блог на Astro

Этот проект представляет собой персональный блог, созданный с использованием фреймворка Astro. Блог посвящен изучению и экспериментам с Astro, а также публикации записей о веб-разработке.

🚀 Описание проекта

Flaky Filament - это современный статический сайт-блог, построенный на Astro. Проект включает:

• Главная страница с приветствием и базовой информацией
• Блог с коллекцией постов в формате Markdown
• Система тегов для категоризации контента
• RSS-лента для подписки на обновления
• Адаптивный дизайн с поддержкой темной темы
• Интерактивные компоненты на React и Preact

🛠 Технологии

• Astro - основной фреймворк для генерации статических сайтов
• React - для интерактивных компонентов
• Preact - легковесная альтернатива React
• Markdown - для написания постов блога
• CSS - для стилизации

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

/
├── public/
│   └── favicon.svg          # Фавикон сайта
├── src/
│   ├── blog/                # Посты блога в формате Markdown
│   ├── components/          # Переиспользуемые компоненты
│   │   ├── BlogPost.astro   # Компонент поста блога
│   │   ├── Header.astro     # Шапка сайта
│   │   ├── Footer.astro     # Подвал сайта
│   │   ├── Navigation.astro # Навигация
│   │   └── ...              # Другие компоненты
│   ├── layouts/             # Макеты страниц
│   │   ├── BaseLayout.astro # Базовый макет
│   │   └── MarkdownPostLayout.astro # Макет для постов
│   ├── pages/               # Страницы сайта
│   │   ├── index.astro      # Главная страница
│   │   ├── blog.astro       # Страница блога
│   │   ├── about.astro      # О странице
│   │   ├── posts/[...slug].astro # Динамическая страница постов
│   │   └── tags/            # Страницы тегов
│   ├── scripts/             # JavaScript файлы
│   └── styles/              # Стили
└── package.json             # Зависимости проекта

🧞 Команды

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

Команда	Действие
npm install	Установка зависимостей
npm run dev	Запуск локального сервера разработки на localhost:4321
npm run build	Сборка production версии в ./dist/
npm run preview	Предварительный просмотр сборки
npm run astro	Запуск команд Astro CLI

📝 Написание постов

Посты блога находятся в папке src/blog/ и пишутся в формате Markdown. Каждый пост должен содержать frontmatter с метаданными:

---
title: 'Заголовок поста'
pubDate: 2022-07-01
description: 'Описание поста'
author: 'Автор'
image:
  url: 'https://example.com/image.jpg'
  alt: 'Описание изображения'
tags: ['тег1', 'тег2']
---

🎨 Кастомизация

Проект поддерживает современные возможности кастомизации:

Темы

• Светлая тема - по умолчанию
• Темная тема - активируется автоматически по системным настройкам или вручную через переключатель
• Переключатель тем сохраняет выбор в localStorage
• Поддержка prefers-color-scheme для автоматического выбора темы

Адаптивный дизайн

• Мобильное меню с гамбургер-иконкой
• Адаптивная навигация для разных размеров экрана
• Оптимизированная типографика и отступы

Стилизация

• Глобальные стили в src/styles/global.css
• Кастомные цвета: основной оранжевый (#ff9776) для акцентов
• Максимальная ширина контента: 80ch для лучшей читаемости
• Современная типографика с sans-serif шрифтами

Компоненты

• Переиспользуемые Astro компоненты
• Интерактивные React/Preact компоненты
• Модульная архитектура для легкого расширения

RSS и SEO

• Автоматическая генерация RSS-ленты
• Оптимизированные мета-теги для постов
• Поддержка изображений и описаний в постах

📚 Дополнительные ресурсы

• Документация Astro
• Сообщество Astro

---

Этот блог создан в процессе изучения Astro и служит площадкой для экспериментов с современными веб-технологиями.