# Puck Editor Template — Bugs & Fixes Log

> **Purpose:** Every time a bug is found and fixed in a template component, document it here.  
> When this template is used on a new website, these fixes are already applied.

---

## How to Use This File

1. When a bug is found in a Puck component, fix it in the template files (`files/` folder)
2. Document the fix below so there's a record of what was changed and why
3. The next website that uses this template gets the fix automatically

---

## Fixes

### Fix #1: HeroSection Content Stuck to Left Side

**Problem:** The hero text (tagline, title, subtitle) appears left-aligned instead of centered on the page. The `container` class in Tailwind v4 sets `max-width` but does NOT auto-center — it needs `mx-auto` for that.

**Affected File(s):** `components/sections/HeroSection.tsx` (line 128)

**Fix:** Added `mx-auto` to the container div:

```diff
- <div className="container relative z-20 flex flex-col items-center justify-center h-full pb-16">
+ <div className="container mx-auto relative z-20 flex flex-col items-center justify-center h-full pb-16">
```

---

### Fix #2: IconNavGrid Content Not Centered

**Problem:** Same issue as Fix #1 — `container` without `mx-auto` causes the icon grid to stick to the left.

**Affected File(s):** `components/sections/IconNavGrid.tsx` (line 88)

**Fix:** Added `mx-auto` to the container div:

```diff
- <div className="container -mt-8 md:-mt-12 relative z-40 mb-16 max-w-5xl">
+ <div className="container mx-auto -mt-8 md:-mt-12 relative z-40 mb-16 max-w-5xl">
```

---

### Fix #3: DB-Fetching Components Show Placeholder/Skeleton on Live Site

**Problem:** 10 components that fetch data from the database use `Editor` versions (skeleton placeholders) in puckConfig. When the homepage renders via `puckConfig.components[type].render`, these show placeholder content instead of real articles.

**Affected Components:**
- `BlogGrid` → puckConfig renders `BlogGridEditor` (placeholder)
- `AuthorBox` → puckConfig renders `AuthorBoxEditor` (placeholder)
- `ArticleTrendingRanking` → puckConfig renders `ArticleGridTrendingRankingEditor` (placeholder)
- `ArticleCategorySections` → puckConfig renders `ArticleGridCategorySectionsEditor` (placeholder)
- `FeaturedArticleHero` → puckConfig renders `FeaturedArticleHeroEditor` (placeholder)
- `HeroBlogCarousel` → puckConfig renders `HeroBlogCarouselEditor` (placeholder)
- `HeroSlideCarousel` → puckConfig renders `HeroSlideCarouselEditor` (placeholder)
- `TwoColumnLayout` → puckConfig renders `TwoColumnLayoutEditor` (placeholder)
- `FeaturedArticleSpotlight` → puckConfig renders `FeaturedArticleSpotlightEditor` (placeholder)
- `BlogShowcaseGrid` → puckConfig renders `BlogShowcaseGridEditor` (placeholder)

**Affected File(s):** `app/(site)/page.tsx` — the homepage renderer

**Fix:** Add all 10 components to the `SERVER_OVERRIDES` map in `page.tsx`, importing the real async versions:

```tsx
import { BlogGrid } from "@/components/sections/BlogGrid";
import { AuthorBox } from "@/components/sections/AuthorBox";
import { ArticleGridTrendingRanking } from "@/components/sections/ArticleGridTrendingRanking";
import { ArticleGridCategorySections } from "@/components/sections/ArticleGridCategorySections";
import { FeaturedArticleHero } from "@/components/sections/FeaturedArticleHero";
import { HeroBlogCarousel } from "@/components/sections/HeroBlogCarousel";
import { HeroSlideCarousel } from "@/components/sections/HeroSlideCarousel";
import { TwoColumnLayout } from "@/components/sections/TwoColumnLayout";
import { FeaturedArticleSpotlight } from "@/components/sections/FeaturedArticleSpotlight";
import { BlogShowcaseGrid } from "@/components/sections/BlogShowcaseGrid";

const SERVER_OVERRIDES = {
  // ... existing SiteTopStories, SiteMainContent overrides ...
  BlogGrid: (props) => <BlogGrid {...props} />,
  AuthorBox: (props) => <AuthorBox {...props} />,
  ArticleTrendingRanking: (props) => <ArticleGridTrendingRanking {...props} />,
  ArticleCategorySections: (props) => <ArticleGridCategorySections {...props} />,
  FeaturedArticleHero: (props) => <FeaturedArticleHero {...props} />,
  HeroBlogCarousel: (props) => <HeroBlogCarousel {...props} />,
  HeroSlideCarousel: (props) => <HeroSlideCarousel {...props} />,
  TwoColumnLayout: (props) => <TwoColumnLayout {...props} />,
  FeaturedArticleSpotlight: (props) => <FeaturedArticleSpotlight {...props} />,
  BlogShowcaseGrid: (props) => <BlogShowcaseGrid {...props} />,
};
```

