@d-zero/scaffold 5.0.0-beta.8 → 5.0.0

package/__assets/_libs/data/breadcrumbs.js

@@ -1,77 +0,0 @@
-import path from 'node:path';
-
-import { JSDOM } from 'jsdom';
-
-/**
- *
- */
-export default function () {
-	return (page, collections) => {
-		const breadcrumbs = collections.all
-			.filter((item) => isAncestor(page, item.filePathStem))
-			.map((item) => ({
-				title: getTitle(item),
-				href: item.page.url,
-				depth: item.page.url.split('/').filter(Boolean).length,
-			}))
-			.sort((a, b) => a.depth - b.depth);
-		return breadcrumbs;
-	};
-}
-
-/**
- *
- * @param page
- * @param filePathStem
- */
-function isAncestor(page, filePathStem) {
-	const dirname = path.dirname(filePathStem);
-	const name = path.basename(filePathStem);
-	const included = page.filePathStem.startsWith(dirname);
-	const isIndex = name === 'index';
-	const isSelf = page.filePathStem === filePathStem;
-	return (included && isIndex) || isSelf;
-}
-
-const titleCache = new Map();
-
-/**
- *
- * @param item
- */
-function getTitle(item) {
-	const filePathStem = item.filePathStem;
-	if (titleCache.has(filePathStem)) {
-		return titleCache.get(filePathStem);
-	}
-	const title =
-		item.data.title?.trim() ||
-		getTitleFromDOM(getContent(item)) ||
-		item.page.fileSlug?.trim();
-	titleCache.set(filePathStem, title);
-	return title;
-}
-
-/**
- *
- * @param item
- */
-function getTitleFromDOM(item) {
-	const content = getContent(item);
-	const dom = new JSDOM(content);
-	const title = dom.window.document.title.trim();
-	return title;
-}
-
-/**
- *
- * @param item
- */
-function getContent(item) {
-	try {
-		// UsingCircularTemplateContentReferenceError may potentially occur
-		return item.templateContent;
-	} catch {
-		return null;
-	}
-}

package/__assets/_libs/data/titlelist.js

@@ -1,16 +0,0 @@
-import breadcrumbs from './breadcrumbs.js';
-
-/**
- *
- */
-export default async function () {
-	return (page, collections, pkg, separator = ' | ') => {
-		const breadcrumbLinkList = breadcrumbs()(page, collections);
-		const titleList = breadcrumbLinkList
-			.filter((item) => item.href !== '/')
-			.toReversed()
-			.map((item) => item.title);
-		titleList.push(pkg.production?.siteName || '__サイト名__');
-		return titleList.join(separator);
-	};
-}

package/ai-tasks/create-component.md

