qwind

? Qwind

Qwind é um modelo gratuito e de código aberto para criar seu site usando Qwik + Tailwind CSS . Pronto para iniciar um novo projeto e desenhado tendo em conta as melhores práticas.

Características

• ✅ Integração com Tailwind CSS com suporte ao modo escuro .
• ✅ Pontuações prontas para produção nos relatórios Lighthouse e PageSpeed ​​​​Insights.
• ✅ Otimização de imagem e otimização de fonte .

Índice

• Demonstração
• Começando
  • Estrutura do projeto
  • Comandos
  • Configuração
  • Implantar
• Roteiro
• Contribuindo
• Agradecimentos
• Licença

Demonstração

? https://qwind.pages.dev/

Começando

Este projeto está usando Qwik com QwikCity. QwikCity é apenas um conjunto extra de ferramentas além do Qwik para facilitar a construção de um site completo, incluindo roteamento baseado em diretório, layouts e muito mais.

Estrutura do projeto

Dentro do modelo Qwind , você verá as seguintes pastas e arquivos:

 /
├── 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 : fornece o roteamento baseado em diretório, que pode incluir uma hierarquia de arquivos de layout layout.tsx e um arquivo index.tsx como página. Além disso, os arquivos index.ts são terminais. Consulte a documentação de roteamento para obter mais informações.

• src/components : diretório recomendado para componentes.

• public : quaisquer ativos estáticos, como imagens, podem ser colocados no diretório público. Consulte o diretório público do Vite para obter mais informações.

Especialista experiente em qwik? Exclua este arquivo. Atualize config.mjs e conteúdo. Divirta-se!

Comandos

Todos os comandos são executados na raiz do projeto, em um terminal:

Comando	Ação
npm install	Instala dependências
npm run dev	Inicia o servidor de desenvolvimento local em 127.0.0.1:5173/
npm run build	Crie seu site de produção para ./dist/
npm run preview	Visualize seu build localmente, antes de implantar
npm run fmt	Formate códigos com Prettier
npm run lint	Execute Eslint
npm run qwik ...	Execute comandos CLI como qwik add , qwik build

Configuração

Arquivo de configuração básica: ./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
} ;

Implantar

Implantar em produção (manual)

Você pode criar uma construção de produção otimizada com:

npm run build

Agora seu site está pronto para ser implantado. Todos os arquivos gerados estão localizados na pasta dist , onde você pode implantar a pasta em qualquer serviço de hospedagem de sua preferência.

Implantar no Netlify

Clone este repositório na própria conta GitHub e implante no Netlify:

Implantar no Vercel

Clone este repositório na própria conta GitHub e implante no Vercel:

Roteiro

Base

• Crie utilitários para gerar links permanentes personalizados para o domínio e nome de caminho base.
• Simplifique a forma de otimizar imagens.
• Crie componente para tornar o SEO mais simples e intuitivo.
• Crie um blog configurável com categorias, tags e autores usando MDX.
• Adicione páginas usadas com mais frequência (Portfólio, Serviços, Contato, Documentos...).
• Encontre ou crie uma biblioteca para ter mais fontes de ícones disponíveis.
• Refatore algum código que ainda não segue as convenções do Qwik.

Avançado

• Obtenha uma pontuação perfeita de 100% no Google Page Speed.
• Insira um widget complexo de exemplo de javascript na página inicial para demonstrar os recursos do Qwik.
• Crie um pequeno back-end de administração ilustrativo.

Contribuindo

Se você tiver alguma ideia, sugestão ou encontrar algum bug, fique à vontade para abrir uma discussão, um problema ou criar um pull request. Isso seria muito útil para todos nós e ficaríamos felizes em ouvir e agir.

Agradecimentos

Criado inicialmente por onWidget e mantido por uma comunidade de colaboradores.

Licença

Qwind é licenciado sob a licença MIT – consulte o arquivo LICENSE para obter detalhes.