goulven clech.dev

Мой личный блог, созданный с помощью Astro, TypeScript и Tailwind CSS. Прямая трансляция на goulven-clech.dev, организованная Vercel.

Исходный код предоставляется по лицензии 0BSD, указание авторства приветствуется, но не обязательно. Текстовое содержимое блога предоставляется в соответствии с Соглашением CC BY 4.0, указание авторства требуется. Но в обоих случаях вы можете свободно использовать, копировать, изменять и/или распространять для любых целей, коммерческих или личных.

Некоторые записи могут цитировать текст, изображения или ресурсы из внешних источников: применяются их оригинальные лицензии, и я указываю авторов, если они известны.

Примечательные особенности

По своей сути этот проект похож на любой блог, созданный с помощью Astro. Вы можете начать с прочтения моей статьи «Запуск блога с помощью Astro». Но постепенно я добавил некоторые оригинальные функции, которые могут вас заинтересовать, вот основные из них:

• Панель поиска: создана только с помощью Astro и веб-компонентов, фильтрует записи блога на основе введенных пользователем данных.

• Оглавление: с помощью Astro и MDX создайте оглавление на основе заголовков. С вложенными списками.

• Блоки открытой библиотеки и Google Maps: красиво отображают результаты API в записях блога.

• Темный режим: переключение между светлой, темной и системной цветовой схемой. Используйте локальное хранилище, чтобы сохранить выбор пользователя.

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

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

 /
├── src/
│   ├── content/ -> Sub repository
│   ├── assets/
│   │   └── base.css
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── env.d.ts
│   └── [...utils].ts
├── public/
│   └── Iosevka-Regular.woff2
├── [... config files]
├── README.md
└── package.json

pages/ содержит все страницы этого блога в виде файлов .astro .

layouts/ components/ содержит каждый веб-компонент в виде файлов `.astro``.

Команды

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

Все команды следует запускать из корня проекта, из терминала. Вместо PNPM вы также можете использовать NPM или Yarn.