静的ファイルジェネレーターとして使いたい。

Astro のコンポーネントと FLOCSS の構造が上手くマッチするような気がしている。

• カスケードの優先度が css の記述順（ファイルの読み込み順）に依存しないように、@layer で強さを明示している
• レイアウトの部品やコンポーネントは自身に関係のある scss をインポートする
  • 全体にかかる DefaultLayout.astro では foundation.scss をインポートしている
  • <MainNav> は scss/layout/main-nav.scss をインポートする、みたいな

なお @layer は無指定のほうが強いので、面倒だからと省略するとすぐに破綻する。

• DefaultLayout.astro で全ての (s)css をインポートしてしまう作戦もありそう
• .astro 内に (s)css は書きません
• スクリプトも is:inline 以外はファイルに書いてインポートする（これは普通）

たぶんコロコロ変わる。

public
└── img
src
├── components
├── content
│   └── posts
├── layouts
├── pages
│   └── posts
├── scripts
└── styles
    └── scss

そのまま使うファイルを置く。img 以下に favicon とか。

なお、Astro 君は src 以下のファイルしか監視していない模様で、public 内のファイルを更新してもホットリロードしてくれない。

汎用的に使いそうなパーツ。ボタン、カードなど。

コンテンツコレクション用。

各ページで共通に使われるパーツ。レイアウトに含まれるヘッダーやフッターなどもここ。src/componentsとの違いは使われる頻度。適当だなあ。

FLOCSS の構成に合わせてもいいかもしれない。その場合、src/components 内のボタンコンポーネントなどは src/layouts/object/component 以下に移動することになりそう。

ページ用。

スクリプト。基本はここにファイルを置いてインポートする。

スタイルシート。scss はディレクトリに入れた。

Node.js v18.14.1 以上

git clone [email protected]:YokochiO/astro-template.git

npm i

npm run dev

npm run build

.workspaceに拡張や sass の設定などがある。他のエディタのことは知らない。

• Live Sass Compiler
  • sass は Astro でコンパイルするため不要になった。css ファイルを書き出さないようにsettings.excludeListを指定している。
• Astro support for Visual Studio Code ← 必須
• Prettier Formatter for Visual Studio Code

• どうせなら WordPress のテーマも一緒に扱いたい
• 静的ファイルを手動でコピーするのは嫌だ

ということで、ビルドが終わったら copy.js を実行して dist から静的ファイルをコピーする。

const fromDir = './dist' // コピー元のフォルダ
const toDir = './wordpress-theme' // コピー先（WordPressのテーマフォルダ）
const files = ['img', '_astro'] // fromDir内のこれらをコピーする

  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },

buildを書き換え、copyを追加

  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build && npm run copy",
    "preview": "astro preview",
    "astro": "astro",
    "copy": "node copy.js"
  },

WordPress のために静的ファイルを作るのはナンセンスだとか言われるけど、あのクソみたいなエディタを使いたくない。