> **Rule:** Any component that uses an `*Editor` version in puckConfig MUST have a server override in `page.tsx` to render the real version on the live site.

---

### Fix #4: Blog Links Use Wrong URL Pattern `/post/` Instead of `/blog/`

**Problem:** All 8 DB-fetching components generate article links as `/post/slug` but the actual blog route is `/blog/[slug]`. This causes every article link to return a 404 error.

**Affected File(s):** 8 components with 12 occurrences:
- `BlogGrid.tsx`
- `HeroBlogCarousel.tsx`
- `FeaturedArticleHero.tsx`
- `FeaturedArticleSpotlight.tsx`
- `BlogShowcaseGrid.tsx` (3 occurrences)
- `ArticleGridTrendingRanking.tsx` (2 occurrences)
- `ArticleGridCategorySections.tsx`
- `TwoColumnLayout.tsx` (2 occurrences)

**Fix:** Replace all `` `/post/${slug}` `` with `` `/blog/${slug}` ``:

```diff
- slug: `/post/${a.slug}`,
+ slug: `/blog/${a.slug}`,
```

> **Note:** When using this template on a new site, check your actual blog route pattern and adjust accordingly. Common patterns: `/blog/[slug]`, `/post/[slug]`, `/articles/[slug]`.

---

### Fix #5: Article Images Not Showing + Missing siteId Filter in `db.ts`

**Problem:** Two issues in `lib/utils/db.ts` used by all Puck DB-fetching components:

1. **No images:** `cardImage` was set to `post.heroImage?.url` — but `heroImage` can be either a JSON object `{ url: "..." }` or a plain string `"https://..."`. When it's a string, `.url` returns `undefined` and no image shows.

2. **No siteId filter:** Queries fetched ALL posts from the database without filtering by `siteId`, potentially returning posts from other sites sharing the same DB.

**Affected File(s):** `lib/utils/db.ts`

**Fix:**
1. Added `normalizeHeroImage()` function that handles both JSON objects and plain string URLs
2. Added `SITE_ID` constant and `eq(blogPosts.siteId, SITE_ID)` filter to all 7 query functions
3. Fixed `author` extraction to handle both object and string formats

```diff
- cardImage: post.heroImage?.url || undefined,
+ cardImage: normalizeHeroImage(post.heroImage),
```

---

### Fix #6: Manual Mode External Links Breaking Due to Next.js `<Link>`

**Problem:** In `ArticleGridTrendingRanking.tsx`, manual items were wrapped in Next.js `<Link href="...">` components. If a user manually added an external URL (e.g. `https://example.com`), Next.js `<Link>` could interfere with the navigation behavior and cause unexpected client-side routing issues.

**Affected File(s):** `ArticleGridTrendingRanking.tsx`

**Fix:** Implemented the `Wrapper` pattern to conditionally use a native HTML `<a>` tag for manual items, and `<Link>` for database-fetched items, matching the behavior of other components:

```diff
- <Link href={item.slug}>
+ const Wrapper = item.isManual ? 'a' : Link;
+ <Wrapper href={item.slug}>
```

---

## Template for New Fixes

