fix: 図解ライブラリ機能を撤去
Made-with: Cursor
This commit is contained in:
parent
a14134318f
commit
9b3c36db48
@ -77,24 +77,6 @@ Step 3 で収集した情報をもとに、図解HTMLを生成する。検索結
|
||||
- `<!-- CONTENT_START -->` 〜 `<!-- CONTENT_END -->` → Step 4で生成したコンテンツ
|
||||
5. ファイルを保存する（ブラウザで開くのは Step 6 のデプロイ後に行う。ローカルでは開かない）
|
||||
|
||||
### Step 5.5: 図解ライブラリの更新
|
||||
|
||||
`output/` 内の全HTMLファイル（`index.html` 以外）をスキャンし、一覧ページ `output/index.html` を生成・更新する。
|
||||
|
||||
1. `output/` 内の `.html` ファイル一覧を取得する（`index.html` は除外）
|
||||
2. 各ファイルの `<title>` タグからタイトルを、`<meta property="og:description">` から説明文を読み取る
|
||||
3. `references/library-template.html` を読み込む
|
||||
4. テンプレート内の `<!-- LIBRARY_ITEMS -->` を、以下の形式のカードリストで置換する:
|
||||
|
||||
```html
|
||||
<a href="{ファイル名}" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
|
||||
<h2 class="font-bold text-slate-900 mb-1">{タイトル}</h2>
|
||||
<p class="text-sm text-ads-muted">{説明文}</p>
|
||||
</a>
|
||||
```
|
||||
|
||||
5. 結果を `output/index.html` として保存する
|
||||
|
||||
### Step 6: 公開
|
||||
|
||||
ファイル保存後、公開する前にまず Node.js の有無を確認する。
|
||||
@ -111,7 +93,7 @@ node --version
|
||||
|
||||
以下のスクリプトを**実行する**（中身を読む必要はない）。
|
||||
|
||||
**重要: 第1引数には図解本体のファイル（`output/{スラッグ}.html`）を指定する。`output/index.html`（ライブラリ一覧）ではない。**
|
||||
**重要: 第1引数には図解本体のファイル（`output/{スラッグ}.html`）を指定する。`output/index.html`（サンプル一覧）ではない。**
|
||||
|
||||
**macOS / Git Bash（Windows）の場合:**
|
||||
|
||||
@ -184,7 +166,6 @@ https://diagram-スラッグ.surge.sh
|
||||
|
||||
ファイルの保存先:
|
||||
output/{スラッグ}.html（ブラウザにドラッグ＆ドロップすると表示できます）
|
||||
図解ライブラリ: output/index.html
|
||||
|
||||
図解の主なポイント:
|
||||
- （主要トピックを3〜5個）
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||
<meta name="googlebot" content="noindex, nofollow">
|
||||
<title>図解ライブラリ</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
ads: {
|
||||
bg: '#FFFFFF',
|
||||
surface: '#F8FAFC',
|
||||
hover: '#F1F5F9',
|
||||
border: '#E2E8F0',
|
||||
accent: '#3B82F6',
|
||||
'accent-light': '#2563EB',
|
||||
text: '#1E293B',
|
||||
muted: '#64748B',
|
||||
dim: '#94A3B8',
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
|
||||
<main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-2xl md:text-3xl font-black text-slate-900 tracking-tight mb-3">図解ライブラリ</h1>
|
||||
<p class="text-ads-muted">チャット欄で「○○を図解して」と依頼すると、ここに追加されます</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<!-- LIBRARY_ITEMS -->
|
||||
</div>
|
||||
|
||||
<div class="mt-16 pt-8 border-t border-ads-border/30">
|
||||
<p class="text-sm font-bold text-slate-900 mb-4">こんなことを聞いてみよう</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-ads-muted">
|
||||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「API とは何か、図解して」</div>
|
||||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「Git の rebase と merge の違いを図解して」</div>
|
||||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「クラウドとは何か、図解して」</div>
|
||||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「KPI と KGI の違いを図解して」</div>
|
||||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「HTML と CSS の関係を図解して」</div>
|
||||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「UI と UX の違いを図解して」</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
|
||||
<p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user