qwind

? Квинд

Qwind — это бесплатный шаблон с открытым исходным кодом для создания вашего веб-сайта с использованием Qwik + Tailwind CSS . Готов начать новый проект и разработан с учетом лучших практик.

Функции

• ✅ Интеграция с Tailwind CSS с поддержкой тёмного режима .
• ✅ Готовые к производству оценки в отчетах Lighthouse и PageSpeed ​​Insights.
• ✅ Оптимизация изображений и оптимизация шрифтов .

Оглавление

• Демо
• Начиная
  • Структура проекта
  • Команды
  • Конфигурация
  • Развертывать
• Дорожная карта
• Содействие
• Благодарности
• Лицензия

Демо

? https://qwind.pages.dev/

Начиная

В этом проекте используется Qwik с QwikCity. QwikCity — это всего лишь дополнительный набор инструментов поверх Qwik, упрощающий создание полноценного сайта, включая маршрутизацию на основе каталогов, макеты и многое другое.

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

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

 /
├── adaptors/
|   └── static/
|       └── vite.config.ts
├── public/
│   ├── favicon.svg
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── images/
|   |   └── styles/
|   |       └── global.css
│   ├── components/
│   │   ├── atoms/
│   │   ├── core/
│   │   ├── icons/
|   |   └── widgets/
|   |       ├── Hero.tsx
|   |       ├── Features.tsx
|   |       └── ...
│   ├── content/
│   |   └── blog/
│   |       ├── post-slug-1.md
│   |       ├── post-slug-2.md
│   |       └── ...
│   ├── routes/
│   |   ├── blog/
│   |   ├── index.tsx
|   |   ├── layout.tsx
|   |   ├-- service-worker.ts
│   |   └-- ...
│   ├── config.mjs
│   ├── entry.dev.tsx
│   ├── entry.preview.tsx
│   ├── entry.ssr.tsx
│   └── root.tsx
├── package.json
└── ...

• src/routes : обеспечивает маршрутизацию на основе каталога, которая может включать иерархию файлов макета layout.tsx и файл index.tsx в качестве страницы. Кроме того, файлы index.ts являются конечными точками. Дополнительную информацию см. в документации по маршрутизации.

• src/components : рекомендуемый каталог для компонентов.

• public : любые статические ресурсы, например изображения, могут быть размещены в общедоступном каталоге. Дополнительную информацию см. в общедоступном каталоге Vite.

Опытный эксперт по qwik? Удалите этот файл. Обновите config.mjs и его содержимое. Веселиться!

Команды

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

Команда	Действие
npm install	Устанавливает зависимости
npm run dev	Запускает локальный сервер разработки по адресу 127.0.0.1:5173/
npm run build	Создайте свой производственный сайт в ./dist/
npm run preview	Предварительный просмотр сборки локально перед развертыванием
npm run fmt	Форматирование кодов с помощью Prettier
npm run lint	Запустить Эслинт
npm run qwik ...	Запустите команды CLI, такие как qwik add , qwik build

Конфигурация

Базовый файл конфигурации: ./src/config.mjs

 export const SITE = {
  name : "Example" ,

  origin : "https://example.com" ,
  basePathname : "/" , // Change this if you need to deploy to Github Pages, for example
  trailingSlash : true , // Generate permalinks with or without "/" at the end
} ;

Развертывать

Развертывание в рабочей среде (вручную)

Вы можете создать оптимизированную производственную сборку с помощью:

npm run build

Теперь ваш сайт готов к развертыванию. Все сгенерированные файлы расположены в папке dist , которую вы можете развернуть на любом хостинге, который вы предпочитаете.

Развертывание в Netlify

Клонируйте этот репозиторий в свою учетную запись GitHub и разверните его в Netlify:

Развертывание в Верселе

Клонируйте этот репозиторий в свою учетную запись GitHub и разверните его в Vercel:

Дорожная карта

База

• Создайте утилиты для создания постоянных ссылок, адаптированных к домену и базовому пути.
• Упростите способ оптимизации изображений.
• Создайте компонент, чтобы сделать SEO проще и интуитивно понятнее.
• Создайте настраиваемый блог с категориями, тегами и авторами, используя MDX.
• Добавьте более часто используемые страницы (Портфолио, Услуги, Контакты, Документы...).
• Найдите или создайте библиотеку, чтобы иметь больше доступных источников значков.
• Выполните рефакторинг некоторого кода, который еще не соответствует соглашениям Qwik.

Передовой

• Достигните идеального 100% показателя скорости страницы Google.
• Вставьте сложный виджет с примером JavaScript на домашнюю страницу, чтобы продемонстрировать возможности Qwik.
• Создайте небольшой иллюстративный интерфейс администратора.

Содействие

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

Благодарности

Первоначально создан onWidget и поддерживается сообществом участников.

Лицензия

Qwind лицензируется по лицензии MIT — подробности см. в файле LICENSE.