Compare commits

...

30 Commits

Author SHA1 Message Date
jaybe 0e09647f2f test(export-options): Export 옵션 최소 UI 및 extras 연동 TDD 추가
Auto PR / open-pr (push) Successful in 22s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 58s
2025-11-15 12:53:28 +09:00
jaybe 2caffe9950 test(zip): Phase5 - robots/manifest 내용 검증 및 ZIP 빌드 스모크
Auto PR / open-pr (push) Failing after 4s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 59s
2025-11-15 12:45:56 +09:00
jaybe 8757809928 test(extras): robots/manifest 오버라이드 검증 테스트 복구
Auto PR / open-pr (push) Failing after 11s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 1m9s
2025-11-15 12:44:41 +09:00
jaybe 76889080e8 feat(font): Google Fonts preconnect 추가 및 system-ui 폴백 TDD
Auto PR / open-pr (push) Successful in 20s
Auto Label PR / add-automerge-label (pull_request) Successful in 8s
CI / test (pull_request) Successful in 59s
2025-11-15 08:11:50 +09:00
jaybe 68c8c8ff15 feat(export-extras): manifest/robots 자동 생성 및 오버라이드 복구(TDD) 2025-11-15 08:11:16 +09:00
jaybe a620ff970a Merge branch 'main' of https://gitea.jaybe.dev/jaybe/landing-builder
CI / test (push) Successful in 54s
2025-11-15 00:23:32 +09:00
jaybe 524abda49c ignore 수정 2025-11-15 00:18:12 +09:00
jaybe fe62656d37 Merge pull request 'auto: PR for feat/zip-validation-phase4' (#25) from feat/zip-validation-phase4 into main 2025-11-14 15:12:40 +00:00
jaybe 8ad3a9e677 feat(zip): 루트 파일(extras) 포함 및 site.webmanifest JSON 검증 추가\n\n- favicon.ico/site.webmanifest/robots.txt ZIP 포함 지원\n- 잘못된 manifest JSON 시 에러\n- 테스트(phase4) 추가 및 통과
Auto PR / open-pr (push) Successful in 20s
Auto Label PR / add-automerge-label (pull_request) Successful in 6s
CI / test (pull_request) Successful in 55s
2025-11-15 00:11:05 +09:00
jaybe e9a87773ea Merge pull request 'auto: PR for feat/export-zip-validation' (#22) from feat/export-zip-validation into main 2025-11-14 14:53:48 +00:00
jaybe 678b081364 test(zip): 통합/메타 스냅샷 테스트 추가(exportPage+buildZip, SEO/OG/Analytics 보존)
Auto PR / open-pr (push) Successful in 21s
CI / test (pull_request) Failing after 11m23s
Auto Label PR / add-automerge-label (pull_request) Failing after 11m30s
2025-11-14 23:53:28 +09:00
jaybe 46a9c5c83d chore(ci): auto-pr.yml 충돌 해결 및 라벨 생성 금지 정책 유지 2025-11-14 23:52:16 +09:00
jaybe 6c86e1cf85 test(zip): Export ZIP 검증 강화(assets 유무/서브폴더 포함) 2025-11-14 23:45:08 +09:00
jaybe a16541e90d chore(ci): 라벨 자동 생성 로직 제거(auto-label/auto-pr) — 기존 'automerge'만 사용
Auto PR / open-pr (push) Successful in 21s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 56s
2025-11-14 23:39:05 +09:00
jaybe aaea43f2cc Merge pull request 'auto: PR for feat/sections-edge-cases' (#20) from feat/sections-edge-cases into main 2025-11-14 14:38:44 +00:00
jaybe 3f7bf3f1c8 feat(exporter): 섹션 엣지 3차 보강(FAQ 줄바꿈/Testimonials author 생략, Hero subheading 트림) + 테스트 2025-11-14 23:36:25 +09:00
jaybe bc29faf60c Merge pull request 'auto: PR for feat/sections-edge-cases' (#19) from feat/sections-edge-cases into main 2025-11-14 14:35:52 +00:00
jaybe 4b9627d4ee feat(exporter): 섹션 엣지 케이스 보강(공백 제거/줄바꿈 토큰/CTA) + 테스트 2025-11-14 23:15:05 +09:00
jaybe 26a3b43d28 Merge pull request 'auto: PR for feat/exporter-dark-contrast' (#18) from feat/exporter-dark-contrast into main 2025-11-14 13:56:11 +00:00
jaybe a476756a6c feat(exporter): 다크모드 대비 보강(a 링크/호버, 버튼/CTA, FAQ 텍스트) + 테스트
Auto PR / open-pr (push) Successful in 23s
CI / test (pull_request) Failing after 11m12s
Auto Label PR / add-automerge-label (pull_request) Failing after 11m17s
2025-11-14 22:54:34 +09:00
jaybe 6ff27295e6 chore(ci): prevent duplicate 'automerge' creation — use existing label id only (auto-label/auto-pr)
Auto PR / open-pr (push) Successful in 29s
Auto Label PR / add-automerge-label (pull_request) Successful in 6s
CI / test (pull_request) Successful in 1m10s
2025-11-14 22:33:43 +09:00
jaybe 8d5501d927 Merge pull request 'auto: PR for feat/auto-label-payload-fix' (#15) from feat/auto-label-payload-fix into main 2025-11-14 13:24:01 +00:00
jaybe cd8ae32203 chore(ci): auto-label robust ID resolution (pagination)
Auto PR / open-pr (push) Successful in 32s
Auto Label PR / add-automerge-label (pull_request) Successful in 14s
CI / test (pull_request) Successful in 57s
2025-11-14 22:22:27 +09:00
jaybe 7110db8a4a Merge pull request 'auto: PR for feat/auto-label-payload-fix' (#14) from feat/auto-label-payload-fix into main 2025-11-14 13:17:16 +00:00
jaybe 7b36e14b65 chore(ci): auto-label payload fix 재검증 ping 2025-11-14 22:15:14 +09:00
jaybe 32a760dd9a Merge pull request 'auto: PR for feat/auto-label-payload-fix' (#13) from feat/auto-label-payload-fix into main 2025-11-14 13:14:31 +00:00
jaybe 3d2f1dc8d4 chore(ci): fix auto-label payload for Gitea API (use label id object) 2025-11-14 22:12:55 +09:00
jaybe a957401a59 test
Auto PR / open-pr (push) Successful in 16s
Auto Label PR / add-automerge-label (pull_request) Successful in 5s
CI / test (pull_request) Successful in 1m0s
2025-11-14 22:05:38 +09:00
jaybe 9cc5db5d28 chore(ci): PR 오픈/동기화 시 'automerge' 라벨 자동 부여 워크플로 추가 2025-11-14 21:55:39 +09:00
jaybe 16da17e533 chore(ci): auto-merge 단계에 'automerge' 라벨 가드 확정 반영 2025-11-14 21:52:06 +09:00
23 changed files with 842 additions and 28 deletions
+37
View File
@@ -0,0 +1,37 @@
name: Auto Label PR
on:
pull_request:
types: [opened, synchronize, reopened]
jobs:
add-automerge-label:
runs-on: [macos, host]
steps:
- name: Add 'automerge' label to PR
env:
CI_TOKEN: ${{ secrets.CI_TOKEN }}
GITEA_BASE_URL: https://gitea.jaybe.dev
PR_NUMBER: ${{ github.event.pull_request.number }}
REPO: ${{ github.repository }}
run: |
set -euo pipefail
if [ -z "${CI_TOKEN:-}" ]; then
echo "CI_TOKEN not set; skipping labeling"; exit 0; fi
OWNER=$(echo "$REPO" | cut -d'/' -f1)
NAME=$(echo "$REPO" | cut -d'/' -f2)
echo "Resolving existing label id for 'automerge' in $OWNER/$NAME (no creation)"
curl -sS -o /tmp/labels.json -H "Authorization: token ${CI_TOKEN}" \
"${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/labels?limit=1000" || true
# Extract all ids whose name == automerge, prefer the smallest id (oldest)
LID=$(tr '\n' ' ' < /tmp/labels.json | \
grep -o '"id":[0-9][0-9]*[^\}]*"name":"automerge"' | \
sed -E 's/.*"id":([0-9]+).*/\1/' | sort -n | head -n1 || true)
if [ -z "${LID:-}" ]; then
echo "No existing 'automerge' label found; skipping labeling"; exit 0; fi
echo "Labeling PR #$PR_NUMBER with id $LID"
curl -sS -X POST \
-H "Content-Type: application/json" \
-H "Authorization: token ${CI_TOKEN}" \
"${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/issues/${PR_NUMBER}/labels" \
-d '{"labels":['"${LID}"']}' || true
+13 -3
View File
@@ -55,12 +55,22 @@ jobs:
done done
if [ -n "${PR_NUMBER:-}" ]; then if [ -n "${PR_NUMBER:-}" ]; then
echo "Adding 'automerge' label to PR #$PR_NUMBER" echo "Resolving existing label id for 'automerge' in $OWNER/$NAME (no creation)"
curl -sS -o /tmp/labels.json -H "Authorization: token ${CI_TOKEN}" \
"${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/labels?limit=1000" || true
LID=$(tr '\n' ' ' < /tmp/labels.json | \
grep -o '"id":[0-9][0-9]*[^\}]*"name":"automerge"' | \
sed -E 's/.*"id":([0-9]+).*/\1/' | sort -n | head -n1 || true)
if [ -n "${LID:-}" ]; then
echo "Adding 'automerge' (id=$LID) label to PR #$PR_NUMBER"
curl -sS -X POST \ curl -sS -X POST \
-H "Content-Type: application/json" \ -H "Content-Type: application/json" \
-H "Authorization: token ${CI_TOKEN}" \ -H "Authorization: token ${CI_TOKEN}" \
"${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/issues/${PR_NUMBER}/labels" \ "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/issues/${PR_NUMBER}/labels" \
-d '["automerge"]' || true -d '{"labels":['"${LID}"']}' || true
else else
echo "PR number could not be determined after retries; skipping label add" echo "No existing 'automerge' label found; skipping label add"
fi
else
echo "PR number could not be determined; skipping label add"
fi fi
+19 -2
View File
@@ -56,10 +56,27 @@ jobs:
echo "CI_TOKEN not set; skipping auto-merge"; exit 0; fi echo "CI_TOKEN not set; skipping auto-merge"; exit 0; fi
OWNER=$(echo "$REPO" | cut -d'/' -f1) OWNER=$(echo "$REPO" | cut -d'/' -f1)
NAME=$(echo "$REPO" | cut -d'/' -f2) NAME=$(echo "$REPO" | cut -d'/' -f2)
echo "Checking labels for PR #$PR_NUMBER on $OWNER/$NAME"
LABELS_JSON=$(curl -sS -X GET \
-H "Authorization: token ${CI_TOKEN}" \
"${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/issues/${PR_NUMBER}")
echo "labels payload (first 200 chars):"; echo "$LABELS_JSON" | cut -c1-200 || true
if ! echo "$LABELS_JSON" | grep -qi '"name":"automerge"'; then
echo "Label 'automerge' not present; skipping merge"; exit 0; fi
echo "Label 'automerge' present; proceeding to merge"
# ensure PR is open
PR_JSON=$(curl -sS -X GET \
-H "Authorization: token ${CI_TOKEN}" \
"${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/pulls/${PR_NUMBER}")
STATE=$(echo "$PR_JSON" | sed -n 's/.*"state":"\([^"]*\)".*/\1/p')
echo "PR state: ${STATE:-unknown}"
if [ "${STATE:-}" != "open" ]; then
echo "PR state is not open; skipping merge"; exit 0; fi
echo "Merging PR #$PR_NUMBER for $OWNER/$NAME" echo "Merging PR #$PR_NUMBER for $OWNER/$NAME"
RESP=$(curl -sS -X POST \ HTTP_CODE=$(curl -sS -o /tmp/merge_resp.json -w "%{http_code}" -X POST \
-H "Content-Type: application/json" \ -H "Content-Type: application/json" \
-H "Authorization: token ${CI_TOKEN}" \ -H "Authorization: token ${CI_TOKEN}" \
"${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/pulls/${PR_NUMBER}/merge" \ "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/pulls/${PR_NUMBER}/merge" \
-d '{"Do":"merge","MergeMessage":"auto-merge: CI green"}' || true) -d '{"Do":"merge","MergeMessage":"auto-merge: CI green"}' || true)
echo "API response: $RESP" echo "merge http: $HTTP_CODE"
echo "merge resp:"; cat /tmp/merge_resp.json || true
+1
View File
@@ -39,3 +39,4 @@ yarn-error.log*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
MAIN_PLAN.md
+56 -4
View File
@@ -6,6 +6,7 @@ import { pageSchema, type Page } from '@/lib/schema/page'
import { exportPage } from '@/lib/exporter/html' import { exportPage } from '@/lib/exporter/html'
import { AssetManager } from '@/lib/assets/assetManager' import { AssetManager } from '@/lib/assets/assetManager'
import { buildZip } from '@/lib/exporter/zip' import { buildZip } from '@/lib/exporter/zip'
import { buildExtrasForPage } from '@/lib/exporter/extras'
import type { Section } from '@/lib/state/store' import type { Section } from '@/lib/state/store'
import { createFormStore, type FormState } from '@/lib/state/formStore' import { createFormStore, type FormState } from '@/lib/state/formStore'
import FormBuilderPanel from '@/components/FormBuilderPanel' import FormBuilderPanel from '@/components/FormBuilderPanel'
@@ -47,6 +48,9 @@ export default function BuilderClientPage() {
const [ogImage, setOgImage] = useState<string>('') const [ogImage, setOgImage] = useState<string>('')
const [ga4MeasurementId, setGa4MeasurementId] = useState<string>('') const [ga4MeasurementId, setGa4MeasurementId] = useState<string>('')
const [metaPixelId, setMetaPixelId] = useState<string>('') const [metaPixelId, setMetaPixelId] = useState<string>('')
// Export Options (minimal set for tests)
const [manifestName, setManifestName] = useState<string>('')
const [robotsDisallow, setRobotsDisallow] = useState<string>('')
const [viewport, setViewport] = useState<'desktop' | 'mobile'>(() => { const [viewport, setViewport] = useState<'desktop' | 'mobile'>(() => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
try { try {
@@ -182,10 +186,23 @@ export default function BuilderClientPage() {
} }
} }
} catch {} } catch {}
}, [pageData, am]) }, [pageData, am, manifestName, robotsDisallow])
const doExport = useCallback(async () => { const doExport = useCallback(async () => {
const valid = pageSchema.parse(pageData) let valid: Page
try {
valid = pageSchema.parse(pageData)
} catch {
const fixed: Page = {
...pageData,
form: {
actionUrl: pageData.form?.actionUrl ?? '',
fields: pageData.form?.fields ?? [],
spamProtection: pageData.form?.spamProtection ?? { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
},
} as Page
valid = pageSchema.parse(fixed)
}
const exported = exportPage(valid, { assetManager: am ?? undefined }) const exported = exportPage(valid, { assetManager: am ?? undefined })
try { try {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
@@ -196,9 +213,19 @@ export default function BuilderClientPage() {
} }
} catch {} } catch {}
const assets = am ? am.toZipStructure() : {} const assets = am ? am.toZipStructure() : {}
const zipBytes = await buildZip({ html: exported.html, css: exported.css, js: exported.js, assets }) // Build minimal overrides for extras
const manifestOverride: { name?: string } = {}
if (manifestName && manifestName.trim().length > 0) manifestOverride.name = manifestName.trim()
const robotsTextOverride = (() => {
const lines = (robotsDisallow || '').split(/\n+/).map((s) => s.trim()).filter((s) => s.length > 0)
if (lines.length === 0) return undefined
const disallowLines = lines.map((l) => (l.startsWith('Disallow:') ? l : `Disallow: ${l}`))
return `User-agent: *\n${disallowLines.join('\n')}`
})()
const extras = buildExtrasForPage(valid, { robotsText: robotsTextOverride, manifest: manifestOverride })
const zipBytes = await buildZip({ html: exported.html, css: exported.css, js: exported.js, assets, extras })
download('landing.zip', zipBytes) download('landing.zip', zipBytes)
}, [pageData, am]) }, [pageData, am, manifestName, robotsDisallow])
return ( return (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
@@ -266,6 +293,31 @@ export default function BuilderClientPage() {
right={ right={
<div className="space-y-3"> <div className="space-y-3">
<button className="bg-emerald-600 text-white rounded px-4 py-2 w-full" onClick={doExport}>{t('builder.action.export')}</button> <button className="bg-emerald-600 text-white rounded px-4 py-2 w-full" onClick={doExport}>{t('builder.action.export')}</button>
<div className="border rounded p-3 space-y-2">
<h2 className="text-sm font-semibold mb-1">Export Options</h2>
<label className="block" htmlFor="ins-manifest-name">
<span className="sr-only">Manifest Name</span>
<input
id="ins-manifest-name"
aria-label="Manifest Name"
className="border rounded px-3 py-2 w-full"
value={manifestName}
onChange={(e) => setManifestName(e.target.value)}
placeholder="My App"
/>
</label>
<label className="block" htmlFor="ins-robots-disallow">
<span className="sr-only">Robots Disallow</span>
<textarea
id="ins-robots-disallow"
aria-label="Robots Disallow"
className="border rounded px-3 py-2 w-full"
value={robotsDisallow}
onChange={(e) => setRobotsDisallow(e.target.value)}
placeholder="/admin\n/secret"
/>
</label>
</div>
<div className="border rounded p-3 space-y-2"> <div className="border rounded p-3 space-y-2">
<h2 className="text-sm font-semibold mb-1">SEO / Analytics</h2> <h2 className="text-sm font-semibold mb-1">SEO / Analytics</h2>
<label className="block" htmlFor="ins-seo-title"> <label className="block" htmlFor="ins-seo-title">
+46
View File
@@ -0,0 +1,46 @@
import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import BuilderClientPage from '@/components/BuilderClientPage'
vi.mock('next-intl', () => ({
useTranslations: () => (key: string) => key,
}))
// Spy buildZip to observe extras passed in
vi.mock('@/lib/exporter/zip', async (orig) => {
const mod = await (orig as any)()
return {
...mod,
buildZip: vi.fn(async (input: any) => new Uint8Array([1,2,3]) ),
}
})
import { buildZip } from '@/lib/exporter/zip'
describe('Export Options UI - 기본', () => {
it('manifest name과 robots Disallow 입력을 통해 extras에 반영한다', async () => {
render(<BuilderClientPage />)
// open export area is already visible; fill inputs once implemented
const nameInput = await screen.findByLabelText('Manifest Name', { exact: false })
fireEvent.change(nameInput, { target: { value: 'My Landing App' } })
const robotsInput = await screen.findByLabelText('Robots Disallow', { exact: false })
fireEvent.change(robotsInput, { target: { value: '/secret\n/admin' } })
const btn = await screen.findByRole('button', { name: /builder.action.export/i })
await fireEvent.click(btn)
expect(buildZip).toHaveBeenCalled()
const arg = (buildZip as any).mock.calls[0][0]
expect(arg.extras).toBeTruthy()
const extras = arg.extras as Record<string, Uint8Array>
const robots = Buffer.from(extras['robots.txt']).toString('utf8')
expect(robots).toContain('Disallow: /secret')
expect(robots).toContain('Disallow: /admin')
const manifestStr = Buffer.from(extras['site.webmanifest']).toString('utf8')
const manifest = JSON.parse(manifestStr)
expect(manifest.name).toBe('My Landing App')
})
})
+32
View File
@@ -0,0 +1,32 @@
import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(overrides: Partial<Page> = {}): Page {
const base: Page = {
title: 'CTA Edge',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [
{ type: 'cta', props: { text: ' ', href: '#' } },
{ type: 'features', props: { items: ['One'] } },
] as Page['sections'],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
seo: { title: 't', description: 'd' },
}
return pageSchema.parse({ ...base, ...overrides })
}
describe('Exporter - CTA edge cases', () => {
it('drops CTA section when text is whitespace-only', () => {
const out = exportPage(makePage())
expect(out.html).not.toContain('<section class="cta"')
expect(out.html).not.toContain('<a class="btn-cta"')
})
it('renders CTA when text is valid after trimming', () => {
const out = exportPage(makePage({ sections: [ { type: 'cta', props: { text: ' Buy Now ', href: '#' } } ] as Page['sections'] }))
expect(out.html).toContain('<a class="btn-cta" href="#">Buy Now</a>')
})
})
@@ -0,0 +1,30 @@
import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(): Page {
return pageSchema.parse({
title: 'Dark Contrast Hover',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [
{ type: 'hero', props: { heading: 'Welcome', subheading: 'Sub', imageUrl: 'https://img.example/h.png' } },
{ type: 'cta', props: { text: 'Call', href: '#' } },
],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('Exporter - dark mode hover/cta tokens', () => {
it('adds link hover underline and ensures btn-cta readable in dark', () => {
const out = exportPage(makePage())
const css = out.css
// underline on hover for links in dark for clearer affordance
expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*a:hover\{[^}]*text-decoration:underline/i)
// btn-cta has readable foreground/background in dark
expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*\.btn-cta\{[^}]*background:[^;]+;[^}]*color:#fff/i)
})
})
+37
View File
@@ -0,0 +1,37 @@
import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(): Page {
return pageSchema.parse({
title: 'Dark Contrast',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [
{ type: 'hero', props: { heading: 'Welcome', subheading: 'Sub', imageUrl: 'https://img.example/h.png' } },
{ type: 'faq', props: { items: [{ q: 'Q', a: 'A' }] } },
{ type: 'cta', props: { text: 'Go', href: '#' } },
],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('Exporter - dark mode contrast tokens', () => {
it('includes dark mode tokens that improve contrast for links/buttons/faq text', () => {
const out = exportPage(makePage())
const css = out.css
// dark mode block exists
expect(css).toMatch(/@media \(prefers-color-scheme: dark\)/)
// link color token in dark
expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*a\{[^}]*color:#93c5fd/i)
// button keeps readable foreground/background in dark
expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*button\{[^}]*background:[^;]+;[^}]*color:#fff/i)
// faq answer text brighter in dark
expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*\.faq-a\{[^}]*color:#cbd5e1/i)
})
})
+45
View File
@@ -0,0 +1,45 @@
import { describe, it, expect } from 'vitest'
import { pageSchema, type Page } from '@/lib/schema/page'
import { buildExtrasForPage } from '@/lib/exporter/extras'
function makePage(): Page {
return pageSchema.parse({
title: 'Overrides',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img/h.png' } } ],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('extras 오버라이드', () => {
it('robots.txt Disallow 오버라이드가 반영된다', () => {
const page = makePage()
const extras = buildExtrasForPage(page, { robotsText: 'User-agent: *\nDisallow: /admin\nDisallow: /private' })
const robots = Buffer.from(extras['robots.txt']).toString('utf8')
expect(robots).toContain('User-agent: *')
expect(robots).toContain('Disallow: /admin')
expect(robots).toContain('Disallow: /private')
})
it('manifest 필드 오버라이드(name/short_name/start_url/display/theme_color)가 반영된다', () => {
const page = makePage()
const extras = buildExtrasForPage(page, {
manifest: {
name: 'My App',
short_name: 'MyApp',
start_url: '/start',
display: 'minimal-ui',
theme_color: '#123abc',
},
})
const manifestStr = Buffer.from(extras['site.webmanifest']).toString('utf8')
const manifest = JSON.parse(manifestStr)
expect(manifest.name).toBe('My App')
expect(manifest.short_name).toBe('MyApp')
expect(manifest.start_url).toBe('/start')
expect(manifest.display).toBe('minimal-ui')
expect(manifest.theme_color).toBe('#123abc')
})
})
+64
View File
@@ -0,0 +1,64 @@
import type { Page } from '@/lib/schema/page'
export type ExtrasOverrides = {
robotsText?: string
manifest?: Partial<{
name: string
short_name: string
start_url: string
display: string
theme_color: string
}>
}
function toBytes(s: string): Uint8Array {
return new TextEncoder().encode(s)
}
function buildRobots(base?: string): string {
if (base && base.trim().length > 0) return base
return 'User-agent: *\n'
}
function deriveManifest(page: Page) {
const name = page.title || 'Landing'
const short_name = name.length > 12 ? name.slice(0, 12) : name
const start_url = '/'
const display = 'standalone'
const theme_color = page.theme?.primaryColor || '#0ea5e9'
return { name, short_name, start_url, display, theme_color }
}
export function buildExtrasForPage(page: Page, overrides?: ExtrasOverrides): Record<string, Uint8Array> {
const out: Record<string, Uint8Array> = {}
// robots.txt
const robotsText = buildRobots(overrides?.robotsText)
out['robots.txt'] = toBytes(robotsText)
// site.webmanifest
const manifestBase = deriveManifest(page)
const manifestMerged = { ...manifestBase, ...(overrides?.manifest || {}) }
const manifestJson = JSON.stringify(manifestMerged, null, 2)
out['site.webmanifest'] = toBytes(manifestJson)
// Google Sheets 템플릿: actionUrl 미지정 시 포함
const action = page.form?.actionUrl?.trim()
const hasAction = !!(action && action.length > 0)
if (!hasAction) {
const code = `/**
* Google Apps Script Web App for form submissions
* - Deploy as Web App and set URL as form action if needed.
*/
function doPost(e){
// TODO: handle submission to Google Sheets
return ContentService.createTextOutput('OK')
}
`
const readme = `Google Sheets Apps Script Template\n\n1) Apps Script에서 새 프로젝트를 만들고 아래 Code.gs를 붙여넣으세요.\n2) 배포 > 웹 앱으로 배포 후 URL을 복사해 사용하세요.`
out['sheets/Code.gs'] = toBytes(code)
out['sheets/README.txt'] = toBytes(readme)
}
return out
}
+29
View File
@@ -0,0 +1,29 @@
import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(): Page {
return pageSchema.parse({
title: 'Font Opt',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img/h.png' } } ],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('폰트 최적화', () => {
it('head에 Google Fonts preconnect 링크가 포함된다', () => {
const page = makePage()
const out = exportPage(page)
expect(out.html).toContain('<link rel="preconnect" href="https://fonts.googleapis.com"')
expect(out.html).toContain('<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin')
})
it('CSS에 system-ui 폴백이 포함된다', () => {
const page = makePage()
const out = exportPage(page)
expect(out.css).toMatch(/font-family:[^;]*system-ui/i)
})
})
+31
View File
@@ -0,0 +1,31 @@
import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(overrides: Partial<Page> = {}): Page {
const base: Page = {
title: 'Hero Edge',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [
{ type: 'hero', props: { heading: 'Welcome', subheading: ' ', imageUrl: 'https://img.example/h.png' } },
] as Page['sections'],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
seo: { title: 't', description: 'd' },
}
return pageSchema.parse({ ...base, ...overrides })
}
describe('Exporter - hero edge cases', () => {
it('omits subheading when whitespace-only', () => {
const out = exportPage(makePage())
expect(out.html).toContain('<h1 id="hero-heading">Welcome</h1>')
expect(out.html).not.toMatch(/<div class="text">[\s\S]*<p>\s*<\/p>/)
})
it('trims subheading content', () => {
const out = exportPage(makePage({ sections: [ { type: 'hero', props: { heading: 'Welcome', subheading: ' Hello world ', imageUrl: 'https://img.example/h.png' } } ] as Page['sections'] }))
expect(out.html).toContain('<p>Hello world</p>')
})
})
+34 -15
View File
@@ -5,7 +5,12 @@ export type Exported = { html: string; css: string; js: string }
export type ExportOptions = { assetManager?: AssetManager } export type ExportOptions = { assetManager?: AssetManager }
function renderFaq(section: { props: { items: Array<{ q: string; a: string }> } }) { function renderFaq(section: { props: { items: Array<{ q: string; a: string }> } }) {
const items: Array<{ q: string; a: string }> = Array.isArray(section.props.items) ? section.props.items : [] const itemsRaw: Array<{ q: string; a: string }> = Array.isArray(section.props.items) ? section.props.items : []
const isBlank = (s: string | undefined | null) => !s || s.trim().length === 0
const items = itemsRaw
.map((it) => ({ q: (it.q || '').trim(), a: (it.a || '').trim() }))
// drop when both question and answer are blank
.filter((it) => !(isBlank(it.q) && isBlank(it.a)))
return ` return `
<section class="faq" aria-labelledby="faq-heading"> <section class="faq" aria-labelledby="faq-heading">
<div class="container"> <div class="container">
@@ -27,7 +32,9 @@ function renderFaq(section: { props: { items: Array<{ q: string; a: string }> }
} }
function renderFeatures(section: { props: { items: string[] } }) { function renderFeatures(section: { props: { items: string[] } }) {
const items: string[] = Array.isArray(section.props?.items) ? section.props.items : [] const items: string[] = (Array.isArray(section.props?.items) ? section.props.items : [])
.map((s) => String(s ?? '').trim())
.filter((s) => s.length > 0)
return ` return `
<section class="features" aria-labelledby="features-heading"> <section class="features" aria-labelledby="features-heading">
<div class="container"> <div class="container">
@@ -41,7 +48,9 @@ function renderFeatures(section: { props: { items: string[] } }) {
} }
function renderBenefits(section: { props: { items: string[] } }) { function renderBenefits(section: { props: { items: string[] } }) {
const items: string[] = Array.isArray(section.props?.items) ? section.props.items : [] const items: string[] = (Array.isArray(section.props?.items) ? section.props.items : [])
.map((s) => String(s ?? '').trim())
.filter((s) => s.length > 0)
return ` return `
<section class="benefits" aria-labelledby="benefits-heading"> <section class="benefits" aria-labelledby="benefits-heading">
<div class="container"> <div class="container">
@@ -55,9 +64,12 @@ function renderBenefits(section: { props: { items: string[] } }) {
} }
function renderTestimonials(section: { props: { items: Array<{ author: string; quote: string }> } }) { function renderTestimonials(section: { props: { items: Array<{ author: string; quote: string }> } }) {
const items: Array<{ author: string; quote: string }> = Array.isArray(section.props?.items) const items: Array<{ author: string; quote: string }> = (Array.isArray(section.props?.items)
? section.props.items ? section.props.items
: [] : [])
.map((it) => ({ author: (it.author || '').trim(), quote: (it.quote || '').trim() }))
// drop when both are blank
.filter((it) => !(it.author.length === 0 && it.quote.length === 0))
return ` return `
<section class="testimonials" aria-labelledby="testimonials-heading"> <section class="testimonials" aria-labelledby="testimonials-heading">
<div class="container"> <div class="container">
@@ -66,8 +78,8 @@ function renderTestimonials(section: { props: { items: Array<{ author: string; q
.map( .map(
(it) => ` (it) => `
<figure class="testimonial"> <figure class="testimonial">
<blockquote>“${escapeHtml(it.quote || '')}”</blockquote> <blockquote>“${escapeHtml(it.quote)}”</blockquote>
<figcaption>— ${escapeHtml(it.author || '')}</figcaption> ${it.author.length > 0 ? `<figcaption>— ${escapeHtml(it.author)}</figcaption>` : ''}
</figure>` </figure>`
) )
.join('')} .join('')}
@@ -77,7 +89,9 @@ function renderTestimonials(section: { props: { items: Array<{ author: string; q
} }
function renderCta(section: { props: { text: string; href?: string } }) { function renderCta(section: { props: { text: string; href?: string } }) {
const { text, href } = section.props const href = section.props.href
const text = (section.props.text || '').trim()
if (text.length === 0) return ''
return ` return `
<section class="cta" aria-labelledby="cta-heading"> <section class="cta" aria-labelledby="cta-heading">
<div class="container"> <div class="container">
@@ -96,7 +110,9 @@ const escapeHtml = (s: string) =>
.replaceAll('"', '&quot;') .replaceAll('"', '&quot;')
function renderHero(section: { props: { heading: string; subheading?: string; imageUrl: string } }, opts?: ExportOptions) { function renderHero(section: { props: { heading: string; subheading?: string; imageUrl: string } }, opts?: ExportOptions) {
const { heading, subheading } = section.props const { heading } = section.props
const subheadingRaw = section.props.subheading
const subheading = subheadingRaw ? subheadingRaw.trim() : ''
const am = opts?.assetManager const am = opts?.assetManager
const imageUrlRaw: string = section.props.imageUrl const imageUrlRaw: string = section.props.imageUrl
const imageUrl = am ? am.rewriteUrl(imageUrlRaw) : imageUrlRaw const imageUrl = am ? am.rewriteUrl(imageUrlRaw) : imageUrlRaw
@@ -105,7 +121,7 @@ function renderHero(section: { props: { heading: string; subheading?: string; im
<div class="container"> <div class="container">
<div class="text"> <div class="text">
<h1 id="hero-heading">${escapeHtml(heading)}</h1> <h1 id="hero-heading">${escapeHtml(heading)}</h1>
${subheading ? `<p>${escapeHtml(subheading)}</p>` : ''} ${subheading.length > 0 ? `<p>${escapeHtml(subheading)}</p>` : ''}
</div> </div>
<div class="media"> <div class="media">
<img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(heading)}" loading="lazy" decoding="async" /> <img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(heading)}" loading="lazy" decoding="async" />
@@ -238,6 +254,7 @@ function buildHead(page: Page) {
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href="/" /> <link rel="canonical" href="/" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<title>${escapeHtml(page.seo.title)}</title> <title>${escapeHtml(page.seo.title)}</title>
<meta name="description" content="${escapeHtml(page.seo.description)}" /> <meta name="description" content="${escapeHtml(page.seo.description)}" />
<meta property="og:title" content="${escapeHtml(page.seo.title)}" /> <meta property="og:title" content="${escapeHtml(page.seo.title)}" />
@@ -262,18 +279,20 @@ function buildCss(page: Page) {
button:focus, a:focus, input:focus, select:focus, textarea:focus{ outline: 3px solid #2563eb; outline-offset:2px } button:focus, a:focus, input:focus, select:focus, textarea:focus{ outline: 3px solid #2563eb; outline-offset:2px }
.faq-list{ list-style:none; padding:0; margin:0 } .faq-list{ list-style:none; padding:0; margin:0 }
.faq-item{ margin: .75rem 0 } .faq-item{ margin: .75rem 0 }
.faq-q{ font-size: 1rem; font-weight:600; } .faq-q{ font-size: 1rem; font-weight:600; overflow-wrap:anywhere }
.faq-a{ color:#334155 } .faq-a{ color:#334155; overflow-wrap:anywhere }
.btn-cta{ background: var(--primary); color:#fff; padding:.75rem 1rem; border-radius:.5rem; display:inline-block; text-decoration:none } .btn-cta{ background: var(--primary); color:#fff; padding:.75rem 1rem; border-radius:.5rem; display:inline-block; text-decoration:none }
.features{ background:#f8fafc } .features{ background:#f8fafc }
.features-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem } .features-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem }
.feature-item{ background:#fff; border:1px solid #e2e8f0; border-radius:.5rem; padding:.75rem } .feature-item{ background:#fff; border:1px solid #e2e8f0; border-radius:.5rem; padding:.75rem; overflow-wrap:anywhere }
.benefits-list{ list-style:none; padding:0; margin:0 }
.benefit-item{ overflow-wrap:anywhere }
.testimonials{ background:#ffffff } .testimonials{ background:#ffffff }
.testimonial{ border-left:4px solid var(--primary); padding:.5rem 1rem; margin: .75rem 0; background:#fefefe } .testimonial{ border-left:4px solid var(--primary); padding:.5rem 1rem; margin: .75rem 0; background:#fefefe }
.testimonial blockquote{ margin:0; font-style:italic; color:#1f2937 } .testimonial blockquote{ margin:0; font-style:italic; color:#1f2937; overflow-wrap:anywhere }
.testimonial figcaption{ color:#475569; margin-top:.25rem } .testimonial figcaption{ color:#475569; margin-top:.25rem }
@media (max-width: 640px){ .container{ padding: 1rem } h1{ font-size: 1.5rem } } @media (max-width: 640px){ .container{ padding: 1rem } h1{ font-size: 1.5rem } }
@media (prefers-color-scheme: dark){ body{ color:#e5e7eb; background:#0b1020 } .feature-item{ background:#0f172a; border-color:#1f2937 } } @media (prefers-color-scheme: dark){ body{ color:#e5e7eb; background:#0b1020 } .feature-item{ background:#0f172a; border-color:#1f2937 } a{ color:#93c5fd } a:hover{ text-decoration:underline } button{ background: var(--primary); color:#fff } .btn-cta{ background: var(--primary); color:#fff } .faq-a{ color:#cbd5e1 } }
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important } } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important } }
` `
} }
+32
View File
@@ -0,0 +1,32 @@
import { describe, it, expect } from 'vitest'
import { pageSchema, type Page } from '@/lib/schema/page'
import { buildExtrasForPage } from '@/lib/exporter/extras'
function makePage(): Page {
return pageSchema.parse({
title: 'Auto Extras',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img/h.png' } } ],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('extras 자동 생성', () => {
it('robots.txt와 site.webmanifest가 extras에 포함된다', () => {
const page = makePage()
const extras = buildExtrasForPage(page)
const keys = Object.keys(extras)
expect(keys).toContain('robots.txt')
expect(keys).toContain('site.webmanifest')
const robots = Buffer.from(extras['robots.txt']).toString('utf8')
expect(robots).toContain('User-agent: *')
const manifestStr = Buffer.from(extras['site.webmanifest']).toString('utf8')
const manifest = JSON.parse(manifestStr)
expect(manifest.start_url).toBeDefined()
expect(manifest.display).toBeDefined()
})
})
+57
View File
@@ -0,0 +1,57 @@
import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(overrides: Partial<Page> = {}): Page {
const base: Page = {
title: 'Edge',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [
{ type: 'features', props: { items: ['One', ' ', ' ', 'Two'] } },
{ type: 'benefits', props: { items: ['A', ' ', ' ', 'B'] } },
{ type: 'faq', props: { items: [
{ q: ' ', a: ' ' },
{ q: 'Valid Q', a: ' ' },
{ q: 'Another', a: 'Answer' },
] } },
{ type: 'testimonials', props: { items: [
{ author: ' ', quote: ' ' },
{ author: 'Jane', quote: ' Great product ' },
] } },
] as Page['sections'],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
seo: { title: 't', description: 'd' },
}
return pageSchema.parse({ ...base, ...overrides })
}
describe('Exporter - sections edge cases', () => {
it('filters out whitespace-only items and keeps valid ones', () => {
const out = exportPage(makePage())
const html = out.html
// features: only One, Two
expect(html).toContain('<li class="feature-item">One</li>')
expect(html).toContain('<li class="feature-item">Two</li>')
expect(html).not.toMatch(/<li class="feature-item"><\/li>/)
// benefits: only A, B
expect(html).toContain('<li class="benefit-item">A</li>')
expect(html).toContain('<li class="benefit-item">B</li>')
// faq: drop fully empty, keep items even if answer empty when question is valid
expect(html).toContain('<h3 class="faq-q">Valid Q</h3>')
// testimonials: drop fully empty, keep trimmed quote
expect(html).toContain('<blockquote>“Great product”</blockquote>')
})
it('adds word-break tokens to avoid overflow for long words', () => {
const out = exportPage(makePage())
const css = out.css
expect(css).toMatch(/\.feature-item\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
expect(css).toMatch(/\.benefit-item\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
expect(css).toMatch(/\.testimonial blockquote\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
})
})
+40
View File
@@ -0,0 +1,40 @@
import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(overrides: Partial<Page> = {}): Page {
const base: Page = {
title: 'Edge P3',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [
{ type: 'faq', props: { items: [ { q: 'VeryVeryVeryVeryVeryLongWordWithoutSpaces', a: 'AnotherSuperLongUnbreakableWord' } ] } },
{ type: 'testimonials', props: { items: [
{ author: ' ', quote: 'Great!' },
{ author: 'Alice', quote: 'Nice' },
] } },
] as Page['sections'],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
seo: { title: 't', description: 'd' },
}
return pageSchema.parse({ ...base, ...overrides })
}
describe('Exporter - phase3 edge cases', () => {
it('omits testimonial author line when author is blank', () => {
const out = exportPage(makePage())
const html = out.html
// First item author blank -> no figcaption for that blockquote
expect(html).toMatch(/<blockquote>“Great!\”<\/blockquote>[\s\S]*?<\/figure>/)
// Ensure the next item with author renders figcaption
expect(html).toMatch(/<figcaption>— Alice<\/figcaption>/)
})
it('adds word-break/overflow-wrap for FAQ q/a to avoid overflow', () => {
const out = exportPage(makePage())
const css = out.css
expect(css).toMatch(/\.faq-q\{[\s\S]*(?:overflow-wrap:anywhere|word-break:break-word)/i)
expect(css).toMatch(/\.faq-a\{[\s\S]*(?:overflow-wrap:anywhere|word-break:break-word)/i)
})
})
+18
View File
@@ -5,6 +5,8 @@ export type BuildZipInput = {
css: string css: string
js: string js: string
assets?: Record<string, Uint8Array> assets?: Record<string, Uint8Array>
// root-level extra files like favicon.ico, site.webmanifest, robots.txt
extras?: Record<string, Uint8Array>
} }
export async function buildZip(input: BuildZipInput): Promise<Uint8Array> { export async function buildZip(input: BuildZipInput): Promise<Uint8Array> {
@@ -19,6 +21,22 @@ export async function buildZip(input: BuildZipInput): Promise<Uint8Array> {
zip.file(path, buf as unknown as Buffer) zip.file(path, buf as unknown as Buffer)
} }
} }
if (input.extras) {
// validate manifest if present
if (Object.prototype.hasOwnProperty.call(input.extras, 'site.webmanifest')) {
try {
const manifestBytes = input.extras['site.webmanifest']
const manifestStr = Buffer.from(manifestBytes).toString('utf8')
JSON.parse(manifestStr)
} catch {
throw new Error('Invalid site.webmanifest JSON')
}
}
for (const [path, bytes] of Object.entries(input.extras)) {
const buf = Buffer.from(bytes)
zip.file(path, buf as unknown as Buffer)
}
}
const content = await zip.generateAsync({ type: 'uint8array' }) const content = await zip.generateAsync({ type: 'uint8array' })
return content return content
} }
@@ -0,0 +1,53 @@
import { describe, it, expect } from 'vitest'
import JSZip from 'jszip'
import { exportPage } from '@/lib/exporter/html'
import { buildZip } from '@/lib/exporter/zip'
import { AssetManager } from '@/lib/assets/assetManager'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePageWithLocalAsset(): { page: Page; am: AssetManager } {
const am = new AssetManager({ maxBytes: 1024 * 1024, allowedExts: ['png','svg','jpg','jpeg','webp'] })
// simulate adding a local image and referencing it by original name via local: prefix
const bytes = new Uint8Array([7,8,9])
// add as "hero.png"
am.add({ name: 'hero.png', type: 'image/png', bytes })
const base: Page = pageSchema.parse({
title: 'Integrated ZIP',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [
{ type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'local:hero.png' } },
{ type: 'cta', props: { text: 'Go', href: '#' } },
],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
analytics: { ga4MeasurementId: 'G-TEST', metaPixelId: '', customHeadHtml: '' },
seo: { title: 't', description: 'd' },
})
return { page: base, am }
}
describe('Export ZIP 통합 검증', () => {
it('exportPage 출력 + buildZip 결과에서 assets 경로/메타가 보존된다', async () => {
const { page, am } = makePageWithLocalAsset()
const out = exportPage(page, { assetManager: am })
const assets = am.toZipStructure()
const zipBytes = await buildZip({ html: out.html, css: out.css, js: out.js, assets })
const zip = await JSZip.loadAsync(zipBytes)
const names = Object.keys(zip.files)
// assets 파일이 존재해야 함
const assetKey = Object.keys(assets)[0]
expect(names).toContain(assetKey)
// index.html에 canonical/meta/ga4 스니펫 보존
const html = await zip.files['index.html'].async('string')
expect(html).toMatch(/<link rel="canonical" href="\//)
expect(html).toMatch(/<meta name="description" content="d"/)
expect(html).toMatch(/gtag\('config', 'G-TEST'\)/)
// hero 이미지가 재작성된 경로를 사용한다
const match = html.match(/<img[^>]*src="([^"]+)"/)
expect(match && match[1]).toBe(assetKey)
})
})
+28
View File
@@ -0,0 +1,28 @@
import { describe, it, expect } from 'vitest'
import JSZip from 'jszip'
import { buildZip } from '@/lib/exporter/zip'
describe('Export ZIP 메타 보존 검증', () => {
it('index.html의 SEO/OG/Analytics 메타가 그대로 보존된다', async () => {
const html = `<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<link rel="canonical" href="/" />
<meta name="description" content="desc" />
<meta property="og:title" content="OT" />
<meta property="og:description" content="OD" />
<script>window.dataLayer=[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());</script>
</head><body>ok</body></html>`
const css = 'body{color:#222}'
const js = 'console.log("ok")'
const zipBytes = await buildZip({ html, css, js, assets: {} })
const zip = await JSZip.loadAsync(zipBytes)
const htmlContent = await zip.files['index.html'].async('string')
expect(htmlContent).toMatch(/<link rel="canonical" href="\//)
expect(htmlContent).toMatch(/<meta name="description" content="desc"/)
expect(htmlContent).toMatch(/<meta property="og:title" content="OT"/)
expect(htmlContent).toMatch(/<meta property="og:description" content="OD"/)
expect(htmlContent).toMatch(/window\.dataLayer=\[\];/)
})
})
@@ -0,0 +1,53 @@
import { describe, it, expect } from 'vitest'
import JSZip from 'jszip'
import { buildZip } from '@/lib/exporter/zip'
import type { BuildZipInput } from '@/lib/exporter/zip'
const TE = new TextEncoder()
describe('Export ZIP 검증 강화 4차: 루트 파일(favicon/manifest/robots)', () => {
it('루트 파일들을 포함한다: favicon.ico / site.webmanifest / robots.txt', async () => {
const manifest = {
name: 'Landing Builder',
short_name: 'LB',
start_url: '/',
display: 'standalone',
icons: [{ src: '/favicon.png', sizes: '512x512', type: 'image/png' }],
}
const input: BuildZipInput = {
html: '<!DOCTYPE html><html><head><title>a</title></head><body>ok</body></html>',
css: 'body{color:#111}',
js: 'console.log("ok")',
assets: {},
extras: {
'favicon.ico': new Uint8Array([0, 1, 2, 3]),
'site.webmanifest': TE.encode(JSON.stringify(manifest)),
'robots.txt': TE.encode('User-agent: *\nDisallow:'),
},
}
const zipBytes = await buildZip(input)
const zip = await JSZip.loadAsync(zipBytes)
const names = Object.keys(zip.files)
expect(names).toContain('favicon.ico')
expect(names).toContain('site.webmanifest')
expect(names).toContain('robots.txt')
const robots = await zip.files['robots.txt'].async('string')
expect(robots).toMatch(/User-agent: \*/)
const parsed = JSON.parse(await zip.files['site.webmanifest'].async('string'))
expect(parsed.name).toBe('Landing Builder')
expect(parsed.icons[0].type).toBe('image/png')
})
it('잘못된 manifest JSON이면 실패한다', async () => {
const badInput: BuildZipInput = {
html: '<!DOCTYPE html><html><head><title>a</title></head><body>ok</body></html>',
css: 'body{color:#111}',
js: 'console.log("ok")',
extras: { 'site.webmanifest': TE.encode('{ invalid json') },
}
await expect(buildZip(badInput)).rejects.toThrow()
})
})
@@ -0,0 +1,39 @@
import { describe, it, expect } from 'vitest'
import { buildZip } from '@/lib/exporter/zip'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
import { buildExtrasForPage } from '@/lib/exporter/extras'
function makePage(): Page {
return pageSchema.parse({
title: 'ZIP Phase5',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img/h.png' } } ],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('ZIP 검증 Phase5', () => {
it('robots.txt 베이스라인과 site.webmanifest JSON 파싱 검증', async () => {
const page = makePage()
const extras = buildExtrasForPage(page)
// baseline robots
const robots = Buffer.from(extras['robots.txt']).toString('utf8')
expect(robots).toContain('User-agent: *')
// manifest JSON parseable
const manifestStr = Buffer.from(extras['site.webmanifest']).toString('utf8')
const manifest = JSON.parse(manifestStr)
expect(manifest && typeof manifest === 'object').toBe(true)
expect(manifest.start_url).toBeDefined()
expect(manifest.display).toBeDefined()
// ZIP build should succeed
const out = exportPage(page)
const zipBytes = await buildZip({ html: out.html, css: out.css, js: out.js, assets: {}, extras })
expect(zipBytes.byteLength).toBeGreaterThan(0)
})
})
+44
View File
@@ -0,0 +1,44 @@
import { describe, it, expect } from 'vitest'
import JSZip from 'jszip'
import { buildZip } from '@/lib/exporter/zip'
const TE = new TextEncoder()
describe('Export ZIP 검증 강화', () => {
it('assets가 비어있을 때 index.html/styles.css/app.js만 포함한다', async () => {
const zipBytes = await buildZip({
html: '<!DOCTYPE html><html><head><title>a</title></head><body>ok</body></html>',
css: 'body{color:#111}',
js: 'console.log("ok")',
assets: {},
})
const zip = await JSZip.loadAsync(zipBytes)
const names = Object.keys(zip.files).sort()
expect(names).toEqual(['app.js','index.html','styles.css'])
})
it('assets가 있으면 모든 파일을 그대로 포함한다(서브폴더 포함)', async () => {
const assets = {
'assets/img/logo.png': new Uint8Array([0,1,2,3]),
'assets/svg/icon.svg': TE.encode('<svg></svg>'),
'assets/fonts/inter.woff2': new Uint8Array([4,5,6]),
}
const zipBytes = await buildZip({
html: '<!DOCTYPE html><html><head><title>a</title></head><body>ok</body></html>',
css: 'body{color:#111}',
js: 'console.log("ok")',
assets,
})
const zip = await JSZip.loadAsync(zipBytes)
const names = Object.keys(zip.files)
expect(names).toContain('index.html')
expect(names).toContain('styles.css')
expect(names).toContain('app.js')
expect(names).toContain('assets/img/logo.png')
expect(names).toContain('assets/svg/icon.svg')
expect(names).toContain('assets/fonts/inter.woff2')
const logo = await zip.files['assets/img/logo.png'].async('uint8array')
expect(Array.from(logo)).toEqual([0,1,2,3])
})
})