@c-time/frelio-cli 0.1.0

package/dist/lib/initial-content.js

@@ -0,0 +1,1353 @@
+/**
+ * 初期コンテンツ・テンプレート・レシピの生成
+ * frelio-demo を踏襲したデモサイト構造
+ */
+import { writeFile } from './templates.js';
+import path from 'node:path';
+export function generateInitialContent(projectDir) {
+    const base = (...p) => path.join(projectDir, ...p);
+    // --- Content Type ---
+    writeFile(base('frelio-data/site/content_types/article.json'), json({
+        id: 'article',
+        fields: [
+            { key: 'slug', type: 'text', multiple: false, useAsUrl: true },
+            { key: 'title', type: 'text', multiple: false },
+            { key: 'excerpt', type: 'text', multiple: false },
+            { key: 'body', type: 'html', multiple: false },
+            { key: 'eyecatch', type: 'image', multiple: false },
+            { key: 'publishDate', type: 'date', multiple: false },
+        ],
+    }));
+    // --- Content Type UI ---
+    writeFile(base('frelio-data/admin/content_types/article.ui.json'), json({
+        id: 'article',
+        label: '記事',
+        fields: [
+            {
+                key: 'slug', label: 'スラッグ', required: true,
+                defaultValue: '', placeholder: 'my-article-slug',
+                description: 'URLに使用される識別子。英数字とハイフンのみ',
+                warnLength: null, columns: 12, break: false, hidden: false, readOnly: false,
+                pattern: '^[a-z0-9-]+$', patternMessage: '小文字英数字とハイフンのみ使用できます',
+                autoFormat: 'slug',
+            },
+            {
+                key: 'title', label: 'タイトル', required: true,
+                defaultValue: '', placeholder: '記事のタイトルを入力',
+                description: '検索結果・OGPに表示されます。推奨: 60文字以内',
+                warnLength: 60, columns: 12, break: false, hidden: false, readOnly: false,
+                pattern: null, patternMessage: null, autoFormat: null,
+            },
+            {
+                key: 'excerpt', label: '概要', required: false,
+                defaultValue: '', placeholder: '記事の概要を入力',
+                description: '一覧ページや検索結果に表示される短い説明文',
+                warnLength: 200, columns: 12, break: false, hidden: false, readOnly: false,
+                pattern: null, patternMessage: null, autoFormat: null,
+            },
+            {
+                key: 'body', label: '本文', required: true,
+                defaultValue: '', placeholder: 'HTML形式で本文を入力',
+                description: null, warnLength: null, columns: 12, break: false, hidden: false, readOnly: false,
+                pattern: null, patternMessage: null, autoFormat: null,
+            },
+            {
+                key: 'eyecatch', label: 'アイキャッチ画像', required: false,
+                defaultValue: null, placeholder: null,
+                description: '記事のサムネイル画像',
+                warnLength: null, columns: 6, break: true, hidden: false, readOnly: false,
+                aspectRatio: '16:9', pattern: null, patternMessage: null, autoFormat: null,
+            },
+            {
+                key: 'publishDate', label: '公開日', required: false,
+                defaultValue: '', placeholder: null,
+                description: '記事の公開日',
+                warnLength: null, columns: 4, break: false, hidden: false, readOnly: false,
+                pattern: null, patternMessage: null, autoFormat: null,
+            },
+        ],
+        groups: [],
+    }));
+    // --- Content Type Views ---
+    writeFile(base('frelio-data/admin/content_types/article.views.json'), json({
+        defaultViewId: 'default',
+        views: [
+            {
+                id: 'default',
+                label: 'デフォルト',
+                columns: [
+                    { field: 'title', label: 'タイトル' },
+                    { field: 'status', label: '状態', width: '100px' },
+                    { field: 'publishDate', label: '公開日', width: '150px' },
+                    { field: 'updatedAt', label: '更新日', width: '150px' },
+                ],
+                defaultSort: { field: 'updatedAt', direction: 'desc' },
+            },
+        ],
+    }));
+    // --- Content Types Metadata (override the empty one) ---
+    writeFile(base('frelio-data/admin/metadata/content_types.json'), json({
+        contentTypes: [
+            { id: 'article', label: '記事', icon: 'Article' },
+        ],
+    }));
+    // --- Dashboard Metadata ---
+    writeFile(base('frelio-data/admin/metadata/_dashboard.json'), json({
+        contentTypes: {
+            article: {
+                lastUpdatedAt: null,
+                lastUpdatedBy: null,
+                totalCount: 0,
+                draftCount: 0,
+                publishedCount: 0,
+            },
+        },
+    }));
+    // --- Build Recipe ---
+    writeFile(base('frelio-data/admin/recipes/build-data-recipe.json'), json({
+        version: '1.0',
+        contentTypes: {
+            article: {
+                details: [
+                    {
+                        type: 'detail',
+                        outputPath: 'news/{$this.slug}/index.json',
+                        templatePath: 'news/_detail/index.html',
+                    },
+                ],
+                lists: [
+                    {
+                        type: 'list',
+                        outputPath: 'news/index.json',
+                        templatePath: 'news/index.html',
+                        pagination: { perPage: 10, numberFormatCount: 1 },
+                    },
+                ],
+            },
+        },
+        staticPages: [
+            {
+                type: 'static',
+                outputPath: 'index.json',
+                templatePath: 'index.html',
+                customFields: [
+                    {
+                        field: 'latestNews',
+                        type: 'relationList',
+                        contentTypeId: 'article',
+                        limit: 5,
+                        sort: { field: 'publishDate', direction: 'desc' },
+                        listFields: ['slug', 'title', 'excerpt', 'eyecatch', 'publishDate'],
+                    },
+                ],
+            },
+            { type: 'static', outputPath: 'about/index.json', templatePath: 'about/index.html' },
+            { type: 'static', outputPath: 'contact/index.json', templatePath: 'contact/index.html' },
+        ],
+        templateIncludes: {
+            '_parts/*.htm': ['*'],
+        },
+    }));
+    // --- HTML Templates ---
+    generateTemplates(projectDir);
+    // --- SCSS ---
+    generateScss(projectDir);
+    // --- TypeScript ---
+    generateTypeScript(projectDir);
+    // --- CLAUDE.md ---
+    generateClaudeMd(projectDir);
+}
+// ========== HTML Templates ==========
+function generateTemplates(projectDir) {
+    const t = (...p) => path.join(projectDir, 'frelio-data/site/templates', ...p);
+    // _parts/head.htm
+    writeFile(t('_parts/head.htm'), `<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title data-gen-text="meta.title">Frelio Demo</title>
+<link rel="stylesheet" href="/assets/style.css">
+<script type="module" src="/assets/index.js"></script>
+`);
+    // _parts/header.htm
+    writeFile(t('_parts/header.htm'), `<header class="l-header">
+  <div class="l-header__inner">
+    <a href="/" class="c-logo">Frelio Demo</a>
+    <nav class="c-nav">
+      <button type="button" class="c-nav__toggle" aria-label="メニュー" aria-expanded="false">
+        <span class="c-nav__toggle__bar"></span>
+        <span class="c-nav__toggle__bar"></span>
+        <span class="c-nav__toggle__bar"></span>
+      </button>
+      <ul class="c-nav__list">
+        <li class="c-nav__item"><a href="/">ホーム</a></li>
+        <li class="c-nav__item"><a href="/news/">お知らせ</a></li>
+        <li class="c-nav__item"><a href="/about/">会社概要</a></li>
+        <li class="c-nav__item"><a href="/contact/">お問い合わせ</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>
+`);
+    // _parts/footer.htm
+    writeFile(t('_parts/footer.htm'), `<footer class="l-footer">
+  <div class="l-footer__inner">
+    <p class="l-footer__copyright">&copy; 2026 Frelio Demo. All rights reserved.</p>
+  </div>
+</footer>
+`);
+    // index.html
+    writeFile(t('index.html'), `<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <template data-gen-scope="" data-gen-include="_parts/head.htm"></template>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frelio Demo</title>
+  <link rel="stylesheet" href="/assets/style.css">
+  <script type="module" src="/assets/index.js"></script>
+</head>
+<body>
+  <template data-gen-scope="" data-gen-include="_parts/header.htm"></template>
+  <header class="l-header">
+    <div class="l-header__inner">
+      <a href="/" class="c-logo">Frelio Demo</a>
+      <nav class="c-nav">
+        <ul class="c-nav__list">
+          <li class="c-nav__item"><a href="/">ホーム</a></li>
+          <li class="c-nav__item"><a href="/news/">お知らせ</a></li>
+          <li class="c-nav__item"><a href="/about/">会社概要</a></li>
+          <li class="c-nav__item"><a href="/contact/">お問い合わせ</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main class="l-main">
+    <section class="p-hero">
+      <div class="p-hero__inner">
+        <h1 class="p-hero__title">Frelio Demo</h1>
+        <p class="p-hero__lead">GitHub + Cloudflare で動く、シンプルなヘッドレス CMS のデモサイトです。</p>
+      </div>
+    </section>
+
+    <section class="p-news-list">
+      <div class="p-news-list__inner">
+        <h2 class="e-heading">お知らせ</h2>
+        <ul class="p-news-list__items">
+          <template data-gen-scope="" data-gen-repeat="latestNews" data-gen-repeat-name="article">
+            <li class="p-news-list__item">
+              <a class="c-card--news" data-gen-attrs="href:article.href">
+                <div class="c-card__body">
+                  <time class="c-card__date" data-gen-text="article.publishDate">2026-03-01</time>
+                  <h3 class="c-card__title" data-gen-text="article.title">お知らせタイトル</h3>
+                  <p class="c-card__excerpt" data-gen-text="article.excerpt">お知らせの概要がここに入ります。</p>
+                </div>
+              </a>
+            </li>
+          </template>
+          <li class="p-news-list__item" data-gen-comment="">
+            <a class="c-card--news" href="/news/sample/">
+              <div class="c-card__body">
+                <time class="c-card__date">2026-03-01</time>
+                <h3 class="c-card__title">サンプルお知らせ</h3>
+                <p class="c-card__excerpt">これはプレビュー用のダミーデータです。</p>
+              </div>
+            </a>
+          </li>
+        </ul>
+        <div class="p-news-list__more">
+          <a href="/news/" class="c-btn">お知らせ一覧へ</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <template data-gen-scope="" data-gen-include="_parts/footer.htm"></template>
+  <footer class="l-footer">
+    <div class="l-footer__inner">
+      <p class="l-footer__copyright">&copy; 2026 Frelio Demo. All rights reserved.</p>
+    </div>
+  </footer>
+</body>
+</html>
+`);
+    // about.html
+    writeFile(t('about.html'), `<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <template data-gen-scope="" data-gen-include="_parts/head.htm"></template>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>会社概要 | Frelio Demo</title>
+  <link rel="stylesheet" href="/assets/style.css">
+  <script type="module" src="/assets/index.js"></script>
+</head>
+<body>
+  <template data-gen-scope="" data-gen-include="_parts/header.htm"></template>
+  <header class="l-header">
+    <div class="l-header__inner">
+      <a href="/" class="c-logo">Frelio Demo</a>
+      <nav class="c-nav">
+        <ul class="c-nav__list">
+          <li class="c-nav__item"><a href="/">ホーム</a></li>
+          <li class="c-nav__item"><a href="/news/">お知らせ</a></li>
+          <li class="c-nav__item"><a href="/about/">会社概要</a></li>
+          <li class="c-nav__item"><a href="/contact/">お問い合わせ</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main class="l-main">
+    <section class="p-about">
+      <div class="p-about__inner">
+        <h1 class="e-heading">会社概要</h1>
+        <div class="p-about__content">
+          <p>Frelio Demo は、ヘッドレス CMS「Frelio」の機能を紹介するためのデモサイトです。</p>
+          <p>Frelio は GitHub をデータストア、Cloudflare を配信基盤として活用し、サーバーレスで運用できる次世代の CMS です。</p>
+        </div>
+        <div class="p-about__table">
+          <table class="c-table">
+            <tbody class="c-table__body">
+              <tr class="c-table__row">
+                <th class="c-table__header">会社名</th>
+                <td class="c-table__cell">株式会社フレリオ（デモ）</td>
+              </tr>
+              <tr class="c-table__row">
+                <th class="c-table__header">所在地</th>
+                <td class="c-table__cell">東京都渋谷区</td>
+              </tr>
+              <tr class="c-table__row">
+                <th class="c-table__header">設立</th>
+                <td class="c-table__cell">2026年</td>
+              </tr>
+              <tr class="c-table__row">
+                <th class="c-table__header">事業内容</th>
+                <td class="c-table__cell">ヘッドレス CMS の開発・提供</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <template data-gen-scope="" data-gen-include="_parts/footer.htm"></template>
+  <footer class="l-footer">
+    <div class="l-footer__inner">
+      <p class="l-footer__copyright">&copy; 2026 Frelio Demo. All rights reserved.</p>
+    </div>
+  </footer>
+</body>
+</html>
+`);
+    // contact.html
+    writeFile(t('contact.html'), `<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <template data-gen-scope="" data-gen-include="_parts/head.htm"></template>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>お問い合わせ | Frelio Demo</title>
+  <link rel="stylesheet" href="/assets/style.css">
+  <script type="module" src="/assets/index.js"></script>
+</head>
+<body>
+  <template data-gen-scope="" data-gen-include="_parts/header.htm"></template>
+  <header class="l-header">
+    <div class="l-header__inner">
+      <a href="/" class="c-logo">Frelio Demo</a>
+      <nav class="c-nav">
+        <ul class="c-nav__list">
+          <li class="c-nav__item"><a href="/">ホーム</a></li>
+          <li class="c-nav__item"><a href="/news/">お知らせ</a></li>
+          <li class="c-nav__item"><a href="/about/">会社概要</a></li>
+          <li class="c-nav__item"><a href="/contact/">お問い合わせ</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main class="l-main">
+    <section class="p-contact">
+      <div class="p-contact__inner">
+        <h1 class="e-heading">お問い合わせ</h1>
+        <p class="p-contact__lead">お気軽にお問い合わせください。</p>
+        <form class="p-contact__form" action="#" method="post">
+          <div class="p-contact__field">
+            <label class="p-contact__label" for="contact-name">お名前</label>
+            <input class="p-contact__input" type="text" id="contact-name" name="name" required>
+          </div>
+          <div class="p-contact__field">
+            <label class="p-contact__label" for="contact-email">メールアドレス</label>
+            <input class="p-contact__input" type="email" id="contact-email" name="email" required>
+          </div>
+          <div class="p-contact__field">
+            <label class="p-contact__label" for="contact-message">メッセージ</label>
+            <textarea class="p-contact__textarea" id="contact-message" name="message" rows="6" required></textarea>
+          </div>
+          <div class="p-contact__actions">
+            <button type="submit" class="c-btn--submit">送信する</button>
+          </div>
+        </form>
+      </div>
+    </section>
+  </main>
+
+  <template data-gen-scope="" data-gen-include="_parts/footer.htm"></template>
+  <footer class="l-footer">
+    <div class="l-footer__inner">
+      <p class="l-footer__copyright">&copy; 2026 Frelio Demo. All rights reserved.</p>
+    </div>
+  </footer>
+</body>
+</html>
+`);
+    // news/index.html
+    writeFile(t('news/index.html'), `<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <template data-gen-scope="" data-gen-include="_parts/head.htm"></template>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>お知らせ | Frelio Demo</title>
+  <link rel="stylesheet" href="/assets/style.css">
+  <script type="module" src="/assets/index.js"></script>
+</head>
+<body>
+  <template data-gen-scope="" data-gen-include="_parts/header.htm"></template>
+  <header class="l-header">
+    <div class="l-header__inner">
+      <a href="/" class="c-logo">Frelio Demo</a>
+      <nav class="c-nav">
+        <ul class="c-nav__list">
+          <li class="c-nav__item"><a href="/">ホーム</a></li>
+          <li class="c-nav__item"><a href="/news/">お知らせ</a></li>
+          <li class="c-nav__item"><a href="/about/">会社概要</a></li>
+          <li class="c-nav__item"><a href="/contact/">お問い合わせ</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main class="l-main">
+    <section class="p-news-list">
+      <div class="p-news-list__inner">
+        <h1 class="e-heading">お知らせ</h1>
+        <ul class="p-news-list__items">
+          <template data-gen-scope="" data-gen-repeat="pagedItems" data-gen-repeat-name="article">
+            <li class="p-news-list__item">
+              <a class="c-card--news" data-gen-attrs="href:article.href">
+                <div class="c-card__body">
+                  <time class="c-card__date" data-gen-text="article.publishDate">2026-03-01</time>
+                  <h3 class="c-card__title" data-gen-text="article.title">お知らせタイトル</h3>
+                  <p class="c-card__excerpt" data-gen-text="article.excerpt">お知らせの概要がここに入ります。</p>
+                </div>
+              </a>
+            </li>
+          </template>
+          <li class="p-news-list__item" data-gen-comment="">
+            <a class="c-card--news" href="/news/sample/">
+              <div class="c-card__body">
+                <time class="c-card__date">2026-03-01</time>
+                <h3 class="c-card__title">サンプルお知らせ</h3>
+                <p class="c-card__excerpt">これはプレビュー用のダミーデータです。</p>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </main>
+
+  <template data-gen-scope="" data-gen-include="_parts/footer.htm"></template>
+  <footer class="l-footer">
+    <div class="l-footer__inner">
+      <p class="l-footer__copyright">&copy; 2026 Frelio Demo. All rights reserved.</p>
+    </div>
+  </footer>
+</body>
+</html>
+`);
+    // news/_detail/index.html
+    writeFile(t('news/_detail/index.html'), `<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <template data-gen-scope="" data-gen-include="_parts/head.htm"></template>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>記事タイトル | Frelio Demo</title>
+  <link rel="stylesheet" href="/assets/style.css">
+  <script type="module" src="/assets/index.js"></script>
+</head>
+<body>
+  <template data-gen-scope="" data-gen-include="_parts/header.htm"></template>
+  <header class="l-header">
+    <div class="l-header__inner">
+      <a href="/" class="c-logo">Frelio Demo</a>
+      <nav class="c-nav">
+        <ul class="c-nav__list">
+          <li class="c-nav__item"><a href="/">ホーム</a></li>
+          <li class="c-nav__item"><a href="/news/">お知らせ</a></li>
+          <li class="c-nav__item"><a href="/about/">会社概要</a></li>
+          <li class="c-nav__item"><a href="/contact/">お問い合わせ</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main class="l-main">
+    <article class="p-article">
+      <div class="p-article__inner">
+        <header class="p-article__header">
+          <time class="p-article__date" data-gen-text="publishDate">2026-03-01</time>
+          <h1 class="p-article__title" data-gen-text="title">記事タイトル</h1>
+        </header>
+        <template data-gen-scope="" data-gen-if="eyecatch">
+          <div class="p-article__eyecatch">
+            <img class="p-article__eyecatch__image" data-gen-attrs="src:eyecatch.url,alt:title" src="/images/placeholder.jpg" alt="記事タイトル">
+          </div>
+        </template>
+        <div class="p-article__eyecatch" data-gen-comment="">
+          <img class="p-article__eyecatch__image" src="/images/placeholder.jpg" alt="プレビュー画像">
+        </div>
+        <div class="p-article__body" data-gen-html="body">
+          <p>これはプレビュー用のダミー本文です。実際の記事コンテンツがここに表示されます。</p>
+          <h2>見出し</h2>
+          <p>記事の本文が続きます。HTMLリッチテキストで記述されます。</p>
+        </div>
+        <div class="p-article__footer">
+          <a href="/news/" class="c-btn">お知らせ一覧に戻る</a>
+        </div>
+      </div>
+    </article>
+  </main>
+
+  <template data-gen-scope="" data-gen-include="_parts/footer.htm"></template>
+  <footer class="l-footer">
+    <div class="l-footer__inner">
+      <p class="l-footer__copyright">&copy; 2026 Frelio Demo. All rights reserved.</p>
+    </div>
+  </footer>
+</body>
+</html>
+`);
+}
+// ========== SCSS ==========
+function generateScss(projectDir) {
+    const s = (...p) => path.join(projectDir, 'frelio-data/site/templates/assets/scss', ...p);
+    // style.scss (entry point)
+    writeFile(s('style.scss'), `// Foundation
+@use 'foundation/variables' as *;
+@use 'foundation/mixins' as *;
+@use 'foundation/reset';
+
+// Layout
+@use 'layout/l-header';
+@use 'layout/l-footer';
+@use 'layout/l-main';
+
+// Component
+@use 'component/c-logo';
+@use 'component/c-nav';
+@use 'component/c-btn';
+@use 'component/c-card';
+@use 'component/c-table';
+
+// Project
+@use 'project/p-hero';
+@use 'project/p-news-list';
+@use 'project/p-article';
+@use 'project/p-about';
+@use 'project/p-contact';
+
+// Element
+@use 'element/e-heading';
+`);
+    // Foundation
+    writeFile(s('foundation/_variables.scss'), `// Colors
+$color-primary: #0070f3;
+$color-primary-dark: #0060d0;
+$color-text: #333;
+$color-text-light: #666;
+$color-border: #e0e0e0;
+$color-bg: #fff;
+$color-bg-light: #f8f9fa;
+
+// Typography
+$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  "Hiragino Sans", "Noto Sans JP", sans-serif;
+$line-height-base: 1.7;
+
+// Layout
+$max-width: 1100px;
+$spacing-unit: 8px;
+
+// Breakpoints
+$bp-tablet: 768px;
+$bp-desktop: 1024px;
+`);
+    writeFile(s('foundation/_mixins.scss'), `@use 'variables' as *;
+
+@mixin tablet {
+  @media (min-width: $bp-tablet) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: $bp-desktop) {
+    @content;
+  }
+}
+`);
+    writeFile(s('foundation/_reset.scss'), `@use 'variables' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: $font-family-base;
+  line-height: $line-height-base;
+  color: $color-text;
+  background-color: $color-bg;
+  -webkit-font-smoothing: antialiased;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+
+a {
+  color: $color-primary;
+  text-decoration: none;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+`);
+    // Layout
+    writeFile(s('layout/_l-header.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.l-header {
+  border-bottom: 1px solid $color-border;
+  background-color: $color-bg;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.l-header__inner {
+  max-width: $max-width;
+  margin: 0 auto;
+  padding: $spacing-unit * 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@include tablet {
+  .l-header__inner {
+    padding: $spacing-unit * 2 $spacing-unit * 4;
+  }
+}
+`);
+    writeFile(s('layout/_l-footer.scss'), `@use '../foundation/variables' as *;
+
+.l-footer {
+  margin-top: $spacing-unit * 8;
+  border-top: 1px solid $color-border;
+  background-color: $color-bg-light;
+}
+
+.l-footer__inner {
+  max-width: $max-width;
+  margin: 0 auto;
+  padding: $spacing-unit * 4 $spacing-unit * 2;
+  text-align: center;
+}
+
+.l-footer__copyright {
+  font-size: 0.875rem;
+  color: $color-text-light;
+}
+`);
+    writeFile(s('layout/_l-main.scss'), `.l-main {
+  min-height: 60vh;
+}
+`);
+    // Component
+    writeFile(s('component/_c-logo.scss'), `@use '../foundation/variables' as *;
+
+.c-logo {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: $color-text;
+  text-decoration: none;
+}
+`);
+    writeFile(s('component/_c-nav.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.c-nav {
+  display: flex;
+  align-items: center;
+}
+
+.c-nav__toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 28px;
+  padding: 4px 0;
+}
+
+.c-nav__toggle__bar {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: $color-text;
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.c-nav__list {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: $color-bg;
+  border-bottom: 1px solid $color-border;
+  padding: $spacing-unit * 2;
+  flex-direction: column;
+  gap: $spacing-unit;
+}
+
+.c-nav__list--open {
+  display: flex;
+}
+
+.c-nav__item a {
+  color: $color-text-light;
+  font-size: 0.9375rem;
+}
+
+.c-nav__item a:hover {
+  color: $color-primary;
+}
+
+@include tablet {
+  .c-nav__toggle {
+    display: none;
+  }
+
+  .c-nav__list {
+    display: flex;
+    position: static;
+    flex-direction: row;
+    gap: $spacing-unit * 3;
+    padding: 0;
+    border-bottom: none;
+  }
+}
+`);
+    writeFile(s('component/_c-btn.scss'), `@use '../foundation/variables' as *;
+
+%c-btn {
+  display: inline-block;
+  padding: $spacing-unit * 1.5 $spacing-unit * 4;
+  border: 1px solid $color-primary;
+  border-radius: 4px;
+  font-size: 0.9375rem;
+  text-align: center;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.c-btn {
+  @extend %c-btn;
+  color: $color-primary;
+  background-color: transparent;
+}
+
+.c-btn:hover {
+  background-color: $color-primary;
+  color: $color-bg;
+}
+
+.c-btn--submit {
+  @extend %c-btn;
+  color: $color-bg;
+  background-color: $color-primary;
+  border-color: $color-primary;
+}
+
+.c-btn--submit:hover {
+  background-color: $color-primary-dark;
+  border-color: $color-primary-dark;
+}
+`);
+    writeFile(s('component/_c-card.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+%c-card {
+  display: block;
+  border: 1px solid $color-border;
+  border-radius: 8px;
+  overflow: hidden;
+  text-decoration: none;
+  color: $color-text;
+  transition: box-shadow 0.2s;
+}
+
+%c-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.c-card--news {
+  @extend %c-card;
+}
+
+.c-card__body {
+  padding: $spacing-unit * 2;
+}
+
+.c-card__date {
+  display: block;
+  font-size: 0.8125rem;
+  color: $color-text-light;
+  margin-bottom: $spacing-unit;
+}
+
+.c-card__title {
+  font-size: 1rem;
+  font-weight: bold;
+  line-height: 1.5;
+  margin-bottom: $spacing-unit;
+}
+
+.c-card__excerpt {
+  font-size: 0.875rem;
+  color: $color-text-light;
+  line-height: 1.6;
+}
+
+@include tablet {
+  .c-card__body {
+    padding: $spacing-unit * 3;
+  }
+
+  .c-card__title {
+    font-size: 1.125rem;
+  }
+}
+`);
+    writeFile(s('component/_c-table.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.c-table {
+  width: 100%;
+}
+
+.c-table__body {
+  display: block;
+}
+
+.c-table__row {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid $color-border;
+  padding: $spacing-unit * 2 0;
+}
+
+.c-table__header {
+  font-weight: bold;
+  font-size: 0.875rem;
+  color: $color-text-light;
+  margin-bottom: $spacing-unit;
+  text-align: left;
+}
+
+.c-table__cell {
+  font-size: 1rem;
+}
+
+@include tablet {
+  .c-table__row {
+    flex-direction: row;
+  }
+
+  .c-table__header {
+    width: 200px;
+    flex-shrink: 0;
+    margin-bottom: 0;
+    padding-right: $spacing-unit * 2;
+  }
+}
+`);
+    // Element
+    writeFile(s('element/_e-heading.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.e-heading {
+  font-size: 1.5rem;
+  font-weight: bold;
+  padding-bottom: $spacing-unit * 2;
+  border-bottom: 3px solid $color-primary;
+  display: inline-block;
+}
+
+@include tablet {
+  .e-heading {
+    font-size: 1.75rem;
+  }
+}
+`);
+    // Project
+    writeFile(s('project/_p-hero.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.p-hero {
+  background-color: $color-bg-light;
+  padding: $spacing-unit * 6 $spacing-unit * 2;
+  text-align: center;
+}
+
+.p-hero__inner {
+  max-width: $max-width;
+  margin: 0 auto;
+}
+
+.p-hero__title {
+  font-size: 1.75rem;
+  font-weight: bold;
+  margin-bottom: $spacing-unit * 2;
+}
+
+.p-hero__lead {
+  font-size: 1rem;
+  color: $color-text-light;
+  line-height: 1.8;
+}
+
+@include tablet {
+  .p-hero {
+    padding: $spacing-unit * 10 $spacing-unit * 4;
+  }
+
+  .p-hero__title {
+    font-size: 2.25rem;
+  }
+
+  .p-hero__lead {
+    font-size: 1.125rem;
+  }
+}
+`);
+    writeFile(s('project/_p-news-list.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.p-news-list {
+  padding: $spacing-unit * 6 $spacing-unit * 2;
+}
+
+.p-news-list__inner {
+  max-width: $max-width;
+  margin: 0 auto;
+}
+
+.p-news-list__items {
+  display: grid;
+  gap: $spacing-unit * 3;
+  margin-top: $spacing-unit * 4;
+}
+
+.p-news-list__item {
+  display: block;
+}
+
+.p-news-list__more {
+  margin-top: $spacing-unit * 4;
+  text-align: center;
+}
+
+@include tablet {
+  .p-news-list {
+    padding: $spacing-unit * 8 $spacing-unit * 4;
+  }
+
+  .p-news-list__items {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@include desktop {
+  .p-news-list__items {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+`);
+    writeFile(s('project/_p-article.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.p-article {
+  padding: $spacing-unit * 4 $spacing-unit * 2;
+}
+
+.p-article__inner {
+  max-width: 780px;
+  margin: 0 auto;
+}
+
+.p-article__header {
+  margin-bottom: $spacing-unit * 4;
+}
+
+.p-article__date {
+  display: block;
+  font-size: 0.875rem;
+  color: $color-text-light;
+  margin-bottom: $spacing-unit;
+}
+
+.p-article__title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1.4;
+}
+
+.p-article__eyecatch {
+  margin-bottom: $spacing-unit * 4;
+}
+
+.p-article__eyecatch__image {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.p-article__body {
+  font-size: 1rem;
+  line-height: 1.8;
+}
+
+.p-article__body h2 {
+  font-size: 1.375rem;
+  font-weight: bold;
+  margin-top: $spacing-unit * 5;
+  margin-bottom: $spacing-unit * 2;
+  padding-bottom: $spacing-unit;
+  border-bottom: 2px solid $color-border;
+}
+
+.p-article__body h3 {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin-top: $spacing-unit * 4;
+  margin-bottom: $spacing-unit * 2;
+}
+
+.p-article__body p {
+  margin-bottom: $spacing-unit * 2;
+}
+
+.p-article__body ul,
+.p-article__body ol {
+  margin-bottom: $spacing-unit * 2;
+  padding-left: $spacing-unit * 3;
+  list-style: disc;
+}
+
+.p-article__body ol {
+  list-style: decimal;
+}
+
+.p-article__footer {
+  margin-top: $spacing-unit * 6;
+  padding-top: $spacing-unit * 4;
+  border-top: 1px solid $color-border;
+}
+
+@include tablet {
+  .p-article {
+    padding: $spacing-unit * 6 $spacing-unit * 4;
+  }
+
+  .p-article__title {
+    font-size: 2rem;
+  }
+}
+`);
+    writeFile(s('project/_p-about.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.p-about {
+  padding: $spacing-unit * 6 $spacing-unit * 2;
+}
+
+.p-about__inner {
+  max-width: $max-width;
+  margin: 0 auto;
+}
+
+.p-about__content {
+  margin-top: $spacing-unit * 4;
+  line-height: 1.8;
+}
+
+.p-about__content p {
+  margin-bottom: $spacing-unit * 2;
+}
+
+.p-about__table {
+  margin-top: $spacing-unit * 6;
+}
+
+@include tablet {
+  .p-about {
+    padding: $spacing-unit * 8 $spacing-unit * 4;
+  }
+}
+`);
+    writeFile(s('project/_p-contact.scss'), `@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.p-contact {
+  padding: $spacing-unit * 6 $spacing-unit * 2;
+}
+
+.p-contact__inner {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.p-contact__lead {
+  margin-top: $spacing-unit * 2;
+  color: $color-text-light;
+}
+
+.p-contact__form {
+  margin-top: $spacing-unit * 4;
+}
+
+.p-contact__field {
+  margin-bottom: $spacing-unit * 3;
+}
+
+.p-contact__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: bold;
+  margin-bottom: $spacing-unit;
+}
+
+.p-contact__input {
+  display: block;
+  width: 100%;
+  padding: $spacing-unit * 1.5;
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+.p-contact__input:focus {
+  outline: none;
+  border-color: $color-primary;
+  box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+}
+
+.p-contact__textarea {
+  display: block;
+  width: 100%;
+  padding: $spacing-unit * 1.5;
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  font-size: 1rem;
+  resize: vertical;
+}
+
+.p-contact__textarea:focus {
+  outline: none;
+  border-color: $color-primary;
+  box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+}
+
+.p-contact__actions {
+  margin-top: $spacing-unit * 4;
+  text-align: center;
+}
+
+@include tablet {
+  .p-contact {
+    padding: $spacing-unit * 8 $spacing-unit * 4;
+  }
+}
+`);
+}
+// ========== TypeScript ==========
+function generateTypeScript(projectDir) {
+    const ts = (...p) => path.join(projectDir, 'frelio-data/site/templates/assets/ts', ...p);
+    writeFile(ts('index.ts'), `import { initMobileNav } from './features/mobile-nav'
+import { initSmoothScroll } from './features/smooth-scroll'
+
+document.addEventListener('DOMContentLoaded', () => {
+  initMobileNav()
+  initSmoothScroll()
+})
+`);
+    writeFile(ts('features/mobile-nav.ts'), `export function initMobileNav(): void {
+  const toggle = document.querySelector<HTMLButtonElement>('.c-nav__toggle')
+  const list = document.querySelector<HTMLUListElement>('.c-nav__list')
+
+  if (!toggle || !list) return
+
+  toggle.addEventListener('click', () => {
+    const isOpen = list.classList.contains('c-nav__list--open')
+    list.classList.toggle('c-nav__list--open', !isOpen)
+    toggle.setAttribute('aria-expanded', String(!isOpen))
+  })
+
+  document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement
+    if (!target.closest('.c-nav')) {
+      list.classList.remove('c-nav__list--open')
+      toggle.setAttribute('aria-expanded', 'false')
+    }
+  })
+}
+`);
+    writeFile(ts('features/smooth-scroll.ts'), `export function initSmoothScroll(): void {
+  document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement
+    const anchor = target.closest<HTMLAnchorElement>('a[href^="#"]')
+
+    if (!anchor) return
+
+    const id = anchor.getAttribute('href')
+    if (!id || id === '#') return
+
+    const element = document.querySelector(id)
+    if (!element) return
+
+    e.preventDefault()
+    element.scrollIntoView({ behavior: 'smooth' })
+  })
+}
+`);
+}
+// ========== CLAUDE.md ==========
+function generateClaudeMd(projectDir) {
+    writeFile(path.join(projectDir, 'CLAUDE.md'), `# CLAUDE.md
+
+Frelio（ヘッドレス CMS）で構築されたサイトリポジトリ。
+お知らせブログ付きのシンプルなコーポレートサイト。
+
+## プロジェクト構成
+
+- \`admin/\` — CMS 管理画面（ビルド済み、\`config.json\` で設定）
+- \`public/\` — 公開サイトルート（SSG 出力先）
+- \`functions/\` — Cloudflare Pages Functions
+  - \`api/auth/\` — OAuth 認証
+  - \`api/storage/\` — CMS ファイルアップロード API
+  - \`storage/[[path]].ts\` — R2 ファイル配信（/storage/*）
+- \`frelio-data/\` — CMS データ（コンテンツタイプ、コンテンツ、テンプレート、レシピ）
+  - \`site/templates/assets/scss/\` — SCSS ソース（FLOCSS 亜種）
+  - \`site/templates/assets/ts/\` — TypeScript ソース
+- \`public/images/\` — 静的ファイル（画像等、git 追跡対象）
+
+## よく使うコマンド
+
+\`\`\`bash
+npm run dev            # Vite dev server（テンプレートプレビュー）
+npm run build          # SCSS/TS ビルド
+npx @frelio/cli update # CMS Admin バンドル更新
+npx @frelio/cli add-staging  # カスタムステージング追加
+\`\`\`
+
+## CSS 記法ルール（FLOCSS 亜種・厳格）
+
+- **プレフィックス**: \`l-\`（layout）、\`c-\`（component）、\`p-\`（project）、\`e-\`（element）のみ
+- **1 class ルール**: HTML の class 属性には必ず 1 クラスのみ
+- **Utility は絶対使用禁止**
+- **SCSS の \`&\` でクラス名を接続することは禁止**（grep で追跡可能を維持）
+- **@extend**: 同ファイル内でのみ許可。\`%placeholder\` または実体クラスに \`--variant\` サフィックス
+- **子要素**: \`__\` で繋げる（深さ制限なし）
+- **バリアント**: \`--\` サフィックス（数に制限なし）
+- **メディアクエリ**: \`@mixin\` で定義し、1 ファイルに各 mixin を 1 回のみ \`@include\`
+
+### 例
+
+\`\`\`scss
+%c-section__inner__item {} // ベースデザイン
+.c-section__inner__item--red { @extend %c-section__inner__item; color: red; }
+\`\`\`
+
+## TypeScript ルール
+
+- \`frelio-data/site/templates/assets/ts/index.ts\` はオーケストレーション専用（import + init 呼び出しのみ）
+- 各機能は \`frelio-data/site/templates/assets/ts/features/\` にファイル分離
+
+## テンプレート規約
+
+- テンプレートエンジン: gentl（\`data-gen-*\` 属性ベース）
+- テンプレートは valid HTML（そのままブラウザで開ける）
+- 共通パーツ: \`_parts/*.htm\`（head, header, footer）
+- ページテンプレート: \`*.html\`
+
+## Cloudflare Pages 構成
+
+- \`_redirects\`: \`/admin/*\` → SPA、\`/*\` → \`/public/:splat\`
+- \`_routes.json\`: \`/api/*\`, \`/storage/*\` → Functions
+- \`wrangler.toml\`: R2 バケットバインディング
+
+## 型パッケージ活用方針
+
+JSON ファイルの読み書きでは、以下の型・ガード・スキーマを使用する。
+
+| ファイル | 型 | パッケージ |
+|---|---|---|
+| \`content_types/*.json\` | \`ContentType\` / \`validateContentType\` | \`@c-time/frelio-types\` |
+| \`*.ui.json\` | \`ContentTypeUi\` / \`validateContentTypeUi\` | 同上 |
+| \`*.views.json\` | \`ContentTypeViews\` / \`validateContentTypeViews\` | 同上 |
+| \`build-data-recipe.json\` | \`FrelioBuildDataRecipe\` / \`validateSiteRecipe\` | 同上 |
+| \`data-json/*.json\` | \`FrelioDataJson\` / \`isFrelioDataJson\` | \`@c-time/frelio-data-json\` |
+| \`contents/*/*.json\` | \`Content\` / \`isContent\` | \`@c-time/frelio-types\` |
+`);
+}
+// ========== Helpers ==========
+function json(obj) {
+    return JSON.stringify(obj, null, 2);
+}