@@ -1,127 +0,0 @@
-# 1
-
-`use_mcp_tool:burger_editor`関連の実行を禁止する。
-FigmaデータのURLをユーザーに要求せよ。
-ユーザーから受け取ったURLで`use_mcp_tool:frontend_env:get_figma_data`せよ。
-得られたファイルパスを`execute_command:mv`で`.cache/figma-data.yaml`に保存し、ステップ2を実行せよ。
-ユーザーがURLを入力しなかったら、ステップ4を実行せよ。
-
-# 2
-
-ステップ1で得られたFigmaデータを`read_file`で読み込め。
-ここでどんなコンポーネントを作るのか記憶せよ。
-Figmaデータのトップレイヤーのフレーム名をコンポーネント名にせよ。
-カスタム要素が含まれていてもそれはコンポーネントの一部であり、別々で生成する必要はない。
-コンポーネントが不明瞭な場合、Figmaのレイヤー名を変更するようにユーザーに警告、ステップは継続せず全タスクを終了せよ。
-コンポーネントが名が判明したらステップ3を実行せよ。
-
-# 3
-
-FigmaのFileデータから全体のnodeIdで`use_mcp_tool:frontend_env:get_figma_image`から全体の画像を取得せよ。
-MCPサーバから返却されたURLを`execute_command:curl`して、`.cache/コンポーネント名.png`として保存。
-URLをブラウザで開いてはいけない。
-これらのタスクが完了したら、ステップ4を実行せよ。
-
-# 4
-
-`.cache/コンポーネント名.png`を解析し全体デザインを確認し、構造やスタイルを分析せよ。
-Figmaデータに`boundVariables`ノードをもつ場合、ユーザーにVariablesの詳細情報を要求せよ。
-`__assets/_libs/style/base/root.scss`を`read_file`し、既にCSSカスタムプロパティが存在してたらスキップしてステップ6へ。
-ユーザーからVariablesの詳細情報を得られたら、ステップ5を実行せよ。拒否されたら、ステップ6を実行せよ。
-
-# 5
-
-`__assets/_libs/style/base/root.scss`を`read_file`せよ。
-たとえば`--primary-color[VariableCollectionId:5:13/VariableID:5:14]={"r":0.9529411792755127,"g":0.572549045085907,"b":0,"a":1}`を受け取っていれば`--primary-color: rgb(243 156 18 / 100%);`のように変換せよ。
-Variables変換したCSSカスタムプロパティとして`:root`に上書きせずに追記せよ。
-`--primary-color: rgb(243 156 18 / 100%); /* VariableID:5:14 */`のようにコメントもつけろ。
-「カラーシンタックスがフォーマットと異なる」類のstylelintエラーはこのステップでは無視してよい。
-これらのタスクが完了したら、ステップ6を実行せよ。
-
-# 6
-
-Figmaのデータにカスタム要素が存在するか確認せよ。
-`use_mcp_tool:frontend_env:get_coding_guidelines(web-components)`を確認し、**プレフィックスは`c`としてカスタム要素名を記憶せよ**。
-**注意**: カスタム要素が含まれたとしてもコンポーネントの一部であり別々で生成する必要はない。
-これらのタスクが完了したら、ステップ7を実行せよ。
-
-# 7
-
-ステップ1で`.cache/コンポーネント名.yaml`に保存していた場合データを読み込め。
-ステップ2で`.cache/コンポーネント名.png`に保存していた場合画像を画像解析せよ。
-画像化する必要があるFigmaノードを特定せよ。
-カスタム要素に相当するノード内は無視すること。
-`use_mcp_tool:frontend_env:get_figma_image`で画像のURLを取得し、`execute_command:curl`で`htdocs/img/`に保存せよ。
-`use_mcp_tool:frontend_env:get_coding_guidelines(media)`の規定に従うこと。
-サブディレクトリは作らないこと。
-SVGもsvgファイル画像として保存すること。
-これらのタスクが完了したら、ステップ8を実行せよ。
-
-# 8
-
-HTMLを作成する。
-作成するのはFigmaのトップレイヤーのコンポーネントのみである。
-`use_mcp_tool:frontend_env:get_coding_guidelines(html)`の規定に従い設計せよ。
-作成するコンポーネントの名前でpugファイルを作成（場所は`__assets/_libs/component/コンポーネント名.pug`）せよ。
-既にファイルが存在する場合は、そのファイルを上書きせよ。
-要素の順番はスクリーンリーダーやフォーカスの順番に依存し重要であるため、Figmaレイヤーの順番にはこだわらず、情報設計的な在り方を最優先に視覚的な配置を加味して順番を決定すること。
-**カスタム要素の要素名のプレフィックスは`c-`をつけること。**
-インラインSVGは作ってはならない。必要なのであればステップ7に戻って再作成すること。
-これらのタスクが完了したら、ステップ9を実行せよ。
-
-# 9
-
-作成したコンポーネントファイルで代替テキストが必要か確認せよ。
-必要な場合は、コーディングガイドラインで代替テキストの情報を確認せよ。
-確認ができたら、ファイルを修正せよ。
-これらのタスクが完了したら、ステップ10を実行せよ。
-
-# 10
-
-CSSを作成する。
-一般的なCSSの実装方法を一切忘れてのぞめ。
-`use_mcp_tool:frontend_env:get_coding_guidelines(css)`に従い設計せよ。
-ステップ1で`.cache/コンポーネント名.yaml`に保存していた場合データを読み込め。
-ステップ2で`.cache/コンポーネント名.png`に保存していた場合画像を画像解析せよ。
-ステップ8で作成したpugファイルを読み込め。
-確認ができたら、作成するコンポーネントの名前でscssファイルを作成（場所は`__assets/_libs/component/コンポーネント名.scss`）せよ。
-これらJSONと画像とHTMLを解析して、コンポーネントのスタイルを生成せよ。
-**レスポンシブが想定されていてもメディアクエリを使用して非表示の要素を作らないこと。**
-**レスポンシブが想定されていてもメディアクエリを使用して非表示の要素を作らないこと！**
-**レスポンシブが想定されていてもメディアクエリを使用して非表示の要素を作らないこと！！！**
-**Figmaデータからあるがままスタイルに変換すること。**
-**カスタム要素のカスタムプロパティは反映すること。**
-**カスタム要素が固定のサイズを持つ場合は、`inline-size`などで指定すること。**
-HTMLと同様にカスタム要素のプレフィックスは`c-`である。
-stylelintのエラーが発生した場合は、直接編集せず、`npx stylelint --fix <fileName>`を実行せよ。
-stylelintのselector-type-no-unknownエラーが発生している場合、カスタム要素の命名が間違っているので、ステップ7に戻って必要な部分だけ修正せよ。
-これらのタスクが完了したら、ステップ11を実行せよ。
-
-# 11
-
-カスタム要素を使用していた場合は、JSに`@d-zero/custom-components`を読み込め。
-
-```ts
-import { defineXXXXX } from '@d-zero/custom-components/XXXXX';
-defineXXXXX('c'); // プレフィックスは"c-"
-```
-
-としろ。
-`__assets/htdocs/js/script.ts`に上書きせずに追記せよ。
-**他の実装は不要。**
-**他の実装は不要！**
-**他の実装は不要！！！**
-これらのタスクが完了したら、ステップ12を実行せよ。
-
-# 12
-
-コンポーネントがどのページに影響するかを報告せよ。
-どのページかどうかは`__assets/htdocs/`ディレクトリ内から`@include`もしくはクラス名を検索して特定せよ。
-CLIを使って検索しても構わない。
-これらのタスクが完了したら、ステップ13を実行せよ。
-
-# 13
-
-`git status`を実行して、変更があったファイルとその内容を確認せよ。
-差分は`git --no-pager diff <fileName>`で実行せよ。
-内容に問題があれば、各ステップに戻り修正せよ。