```
### Fix #N: [Short Title]

**Problem:** [What was broken]

**Affected File(s):** [Which file(s) in the template]

**Fix:** [What was changed and why]

---

### Fix #7: Reverted `/blog/` to `/post/` for renow.jp

**Problem:** `renow.jp` uses the `/post/[slug]` route pattern, so the links generated by the library components (which were previously changed to `/blog/` in Fix #4) were leading to 404 pages on this specific site.

**Affected File(s):** 8 components: `TwoColumnLayout.tsx`, `HeroBlogCarousel.tsx`, `FeaturedArticleSpotlight.tsx`, `FeaturedArticleHero.tsx`, `BlogShowcaseGrid.tsx`, `BlogGrid.tsx`, `ArticleGridTrendingRanking.tsx`, `ArticleGridCategorySections.tsx`

**Fix:** Reverted all occurrences of `` `/blog/${slug}` `` back to `` `/post/${slug}` `` to match the `renow.jp` site's specific blog routing pattern.

---

### Fix #8: Missing `linkHelpers.ts` file in template

**Problem:** The `puck-editor-template` was missing `lib/puck/linkHelpers.ts`, causing build errors (`Module not found: Can't resolve '@/lib/puck/linkHelpers'`) in multiple components like `RankedTopList.tsx` and `ReviewSection.tsx`.

**Affected File(s):** `lib/puck/linkHelpers.ts` (Missing)

**Fix:** Created `lib/puck/linkHelpers.ts` from scratch to supply the `getLinkAttributes` function and `LINK_FIELDS` definitions for the editor.
```

---

## Session Fixes — June 4, 2026 (Morning)

---

### Fix #9: Featured Article Hero Card — Wrong Height & Unequal Padding

**Problem:** The `FeaturedArticleHero` card height was `203px` (too small). The content inside was aligned to the bottom (`justify-end`) instead of being vertically centered, causing unequal visual padding from top and bottom. Tailwind JIT also occasionally missed the arbitrary `h-[300px]` class during hot reload, causing the card to collapse to zero height.

**Affected File(s):** `FeaturedArticleHeroEditor.tsx`, `FeaturedArticleHero.tsx`

**Fix:**
1. Changed card height to `style={{ height: '300px' }}` (inline style to bypass Tailwind JIT miss on arbitrary values during hot reload)
2. Changed `justify-end` → `justify-center` on the content overlay div in both files
3. Positioned the editor hint `<p>` absolutely so it no longer adds unequal bottom spacing

---

### Fix #10: Author (Full Profile) — Wrong Static Author Link

**Problem:** The "記事一覧を見る" link used a dynamically generated URL `` `/author/${encodeURIComponent(authorName)}` `` which produced wrong/non-existent URLs.

**Affected File(s):** `AuthorProfile.tsx`, `config.tsx`

**Fix:**
1. Added `authorLink` prop to `AuthorProfile` defaulting to the correct URL
2. Added `Author Page URL` editable text field in Puck config so editors can override the link per page

---

### Fix #11: Author (Full Profile) — Shows Static Hardcoded Data Instead of Dynamic DB Data

**Problem:** The `AuthorProfile` component always showed hardcoded placeholder values regardless of what was in the database.

**Affected File(s):** `AuthorProfile.tsx`, `config.tsx`, `lib/utils/db.ts`, `lib/services/blog-service.ts`, `lib/services/content-service.ts`, `app/api/editor/data/route.ts`, `hooks/useEditorData.ts`

**Fix:**
1. Added `getLatestAuthorInfo()` to `content-service.ts` — queries the most recently published article with `authorData`, extracts name, bio, avatar, role, social links, profile URL
2. Re-exported from `blog-service.ts` (was missing — caused a build error: "Export getLatestAuthorInfo doesn't exist in target module")
3. Added utility in `lib/utils/db.ts`, added `authorName` to `AuthorInfo` interface
4. Added `'latest-author'` case to `/api/editor/data/route.ts`
5. Added `'latest-author'` to the `DataType` union in `useEditorData.ts`
6. Rewrote `AuthorProfile.tsx` to use `useEditorData` in auto mode with loading skeleton
7. Added **Data Source** dropdown (`Auto (from DB)` / `Manual`) to Puck config

---

### Fix #12: BlogShowcaseGridEditor — Items Not Clickable

**Problem:** Side thumbnails, featured article, and "Most Read" list items were plain `<div>` elements. The "View All" button was a `<span>`. Nothing was clickable.

**Affected File(s):** `BlogShowcaseGridEditor.tsx`

**Fix:** Wrapped side articles, featured article, and most-read items in `<a>` tags. Changed "View All" `<span>` to `<a href={viewAllUrl}>` with new editable `viewAllUrl` prop. Also fixed featured article to expose its `linkUrl` from DB data (was missing from auto-mode mapping).

---

### Fix #13: TwoColumnLayoutEditor — Auto Mode Showed Static Skeletons Forever

**Problem:** Auto mode showed static grey skeleton placeholders permanently — never fetched or displayed real data from the database.

**Affected File(s):** `TwoColumnLayoutEditor.tsx`

**Fix:** Added `useEditorData` hooks for both trending and most-read columns. Auto mode now fetches and displays real DB articles with clickable `<a>` tags.

---

### Fix #14: HeroSlideCarouselEditor — Slides Not Clickable

**Problem:** Each slide card was a plain `<div>`. Slides with `linkUrl` were not navigatable.

**Affected File(s):** `HeroSlideCarouselEditor.tsx`

**Fix:** Changed `<div>` to `<a href={slide.linkUrl || '#'} className="... block">` for each slide.

---

### Fix #15: ArticleGridCategorySectionsEditor — Manual Article Cards Not Clickable

**Problem:** Manual article cards were plain `<div>` elements even though `linkUrl` was available.

**Affected File(s):** `ArticleGridCategorySectionsEditor.tsx`

**Fix:** Changed article card `<div>` to `<a href={article.linkUrl || '#'} className="... block">`.

---

### Fix #16: ArticleGridTrendingRankingEditor — Manual Items Not Clickable
  HeroSlideCarousel: (props) => <HeroSlideCarousel {...props} />,
  TwoColumnLayout: (props) => <TwoColumnLayout {...props} />,
  FeaturedArticleSpotlight: (props) => <FeaturedArticleSpotlight {...props} />,
  BlogShowcaseGrid: (props) => <BlogShowcaseGrid {...props} />,
};
```

