qwind

?クウィンド

Qwind は、Qwik + Tailwind CSS を使用して Web サイトを作成するための無料のオープンソース テンプレートです。新しいプロジェクトを開始する準備ができており、ベスト プラクティスを考慮して設計されています。

特徴

• ✅ダークモードをサポートするTailwind CSSとの統合。
• ✅ Lighthouse および PageSpeed Insights レポートの本番環境対応スコア。
• ✅画像の最適化とフォントの最適化。

目次

• デモ
• はじめる
  • プロジェクトの構造
  • コマンド
  • 構成
  • 展開する
• ロードマップ
• 貢献する
• 謝辞
• ライセンス

デモ

? https://qwind.pages.dev/

はじめる

このプロジェクトは QwikCity で Qwik を使用しています。 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 ...	qwik add 、 qwik buildなどの CLI コマンドを実行します

構成

基本設定ファイル: ./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

これで、Web サイトを展開する準備が整いました。生成されたすべてのファイルはdistフォルダーに配置され、このフォルダーを任意のホスティング サービスにデプロイできます。

Netlify へのデプロイ

自分の GitHub アカウントでこのリポジトリのクローンを作成し、Netlify にデプロイします。

ヴェルセルへの展開

自分の GitHub アカウントでこのリポジトリのクローンを作成し、Vercel にデプロイします。

ロードマップ

ベース

• ドメインとベース パス名に合わせたパーマリンクを生成するユーティリティを作成します。
• 画像を最適化する方法を簡素化します。
• SEO をよりシンプルかつ直感的に行うためのコンポーネントを作成します。
• MDX を使用して、カテゴリ、タグ、作成者を含む構成可能なブログを作成します。
• 頻繁に使用するページ (ポートフォリオ、サービス、連絡先、ドキュメントなど) を追加します。
• ライブラリを検索または作成して、より多くのアイコン ソースを利用できるようにします。
• まだ Qwik の規則に従っていないコードをリファクタリングします。

高度な

• 完璧な 100% Google Page Speed スコアを達成します。
• 複雑な JavaScript サンプル ウィジェットをホームページに挿入して、Qwik の機能をデモンストレーションします。
• 小さな例示的な管理バックエンドを作成します。

貢献する

アイデアや提案がある場合、またはバグを見つけた場合は、お気軽にディスカッションを開いたり、問題を提起したり、プル リクエストを作成したりしてください。それは私たち全員にとって非常に有益であり、喜んで耳を傾け、行動を起こしたいと思います。

謝辞

当初は onWidget によって作成され、貢献者のコミュニティによって維持されました。

ライセンス

Qwindは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。