package/ai-tasks/create-page.md

@@ -1,110 +0,0 @@
-# 1
-
-`use_mcp_tool:burger_editor`関連の実行を禁止する。
-指示があるまで一切の`list_files`、`search_files`、`read_file`および`write_to_file`を禁止する。
-その他余計な推論やファイル読み込み操作はせずに次のステップに進め。
-
-# 2
-
-対象のページと利用するコンポーネントをユーザーに要求せよ。
-
-得られた情報を次のYAMLのように整理し、スレッドに出力しユーザーの承認を待て。
-この情報整理をこなすのには`use_mcp_tool:frontend_env:get_coding_guidelines(html)`の知識が必要である。
-
-例1:
-
-```yaml
-pagePath: 000_home.pug
-pageType: c-page-home
-components:
-  - c-header
-  - c-hero
-  - c-section01
-  - c-section02
-  - c-banners
-  - c-footer
-```
-
-例2:
-
-```yaml
-pageName: 100_sub.pug
-pageType: c-page-sub
-components:
-  - c-header
-  - c-page-title
-  - c-content-main
-  - c-banners
-  - c-footer
-```
-
-承認を得たら次のステップに進め。
-
-# 3
-
-`list_files`で`__assets/htdocs/_libs/component/`にファイルが存在するか確認せよ。
-コンポーネントがない場合はタスクの一切を強制中止せよ。
-コンポーネントがすべて揃っていれば次のステップに進め。
-
-# 4
-
-前ステップで得た情報を元に、以下のようなpugファイルを`write_to_file`せよ。
-
-```pug
-html(lang="ja")
-	head
-		include /mixin/meta.pug
-		+meta("__サイトタイトル__")
-	body.c-page-home
-		.c-page-home__base
-			.c-page-home__header
-				include /component/c-header.pug
-			.c-page-home__hero
-				include /component/c-hero.pug
-			.c-page-home__section01
-				include /component/c-section01.pug
-			.c-page-home__section02
-				include /component/c-section02.pug
-			.c-page-home__banners
-				include /component/c-banners.pug
-			.c-page-home__footer
-				include /component/c-footer.pug
-```
-
-```pug
-html(lang="ja")
-	head
-		include /mixin/meta.pug
-		+meta("__サイトタイトル__")
-	body.c-page-sub
-		.c-page-sub__base
-			.c-page-sub__header
-				include /component/c-header.pug
-			.c-page-sub__page-title
-				include /component/c-page-title.pug
-			.c-page-sub__content-main
-				include /component/c-content-main.pug
-			.c-page-sub__banners
-				include /component/c-banners.pug
-			.c-page-sub__footer
-				include /component/c-footer.pug
-```
-
-既に同名のファイルが存在する場合は、**既存のコードは一切参考にせずすべて削除し**指示された構造をそのまま反映せよ。
-作成したら、`__assets/htdocs/__tmpl/`に保存せよ。`__assets/htdocs/__tmpl/`の外に作ってはならない。
-パスはViteの機能に従い`/component/`で始めことができる。
-ファイルのナンバリングは重要である。
-保存したら次のステップに進め。
-
-# 5
-
-`__assets/htdocs/_libs/component/`のコンポーネントと対になっているSASSファイルが同フォルダに存在するので、それを`__assets/htdocs/css/style.scss`に追記せよ。
-保存したら次のステップに進め。
-
-# 6
-
-タスクは完了である。以下は不要。
-
-- ビルド
-- ブラウザチェック
-- テスト

package/ai-tasks/page-to-burger.md