> **Rule:** Any component that uses an `*Editor` version in puckConfig MUST have a server override in `page.tsx` to render the real version on the live site.

---

### Fix #4: Blog Links Use Wrong URL Pattern `/post/` Instead of `/blog/`

**Problem:** All 8 DB-fetching components generate article links as `/post/slug` but the actual blog route is `/blog/[slug]`. This causes every article link to return a 404 error.

**Affected File(s):** 8 components with 12 occurrences:
- `BlogGrid.tsx`
- `HeroBlogCarousel.tsx`
- `FeaturedArticleHero.tsx`
- `FeaturedArticleSpotlight.tsx`
- `BlogShowcaseGrid.tsx` (3 occurrences)
- `ArticleGridTrendingRanking.tsx` (2 occurrences)
- `ArticleGridCategorySections.tsx`
- `TwoColumnLayout.tsx` (2 occurrences)

**Fix:** Replace all `` `/post/${slug}` `` with `` `/blog/${slug}` ``:

```diff
- slug: `/post/${a.slug}`,
+ slug: `/blog/${a.slug}`,
```

> **Note:** When using this template on a new site, check your actual blog route pattern and adjust accordingly. Common patterns: `/blog/[slug]`, `/post/[slug]`, `/articles/[slug]`.

---

### Fix #5: Article Images Not Showing + Missing siteId Filter in `db.ts`

**Problem:** Two issues in `lib/utils/db.ts` used by all Puck DB-fetching components:

1. **No images:** `cardImage` was set to `post.heroImage?.url` — but `heroImage` can be either a JSON object `{ url: "..." }` or a plain string `"https://..."`. When it's a string, `.url` returns `undefined` and no image shows.

2. **No siteId filter:** Queries fetched ALL posts from the database without filtering by `siteId`, potentially returning posts from other sites sharing the same DB.

**Affected File(s):** `lib/utils/db.ts`

**Fix:**
1. Added `normalizeHeroImage()` function that handles both JSON objects and plain string URLs
2. Added `SITE_ID` constant and `eq(blogPosts.siteId, SITE_ID)` filter to all 7 query functions
3. Fixed `author` extraction to handle both object and string formats

