astro-dev-mcp 0.3.0 → 0.5.0

package/README.md

@@ -10,9 +10,22 @@
 
 - ✅ **コンポーネント生成**: Props定義から再利用可能なAstroコンポーネントを生成
 - ✅ **セクション生成**: コンテンツデータから`_parts`配下のセクションを生成
+  - **NEW**: SCSS自動生成（astro-dev mixinに準拠）
+  - **NEW**: app.js自動更新（Tab/Accordion等のスクリプト登録）
 - ✅ **ページ生成**: ページ構造全体を一括生成
 - ✅ **スキーマ生成**: Excel/Markdown/JSONからTypeScript型定義を自動生成
 
+### v0.2.0の主な改善点
+
+**astro-devプロジェクトでの実際の使用経験から、以下の課題を解決しました:**
+
+1. ✅ **既存スクリプトの活用**: Tab.ts、Accordion.ts等のastro-dev既存スクリプトを使用
+2. ✅ **Mixinの使用**: `@include mq()`、`@include hover()`を使用したSCSS生成
+3. ✅ **.contentInner二重設定の防止**: 柔軟なコンテナ制御
+4. ✅ **スタイル分離**: Astroファイルではなく、SCSSファイルに分離
+
+詳細は [IMPROVEMENTS.md](./IMPROVEMENTS.md) を参照してください。
+
 ## インストール
 
 ### 方法1: npxで直接実行（推奨）
@@ -134,21 +147,12 @@ Props:
 
 ---
 
-### 2. セクション生成
+### 2. セクション生成（改善版）
 
 **プロンプト例**:
 
 ```
-sampleページ用のarticlesセクションを生成してください。
-
-コンテンツ:
-- タイトル: 最新記事
-- 記事数: 4件
-- 各記事にタイトル、説明文、投稿日、カテゴリ、画像が必要
-
-使用コンポーネント:
-- Picture
-- SetTime
+recruitページでQ&Aをアコーディオンで実装してください。
 ```
 
 **実行されるMCPツール**:
