From 37a5f72d583133fd3b64250e9ef8af63107d9d75 Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 01:46:18 +0900 Subject: [PATCH 01/24] feat: update main design with new hero section and create form --- apps/web/src/routes/+page.svelte | 1017 +++++++++++++++++++++++++----- 1 file changed, 858 insertions(+), 159 deletions(-) diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte index aa72583..189e1be 100644 --- a/apps/web/src/routes/+page.svelte +++ b/apps/web/src/routes/+page.svelte @@ -17,6 +17,7 @@ let activeTab = $state<"create" | "add">("create"); let url = $state(""); let urlError = $state(""); + let showCreateForm = $state(false); const themes = getAvailableThemes(); @@ -24,9 +25,19 @@ setTimeout(() => { recentItineraries = auth.getRecentItineraries(); showRecent = true; + if (recentItineraries.length > 0) { + showCreateForm = true; + } }, 300); }); + function scrollToCreate() { + showCreateForm = true; + setTimeout(() => { + document.getElementById("create")?.scrollIntoView({ behavior: "smooth" }); + }, 100); + } + async function createItinerary() { titleError = ""; @@ -139,195 +150,883 @@ -
-
-

- ✈️ たびたび -

-

旅のしおりを、サクッと作成

- -
-
- - + + 機能を見る ↓ +
- - - {#if activeTab === "create"} -
- - - {#if titleError} -

{titleError}

- {/if} +
+ +
+
+
+ + +
- -
- - +
+
富士山旅行 2025
+
+
+ 09:00 + 出発 +
+
+ 12:00 + 河口湖ランチ +
+
+ 14:00 + 絶景スポット +
+
+ 17:00 + 温泉 +
+
+
+
+ -
- - + +
+

できること

+
+
+
+ + + + +
+

スマホ最適化

+

どこでも旅程を確認。アプリ不要

+
+
+
+ + + + +
+

URL共有

+

リンク1つで仲間と共有

+
+
+
+ + + + + + + +
+

テーマ選択

+

シーンに合ったデザイン

+
+
+
+ + +
+

軽量・高速

+

表示まで1秒。ストレスゼロ

+
+
+
- - -

- URLが発行されます。仲間と共有しよう！ -

{:else} - -
- - - {#if urlError} -

{urlError}

- {/if} -
+
+
+ + +
- + {#if activeTab === "create"} +
+
+ + + {#if titleError} +

{titleError}

+ {/if} +
-

- 共有されたしおりのURLを貼り付けてください -

- {/if} -
+
+ + +
- - {#if showRecent && recentItineraries.length > 0} -
-

📚 最近の項目

-
- {#each recentItineraries as item} -
- + +
- {/each} + {:else} +
+
+ + + {#if urlError} +

{urlError}

+ {/if} +
+ + +
+ {/if}
+ + {#if showRecent && recentItineraries.length > 0} +
+

最近のしおり

+
+ {#each recentItineraries as item} +
+ + +
+ {/each} +
+
+ {/if} + {/if} +
+ + + +
+
From bd9a0b1c83caf46b6f77d01e116f9e8adc4b09db Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 01:56:13 +0900 Subject: [PATCH 02/24] feat: update hero section design and enhance create form functionality --- apps/web/src/routes/+page.svelte | 311 ++++++++++++++++++++++--------- 1 file changed, 227 insertions(+), 84 deletions(-) diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte index 189e1be..4db4260 100644 --- a/apps/web/src/routes/+page.svelte +++ b/apps/web/src/routes/+page.svelte @@ -17,7 +17,7 @@ let activeTab = $state<"create" | "add">("create"); let url = $state(""); let urlError = $state(""); - let showCreateForm = $state(false); + let showCreateForm = $state(true); const themes = getAvailableThemes(); @@ -25,9 +25,6 @@ setTimeout(() => { recentItineraries = auth.getRecentItineraries(); showRecent = true; - if (recentItineraries.length > 0) { - showCreateForm = true; - } }, 300); }); @@ -38,6 +35,10 @@ }, 100); } + function scrollToFeatures() { + document.getElementById("features")?.scrollIntoView({ behavior: "smooth" }); + } + async function createItinerary() { titleError = ""; @@ -157,7 +158,9 @@

- + たびたび @@ -166,20 +169,17 @@

友達や家族との旅行計画を、シンプルに美しくまとめよう

- +
- - +

- +
@@ -218,9 +218,16 @@
- - - + + +

スマホ最適化

@@ -228,9 +235,20 @@
- - - + + +

URL共有

@@ -238,12 +256,21 @@
- - - - - - + + + + + +

テーマ選択

@@ -251,8 +278,15 @@
- - + +

軽量・高速

@@ -262,18 +296,19 @@ -
0}> +
0} + >
{#if !showCreateForm && recentItineraries.length === 0} - {:else} -
+
{:else}
+

共有されたしおりのURLを貼り付け

-

シンプルに、便利に

-
-
- - - - -
-

スマホ最適化

-

どこでも旅程を確認。アプリ不要

-
-
-
- - - - -
-

URL共有

-

リンク1つで仲間と共有

-
-
-
- - - - - - - -
-

テーマ選択

-

シーンに合ったデザイン

-
-
-
- - - -
-

軽量・高速

-

表示まで1秒。ストレスゼロ

-
+ + {#snippet icon()} + + {/snippet} + + + {#snippet icon()} + + {/snippet} + + + {#snippet icon()} + + {/snippet} + + + {#snippet icon()} + + {/snippet} +
-
-
-
- - -
- - {#if activeTab === "create"} -
-
- - - {#if titleError} -

{titleError}

- {/if} -
- -
- - -
+ -
- 詳細設定 -
- - -

- 設定するとパスワードなしでは編集できません -

-
-
- - -
- {:else} -
-

共有されたしおりのURLを貼り付け

-
- - - {#if urlError} -

{urlError}

- {/if} -
- - -
- {/if} -
- - {#if showRecent && recentItineraries.length > 0} -
-

最近のしおり

-
- {#each recentItineraries as item} -
- - -
- {/each} -
-
+ {#if showRecent} + {/if}
- - +
- - {#if showScrollButton} - - {/if} +
diff --git a/apps/web/src/routes/home/CreateForm.svelte b/apps/web/src/routes/home/CreateForm.svelte new file mode 100644 index 0000000..0748e80 --- /dev/null +++ b/apps/web/src/routes/home/CreateForm.svelte @@ -0,0 +1,356 @@ + + +
+
+ + +
+ + {#if activeTab === "create"} +
+
+ + + {#if titleError} +

{titleError}

+ {/if} +
+ +
+ + +
+ +
+ +
+ + {#if usePassword} +
+ + +
+ {/if} + + +
+ {:else} +
+

共有されたしおりのURLを貼り付け

+
+ + + {#if urlError} +

{urlError}

+ {/if} +
+ + +
+ {/if} +
+ + diff --git a/apps/web/src/routes/home/FeatureCard.svelte b/apps/web/src/routes/home/FeatureCard.svelte new file mode 100644 index 0000000..73ad579 --- /dev/null +++ b/apps/web/src/routes/home/FeatureCard.svelte @@ -0,0 +1,69 @@ + + +
+
+ {@render icon()} +
+

{title}

+

{description}

+
+ + diff --git a/apps/web/src/routes/home/Footer.svelte b/apps/web/src/routes/home/Footer.svelte new file mode 100644 index 0000000..400dbb3 --- /dev/null +++ b/apps/web/src/routes/home/Footer.svelte @@ -0,0 +1,74 @@ + + + + + diff --git a/apps/web/src/routes/home/PreviewCarousel.svelte b/apps/web/src/routes/home/PreviewCarousel.svelte new file mode 100644 index 0000000..491b3cf --- /dev/null +++ b/apps/web/src/routes/home/PreviewCarousel.svelte @@ -0,0 +1,206 @@ + + +
+
+ {#each previews as preview, i} +
+
+ + + +
+
+
{preview.title}
+
+ {#each preview.steps as step, j} +
+ {step.time} + {step.icon} + {step.label} +
+ {/each} +
+
+
+ {/each} +
+
+ {#each previews as _, i} + + {/each} +
+
+ + diff --git a/apps/web/src/routes/home/RecentItineraries.svelte b/apps/web/src/routes/home/RecentItineraries.svelte new file mode 100644 index 0000000..c92db4f --- /dev/null +++ b/apps/web/src/routes/home/RecentItineraries.svelte @@ -0,0 +1,120 @@ + + +{#if items.length > 0} +
+

最近のしおり

+
+ {#each items as item} +
+ + +
+ {/each} +
+
+{/if} + + diff --git a/apps/web/src/routes/home/ScrollTopButton.svelte b/apps/web/src/routes/home/ScrollTopButton.svelte new file mode 100644 index 0000000..2400cf3 --- /dev/null +++ b/apps/web/src/routes/home/ScrollTopButton.svelte @@ -0,0 +1,62 @@ + + +{#if visible} + +{/if} + + diff --git a/apps/web/src/routes/home/icons/IconAirplane.svelte b/apps/web/src/routes/home/icons/IconAirplane.svelte new file mode 100644 index 0000000..1a475d9 --- /dev/null +++ b/apps/web/src/routes/home/icons/IconAirplane.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/apps/web/src/routes/home/icons/IconBolt.svelte b/apps/web/src/routes/home/icons/IconBolt.svelte new file mode 100644 index 0000000..2011f59 --- /dev/null +++ b/apps/web/src/routes/home/icons/IconBolt.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/apps/web/src/routes/home/icons/IconBook.svelte b/apps/web/src/routes/home/icons/IconBook.svelte new file mode 100644 index 0000000..ae976a1 --- /dev/null +++ b/apps/web/src/routes/home/icons/IconBook.svelte @@ -0,0 +1,19 @@ + + + + + + diff --git a/apps/web/src/routes/home/icons/IconGitHub.svelte b/apps/web/src/routes/home/icons/IconGitHub.svelte new file mode 100644 index 0000000..5eab360 --- /dev/null +++ b/apps/web/src/routes/home/icons/IconGitHub.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/apps/web/src/routes/home/icons/IconLink.svelte b/apps/web/src/routes/home/icons/IconLink.svelte new file mode 100644 index 0000000..89cfe48 --- /dev/null +++ b/apps/web/src/routes/home/icons/IconLink.svelte @@ -0,0 +1,19 @@ + + + + + + diff --git a/apps/web/src/routes/home/icons/IconPalette.svelte b/apps/web/src/routes/home/icons/IconPalette.svelte new file mode 100644 index 0000000..a3543ad --- /dev/null +++ b/apps/web/src/routes/home/icons/IconPalette.svelte @@ -0,0 +1,24 @@ + + + + + + + + + diff --git a/apps/web/src/routes/home/icons/IconPhone.svelte b/apps/web/src/routes/home/icons/IconPhone.svelte new file mode 100644 index 0000000..df4c69e --- /dev/null +++ b/apps/web/src/routes/home/icons/IconPhone.svelte @@ -0,0 +1,19 @@ + + + + + + diff --git a/apps/web/src/routes/home/icons/index.ts b/apps/web/src/routes/home/icons/index.ts new file mode 100644 index 0000000..7745e6e --- /dev/null +++ b/apps/web/src/routes/home/icons/index.ts @@ -0,0 +1,7 @@ +export { default as IconAirplane } from "./IconAirplane.svelte"; +export { default as IconPhone } from "./IconPhone.svelte"; +export { default as IconLink } from "./IconLink.svelte"; +export { default as IconPalette } from "./IconPalette.svelte"; +export { default as IconBolt } from "./IconBolt.svelte"; +export { default as IconBook } from "./IconBook.svelte"; +export { default as IconGitHub } from "./IconGitHub.svelte"; diff --git a/apps/web/src/routes/home/index.ts b/apps/web/src/routes/home/index.ts new file mode 100644 index 0000000..9c95c0e --- /dev/null +++ b/apps/web/src/routes/home/index.ts @@ -0,0 +1,8 @@ +export { default as PreviewCarousel } from "./PreviewCarousel.svelte"; +export { default as FeatureCard } from "./FeatureCard.svelte"; +export { default as CreateForm } from "./CreateForm.svelte"; +export { default as RecentItineraries } from "./RecentItineraries.svelte"; +export { default as Footer } from "./Footer.svelte"; +export { default as ScrollTopButton } from "./ScrollTopButton.svelte"; +export { previewItineraries } from "./previewData"; +export type { PreviewItinerary, PreviewStep } from "./previewData"; diff --git a/apps/web/src/routes/home/previewData.ts b/apps/web/src/routes/home/previewData.ts new file mode 100644 index 0000000..f9e24f1 --- /dev/null +++ b/apps/web/src/routes/home/previewData.ts @@ -0,0 +1,44 @@ +export interface PreviewStep { + time: string; + label: string; + icon: string; +} + +export interface PreviewItinerary { + title: string; + theme: string; + steps: PreviewStep[]; +} + +export const previewItineraries: PreviewItinerary[] = [ + { + title: "沖縄旅行 2025", + theme: "tropical", + steps: [ + { time: "10:00", label: "那覇空港到着", icon: "✈️" }, + { time: "12:00", label: "国際通りランチ", icon: "🍜" }, + { time: "15:00", label: "美ら海水族館", icon: "🐠" }, + { time: "18:00", label: "サンセットビーチ", icon: "🌅" }, + ], + }, + { + title: "京都日帰り", + theme: "autumn", + steps: [ + { time: "08:00", label: "京都駅集合", icon: "🚃" }, + { time: "09:30", label: "清水寺", icon: "⛩️" }, + { time: "12:00", label: "祇園でランチ", icon: "🍱" }, + { time: "14:00", label: "金閣寺", icon: "✨" }, + ], + }, + { + title: "北海道グルメ旅", + theme: "winter", + steps: [ + { time: "11:00", label: "新千歳空港", icon: "❄️" }, + { time: "13:00", label: "味噌ラーメン", icon: "🍜" }, + { time: "15:00", label: "白い恋人パーク", icon: "🍪" }, + { time: "18:00", label: "ジンギスカン", icon: "🥩" }, + ], + }, +]; From be14c9492d053a9e3d7ac3aa26decd809239982e Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 02:46:18 +0900 Subject: [PATCH 06/24] =?UTF-8?q?feat:=20update=20ScrollTopButton=20label?= =?UTF-8?q?=20to=20'=E3=83=88=E3=83=83=E3=83=97=E3=81=B8=E6=88=BB=E3=82=8B?= =?UTF-8?q?'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/routes/home/ScrollTopButton.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/routes/home/ScrollTopButton.svelte b/apps/web/src/routes/home/ScrollTopButton.svelte index 2400cf3..d398f28 100644 --- a/apps/web/src/routes/home/ScrollTopButton.svelte +++ b/apps/web/src/routes/home/ScrollTopButton.svelte @@ -19,7 +19,7 @@ > - しおりを作成 + トップへ戻る {/if} From c0a8a45a58f5ecf99217ceb128f8d9e9a94da592 Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 03:11:16 +0900 Subject: [PATCH 07/24] feat: enhance PreviewCarousel and preview data structure with new layout options and theme colors --- .../src/routes/home/PreviewCarousel.svelte | 363 +++++++++++++++--- apps/web/src/routes/home/index.ts | 2 +- apps/web/src/routes/home/previewData.ts | 86 ++++- 3 files changed, 376 insertions(+), 75 deletions(-) diff --git a/apps/web/src/routes/home/PreviewCarousel.svelte b/apps/web/src/routes/home/PreviewCarousel.svelte index 491b3cf..85602bc 100644 --- a/apps/web/src/routes/home/PreviewCarousel.svelte +++ b/apps/web/src/routes/home/PreviewCarousel.svelte @@ -5,10 +5,24 @@ icon: string; } + interface ThemeColors { + primary: string; + secondary: string; + background: string; + text: string; + accent: string; + border?: string; + } + interface PreviewItinerary { title: string; - theme: string; + themeId: string; + themeName: string; + description: string; + layout: "list" | "timeline" | "card"; + colors: ThemeColors; steps: Step[]; + features: string[]; } interface Props { @@ -24,28 +38,80 @@
{#each previews as preview, i}
-
- - - +
+ {preview.themeName} + {preview.description}
+
-
{preview.title}
-
- {#each preview.steps as step, j} -
- {step.time} - {step.icon} - {step.label} + {#if preview.layout === "list"} +
+
{preview.title}
+
+
+ {#each preview.steps as step, j} +
+ {step.time} + {step.label} +
+ {/each} +
+
+ {:else if preview.layout === "timeline"} +
+
{preview.title}
+
+ {#each preview.steps as step, j} +
+
+
+
{step.time}
+
+ {step.icon} + {step.label} +
+
+ {/each}
- {/each} -
+
+ {:else} +
+
{preview.title}
+
+ {#each preview.steps as step, j} +
+
{step.time}
+
+ {step.icon} + {step.label} +
+
+ {/each} +
+
+ {/if} +
+ +
+ {#each preview.features.slice(0, 3) as feature} + {feature} + {/each} + {#if preview.features.length > 3} + +{preview.features.length - 3} + {/if}
{/each} @@ -65,7 +131,7 @@ .hero-visual { position: relative; width: 280px; - height: 320px; + height: 340px; } .preview-carousel { @@ -78,14 +144,17 @@ position: absolute; top: 0; left: 0; - background: white; - border-radius: 16px; + background: var(--bg, white); + border-radius: 12px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); width: 260px; opacity: 0; transform: translateX(40px) scale(0.9); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; + overflow: hidden; + display: flex; + flex-direction: column; } .preview-card.active { @@ -108,77 +177,261 @@ } .preview-header { - background: #f3f4f6; - padding: 0.6rem 0.75rem; - border-radius: 16px 16px 0 0; + padding: 0.5rem 0.75rem; display: flex; - gap: 0.4rem; + align-items: center; + justify-content: space-between; } - .preview-dot { - width: 10px; - height: 10px; - border-radius: 50%; + .preview-theme-name { + color: white; + font-size: 0.7rem; + font-weight: 700; } - .preview-dot.red { - background: #ef4444; + .preview-theme-desc { + color: rgba(255, 255, 255, 0.8); + font-size: 0.6rem; } - .preview-dot.yellow { - background: #eab308; + + .preview-content { + flex: 1; + padding: 0.75rem; + overflow: hidden; } - .preview-dot.green { - background: #22c55e; + + .preview-features { + padding: 0.5rem 0.75rem; + border-top: 1px solid var(--border); + display: flex; + gap: 0.35rem; + flex-wrap: wrap; } - .preview-content { - padding: 1rem; + .feature-tag { + font-size: 0.55rem; + padding: 0.15rem 0.4rem; + background: var(--primary); + color: white; + border-radius: 4px; + opacity: 0.9; } - .preview-title { - font-size: 1rem; - font-weight: 700; - color: #374151; - margin-bottom: 0.75rem; + .feature-more { + font-size: 0.55rem; + padding: 0.15rem 0.35rem; + background: var(--secondary); + color: white; + border-radius: 4px; + } + + /* Minimal - List Style */ + .minimal-preview { + font-family: -apple-system, BlinkMacSystemFont, sans-serif; + } + + .minimal-title { + font-size: 0.9rem; + font-weight: 600; + color: var(--text); + margin-bottom: 0.5rem; } - .preview-timeline { + .minimal-divider { + height: 1px; + background: var(--border); + margin-bottom: 0.6rem; + } + + .minimal-steps { display: flex; flex-direction: column; gap: 0.5rem; } - .preview-step { + .minimal-step { display: flex; align-items: center; - gap: 0.5rem; - padding: 0.4rem 0.6rem; - border-radius: 8px; - background: #f9fafb; + gap: 0.75rem; + padding: 0.35rem 0; + border-bottom: 1px solid var(--border); + } + + .minimal-step:last-child { + border-bottom: none; + } + + .minimal-time { + font-size: 0.65rem; + font-weight: 500; + color: var(--secondary); + min-width: 38px; + } + + .minimal-label { + font-size: 0.75rem; + color: var(--text); + font-weight: 500; + } + + /* Standard-Autumn - Timeline Style */ + .timeline-preview { + height: 100%; + } + + .timeline-header { font-size: 0.85rem; + font-weight: 700; + color: var(--text); + margin-bottom: 0.6rem; + padding-bottom: 0.4rem; + border-bottom: 2px solid var(--primary); } - .preview-step.active { - background: linear-gradient(135deg, #6b8cce20, #8b7dc920); - border-left: 3px solid #6b8cce; + .timeline-steps { + display: flex; + flex-direction: column; + gap: 0.3rem; + position: relative; + padding-left: 1rem; } - .preview-time { - font-size: 0.7rem; + .timeline-step { + display: flex; + align-items: flex-start; + gap: 0.5rem; + position: relative; + padding: 0.3rem 0; + } + + .timeline-dot { + position: absolute; + left: -1rem; + top: 50%; + transform: translateY(-50%); + width: 8px; + height: 8px; + background: var(--secondary); + border-radius: 50%; + border: 2px solid var(--bg); + z-index: 2; + } + + .timeline-step.active .timeline-dot { + background: var(--primary); + width: 10px; + height: 10px; + } + + .timeline-line { + position: absolute; + left: calc(-1rem + 3px); + top: 0; + bottom: 0; + width: 2px; + background: var(--border); + } + + .timeline-step:first-child .timeline-line { + top: 50%; + } + + .timeline-step:last-child .timeline-line { + bottom: 50%; + } + + .timeline-time { + font-size: 0.6rem; font-weight: 600; - color: #9ca3af; + color: var(--primary); + min-width: 32px; + } + + .timeline-content { + display: flex; + align-items: center; + gap: 0.35rem; + flex: 1; + } + + .timeline-icon { + font-size: 0.75rem; + } + + .timeline-label { + font-size: 0.7rem; + color: var(--text); + font-weight: 500; + } + + .timeline-step.active { + background: color-mix(in srgb, var(--primary) 10%, transparent); + border-radius: 6px; + margin: 0 -0.25rem; + padding: 0.3rem 0.25rem; + } + + /* AI Generated - Card Style */ + .card-preview { + height: 100%; + } + + .card-title { + font-size: 0.85rem; + font-weight: 700; + color: var(--text); + margin-bottom: 0.5rem; + display: flex; + align-items: center; + gap: 0.3rem; + } + + .card-steps { + display: flex; + flex-direction: column; + gap: 0.4rem; + } + + .card-step { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem; + background: white; + border-radius: 8px; + border: 1px solid var(--border); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + } + + .card-time-badge { + font-size: 0.55rem; + font-weight: 700; + color: white; + background: var(--primary); + padding: 0.2rem 0.4rem; + border-radius: 4px; min-width: 36px; + text-align: center; } - .preview-icon { - font-size: 0.9rem; + .card-content { + display: flex; + align-items: center; + gap: 0.35rem; + flex: 1; } - .preview-label { - color: #374151; + .card-icon { font-size: 0.8rem; } + .card-label { + font-size: 0.7rem; + color: var(--text); + font-weight: 500; + } + + /* Dots */ .preview-dots { position: absolute; bottom: -1.5rem; diff --git a/apps/web/src/routes/home/index.ts b/apps/web/src/routes/home/index.ts index 9c95c0e..e9afee9 100644 --- a/apps/web/src/routes/home/index.ts +++ b/apps/web/src/routes/home/index.ts @@ -5,4 +5,4 @@ export { default as RecentItineraries } from "./RecentItineraries.svelte"; export { default as Footer } from "./Footer.svelte"; export { default as ScrollTopButton } from "./ScrollTopButton.svelte"; export { previewItineraries } from "./previewData"; -export type { PreviewItinerary, PreviewStep } from "./previewData"; +export type { PreviewItinerary, PreviewStep, ThemeColors } from "./previewData"; diff --git a/apps/web/src/routes/home/previewData.ts b/apps/web/src/routes/home/previewData.ts index f9e24f1..ddc0e1f 100644 --- a/apps/web/src/routes/home/previewData.ts +++ b/apps/web/src/routes/home/previewData.ts @@ -4,41 +4,89 @@ export interface PreviewStep { icon: string; } +export interface ThemeColors { + primary: string; + secondary: string; + background: string; + text: string; + accent: string; + border?: string; +} + export interface PreviewItinerary { title: string; - theme: string; + themeId: string; + themeName: string; + description: string; + layout: "list" | "timeline" | "card"; + colors: ThemeColors; steps: PreviewStep[]; + features: string[]; } export const previewItineraries: PreviewItinerary[] = [ { - title: "沖縄旅行 2025", - theme: "tropical", + title: "週末おでかけ", + themeId: "minimal", + themeName: "ミニマル", + description: "シンプル・軽量", + layout: "list", + colors: { + primary: "#333333", + secondary: "#888888", + background: "#ffffff", + text: "#333333", + accent: "#333333", + border: "#eeeeee", + }, steps: [ - { time: "10:00", label: "那覇空港到着", icon: "✈️" }, - { time: "12:00", label: "国際通りランチ", icon: "🍜" }, - { time: "15:00", label: "美ら海水族館", icon: "🐠" }, - { time: "18:00", label: "サンセットビーチ", icon: "🌅" }, + { time: "10:00", label: "駅集合", icon: "" }, + { time: "11:30", label: "ランチ", icon: "" }, + { time: "14:00", label: "カフェ", icon: "" }, ], + features: ["タイムライン"], }, { - title: "京都日帰り", - theme: "autumn", + title: "京都紅葉旅行", + themeId: "standard-autumn", + themeName: "標準", + description: "カルーセル表示", + layout: "timeline", + colors: { + primary: "#a93529", + secondary: "#e6b422", + background: "#fcf9f2", + text: "#4a3b32", + accent: "#d4762c", + border: "#e8e0d0", + }, steps: [ - { time: "08:00", label: "京都駅集合", icon: "🚃" }, - { time: "09:30", label: "清水寺", icon: "⛩️" }, - { time: "12:00", label: "祇園でランチ", icon: "🍱" }, - { time: "14:00", label: "金閣寺", icon: "✨" }, + { time: "09:00", label: "清水寺", icon: "⛩️" }, + { time: "12:00", label: "祇園ランチ", icon: "🍱" }, + { time: "15:00", label: "金閣寺", icon: "✨" }, + { time: "18:00", label: "夕食", icon: "🍜" }, ], + features: ["タイムライン", "secret機能", "walica連携"], }, { - title: "北海道グルメ旅", - theme: "winter", + title: "沖縄旅行", + themeId: "ai-generated", + themeName: "AI Generated", + description: "フル機能", + layout: "card", + colors: { + primary: "#0ea5e9", + secondary: "#64748b", + background: "#f8fafc", + text: "#0f172a", + accent: "#f59e0b", + border: "#e2e8f0", + }, steps: [ - { time: "11:00", label: "新千歳空港", icon: "❄️" }, - { time: "13:00", label: "味噌ラーメン", icon: "🍜" }, - { time: "15:00", label: "白い恋人パーク", icon: "🍪" }, - { time: "18:00", label: "ジンギスカン", icon: "🥩" }, + { time: "10:00", label: "那覇空港", icon: "✈️" }, + { time: "13:00", label: "ビーチ", icon: "🏖️" }, + { time: "18:00", label: "ディナー", icon: "🍽️" }, ], + features: ["タイムライン", "チェックリスト", "予算", "メモ", "マップ"], }, ]; From db59f08fcb609f8f1123afa360c02bdd7264af5f Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 03:11:30 +0900 Subject: [PATCH 08/24] feat: add site weight measurement tool and usage instructions --- pnpm-lock.yaml | 190 ++++++++++++++++ tools/README.md | 8 + tools/measure-site-weight.js | 424 +++++++++++++++++++++++++++++++++++ 3 files changed, 622 insertions(+) create mode 100644 tools/README.md create mode 100644 tools/measure-site-weight.js diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 308d5ea..f3ce746 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,18 @@ importers: .: devDependencies: + cheerio: + specifier: ^1.0.0-rc.12 + version: 1.1.2 husky: specifier: ^9.1.7 version: 9.1.7 + node-fetch: + specifier: ^2.6.12 + version: 2.7.0 + p-limit: + specifier: ^4.0.0 + version: 4.0.0 turbo: specifier: ^2.3.3 version: 2.6.1 @@ -1252,6 +1261,9 @@ packages: blake3-wasm@2.1.5: resolution: {integrity: sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g==} + boolbase@1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + brace-expansion@2.0.2: resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==} @@ -1283,6 +1295,13 @@ packages: resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==} engines: {node: '>= 16'} + cheerio-select@2.1.0: + resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==} + + cheerio@1.1.2: + resolution: {integrity: sha512-IkxPpb5rS/d1IiLbHMgfPuS0FgiWTtFIm/Nj+2woXDLTZ7fOT2eqzgYbdMlLweqlHbsZjxEChoVK+7iph7jyQg==} + engines: {node: '>=20.18.1'} + chokidar@3.6.0: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} @@ -1328,10 +1347,17 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} + css-select@5.2.2: + resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==} + css-tree@3.1.0: resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + css-what@6.2.2: + resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==} + engines: {node: '>= 6'} + css.escape@1.5.1: resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} @@ -1394,6 +1420,19 @@ packages: dom-accessibility-api@0.6.3: resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} + dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + + domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + + domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + + domutils@3.2.2: + resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==} + eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} @@ -1406,6 +1445,13 @@ packages: emoji-regex@9.2.2: resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} + encoding-sniffer@0.2.1: + resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==} + + entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + entities@6.0.1: resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} engines: {node: '>=0.12'} @@ -1517,6 +1563,9 @@ packages: resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} engines: {node: '>=18'} + htmlparser2@10.0.0: + resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==} + http-proxy-agent@7.0.2: resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==} engines: {node: '>= 14'} @@ -1758,6 +1807,15 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + node-fetch@2.7.0: + resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==} + engines: {node: 4.x || >=6.0.0} + peerDependencies: + encoding: ^0.1.0 + peerDependenciesMeta: + encoding: + optional: true + node-releases@2.0.21: resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==} @@ -1769,6 +1827,9 @@ packages: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} engines: {node: '>=0.10.0'} + nth-check@2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -1780,9 +1841,22 @@ packages: ohash@2.0.11: resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==} + p-limit@4.0.0: + resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + parse5-htmlparser2-tree-adapter@7.1.0: + resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==} + + parse5-parser-stream@7.1.2: + resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==} + + parse5@7.3.0: + resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==} + parse5@8.0.0: resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==} @@ -2091,6 +2165,9 @@ packages: resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==} engines: {node: '>=16'} + tr46@0.0.3: + resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + tr46@6.0.0: resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==} engines: {node: '>=20'} @@ -2247,6 +2324,9 @@ packages: resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} engines: {node: '>=18'} + webidl-conversions@3.0.1: + resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + webidl-conversions@8.0.0: resolution: {integrity: sha512-n4W4YFyz5JzOfQeA8oN7dUYpR+MBP3PIUsn2jLjWXwK5ASUzt0Jc/A5sAUZoCYFJRGF0FBKJ+1JjN43rNdsQzA==} engines: {node: '>=20'} @@ -2263,6 +2343,9 @@ packages: resolution: {integrity: sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==} engines: {node: '>=20'} + whatwg-url@5.0.0: + resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} + which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} @@ -2361,6 +2444,10 @@ packages: xmlchars@2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} + yocto-queue@1.2.2: + resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==} + engines: {node: '>=12.20'} + youch-core@0.3.3: resolution: {integrity: sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==} @@ -3184,6 +3271,8 @@ snapshots: blake3-wasm@2.1.5: {} + boolbase@1.0.0: {} + brace-expansion@2.0.2: dependencies: balanced-match: 1.0.2 @@ -3216,6 +3305,29 @@ snapshots: check-error@2.1.1: {} + cheerio-select@2.1.0: + dependencies: + boolbase: 1.0.0 + css-select: 5.2.2 + css-what: 6.2.2 + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.2.2 + + cheerio@1.1.2: + dependencies: + cheerio-select: 2.1.0 + dom-serializer: 2.0.0 + domhandler: 5.0.3 + domutils: 3.2.2 + encoding-sniffer: 0.2.1 + htmlparser2: 10.0.0 + parse5: 7.3.0 + parse5-htmlparser2-tree-adapter: 7.1.0 + parse5-parser-stream: 7.1.2 + undici: 7.14.0 + whatwg-mimetype: 4.0.0 + chokidar@3.6.0: dependencies: anymatch: 3.1.3 @@ -3264,11 +3376,21 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + css-select@5.2.2: + dependencies: + boolbase: 1.0.0 + css-what: 6.2.2 + domhandler: 5.0.3 + domutils: 3.2.2 + nth-check: 2.1.1 + css-tree@3.1.0: dependencies: mdn-data: 2.12.2 source-map-js: 1.2.1 + css-what@6.2.2: {} + css.escape@1.5.1: {} cssesc@3.0.0: {} @@ -3310,6 +3432,24 @@ snapshots: dom-accessibility-api@0.6.3: {} + dom-serializer@2.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + + domelementtype@2.3.0: {} + + domhandler@5.0.3: + dependencies: + domelementtype: 2.3.0 + + domutils@3.2.2: + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + eastasianwidth@0.2.0: {} electron-to-chromium@1.5.220: {} @@ -3318,6 +3458,13 @@ snapshots: emoji-regex@9.2.2: {} + encoding-sniffer@0.2.1: + dependencies: + iconv-lite: 0.6.3 + whatwg-encoding: 3.1.1 + + entities@4.5.0: {} + entities@6.0.1: {} error-stack-parser-es@1.0.5: {} @@ -3488,6 +3635,13 @@ snapshots: dependencies: whatwg-encoding: 3.1.1 + htmlparser2@10.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.2.2 + entities: 6.0.1 + http-proxy-agent@7.0.2: dependencies: agent-base: 7.1.4 @@ -3734,20 +3888,45 @@ snapshots: nanoid@3.3.11: {} + node-fetch@2.7.0: + dependencies: + whatwg-url: 5.0.0 + node-releases@2.0.21: {} normalize-path@3.0.0: {} normalize-range@0.1.2: {} + nth-check@2.1.1: + dependencies: + boolbase: 1.0.0 + object-assign@4.1.1: {} object-hash@3.0.0: {} ohash@2.0.11: {} + p-limit@4.0.0: + dependencies: + yocto-queue: 1.2.2 + package-json-from-dist@1.0.1: {} + parse5-htmlparser2-tree-adapter@7.1.0: + dependencies: + domhandler: 5.0.3 + parse5: 7.3.0 + + parse5-parser-stream@7.1.2: + dependencies: + parse5: 7.3.0 + + parse5@7.3.0: + dependencies: + entities: 6.0.1 + parse5@8.0.0: dependencies: entities: 6.0.1 @@ -4090,6 +4269,8 @@ snapshots: dependencies: tldts: 7.0.19 + tr46@0.0.3: {} + tr46@6.0.0: dependencies: punycode: 2.3.1 @@ -4235,6 +4416,8 @@ snapshots: dependencies: xml-name-validator: 5.0.0 + webidl-conversions@3.0.1: {} + webidl-conversions@8.0.0: {} whatwg-encoding@3.1.1: @@ -4248,6 +4431,11 @@ snapshots: tr46: 6.0.0 webidl-conversions: 8.0.0 + whatwg-url@5.0.0: + dependencies: + tr46: 0.0.3 + webidl-conversions: 3.0.1 + which@2.0.2: dependencies: isexe: 2.0.0 @@ -4356,6 +4544,8 @@ snapshots: xmlchars@2.2.0: {} + yocto-queue@1.2.2: {} + youch-core@0.3.3: dependencies: '@poppinss/exception': 1.2.2 diff --git a/tools/README.md b/tools/README.md new file mode 100644 index 0000000..0496902 --- /dev/null +++ b/tools/README.md @@ -0,0 +1,8 @@ +# 単一ページを測定 +node tools/measure-site-weight.js http://localhost:5173 + +# 詳細表示 (-v) +node tools/measure-site-weight.js http://localhost:5173 -v + +# リンク先も含めて測定 (--depth) +node tools/measure-site-weight.js http://localhost:5173 --depth 1 diff --git a/tools/measure-site-weight.js b/tools/measure-site-weight.js new file mode 100644 index 0000000..21c92f6 --- /dev/null +++ b/tools/measure-site-weight.js @@ -0,0 +1,424 @@ +#!/usr/bin/env node + +const http = require("http"); +const https = require("https"); +const { URL } = require("url"); +const zlib = require("zlib"); + +const COLORS = { + reset: "\x1b[0m", + bold: "\x1b[1m", + green: "\x1b[32m", + yellow: "\x1b[33m", + red: "\x1b[31m", + cyan: "\x1b[36m", + dim: "\x1b[2m", +}; + +function formatBytes(bytes) { + if (bytes === 0) return "0 B"; + const k = 1024; + const sizes = ["B", "KB", "MB", "GB"]; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; +} + +function formatTime(ms) { + if (ms < 1000) return `${ms.toFixed(0)}ms`; + return `${(ms / 1000).toFixed(2)}s`; +} + +function getScoreColor(score) { + if (score >= 90) return COLORS.green; + if (score >= 50) return COLORS.yellow; + return COLORS.red; +} + +function calculateScore(totalSize, requestCount, loadTime) { + let score = 100; + + if (totalSize > 500 * 1024) score -= 20; + else if (totalSize > 200 * 1024) score -= 10; + else if (totalSize > 100 * 1024) score -= 5; + + if (requestCount > 50) score -= 20; + else if (requestCount > 20) score -= 10; + else if (requestCount > 10) score -= 5; + + if (loadTime > 3000) score -= 20; + else if (loadTime > 1000) score -= 10; + else if (loadTime > 500) score -= 5; + + return Math.max(0, Math.min(100, score)); +} + +function fetchUrl(urlString, options = {}) { + return new Promise((resolve, reject) => { + const startTime = Date.now(); + const parsedUrl = new URL(urlString); + const protocol = parsedUrl.protocol === "https:" ? https : http; + + const requestOptions = { + hostname: parsedUrl.hostname, + port: parsedUrl.port || (parsedUrl.protocol === "https:" ? 443 : 80), + path: parsedUrl.pathname + parsedUrl.search, + method: "GET", + headers: { + "User-Agent": "SiteWeightMeasurer/1.0", + "Accept-Encoding": "gzip, deflate", + Accept: "*/*", + ...options.headers, + }, + timeout: options.timeout || 30000, + }; + + const req = protocol.request(requestOptions, (res) => { + const chunks = []; + let decodedSize = 0; + + const encoding = res.headers["content-encoding"]; + let stream = res; + + if (encoding === "gzip") { + stream = res.pipe(zlib.createGunzip()); + } else if (encoding === "deflate") { + stream = res.pipe(zlib.createInflate()); + } + + stream.on("data", (chunk) => { + chunks.push(chunk); + decodedSize += chunk.length; + }); + + stream.on("end", () => { + const endTime = Date.now(); + const rawSize = parseInt(res.headers["content-length"] || "0", 10); + + resolve({ + url: urlString, + statusCode: res.statusCode, + headers: res.headers, + contentType: res.headers["content-type"] || "unknown", + transferSize: rawSize || decodedSize, + decodedSize, + compressed: !!encoding, + loadTime: endTime - startTime, + body: Buffer.concat(chunks).toString("utf-8"), + }); + }); + + stream.on("error", reject); + }); + + req.on("timeout", () => { + req.destroy(); + reject(new Error(`Request timeout: ${urlString}`)); + }); + + req.on("error", reject); + req.end(); + }); +} + +function extractResources(html, baseUrl) { + const resources = []; + const base = new URL(baseUrl); + + const patterns = [ + { regex: /]+href=["']([^"']+)["'][^>]*>/gi, type: "stylesheet" }, + { regex: /]+src=["']([^"']+)["'][^>]*>/gi, type: "script" }, + { regex: /]+src=["']([^"']+)["'][^>]*>/gi, type: "image" }, + { regex: /url\(["']?([^"')]+)["']?\)/gi, type: "css-resource" }, + ]; + + for (const { regex, type } of patterns) { + let match; + while ((match = regex.exec(html)) !== null) { + try { + const resourceUrl = new URL(match[1], base).href; + if (!resources.some((r) => r.url === resourceUrl)) { + resources.push({ url: resourceUrl, type }); + } + } catch { + // skip invalid URLs + } + } + } + + return resources; +} + +function extractLinks(html, baseUrl) { + const links = []; + const base = new URL(baseUrl); + const regex = /]+href=["']([^"'#]+)["'][^>]*>/gi; + + let match; + while ((match = regex.exec(html)) !== null) { + try { + const linkUrl = new URL(match[1], base); + if ( + linkUrl.origin === base.origin && + linkUrl.pathname.match(/\.(html?|php|asp|jsp)?$/i) && + !links.includes(linkUrl.href) + ) { + links.push(linkUrl.href); + } + } catch { + // skip invalid URLs + } + } + + return links; +} + +async function measurePage(url) { + const result = { + url, + html: null, + resources: [], + totalSize: 0, + totalDecodedSize: 0, + requestCount: 0, + loadTime: 0, + errors: [], + }; + + try { + const htmlResponse = await fetchUrl(url); + result.html = htmlResponse; + result.totalSize += htmlResponse.transferSize; + result.totalDecodedSize += htmlResponse.decodedSize; + result.requestCount++; + result.loadTime = htmlResponse.loadTime; + + const resources = extractResources(htmlResponse.body, url); + + const resourcePromises = resources.map(async (resource) => { + try { + const response = await fetchUrl(resource.url); + return { + ...resource, + transferSize: response.transferSize, + decodedSize: response.decodedSize, + loadTime: response.loadTime, + compressed: response.compressed, + statusCode: response.statusCode, + }; + } catch (err) { + result.errors.push(`Failed to fetch ${resource.url}: ${err.message}`); + return { ...resource, transferSize: 0, decodedSize: 0, failed: true }; + } + }); + + const resourceResults = await Promise.all(resourcePromises); + + for (const resource of resourceResults) { + result.resources.push(resource); + result.totalSize += resource.transferSize; + result.totalDecodedSize += resource.decodedSize; + result.requestCount++; + result.loadTime = Math.max(result.loadTime, resource.loadTime || 0); + } + } catch (err) { + result.errors.push(`Failed to fetch page: ${err.message}`); + } + + return result; +} + +function printPageReport(pageResult, verbose = false) { + const { url, html, resources, totalSize, totalDecodedSize, requestCount, loadTime, errors } = + pageResult; + const score = calculateScore(totalSize, requestCount, loadTime); + const scoreColor = getScoreColor(score); + + console.log(`\n${COLORS.bold}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${COLORS.reset}`); + console.log(`${COLORS.cyan}📄 ${url}${COLORS.reset}`); + console.log(`${COLORS.bold}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${COLORS.reset}`); + + console.log(`\n${COLORS.bold}📊 Overall Score: ${scoreColor}${score}/100${COLORS.reset}`); + + console.log(`\n${COLORS.bold}📈 Summary${COLORS.reset}`); + console.log(` Total Size (transfer): ${formatBytes(totalSize)}`); + console.log(` Total Size (decoded): ${formatBytes(totalDecodedSize)}`); + console.log(` Request Count: ${requestCount}`); + console.log(` Load Time: ${formatTime(loadTime)}`); + + if (html) { + console.log(`\n${COLORS.bold}📄 HTML${COLORS.reset}`); + console.log(` Size: ${formatBytes(html.decodedSize)}`); + console.log(` Compressed: ${html.compressed ? "Yes ✓" : "No"}`); + } + + const byType = {}; + for (const r of resources) { + const type = r.type || "other"; + if (!byType[type]) byType[type] = { count: 0, size: 0 }; + byType[type].count++; + byType[type].size += r.decodedSize; + } + + if (Object.keys(byType).length > 0) { + console.log(`\n${COLORS.bold}📦 Resources by Type${COLORS.reset}`); + for (const [type, data] of Object.entries(byType)) { + console.log(` ${type}: ${data.count} files (${formatBytes(data.size)})`); + } + } + + if (verbose && resources.length > 0) { + console.log(`\n${COLORS.bold}📋 Resource Details${COLORS.reset}`); + const sorted = [...resources].sort((a, b) => b.decodedSize - a.decodedSize); + for (const r of sorted.slice(0, 20)) { + const status = r.failed ? "❌" : "✓"; + const size = formatBytes(r.decodedSize).padStart(10); + const shortUrl = r.url.length > 50 ? "..." + r.url.slice(-47) : r.url; + console.log(` ${status} ${size} ${shortUrl}`); + } + if (sorted.length > 20) { + console.log(` ${COLORS.dim}... and ${sorted.length - 20} more${COLORS.reset}`); + } + } + + if (errors.length > 0) { + console.log(`\n${COLORS.yellow}⚠️ Errors (${errors.length})${COLORS.reset}`); + for (const err of errors.slice(0, 5)) { + console.log(` ${err}`); + } + } + + console.log(`\n${COLORS.bold}💡 Recommendations${COLORS.reset}`); + if (totalSize > 200 * 1024) { + console.log(` ${COLORS.yellow}⚠ Total size exceeds 200KB. Consider optimizing.${COLORS.reset}`); + } + if (requestCount > 20) { + console.log(` ${COLORS.yellow}⚠ Many requests (${requestCount}). Consider bundling.${COLORS.reset}`); + } + if (html && !html.compressed) { + console.log(` ${COLORS.yellow}⚠ Enable gzip compression for HTML.${COLORS.reset}`); + } + const uncompressedResources = resources.filter((r) => !r.compressed && r.decodedSize > 1024); + if (uncompressedResources.length > 0) { + console.log( + ` ${COLORS.yellow}⚠ ${uncompressedResources.length} resources not compressed.${COLORS.reset}` + ); + } + + const largeImages = resources.filter( + (r) => r.type === "image" && r.decodedSize > 100 * 1024 + ); + if (largeImages.length > 0) { + console.log( + ` ${COLORS.yellow}⚠ ${largeImages.length} large images (>100KB). Consider optimizing.${COLORS.reset}` + ); + } + + if (score >= 90) { + console.log(` ${COLORS.green}✓ Great job! Site is lightweight.${COLORS.reset}`); + } + + return { url, score, totalSize, requestCount, loadTime }; +} + +function printSummaryReport(results) { + console.log(`\n${COLORS.bold}══════════════════════════════════════════════════${COLORS.reset}`); + console.log(`${COLORS.bold} FINAL SUMMARY ${COLORS.reset}`); + console.log(`${COLORS.bold}══════════════════════════════════════════════════${COLORS.reset}`); + + const avgScore = results.reduce((sum, r) => sum + r.score, 0) / results.length; + const totalSize = results.reduce((sum, r) => sum + r.totalSize, 0); + const avgSize = totalSize / results.length; + const totalRequests = results.reduce((sum, r) => sum + r.requestCount, 0); + + const scoreColor = getScoreColor(avgScore); + + console.log(`\n Pages Analyzed: ${results.length}`); + console.log(` Average Score: ${scoreColor}${avgScore.toFixed(1)}/100${COLORS.reset}`); + console.log(` Total Size: ${formatBytes(totalSize)}`); + console.log(` Average Page Size: ${formatBytes(avgSize)}`); + console.log(` Total Requests: ${totalRequests}`); + + console.log(`\n${COLORS.bold}📊 Page Rankings (by score)${COLORS.reset}`); + const sorted = [...results].sort((a, b) => b.score - a.score); + for (const r of sorted) { + const color = getScoreColor(r.score); + const shortUrl = r.url.length > 40 ? "..." + r.url.slice(-37) : r.url; + console.log(` ${color}${r.score.toString().padStart(3)}/100${COLORS.reset} ${shortUrl}`); + } +} + +async function main() { + const args = process.argv.slice(2); + + if (args.length === 0 || args.includes("--help") || args.includes("-h")) { + console.log(` +${COLORS.bold}Site Weight Measurer${COLORS.reset} +Measure how lightweight your website is. + +${COLORS.bold}Usage:${COLORS.reset} + node measure-site-weight.js [options] + +${COLORS.bold}Options:${COLORS.reset} + --depth Crawl depth (default: 0, only measure given URL) + --verbose, -v Show detailed resource list + --help, -h Show this help + +${COLORS.bold}Examples:${COLORS.reset} + node measure-site-weight.js http://localhost:3000 + node measure-site-weight.js http://localhost:3000 --depth 1 -v + node measure-site-weight.js https://example.com --depth 2 +`); + process.exit(0); + } + + const url = args.find((a) => a.startsWith("http")); + if (!url) { + console.error(`${COLORS.red}Error: Please provide a valid URL${COLORS.reset}`); + process.exit(1); + } + + const depthIndex = args.indexOf("--depth"); + const depth = depthIndex !== -1 ? parseInt(args[depthIndex + 1], 10) || 0 : 0; + const verbose = args.includes("--verbose") || args.includes("-v"); + + console.log(`${COLORS.bold}🔍 Measuring site weight...${COLORS.reset}`); + console.log(` URL: ${url}`); + console.log(` Depth: ${depth}`); + + const visited = new Set(); + const results = []; + const queue = [{ url, currentDepth: 0 }]; + + while (queue.length > 0) { + const { url: currentUrl, currentDepth } = queue.shift(); + + if (visited.has(currentUrl)) continue; + visited.add(currentUrl); + + console.log(`\n${COLORS.dim}Analyzing: ${currentUrl}${COLORS.reset}`); + + const pageResult = await measurePage(currentUrl); + const summary = printPageReport(pageResult, verbose); + results.push(summary); + + if (currentDepth < depth && pageResult.html) { + const links = extractLinks(pageResult.html.body, currentUrl); + for (const link of links) { + if (!visited.has(link)) { + queue.push({ url: link, currentDepth: currentDepth + 1 }); + } + } + } + } + + if (results.length > 1) { + printSummaryReport(results); + } + + console.log(`\n${COLORS.dim}Done.${COLORS.reset}\n`); +} + +main().catch((err) => { + console.error(`${COLORS.red}Error: ${err.message}${COLORS.reset}`); + process.exit(1); +}); From 1d208a4dd1ffeb7fc0114d633e991a716b1c3eb6 Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 03:23:42 +0900 Subject: [PATCH 09/24] feat: update main design with new gradient background and add preview itineraries --- apps/web/src/routes/+page.svelte | 2 +- apps/web/src/routes/home/index.ts | 4 +- apps/web/src/routes/home/previewData.ts | 93 +------------------ .../routes/home/previewData/ai-generated.ts | 23 +++++ apps/web/src/routes/home/previewData/index.ts | 15 +++ .../src/routes/home/previewData/minimal.ts | 23 +++++ .../home/previewData/standard-autumn.ts | 24 +++++ apps/web/src/routes/home/previewData/types.ts | 25 +++++ 8 files changed, 114 insertions(+), 95 deletions(-) create mode 100644 apps/web/src/routes/home/previewData/ai-generated.ts create mode 100644 apps/web/src/routes/home/previewData/index.ts create mode 100644 apps/web/src/routes/home/previewData/minimal.ts create mode 100644 apps/web/src/routes/home/previewData/standard-autumn.ts create mode 100644 apps/web/src/routes/home/previewData/types.ts diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte index a0245c4..8654124 100644 --- a/apps/web/src/routes/+page.svelte +++ b/apps/web/src/routes/+page.svelte @@ -169,7 +169,7 @@ From fefe80cf605ef76a8021535e275211d2ccba16eb Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 05:54:03 +0900 Subject: [PATCH 22/24] feat: enhance FlyingAirplane component with return animation logic and trail effect --- .../web/src/routes/home/FlyingAirplane.svelte | 132 +++++++++++------- 1 file changed, 78 insertions(+), 54 deletions(-) diff --git a/apps/web/src/routes/home/FlyingAirplane.svelte b/apps/web/src/routes/home/FlyingAirplane.svelte index a698976..758c94a 100644 --- a/apps/web/src/routes/home/FlyingAirplane.svelte +++ b/apps/web/src/routes/home/FlyingAirplane.svelte @@ -35,6 +35,12 @@ let arcProgress = 0; let stepsInArc = 0; + let returnProgress = 0; + let returnSteps = 0; + let returnStartX = 0; + let returnStartY = 0; + let returnAngle = 0; + function setupNextArc() { if (returning) { return false; @@ -42,32 +48,14 @@ if (totalArcs >= maxArcs) { returning = true; + returnStartX = currentX; + returnStartY = currentY; const dx = startX - currentX; const dy = startY - currentY; const distance = Math.sqrt(dx * dx + dy * dy); - - if (distance < 5) { - return false; - } - - const midX = (currentX + startX) / 2; - const midY = (currentY + startY) / 2; - const directAngle = Math.atan2(dy, dx); - const curveOffset = 8 + Math.random() * 12; - clockwise = Math.random() > 0.5; - const sign = clockwise ? 1 : -1; - - centerX = - midX + Math.cos(directAngle + Math.PI / 2) * curveOffset * sign; - centerY = - midY + Math.sin(directAngle + Math.PI / 2) * curveOffset * sign; - radius = Math.sqrt( - Math.pow(currentX - centerX, 2) + Math.pow(currentY - centerY, 2), - ); - arcStartAngle = Math.atan2(currentY - centerY, currentX - centerX); - arcLength = Math.PI; - stepsInArc = Math.ceil(arcLength / 0.025); - arcProgress = 0; + returnAngle = Math.atan2(dy, dx); + returnSteps = Math.ceil(distance / 0.8); + returnProgress = 0; return true; } @@ -90,6 +78,48 @@ setupNextArc(); const animate = () => { + if (returning) { + if (returnProgress >= returnSteps) { + x = startX; + y = startY; + rotation = -45; + trail = []; + setTimeout(() => { + onComplete(); + }, 100); + return; + } + + const t = returnProgress / returnSteps; + const newX = returnStartX + (startX - returnStartX) * t; + const newY = returnStartY + (startY - returnStartY) * t; + + const tailOffsetX = Math.cos(returnAngle) * 1.5; + const tailOffsetY = Math.sin(returnAngle) * 1.5; + + trail = [ + { + x: newX - tailOffsetX, + y: newY - tailOffsetY, + opacity: 0.7, + id: trailId++, + }, + ...trail + .slice(0, 15) + .map((t) => ({ ...t, opacity: t.opacity * 0.88 })), + ].filter((t) => t.opacity > 0.05); + + x = newX; + y = newY; + rotation = (returnAngle * 180) / Math.PI + 90; + + returnProgress++; + + const speed = 28 + Math.random() * 12; + setTimeout(animate, speed); + return; + } + if (arcProgress >= stepsInArc) { const endAngle = clockwise ? arcStartAngle - arcLength @@ -100,14 +130,10 @@ ? endAngle - Math.PI / 2 : endAngle + Math.PI / 2; - if (!setupNextArc()) { - x = startX; - y = startY; - rotation = -45; - trail = []; - setTimeout(() => { - onComplete(); - }, 100); + setupNextArc(); + if (returning) { + const speed = 28 + Math.random() * 12; + setTimeout(animate, speed); return; } } @@ -120,30 +146,28 @@ let newX = centerX + Math.cos(currentArcAngle) * radius; let newY = centerY + Math.sin(currentArcAngle) * radius; - if (!returning) { - let didWrap = false; - if (newX < -5) { - newX += 110; - didWrap = true; - } else if (newX > 105) { - newX -= 110; - didWrap = true; - } - if (newY < -5) { - newY += 110; - didWrap = true; - } else if (newY > 105) { - newY -= 110; - didWrap = true; - } + let didWrap = false; + if (newX < -5) { + newX += 110; + didWrap = true; + } else if (newX > 105) { + newX -= 110; + didWrap = true; + } + if (newY < -5) { + newY += 110; + didWrap = true; + } else if (newY > 105) { + newY -= 110; + didWrap = true; + } - if (didWrap) { - centerX += newX - (centerX + Math.cos(currentArcAngle) * radius); - centerY += newY - (centerY + Math.sin(currentArcAngle) * radius); - currentX = newX; - currentY = newY; - trail = []; - } + if (didWrap) { + centerX += newX - (centerX + Math.cos(currentArcAngle) * radius); + centerY += newY - (centerY + Math.sin(currentArcAngle) * radius); + currentX = newX; + currentY = newY; + trail = []; } const tangentAngle = clockwise From ed88499ab6189f7132f1c7a58239c2b6ab416d4f Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 06:03:09 +0900 Subject: [PATCH 23/24] feat: update ScrollTopButton position for improved visibility --- apps/web/src/routes/home/ScrollTopButton.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/routes/home/ScrollTopButton.svelte b/apps/web/src/routes/home/ScrollTopButton.svelte index e49361f..42a0fd0 100644 --- a/apps/web/src/routes/home/ScrollTopButton.svelte +++ b/apps/web/src/routes/home/ScrollTopButton.svelte @@ -54,8 +54,8 @@ flex-direction: column; align-items: center; position: fixed; - bottom: 1.5rem; - right: 1.5rem; + bottom: 0.5rem; + right: 0rem; color: #5d8bff; font-size: 0.875rem; font-weight: 600; From 6aba69a5c44a8b40032d2ea2d7a80fee51783ec7 Mon Sep 17 00:00:00 2001 From: soranjiro Date: Wed, 26 Nov 2025 06:03:16 +0900 Subject: [PATCH 24/24] feat: improve visibility logic for FlyingAirplane component with enhanced return animation --- .../web/src/routes/home/FlyingAirplane.svelte | 61 +++++++++++++++---- 1 file changed, 50 insertions(+), 11 deletions(-) diff --git a/apps/web/src/routes/home/FlyingAirplane.svelte b/apps/web/src/routes/home/FlyingAirplane.svelte index 758c94a..3a9257f 100644 --- a/apps/web/src/routes/home/FlyingAirplane.svelte +++ b/apps/web/src/routes/home/FlyingAirplane.svelte @@ -13,6 +13,7 @@ let x = $state(startX); let y = $state(startY); let rotation = $state(-45); + let visible = $state(true); let trail = $state< Array<{ x: number; y: number; opacity: number; id: number }> >([]); @@ -147,27 +148,59 @@ let newY = centerY + Math.sin(currentArcAngle) * radius; let didWrap = false; - if (newX < -5) { - newX += 110; + if (newX < -3) { + newX += 106; didWrap = true; - } else if (newX > 105) { - newX -= 110; + } else if (newX > 103) { + newX -= 106; didWrap = true; } - if (newY < -5) { - newY += 110; + if (newY < -3) { + newY += 106; didWrap = true; - } else if (newY > 105) { - newY -= 110; + } else if (newY > 103) { + newY -= 106; didWrap = true; } if (didWrap) { - centerX += newX - (centerX + Math.cos(currentArcAngle) * radius); - centerY += newY - (centerY + Math.sin(currentArcAngle) * radius); + visible = false; + trail = []; + currentX = newX; currentY = newY; - trail = []; + + const towardsCenterAngle = Math.atan2(50 - newY, 50 - newX); + currentAngle = + towardsCenterAngle + (Math.random() - 0.5) * (Math.PI / 4); + + radius = 20 + Math.random() * 25; + clockwise = Math.random() > 0.5; + arcLength = Math.PI / 3 + Math.random() * (Math.PI / 3); + + const perpAngle = + currentAngle + (clockwise ? -Math.PI / 2 : Math.PI / 2); + centerX = currentX + Math.cos(perpAngle) * radius; + centerY = currentY + Math.sin(perpAngle) * radius; + arcStartAngle = perpAngle + Math.PI; + + stepsInArc = Math.ceil(arcLength / 0.025); + arcProgress = 0; + + x = newX; + y = newY; + const tangent = clockwise + ? arcStartAngle - Math.PI / 2 + : arcStartAngle + Math.PI / 2; + rotation = (tangent * 180) / Math.PI + 90; + + setTimeout(() => { + visible = true; + }, 50); + + const speed = 28 + Math.random() * 12; + setTimeout(animate, speed); + return; } const tangentAngle = clockwise @@ -211,6 +244,7 @@
@@ -235,6 +269,11 @@ transform 0.05s linear; } + .flying-airplane.hidden { + opacity: 0; + transition: none; + } + .trail-dot { position: absolute; width: 6px;