```diff
- cardImage: post.heroImage?.url || undefined,
+ cardImage: normalizeHeroImage(post.heroImage),
```

---

### Fix #6: Manual Mode External Links Breaking Due to Next.js `<Link>`

**Problem:** In `ArticleGridTrendingRanking.tsx`, manual items were wrapped in Next.js `<Link href="...">` components. If a user manually added an external URL (e.g. `https://example.com`), Next.js `<Link>` could interfere with the navigation behavior and cause unexpected client-side routing issues.

**Affected File(s):** `ArticleGridTrendingRanking.tsx`

**Fix:** Implemented the `Wrapper` pattern to conditionally use a native HTML `<a>` tag for manual items, and `<Link>` for database-fetched items, matching the behavior of other components:

```diff
- <Link href={item.slug}>
+ const Wrapper = item.isManual ? 'a' : Link;
+ <Wrapper href={item.slug}>
```

---

## Template for New Fixes

```
### Fix #N: [Short Title]

**Problem:** [What was broken]

**Affected File(s):** [Which file(s) in the template]

**Fix:** [What was changed and why]

---

### Fix #7: Reverted `/blog/` to `/post/` for renow.jp

**Problem:** `renow.jp` uses the `/post/[slug]` route pattern, so the links generated by the library components (which were previously changed to `/blog/` in Fix #4) were leading to 404 pages on this specific site.

**Affected File(s):** 8 components: `TwoColumnLayout.tsx`, `HeroBlogCarousel.tsx`, `FeaturedArticleSpotlight.tsx`, `FeaturedArticleHero.tsx`, `BlogShowcaseGrid.tsx`, `BlogGrid.tsx`, `ArticleGridTrendingRanking.tsx`, `ArticleGridCategorySections.tsx`

**Fix:** Reverted all occurrences of `` `/blog/${slug}` `` back to `` `/post/${slug}` `` to match the `renow.jp` site's specific blog routing pattern.

---

### Fix #8: Missing `linkHelpers.ts` file in template

**Problem:** The `puck-editor-template` was missing `lib/puck/linkHelpers.ts`, causing build errors (`Module not found: Can't resolve '@/lib/puck/linkHelpers'`) in multiple components like `RankedTopList.tsx` and `ReviewSection.tsx`.

**Affected File(s):** `lib/puck/linkHelpers.ts` (Missing)

