Our Family Journeys
家族旅遊手帳 — 記錄每一次的家庭旅行,也用來規劃下一次。
Next.js 15 + App Router + TypeScript + Tailwind CSS · Markdown 驅動的內容。
開發
npm install
npm run dev
# → http://localhost:3000
新增一趟旅程
在 content/trips/ 底下建立 <slug>.md,frontmatter 結構參考既有的 okinawa-2026.md。
必要欄位:slug、title、year、startDate、endDate、dateRangeLabel、location、days
可選欄位:
mode:planning(規劃中)、ongoing(進行中)或 record(紀錄)。省略時會依 startDate/endDate 自動判斷:未到出發日是規劃中、日期區間內是進行中、結束後是紀錄coverPhoto:封面照片路徑(/images/...),用於 Open Graph 圖片與首頁卡片coverVariant:沒放真實照片時用的色塊配色(ocean / coral / leaf / sun / sand / sky / night / earth)
地圖圖釘位置:用 mapX 與 mapY(以百分比 0-100 表示在 SVG 地圖上的位置)
景點類型(days[].stops[].type):
move — 移動/交通,簡單一行spot — 主要景點卡,有照片色塊、徽章、描述、chips、Google Maps / 官網連結、家庭小提醒meal — 餐廳三選一detour — 可收合的推薦停靠點(對應原 MD 的 <details>)note — 手寫筆記便條
真實照片:把檔案放進 public/images/trips/<slug>/,再在 stops[].photo.src 填 /images/trips/<slug>/<檔名>。本地路徑會走 Next.js 圖片最佳化;若是外部 URL 則自動使用 unoptimized。沒設 src 時繼續用 variant 色塊作佔位圖。
部署到 Vercel
- Push 到 GitHub:
git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/s780609/our-family-journeys.git
git push -u origin main
- 到 vercel.com import 這個 repo,一路按 Deploy 即可。Next.js 會被自動偵測。
結構
app/
layout.tsx 根 layout + Google Fonts
page.tsx 首頁 (手繪地圖 + 年份清單)
globals.css 全域變數 + 色票 + 紙張紋理
trips/[slug]/page.tsx 行程頁(SSG)
components/
TripHero.tsx 行程頁 hero(標題 + 圓章 + 資訊條)
DaySection.tsx Day 區塊(標題 + 時間軸)
StopBlock.tsx 各類型景點卡片(spot/meal/move/detour/note)
ScrollProgress.tsx 左側時間軸 + 頂部 / 側邊進度條
HomeMap.tsx 首頁手繪地圖 + 圖釘
YearList.tsx 年份清單(點擊展開)
TweaksPanel.tsx 右下角 Tweaks 面板(色調、字型、密度、日夜)
lib/
types.ts Trip / Day / Stop 型別
trips.ts 讀取 markdown + gray-matter + remark
content/
trips/*.md 每一趟旅程的資料
風格筆記
- 視覺:溫暖手作旅遊手帳 — 米白紙張底、紙張紋理、膠帶、圓章戳印
- 字型:Noto Serif TC(中文標題)+ Caveat(英文手寫)
- 主色:沖繩海藍
#2e6b8a,珊瑚橘點綴;可在 Tweaks 切換
- 相片:放進
public/images/trips/<slug>/,再把 photo.src 指過去;沒圖時會自動 fallback 成 variant 色塊
- 分享:每個 Day 標題右側都有「分享」按鈕,會把
#day-N 連結加到目前網址並複製到剪貼簿(行動裝置優先用 Web Share API)
- OG 圖:首頁與每趟旅程會自動生成
opengraph-image(app/opengraph-image.tsx 與 app/trips/[slug]/opengraph-image.tsx)。若要正確解析絕對網址,部署時可設 NEXT_PUBLIC_SITE_URL
待辦