@@ -157,20 +161,38 @@ sampleページ用のarticlesセクションを生成してください。
 {
 	"name": "generate-section",
 	"arguments": {
-		"sectionType": "articles",
-		"pageName": "sample",
+		"prompt": "Q&Aをアコーディオンで実装",
+		"pageName": "recruit",
 		"content": {
-			"ttl": "最新記事",
-			"items": []
+			"ttl": "よくある質問",
+			"items": [
+				{ "ttl": "質問1", "content": "回答1" },
+				{ "ttl": "質問2", "content": "回答2" }
+			]
 		},
-		"components": ["Picture", "SetTime"]
+		"generateScss": true,
+		"scssOptions": {
+			"spacing": {
+				"sectionPadding": "6rem 0",
+				"itemGap": "1.6rem"
+			}
+		}
 	}
 }
 ```
 
 **出力**:
 
-- `src/pages/_parts/_sample/_articles.astro`
+- `src/pages/_parts/_recruit/_qa.astro` (Astroコンポーネント)
+- SCSSコード（`src/scss/pages/_recruit.scss`に追記）
+- `src/js/app.js` 自動更新（Accordion.tsを追加）
+
+**生成されるコードの特徴**:
+
+✅ **既存スクリプトを使用**: astro-devの`Accordion.ts`を活用
+✅ **Mixinを使用**: `@include mq()`、`@include hover()`、`@include fontsize()`
+✅ **コンテナ制御**: `.contentInner`の二重設定を防止
+✅ **スタイル分離**: SCSSファイルに分離（Astroファイル内に`<style>`なし）
 
 ---
 
@@ -369,7 +391,32 @@ astro-mcp/
 
 ---
 
-## サポートするセクションタイプ
+## サポートするUIパターン
+
+### インタラクティブパターン（スクリプト連携）
+
+- **`tab`**: タブUI（Tab.ts連携）
+  - 自動的に`app.js`に`Tab.ts`を登録
+  - ARIA属性・キーボード操作対応
+- **`accordion`**: アコーディオンUI（Accordion.ts連携）
+  - 自動的に`app.js`に`Accordion.ts`を登録
+  - 高さアニメーション・フォーカス管理
+- **`modal`**: モーダルギャラリー（Modal.ts連携）
+  - 自動的に`app.js`に`Modal.ts`を登録
+  - 動画/画像/カスタムdialog対応
+
+### 静的パターン
+
+- **`grid`**: グリッドレイアウト
+  - レスポンシブカラム数制御
+  - 画像サポート（Pictureコンポーネント対応）
+- **`carousel`**: カルーセル
+  - Swiper.js連携想定
+  - 自動再生オプション
+- **`list`**: シンプルリスト
+  - 基本的な情報表示
+
+### セクションタイプ
 
 - `hero`: ヒーローセクション
 - `articles`: 記事一覧

package/dist/editors/appJsEditor.d.ts

@@ -0,0 +1,21 @@
+/**
+ * app.js エディター
+ * UIパターンに応じて必要なスクリプトを自動登録
+ */
+import type { UIPattern } from '../templates/uiPatterns.js';
+/**
+ * UIパターンから必要なスクリプトクラス名を取得
+ */
+export declare function getRequiredScripts(pattern: UIPattern): string[];
+/**
+ * app.js にスクリプトを追加
+ * @param originalContent 既存のapp.jsの内容
+ * @param scripts 追加するスクリプトクラス名の配列
+ * @returns 更新後のapp.jsの内容
+ */
+export declare function updateAppJs(originalContent: string, scripts: string[]): string;
+/**
+ * app.js の更新が必要かチェック
+ */
+export declare function needsAppJsUpdate(originalContent: string, pattern: UIPattern): boolean;
+//# sourceMappingURL=appJsEditor.d.ts.map

package/dist/editors/appJsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appJsEditor.d.ts","sourceRoot":"","sources":["../../src/editors/appJsEditor.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM,EAAE,CAW/D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAC1B,eAAe,EAAE,MAAM,EACvB,OAAO,EAAE,MAAM,EAAE,GACf,MAAM,CAgGR;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC/B,eAAe,EAAE,MAAM,EACvB,OAAO,EAAE,SAAS,GAChB,OAAO,CAcT"}

package/dist/editors/appJsEditor.js

@@ -0,0 +1,120 @@
+/**
+ * app.js エディター
+ * UIパターンに応じて必要なスクリプトを自動登録
+ */
+/**
+ * UIパターンから必要なスクリプトクラス名を取得
+ */
+export function getRequiredScripts(pattern) {
+    const scriptMap = {
+        tab: ['Tab'],
+        accordion: ['Accordion'],
+        modal: ['Modal'],
+        carousel: [], // カルーセルは外部ライブラリ（Swiper等）を使用
+        grid: [],
+        list: [],
+    };
+    return scriptMap[pattern] || [];
+}
+/**
+ * app.js にスクリプトを追加
+ * @param originalContent 既存のapp.jsの内容
+ * @param scripts 追加するスクリプトクラス名の配列
+ * @returns 更新後のapp.jsの内容
+ */
+export function updateAppJs(originalContent, scripts) {
+    if (scripts.length === 0)
+        return originalContent;
+    const lines = originalContent.split('\n');
+    const importLines = [];
+    const initLines = [];
+    let loadListenerIndex = -1;
+    // 既存のimport文とnew呼び出しを解析
+    const existingImports = new Set();
+    const existingInits = new Set();
+    lines.forEach((line, index) => {
+        // import文の検出
+        const importMatch = line.match(/import\s+{\s*(\w+)\s*}\s+from/);
+        if (importMatch) {
+            existingImports.add(importMatch[1]);
+        }
+        // new呼び出しの検出
+        const initMatch = line.match(/new\s+(\w+)\(\)/);
+        if (initMatch) {
+            existingInits.add(initMatch[1]);
+        }
+        // window.addEventListener("load") の検出
+        if (line.includes('window.addEventListener("load"')) {
+            loadListenerIndex = index;
+        }
+    });
+    // 追加が必要なスクリプトをフィルタリング
+    const scriptsToAdd = scripts.filter((script) => !existingImports.has(script) && !existingInits.has(script));
+    if (scriptsToAdd.length === 0) {
+        // すべて既に登録済み
+        return originalContent;
+    }
+    // 新しいimport文を生成
+    scriptsToAdd.forEach((script) => {
+        importLines.push(`import { ${script} } from "./class/${script}.ts";`);
+        initLines.push(`  new ${script}();`);
+    });
+    // app.jsの構造を解析して適切な位置に挿入
+    let result = originalContent;
+    // 1. import文の追加
+    // findLastIndex相当の処理（ES2023未満でも動作）
+    let lastImportIndex = -1;
+    for (let i = lines.length - 1; i >= 0; i--) {
+        if (lines[i].match(/^import\s+/)) {
+            lastImportIndex = i;
+            break;
+        }
+    }
+    if (lastImportIndex !== -1) {
+        // 既存のimport文の後に追加
+        const before = lines.slice(0, lastImportIndex + 1).join('\n');
+        const after = lines.slice(lastImportIndex + 1).join('\n');
+        result = before + '\n' + importLines.join('\n') + '\n' + after;
+    }
+    else {
+        // import文がない場合は先頭に追加
+        result = importLines.join('\n') + '\n' + originalContent;
+    }
+    // 2. new呼び出しの追加
+    if (loadListenerIndex !== -1) {
+        // window.addEventListener("load") ブロック内に追加
+        const updatedLines = result.split('\n');
+        const loadListenerLineInUpdated = updatedLines.findIndex((line) => line.includes('window.addEventListener("load"'));
+        if (loadListenerLineInUpdated !== -1) {
+            // 最後のnew呼び出しの後に追加
+            let lastInitIndex = loadListenerLineInUpdated;
+            for (let i = loadListenerLineInUpdated + 1; i < updatedLines.length; i++) {
+                if (updatedLines[i].includes('new ')) {
+                    lastInitIndex = i;
+                }
+                if (updatedLines[i].includes('});')) {
+                    break;
+                }
+            }
+            const before = updatedLines.slice(0, lastInitIndex + 1).join('\n');
+            const after = updatedLines.slice(lastInitIndex + 1).join('\n');
+            result = before + '\n' + initLines.join('\n') + '\n' + after;
+        }
+    }
+    return result;
+}
+/**
+ * app.js の更新が必要かチェック
+ */
+export function needsAppJsUpdate(originalContent, pattern) {
+    const requiredScripts = getRequiredScripts(pattern);
+    if (requiredScripts.length === 0)
+        return false;
+    // すべてのスクリプトが既に登録されているかチェック
+    return requiredScripts.some((script) => {
+        const importPattern = new RegExp(`import\\s+{\\s*${script}\\s*}\\s+from`);
+        const initPattern = new RegExp(`new\\s+${script}\\(\\)`);
+        return (!importPattern.test(originalContent) || !initPattern.test(originalContent));
+    });
+}
+//# sourceMappingURL=appJsEditor.js.map

package/dist/editors/appJsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appJsEditor.js","sourceRoot":"","sources":["../../src/editors/appJsEditor.ts"],"names":[],"mappings":"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"}

package/dist/templates/scssPatterns.d.ts

@@ -0,0 +1,28 @@
+/**
+ * UIパターンに対応するSCSSテンプレート生成
+ * astro-devプロジェクトのmixin・命名規則に準拠
+ */
+import type { UIPattern } from './uiPatterns.js';
+export interface ScssPatternConfig {
+    pattern: UIPattern;
+    pageName: string;
+    sectionName: string;
+    options?: {
+        colors?: {
+            primary?: string;
+            secondary?: string;
+            text?: string;
+        };
+        spacing?: {
+            sectionPadding?: string;
+            itemGap?: string;
+        };
+        columns?: number;
+        hasImage?: boolean;
+    };
+}
+/**
+ * UIパターンに基づいてSCSSを生成
+ */
+export declare function generateScssPattern(config: ScssPatternConfig): string;
+//# sourceMappingURL=scssPatterns.d.ts.map

package/dist/templates/scssPatterns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scssPatterns.d.ts","sourceRoot":"","sources":["../../src/templates/scssPatterns.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IACjC,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE;QACT,MAAM,CAAC,EAAE;YACR,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,IAAI,CAAC,EAAE,MAAM,CAAC;SACd,CAAC;QACF,OAAO,CAAC,EAAE;YACT,cAAc,CAAC,EAAE,MAAM,CAAC;YACxB,OAAO,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;CACF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAiBrE"}