**Fix:** Created `lib/puck/linkHelpers.ts` from scratch to supply the `getLinkAttributes` function and `LINK_FIELDS` definitions for the editor.
```

---

## Session Fixes — June 4, 2026 (Morning)

---

### Fix #9: Featured Article Hero Card — Wrong Height & Unequal Padding

**Problem:** The `FeaturedArticleHero` card height was `203px` (too small). The content inside was aligned to the bottom (`justify-end`) instead of being vertically centered, causing unequal visual padding from top and bottom. Tailwind JIT also occasionally missed the arbitrary `h-[300px]` class during hot reload, causing the card to collapse to zero height.

**Affected File(s):** `FeaturedArticleHeroEditor.tsx`, `FeaturedArticleHero.tsx`

**Fix:**
1. Changed card height to `style={{ height: '300px' }}` (inline style to bypass Tailwind JIT miss on arbitrary values during hot reload)
2. Changed `justify-end` → `justify-center` on the content overlay div in both files
3. Positioned the editor hint `<p>` absolutely so it no longer adds unequal bottom spacing

---

### Fix #10: Author (Full Profile) — Wrong Static Author Link

**Problem:** The "記事一覧を見る" link used a dynamically generated URL `` `/author/${encodeURIComponent(authorName)}` `` which produced wrong/non-existent URLs.

**Affected File(s):** `AuthorProfile.tsx`, `config.tsx`

**Fix:**
1. Added `authorLink` prop to `AuthorProfile` defaulting to the correct URL
2. Added `Author Page URL` editable text field in Puck config so editors can override the link per page

---

### Fix #11: Author (Full Profile) — Shows Static Hardcoded Data Instead of Dynamic DB Data

**Problem:** The `AuthorProfile` component always showed hardcoded placeholder values regardless of what was in the database.

**Affected File(s):** `AuthorProfile.tsx`, `config.tsx`, `lib/utils/db.ts`, `lib/services/blog-service.ts`, `lib/services/content-service.ts`, `app/api/editor/data/route.ts`, `hooks/useEditorData.ts`

**Fix:**
1. Added `getLatestAuthorInfo()` to `content-service.ts` — queries the most recently published article with `authorData`, extracts name, bio, avatar, role, social links, profile URL
2. Re-exported from `blog-service.ts` (was missing — caused a build error: "Export getLatestAuthorInfo doesn't exist in target module")
3. Added utility in `lib/utils/db.ts`, added `authorName` to `AuthorInfo` interface
4. Added `'latest-author'` case to `/api/editor/data/route.ts`
5. Added `'latest-author'` to the `DataType` union in `useEditorData.ts`
6. Rewrote `AuthorProfile.tsx` to use `useEditorData` in auto mode with loading skeleton
7. Added **Data Source** dropdown (`Auto (from DB)` / `Manual`) to Puck config

---

### Fix #12: BlogShowcaseGridEditor — Items Not Clickable

**Problem:** Side thumbnails, featured article, and "Most Read" list items were plain `<div>` elements. The "View All" button was a `<span>`. Nothing was clickable.

**Affected File(s):** `BlogShowcaseGridEditor.tsx`

**Fix:** Wrapped side articles, featured article, and most-read items in `<a>` tags. Changed "View All" `<span>` to `<a href={viewAllUrl}>` with new editable `viewAllUrl` prop. Also fixed featured article to expose its `linkUrl` from DB data (was missing from auto-mode mapping).

---

### Fix #13: TwoColumnLayoutEditor — Auto Mode Showed Static Skeletons Forever

**Problem:** Auto mode showed static grey skeleton placeholders permanently — never fetched or displayed real data from the database.

**Affected File(s):** `TwoColumnLayoutEditor.tsx`

**Fix:** Added `useEditorData` hooks for both trending and most-read columns. Auto mode now fetches and displays real DB articles with clickable `<a>` tags.

---

### Fix #14: HeroSlideCarouselEditor — Slides Not Clickable

**Problem:** Each slide card was a plain `<div>`. Slides with `linkUrl` were not navigatable.

**Affected File(s):** `HeroSlideCarouselEditor.tsx`

**Fix:** Changed `<div>` to `<a href={slide.linkUrl || '#'} className="... block">` for each slide.

---

### Fix #15: ArticleGridCategorySectionsEditor — Manual Article Cards Not Clickable

**Problem:** Manual article cards were plain `<div>` elements even though `linkUrl` was available.

**Affected File(s):** `ArticleGridCategorySectionsEditor.tsx`

**Fix:** Changed article card `<div>` to `<a href={article.linkUrl || '#'} className="... block">`.

---

### Fix #16: ArticleGridTrendingRankingEditor — Manual Items Not Clickable

**Problem:** Auto mode items were correctly wrapped in `<a>` tags, but manual trending and manual ranking items were plain `<div>` elements despite having `linkUrl` fields.

**Affected File(s):** `ArticleGridTrendingRankingEditor.tsx`

**Fix:** Changed both manual trending item and manual ranking item `<div>` to `<a href={item.linkUrl || '#'}>`.

---

### Fix #17: Editor Loses All Components After Switching Browser Tabs / Client-side Navigation

**Problem:** When you publish changes in the Puck editor, then navigate away to another tab/dashboard page within RankTraction and return to the editor page, all the components you added are gone and the editor shows the old layout.

**Root Cause:** Two layers of caching in Next.js cause this:
1. **Server-side caching:** The editor's server-side page (`page.tsx`) caches the loaded page content by default.
2. **Client-side Router Cache:** Next.js caches rendered pages in client-side memory for page transitions. Even with server cache disabled, returning to the editor page via client-side routing serves the cached client-side view of the editor from before the save was published.

**Affected File(s):** `app/page_editor_admin/page.tsx`, `app/api/homepage-content/route.ts`, `app/page_editor_admin/editor-client.tsx`

**Fix:**
1. Disable server-side caching on the editor page using `export const dynamic = 'force-dynamic'`.
2. Revalidate `/page_editor_admin` route on save in `app/api/homepage-content/route.ts` via `revalidatePath('/page_editor_admin')`.
3. Invalidate client-side Next.js router cache by calling `router.refresh()` after a successful save/publish inside `editor-client.tsx`.

> **Rule:** Any admin/editor page that loads data from a database MUST have `export const dynamic = 'force-dynamic'` to prevent stale cached data from being shown.

---

### Fix #18: Author (Full Profile) — Customizable Author Profile URL

**Problem:** The Author (Full Profile) component's link was hardcoded/incorrect or missing if the DB had null, and there was no way to change the profile link manually in the editor. Furthermore, the editor preview's default values showed placeholder info ("zen-cart.jp 編集部") rather than the active author's real data ("山本 竜也").

**Affected File(s):** `lib/puck/config.tsx`, `components/sections/AuthorProfileEditor.tsx`, `components/sections/AuthorProfile.tsx`

**Fix:**
1. Added `authorProfileUrl` to the Puck configuration fields for `AuthorProfile`.
2. Updated `defaultProps` in `lib/puck/config.tsx` to default to "山本 竜也" with role, bio, and his profile URL: `https://www.zen-cart.jp/author/%E5%B1%B1%E6%9C%AC%20%E7%AB%9C%E4%B9%9F`.
3. Updated `AuthorProfileEditor` to accept the `authorProfileUrl` prop and render the "記事一覧を見る" link in the editor preview.
4. Updated `AuthorProfile` live server component to accept `authorProfileUrl` prop from the editor, falling back to the DB URL, and then to the default URL.