@@ -1,68 +0,0 @@
-# 1
-
-URLをユーザーに尋ねて`execute_command:curl`を実行し構造を把握せよ。
-文字コードがUTF-8でない場合は変換コマンドをパイプして構造を把握せよ。
-ページサイズが5MBを超えないのであれば`head`コマンド使わずに一度に取得せよ。
-把握できたらステップ2に進め。
-
-# 2
-
-`browser_action`を実行しメインコンテンツのレイアウトと内容を視覚的に解析せよ。
-画面固定されているバナーがあれば閉じよ。
-予期せぬページ移動や画面遷移があれば直ちに停止しユーザーに指示を仰げ。
-把握できたらステップ3に進め。
-
-# 3
-
-取得したメインコンテンツの各ブロック（セクションではない）をレイアウトタイプと内容をMarkdown+frontmatter形式の単一のファイルに書き出せ。
-保存先は`.cache`ディレクトリで、ブロックごとにファイルを分けること。
-ファイル名はURLとブロック名を組み合わせて、ブロックの順番に連番にせよ。
-内容のフォーマットは次の通り。
-
-```markdown
----
-url: https://example.com/path/to/page
-blockType: '{{block_type}}'
----
-
-{{section_content_body}}
-```
-
-Frontmatterの情報は`url`と`blockType`の2つのみ。他の指定は禁止。
-
-## block_type
-
-`use_mcp_tool:burger_editor:get_block_type`
-
-## section_content_body
-
-- Markdown形式
-- 画像はURLをそのまま記載
-- 画像のalt属性は抽出する
-- 画像のキャプションはalt属性と明確に区別し抽出
-- layout_typeに基づくカラムの区切りは`<!-- column-separator -->\n---\n<!-- column-separator -->`で記載
-- Markdownで表現できない特性があれば`<!-- -->`の形式でコメントとして記載
-  - 例:
-    - `<!-- 見出しレベルは見た目と矛盾している -->`
-    - `<!-- 画像はアニメーションGIF -->`
-    - `<!-- iframeのURL -->`
-    - `<!-- YouTubeのURL -->`
-    - `<!-- Google MapsのURLもしくは緯度経度 -->`
-- カルーセルは画像をリストとして記載
-
-# 4
-
-生成した各ファイルに対して次を実行せよ。
-`use_mcp_tool:burger_editor:get_block_data_params_v3`を実行し、`blockType`を`blockName`に渡して必要パラメータを取得せよ。
-取得したパラメータを元に`use_mcp_tool:burger_editor:create_block_v3`を実行し、`blockName`を`data`に渡して、HTMLを取得せよ。
-取得したHTMLを同名で拡張子を`.html`にして保存せよ。
-
-# 5
-
-生成したHTMLを`execute_command:cat`で1つのファイルにまとめよ。
-取得したURLと同様のパスとファイル名で`./htdocs`に保存せよ。
-URLが`https://example.com/path/to/page`であれば、保存先は`./htdocs/path/to/page.html`となる。
-
-# 6
-
-完了

package/eleventy.config.mjs

@@ -1,71 +0,0 @@
-import path from 'node:path';
-
-import eleventy from '@d-zero/builder/11ty';
-
-/**
- *
- * @param eleventyConfig
- */
-export default function (eleventyConfig) {
-	return eleventy(eleventyConfig, {
-		/**
-		 * Alias for the path to the directory containing the components.
-		 */
-		alias: {
-			'@': path.resolve(import.meta.dirname, '__assets', '_libs'),
-		},
-
-		/**
-		 * The directory where the source files are located.
-		 */
-		// outDir: 'htdocs',
-
-		/**
-		 * Prettier options.
-		 *
-		 * If `true`, use the prettier config in the project root.
-		 *
-		 * If `false`, disable prettier.
-		 *
-		 * If `object`, use the options. Merge with the prettier config in the project root.
-		 * @see https://prettier.io/docs/en/options
-		 */
-		prettier: true,
-
-		/**
-		 * Minifier options.
-		 * @see https://github.com/terser/html-minifier-terser?tab=readme-ov-file#options-quick-reference
-		 */
-		// minifier: { minifyJS: false },
-
-		/**
-		 * Line break.
-		 */
-		// lineBreak: '\r\n',
-
-		/**
-		 * Character encoding.
-		 */
-		// charset: 'shift_jis',
-
-		/**
-		 * Convert character entities
-		 */
-		// characterEntities: true
-
-		/**
-		 * Path format
-		 */
-		// pathFormat: 'directory',
-
-		/**
-		 * Automatically decode the content on the dev server.
-		 */
-		// autoDecode: true,
-
-		/**
-		 * Server Side Include options on the dev server.
-		 */
-		// ssi: { '**/*': { encoding: 'shift_jis' } },
-	});
-}