---

### Fix #19: Component Layout Order Mismatch Between Editor and Frontend

**Problem:** Dragging and reordering components in the Puck editor (e.g. placing `Author (Full Profile)` at the top) did not match the live frontend layout, which hardcoded core component positions and rendered all user-added sections together in a single group further down the page.

**Affected File(s):** `app/(site)/page.tsx`

**Fix:** Rewrote `app/(site)/page.tsx` to dynamically loop through `puckData.content` and render core components (`SiteHeroSection`, `SiteFeatures`, etc.) and custom components in the exact sequence specified by the editor, keeping the editor preview and live site layout perfectly synchronized.

---

### Fix #20: Filename Mismatch for Library Components

**Problem:** The Puck editor configuration imported `LibHeroSection` and `LibTargetAudience` from `components/sections/LibHeroSection` and `components/sections/LibTargetAudience`. However, the actual template component files were named `HeroSection.tsx` and `TargetAudience.tsx`, causing compilation and build failures when copying files.

**Affected File(s):** `components/sections/HeroSection.tsx` -> `LibHeroSection.tsx`, `components/sections/TargetAudience.tsx` -> `LibTargetAudience.tsx`

**Fix:** Renamed the component files in the template directory to `LibHeroSection.tsx` and `LibTargetAudience.tsx` and updated the named function exports inside them to match the new names.

---

### Fix #21: Live DB Preview Rendering inside Visual Editor

**Problem:** Visual editor previews for several database-fetching components (`FeaturedArticleSpotlight`, `BlogGrid`, `AuthorBox`, `AuthorProfile`, `ArticleGridCategorySections`, and `HeroBlogCarousel`) rendered static skeletons or hardcoded default templates instead of fetching real data.

**Affected File(s):** `components/sections/*Editor.tsx`, `app/api/editor/data/route.ts`

**Fix:**
1. Extended the API route `/api/editor/data` to support `featured-list` and `categories-with-articles` request types.
2. Updated all `*Editor.tsx` files to import `useEditorData` and fetch real-time content from the database.

---

### Fix #22: Missing Helper Files in Template Directory

**Problem:** The template directory lacked `lib/puck/linkHelpers.ts`, `hooks/useEditorData.ts`, and `app/api/editor/data/route.ts`, resulting in broken dependencies and build errors on newly scaffolded sites.

**Affected File(s):** `lib/puck/linkHelpers.ts`, `hooks/useEditorData.ts`, `app/api/editor/data/route.ts` (Added)

**Fix:** Copied the fully tested implementation of these three helper files into the template's file structure.


