Compare commits

..

31 Commits

Author SHA1 Message Date
jaybe 7bf16bfeee Phase7-PerfSEO: Export Options 문서 업데이트 (robots meta, font preload, image 옵션)
Auto PR / open-pr (push) Successful in 15s
Auto Label PR / add-automerge-label (pull_request) Successful in 3s
CI / test (pull_request) Successful in 1m15s
2025-11-16 10:55:42 +09:00
jaybe 0eb056e6b5 Phase7-PerfSEO: robots meta UI 연동(TDD) 및 Preview/Export 반영 2025-11-16 04:12:46 +09:00
jaybe ed7f6189eb Phase7-PerfSEO: 폰트 preload 옵션 및 이미지 loading/decoding UI 연동 TDD/구현 완료 2025-11-16 04:10:52 +09:00
jaybe 689edeaf24 feat(perf-seo): exporter에 robots 메타 옵션 추가(TDD) 2025-11-15 15:18:23 +09:00
jaybe 13439a384f test(assets): grouped 경로 전략 검증 테스트 추가
Auto PR / open-pr (push) Successful in 21s
Auto Label PR / add-automerge-label (pull_request) Successful in 8s
CI / test (pull_request) Successful in 1m12s
2025-11-15 15:14:19 +09:00
jaybe a5b0f07f2a fix(ci): 누락 파일 추가 및 AssetManager 경로 전략 변경사항 포함
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 1m17s
2025-11-15 15:01:17 +09:00
jaybe 7e7eb1be15 feat(phase6): 자산 경로 구조 옵션(UI/미리보기/Export) + 폰트 preconnect 토글 + extras 자동 보강(robots/manifest) + 문서화
Auto PR / open-pr (push) Failing after 13s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Failing after 35s
2025-11-15 14:28:05 +09:00
jaybe 2d6afaf665 feat(font): Export Options에 폰트 preconnect 토글 추가 및 exporter 옵션 연동
Auto PR / open-pr (push) Failing after 14s
Auto Label PR / add-automerge-label (pull_request) Successful in 8s
CI / test (pull_request) Failing after 36s
2025-11-15 14:22:41 +09:00
jaybe 31eaa9343a feat(export-options): Google Sheets 템플릿 모드 옵션(UI+extras) 추가
Auto PR / open-pr (push) Successful in 22s
Auto Label PR / add-automerge-label (pull_request) Successful in 8s
CI / test (pull_request) Failing after 33s
2025-11-15 13:57:42 +09:00
jaybe 032372bb01 chore(assets): assets.json에 group/referencedAt 추가 및 AssetManager 참조 추적
Auto PR / open-pr (push) Successful in 26s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 59s
2025-11-15 13:44:23 +09:00
jaybe 176568f976 feat(assets): ZIP에 assets.json 포함 및 메타데이터(integrity 포함) 생성
Auto PR / open-pr (push) Successful in 23s
Auto Label PR / add-automerge-label (pull_request) Successful in 8s
CI / test (pull_request) Successful in 1m14s
2025-11-15 13:38:19 +09:00
jaybe 6a9a7939b2 chore: start Export Options UI polish (TDD)
Auto PR / open-pr (push) Successful in 23s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 1m14s
2025-11-15 13:25:32 +09:00
jaybe 894acbb6a1 Merge remote-tracking branch 'origin/main' into feat/manifest-robots-restore
Auto PR / open-pr (push) Successful in 18s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 1m16s
2025-11-15 13:24:32 +09:00
jaybe 899a1ba1a6 Merge pull request 'auto: PR for feat/manifest-robots-restore' (#55) from feat/manifest-robots-restore into main
CI / test (push) Successful in 57s
Auto PR / open-pr (push) Successful in 20s
Auto Label PR / add-automerge-label (pull_request) Successful in 9s
CI / test (pull_request) Successful in 1m2s
2025-11-15 04:09:15 +00:00
jaybe f385966f87 fix(exporter/head): manifest 링크와 theme-color 메타 추가로 테스트 실패 수정
Auto PR / open-pr (push) Failing after 10s
Auto Label PR / add-automerge-label (pull_request) Successful in 6s
CI / test (pull_request) Successful in 1m11s
2025-11-15 13:07:40 +09:00
jaybe c4d46a5de3 Merge remote-tracking branch 'origin/main' into feat/manifest-robots-restore
Auto PR / open-pr (push) Failing after 12s
Auto Label PR / add-automerge-label (pull_request) Successful in 8s
CI / test (pull_request) Failing after 36s
2025-11-15 12:59:19 +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 39c64e3acd Merge pull request 'auto: PR for feat/export-options-ui' (#43) from feat/export-options-ui into main
CI / test (push) Successful in 50s
2025-11-14 23:15:56 +00:00
jaybe df5786e418 Merge pull request 'auto: PR for feat/export-options-overrides' (#42) from feat/export-options-overrides into main
CI / test (push) Waiting to run
2025-11-14 23:13:57 +00: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 9b8fbd6360 feat(export-ui): Display 드롭다운/테마컬러 HEX 검증 반영(TDD)
Auto PR / open-pr (push) Successful in 23s
CI / test (pull_request) Successful in 1m25s
Auto Label PR / add-automerge-label (pull_request) Failing after 13m45s
2025-11-15 07:37:42 +09:00
jaybe 8ada2d1947 feat(export-ui): Export 옵션 UI 추가(manifest short_name/start_url/display/theme_color, robots Disallow) 및 TDD 2025-11-15 02:35:52 +09:00
jaybe 1a405a54fa feat(export): extras 오버라이드 지원(robots/manifest) 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 1m27s
2025-11-15 02:26:54 +09:00
jaybe 5c23cf3873 feat(seo): theme-color 메타 추가 및 hero 이미지 width/height로 CLS 개선(TDD)
Auto PR / open-pr (push) Successful in 19s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 55s
2025-11-15 02:20:47 +09:00
jaybe cc2b3039a3 feat(head): manifest/ico 링크 반영 및 테스트 추가(manifest.link.tokens)
Auto PR / open-pr (push) Successful in 21s
Auto Label PR / add-automerge-label (pull_request) Successful in 8s
CI / test (pull_request) Successful in 55s
2025-11-15 02:15:44 +09:00
jaybe 0561c5d63c test(zip): ZIP 검증 강화 5차 - extras(robots.txt/manifest) 내용 검증 추가
Auto PR / open-pr (push) Successful in 19s
Auto Label PR / add-automerge-label (pull_request) Successful in 6s
CI / test (pull_request) Successful in 58s
2025-11-15 01:41:54 +09:00
jaybe e6c897a863 feat(export): site.webmanifest/robots.txt 자동 생성 및 extras 포함 (TDD)
Auto PR / open-pr (push) Successful in 19s
Auto Label PR / add-automerge-label (pull_request) Successful in 7s
CI / test (pull_request) Successful in 57s
2025-11-15 01:26:04 +09:00
jaybe 39318dd40d feat(export): 앱 Export 흐름에 extras 통합(buildExtrasForPage → buildZip)
Auto PR / open-pr (push) Successful in 19s
Auto Label PR / add-automerge-label (pull_request) Successful in 6s
CI / test (pull_request) Successful in 54s
2025-11-15 01:21:02 +09:00
jaybe be80f9339b feat(export): Google Sheets Apps Script 템플릿 extras 추가\n\n- actionUrl 미지정 시 sheets/Code.gs, README.txt 포함\n- buildExtrasForPage 유닛/통합 테스트 추가 2025-11-15 01:00:49 +09:00
27 changed files with 1279 additions and 24 deletions
+66
View File
@@ -34,3 +34,69 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
## Export Bundle (Landing ZIP)
The Builder can export a production-ready ZIP that contains:
- index.html, styles.css, app.js
- assets/ hashed assets (optionally grouped by type)
- site.webmanifest, robots.txt
- Optional: sheets/ (Google Apps Script template)
- Metadata files: assets.json, assets.index.json
### Export Options UI
- Manifest
- Name, Short Name, Start URL, Display (dropdown), Theme Color (HEX only)
- Robots
- Disallow lines (textarea). Each line becomes a `Disallow:` rule.
- Robots Meta: `<meta name="robots" content="...">` value (e.g. `noindex, nofollow`). Empty disables the tag.
- Google Sheets Template Mode
- Auto: include when `form.actionUrl` is empty
- Include: always include
- Exclude: never include
- Font Optimization
- Preconnect: toggle inclusion of Google Fonts preconnect links.
- Preload: preload & load Google Fonts stylesheet with `media="print" onload` pattern.
- Image Options
- Loading: `lazy` (default) or `eager` for `<img loading>`
- Decoding: `async` (default) or `sync` for `<img decoding>`
### site.webmanifest and robots.txt
- `site.webmanifest` is derived from page data; Export Options can override fields.
- `robots.txt` defaults to a permissive header and adds `Disallow` lines from UI.
- `meta name="robots"` can be injected via Export Options and is written in `<head>`.
### Asset paths and grouping
- AssetManager writes files to `assets/` with stable hash-based filenames.
- Path strategy can be configured:
- `flat` (default): `assets/<hash>.<ext>`
- `grouped`: `assets/images/...`, `assets/fonts/...`, `assets/other/...`
### assets.json
Structured metadata for all assets. Example fields per entry:
- originalName, mimeType, size
- hash8, ext, zipPath
- integrity: `sha256-<base64>` (placeholder, base64 of bytes)
- group: `images|fonts|other`
- referencedAt: array of `local:<originalName>` when referenced by the page
### assets.index.json
Simple index to quickly find assets by group:
- images: string[] of zip paths
- fonts: string[] of zip paths
- other: string[] of zip paths
### Google Sheets template (optional)
- When included, ZIP contains:
- `sheets/Code.gs`: minimal Apps Script handler (Web App)
- `sheets/README.txt`: setup instructions
- Inclusion is controlled by `sheetsMode` (Auto/Include/Exclude) and `form.actionUrl` in Auto mode.
@@ -0,0 +1,53 @@
import { describe, it, expect, beforeEach } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { NextIntlClientProvider } from 'next-intl'
import BuilderClientPage from '@/components/BuilderClientPage'
declare global {
interface Window { __exportPreview?: () => { html: string } }
}
describe('BuilderClientPage 이미지 옵션 UI 연동', () => {
beforeEach(() => {
// JSDOM 환경 초기화용
window.__exportPreview = undefined
})
it('기본값으로 img에 loading="lazy" decoding="async"가 포함된다', async () => {
render(
<NextIntlClientProvider locale="en" messages={{}}>
<BuilderClientPage />
</NextIntlClientProvider>
)
// Ensure a hero section with image is present
const addHeroBtn = screen.getByTestId('btn-add-hero')
addHeroBtn.click()
expect(typeof window.__exportPreview).toBe('function')
await waitFor(() => {
const out = window.__exportPreview!()
expect(out.html).toContain('loading="lazy"')
expect(out.html).toContain('decoding="async"')
})
})
it('UI에서 eager/sync로 변경 시 preview HTML에 반영된다', async () => {
render(
<NextIntlClientProvider locale="en" messages={{}}>
<BuilderClientPage />
</NextIntlClientProvider>
)
const addHeroBtn = screen.getByTestId('btn-add-hero')
addHeroBtn.click()
const loadingSelect = screen.getByLabelText('Image Loading') as HTMLSelectElement
const decodingSelect = screen.getByLabelText('Image Decoding') as HTMLSelectElement
fireEvent.change(loadingSelect, { target: { value: 'eager' } })
fireEvent.change(decodingSelect, { target: { value: 'sync' } })
await waitFor(() => {
const out = window.__exportPreview!()
expect(out.html).toContain('loading="eager"')
expect(out.html).toContain('decoding="sync"')
})
})
})
@@ -0,0 +1,49 @@
import { describe, it, expect, beforeEach } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { NextIntlClientProvider } from 'next-intl'
import BuilderClientPage from '@/components/BuilderClientPage'
declare global {
interface Window { __exportPreview?: () => { html: string } }
}
describe('BuilderClientPage robots meta UI 연동', () => {
beforeEach(() => {
window.__exportPreview = undefined
})
it('기본값에서는 robots meta가 존재하지 않는다', async () => {
render(
<NextIntlClientProvider locale="en" messages={{}}>
<BuilderClientPage />
</NextIntlClientProvider>
)
// Hero 추가(렌더 내용 명확화)
const addHeroBtn = screen.getByTestId('btn-add-hero')
addHeroBtn.click()
expect(typeof window.__exportPreview).toBe('function')
await waitFor(() => {
const out = window.__exportPreview!()
expect(out.html).not.toContain('<meta name="robots"')
})
})
it('UI 입력값이 head robots meta에 반영된다', async () => {
render(
<NextIntlClientProvider locale="en" messages={{}}>
<BuilderClientPage />
</NextIntlClientProvider>
)
const addHeroBtn = screen.getByTestId('btn-add-hero')
addHeroBtn.click()
const robotsInput = screen.getByLabelText('Robots Meta') as HTMLInputElement
fireEvent.change(robotsInput, { target: { value: 'noindex, nofollow' } })
await waitFor(() => {
const out = window.__exportPreview!()
expect(out.html).toContain('<meta name="robots" content="noindex, nofollow"')
})
})
})
+261 -8
View File
@@ -6,6 +6,9 @@ import { pageSchema, type Page } from '@/lib/schema/page'
import { exportPage } from '@/lib/exporter/html'
import { AssetManager } from '@/lib/assets/assetManager'
import { buildZip } from '@/lib/exporter/zip'
import { buildExtrasForPage } from '@/lib/exporter/extras'
import { buildAssetsMetadata } from '@/lib/exporter/assets.meta'
import { buildAssetsIndex } from '@/lib/exporter/assets.index'
import type { Section } from '@/lib/state/store'
import { createFormStore, type FormState } from '@/lib/state/formStore'
import FormBuilderPanel from '@/components/FormBuilderPanel'
@@ -47,6 +50,21 @@ export default function BuilderClientPage() {
const [ogImage, setOgImage] = useState<string>('')
const [ga4MeasurementId, setGa4MeasurementId] = useState<string>('')
const [metaPixelId, setMetaPixelId] = useState<string>('')
// Export Options (manifest/robots overrides)
const [manifestName, setManifestName] = useState<string>('')
const [manifestShortName, setManifestShortName] = useState<string>('')
const [manifestStartUrl, setManifestStartUrl] = useState<string>('')
const [manifestDisplay, setManifestDisplay] = useState<string>('')
const [manifestThemeColor, setManifestThemeColor] = useState<string>('')
const [robotsDisallow, setRobotsDisallow] = useState<string>('')
const [robotsMeta, setRobotsMeta] = useState<string>('')
const [sheetsMode, setSheetsMode] = useState<'auto' | 'include' | 'exclude'>('auto')
const [assetPathStrategy, setAssetPathStrategy] = useState<'flat' | 'grouped'>('flat')
// Font optimization: allow toggling Google Fonts preconnect links in exported HTML
const [fontPreconnect, setFontPreconnect] = useState<boolean>(true)
const [fontPreload, setFontPreload] = useState<boolean>(false)
const [imageLoading, setImageLoading] = useState<'lazy' | 'eager'>('lazy')
const [imageDecoding, setImageDecoding] = useState<'async' | 'sync'>('async')
const [viewport, setViewport] = useState<'desktop' | 'mobile'>(() => {
if (typeof window !== 'undefined') {
try {
@@ -165,9 +183,22 @@ export default function BuilderClientPage() {
try {
if (typeof window !== 'undefined') {
const w = window as unknown as { __exportPreview?: () => { html: string; css: string; js: string } }
// Build an effective AssetManager based on selected path strategy
const buildEffectiveAm = (): AssetManager | undefined => {
const base = am ?? undefined
if (!base) return undefined
if (assetPathStrategy === 'flat') return base
const clone = new AssetManager({ maxBytes: 10 * 1024 * 1024, allowedExts: ['png', 'jpg', 'jpeg', 'webp', 'svg'], pathStrategy: assetPathStrategy })
for (const ref of base.list()) {
// re-add to apply new path strategy and recreate byOriginal mapping
clone.add({ name: ref.originalName, type: ref.mimeType, bytes: ref.bytes })
}
return clone
}
w.__exportPreview = () => {
try {
return exportPage(pageSchema.parse(pageData), { assetManager: am ?? undefined })
// Export preview with current optimization options
return exportPage(pageSchema.parse(pageData), { assetManager: buildEffectiveAm(), fontPreconnect, fontPreload, imageLoading, imageDecoding, robotsMeta: robotsMeta.trim() || undefined })
} catch {
const fixed: Page = {
...pageData,
@@ -177,16 +208,41 @@ export default function BuilderClientPage() {
spamProtection: pageData.form?.spamProtection ?? { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
},
}
return exportPage(pageSchema.parse(fixed), { assetManager: am ?? undefined })
return exportPage(pageSchema.parse(fixed), { assetManager: buildEffectiveAm(), fontPreconnect, fontPreload, imageLoading, imageDecoding, robotsMeta: robotsMeta.trim() || undefined })
}
}
}
} catch {}
}, [pageData, am])
}, [pageData, am, fontPreconnect, fontPreload, imageLoading, imageDecoding, robotsMeta, assetPathStrategy])
const doExport = useCallback(async () => {
const valid = pageSchema.parse(pageData)
const exported = exportPage(valid, { assetManager: am ?? undefined })
let valid = pageData as 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)
}
// Build an effective AssetManager based on selected path strategy
const buildEffectiveAm = (): AssetManager | undefined => {
const base = am ?? undefined
if (!base) return undefined
if (assetPathStrategy === 'flat') return base
const clone = new AssetManager({ maxBytes: 10 * 1024 * 1024, allowedExts: ['png', 'jpg', 'jpeg', 'webp', 'svg'], pathStrategy: assetPathStrategy })
for (const ref of base.list()) {
clone.add({ name: ref.originalName, type: ref.mimeType, bytes: ref.bytes })
}
return clone
}
// Respect font, image, robots meta optimization toggles when exporting
const exported = exportPage(valid, { assetManager: buildEffectiveAm(), fontPreconnect, fontPreload, imageLoading, imageDecoding, robotsMeta: robotsMeta.trim() || undefined })
try {
if (typeof window !== 'undefined') {
const w = window as unknown as { __captureExport?: boolean; __lastExport?: { html: string; css: string; js: string } }
@@ -195,10 +251,45 @@ export default function BuilderClientPage() {
}
}
} catch {}
const assets = am ? am.toZipStructure() : {}
const zipBytes = await buildZip({ html: exported.html, css: exported.css, js: exported.js, assets })
const effectiveAm = (() => {
const base = am ?? undefined
if (!base) return undefined
if (assetPathStrategy === 'flat') return base
const clone = new AssetManager({ maxBytes: 10 * 1024 * 1024, allowedExts: ['png', 'jpg', 'jpeg', 'webp', 'svg'], pathStrategy: assetPathStrategy })
for (const ref of base.list()) {
clone.add({ name: ref.originalName, type: ref.mimeType, bytes: ref.bytes })
}
return clone
})()
const assets = effectiveAm ? effectiveAm.toZipStructure() : {}
// Build overrides from UI options
const manifestOverrideBase: Record<string, string> = {}
if (manifestName && manifestName.trim().length > 0) manifestOverrideBase.name = manifestName.trim()
if (manifestShortName && manifestShortName.trim().length > 0) manifestOverrideBase.short_name = manifestShortName.trim()
if (manifestStartUrl && manifestStartUrl.trim().length > 0) manifestOverrideBase.start_url = manifestStartUrl.trim()
if (manifestDisplay && manifestDisplay.trim().length > 0) manifestOverrideBase.display = manifestDisplay.trim()
if (manifestThemeColor && manifestThemeColor.trim().length > 0) {
const v = manifestThemeColor.trim()
const hexOk = /^#([0-9a-fA-F]{3}){1,2}$/.test(v)
if (hexOk) {
manifestOverrideBase.theme_color = v
}
}
const manifestOverride = Object.keys(manifestOverrideBase).length > 0 ? (manifestOverrideBase as { name?: string; short_name?: string; start_url?: string; display?: string; theme_color?: string }) : undefined
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 baseExtras = buildExtrasForPage(valid, { robotsText: robotsTextOverride, manifest: manifestOverride, sheetsMode })
const extras: Record<string, Uint8Array> = {
...baseExtras,
...(am ? { 'assets.json': buildAssetsMetadata(am), 'assets.index.json': buildAssetsIndex(am) } : {}),
}
const zipBytes = await buildZip({ html: exported.html, css: exported.css, js: exported.js, assets, extras })
download('landing.zip', zipBytes)
}, [pageData, am])
}, [pageData, am, manifestName, manifestShortName, manifestStartUrl, manifestDisplay, manifestThemeColor, robotsDisallow, sheetsMode, fontPreconnect, fontPreload, imageLoading, imageDecoding, robotsMeta, assetPathStrategy])
return (
<div className="p-6 space-y-6">
@@ -261,6 +352,168 @@ export default function BuilderClientPage() {
onSelect={(i) => setSelectedIndex(i)}
/>
</div>
<div className="border rounded p-3 space-y-2">
<h2 className="text-sm font-semibold mb-1">Export Options</h2>
{/* Asset path strategy: flat vs grouped */}
<label className="block" htmlFor="ins-asset-path-strategy">
<span className="sr-only">Asset Path Strategy</span>
<select
id="ins-asset-path-strategy"
aria-label="Asset Path Strategy"
className="border rounded px-3 py-2 w-full"
value={assetPathStrategy}
onChange={(e) => setAssetPathStrategy(e.target.value as 'flat' | 'grouped')}
>
<option value="flat">Assets Path: Flat</option>
<option value="grouped">Assets Path: Grouped (images/fonts/other)</option>
</select>
</label>
{/* Font optimization toggle for Google Fonts preconnect */}
<label className="flex items-center gap-2" htmlFor="ins-font-preconnect">
<input
id="ins-font-preconnect"
type="checkbox"
aria-label="Font Preconnect"
checked={fontPreconnect}
onChange={(e) => setFontPreconnect(e.target.checked)}
/>
<span className="text-sm">Enable font preconnect (Google Fonts)</span>
</label>
<label className="flex items-center gap-2" htmlFor="ins-font-preload">
<input
id="ins-font-preload"
type="checkbox"
aria-label="Font Preload"
checked={fontPreload}
onChange={(e) => setFontPreload(e.target.checked)}
/>
<span className="text-sm">Enable font preload (Google Fonts)</span>
</label>
<div className="grid grid-cols-2 gap-2">
<label className="block" htmlFor="ins-image-loading">
<span className="sr-only">Image Loading</span>
<select
id="ins-image-loading"
aria-label="Image Loading"
className="border rounded px-3 py-2 w-full"
value={imageLoading}
onChange={(e) => setImageLoading(e.target.value as 'lazy' | 'eager')}
>
<option value="lazy">Image Loading: lazy</option>
<option value="eager">Image Loading: eager</option>
</select>
</label>
<label className="block" htmlFor="ins-image-decoding">
<span className="sr-only">Image Decoding</span>
<select
id="ins-image-decoding"
aria-label="Image Decoding"
className="border rounded px-3 py-2 w-full"
value={imageDecoding}
onChange={(e) => setImageDecoding(e.target.value as 'async' | 'sync')}
>
<option value="async">Image Decoding: async</option>
<option value="sync">Image Decoding: sync</option>
</select>
</label>
</div>
<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-manifest-short-name">
<span className="sr-only">Manifest Short Name</span>
<input
id="ins-manifest-short-name"
aria-label="Manifest Short Name"
className="border rounded px-3 py-2 w-full"
value={manifestShortName}
onChange={(e) => setManifestShortName(e.target.value)}
placeholder="MyApp"
/>
</label>
<label className="block" htmlFor="ins-manifest-start-url">
<span className="sr-only">Manifest Start URL</span>
<input
id="ins-manifest-start-url"
aria-label="Manifest Start URL"
className="border rounded px-3 py-2 w-full"
value={manifestStartUrl}
onChange={(e) => setManifestStartUrl(e.target.value)}
placeholder="/"
/>
</label>
<label className="block" htmlFor="ins-manifest-display">
<span className="sr-only">Manifest Display</span>
<select
id="ins-manifest-display"
aria-label="Manifest Display"
className="border rounded px-3 py-2 w-full"
value={manifestDisplay}
onChange={(e) => setManifestDisplay(e.target.value)}
>
<option value="">(default)</option>
<option value="standalone">standalone</option>
<option value="minimal-ui">minimal-ui</option>
<option value="browser">browser</option>
</select>
</label>
<label className="block" htmlFor="ins-manifest-theme-color">
<span className="sr-only">Manifest Theme Color</span>
<input
id="ins-manifest-theme-color"
aria-label="Manifest Theme Color"
className="border rounded px-3 py-2 w-full"
value={manifestThemeColor}
onChange={(e) => setManifestThemeColor(e.target.value)}
placeholder="#0ea5e9"
/>
</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"
rows={3}
value={robotsDisallow}
onChange={(e) => setRobotsDisallow(e.target.value)}
placeholder="/private\n/tmp"
/>
</label>
<label className="block" htmlFor="ins-robots-meta">
<span className="sr-only">Robots Meta</span>
<input
id="ins-robots-meta"
aria-label="Robots Meta"
className="border rounded px-3 py-2 w-full"
value={robotsMeta}
onChange={(e) => setRobotsMeta(e.target.value)}
placeholder="noindex, nofollow"
/>
</label>
<label className="block" htmlFor="ins-sheets-mode">
<span className="sr-only">Google Sheets Template Mode</span>
<select
id="ins-sheets-mode"
aria-label="Google Sheets Template Mode"
className="border rounded px-3 py-2 w-full"
value={sheetsMode}
onChange={(e) => setSheetsMode(e.target.value as 'auto'|'include'|'exclude')}
>
<option value="auto">Sheets Template: Auto</option>
<option value="include">Sheets Template: Include</option>
<option value="exclude">Sheets Template: Exclude</option>
</select>
</label>
</div>
</div>
}
right={
@@ -0,0 +1,67 @@
import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import BuilderClientPage from '@/components/BuilderClientPage'
vi.mock('next-intl', () => {
return {
useTranslations: () => (key: string) => key,
}
})
const buildZipSpy = vi.fn(async (_arg: {
html: string
css: string
js: string
assets: Record<string, Uint8Array>
extras?: Record<string, Uint8Array>
}) => new Uint8Array([80, 75]))
vi.mock('@/lib/exporter/zip', () => {
return {
buildZip: (arg: {
html: string
css: string
js: string
assets: Record<string, Uint8Array>
extras?: Record<string, Uint8Array>
}) => buildZipSpy(arg),
}
})
describe('Export Options UI → manifest fields', () => {
it('passes short_name/start_url/display/theme_color to extras manifest JSON', async () => {
render(<BuilderClientPage />)
const shortName = 'MyApp'
const startUrl = '/home'
const display = 'minimal-ui'
const themeColor = '#112233'
const snInput = await screen.findByLabelText('Manifest Short Name')
fireEvent.change(snInput, { target: { value: shortName } })
const startInput = await screen.findByLabelText('Manifest Start URL')
fireEvent.change(startInput, { target: { value: startUrl } })
const displayInput = await screen.findByLabelText('Manifest Display')
fireEvent.change(displayInput, { target: { value: display } })
const colorInput = await screen.findByLabelText('Manifest Theme Color')
fireEvent.change(colorInput, { target: { value: themeColor } })
const exportBtn = await screen.findByRole('button', { name: 'builder.action.export' })
fireEvent.click(exportBtn)
expect(buildZipSpy).toHaveBeenCalled()
const first = buildZipSpy.mock.calls[0]
const extras: Record<string, Uint8Array> = (first![0] as { extras: Record<string, Uint8Array> }).extras
const td = new TextDecoder()
const manifestRaw = td.decode(extras['site.webmanifest'])
const manifest = JSON.parse(manifestRaw)
expect(manifest.short_name).toBe(shortName)
expect(manifest.start_url).toBe(startUrl)
expect(manifest.display).toBe(display)
expect(manifest.theme_color).toBe(themeColor)
})
})
@@ -0,0 +1,64 @@
import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import BuilderClientPage from '@/components/BuilderClientPage'
vi.mock('next-intl', () => {
return {
useTranslations: () => (key: string) => key,
}
})
const buildZipSpy = vi.fn(async (_arg: {
html: string
css: string
js: string
assets: Record<string, Uint8Array>
extras?: Record<string, Uint8Array>
}) => new Uint8Array([80, 75]))
vi.mock('@/lib/exporter/zip', () => {
return {
buildZip: (arg: {
html: string
css: string
js: string
assets: Record<string, Uint8Array>
extras?: Record<string, Uint8Array>
}) => buildZipSpy(arg),
}
})
describe('Export Options UI polish', () => {
it('uses a dropdown for Manifest Display and passes selected value', async () => {
render(<BuilderClientPage />)
// choose display = minimal-ui
const displaySelect = await screen.findByLabelText('Manifest Display')
fireEvent.change(displaySelect, { target: { value: 'minimal-ui' } })
const exportBtn = await screen.findByRole('button', { name: 'builder.action.export' })
fireEvent.click(exportBtn)
const first = buildZipSpy.mock.calls[0]
const extras: Record<string, Uint8Array> = (first![0] as { extras: Record<string, Uint8Array> }).extras
const td = new TextDecoder()
const manifest = JSON.parse(td.decode(extras['site.webmanifest']))
expect(manifest.display).toBe('minimal-ui')
})
it('ignores invalid theme_color override and keeps default theme when not a hex', async () => {
render(<BuilderClientPage />)
const colorInput = await screen.findByLabelText('Manifest Theme Color')
fireEvent.change(colorInput, { target: { value: 'blue' } }) // invalid hex
const exportBtn = await screen.findByRole('button', { name: 'builder.action.export' })
fireEvent.click(exportBtn)
const first = buildZipSpy.mock.calls[0]
const extras: Record<string, Uint8Array> = (first![0] as { extras: Record<string, Uint8Array> }).extras
const td = new TextDecoder()
const manifest = JSON.parse(td.decode(extras['site.webmanifest']))
expect(manifest.theme_color).toBe('#0ea5e9') // default from page.theme.primaryColor
})
})
+60
View File
@@ -0,0 +1,60 @@
import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import BuilderClientPage from '@/components/BuilderClientPage'
vi.mock('next-intl', () => {
return {
useTranslations: () => (key: string) => key,
}
})
const buildZipSpy = vi.fn(async (_arg: {
html: string
css: string
js: string
assets: Record<string, Uint8Array>
extras?: Record<string, Uint8Array>
}) => new Uint8Array([80, 75]))
vi.mock('@/lib/exporter/zip', () => {
return {
buildZip: (arg: {
html: string
css: string
js: string
assets: Record<string, Uint8Array>
extras?: Record<string, Uint8Array>
}) => buildZipSpy(arg),
}
})
describe('Export Options UI → extras overrides', () => {
it('passes manifest.name and robots Disallow to buildExtrasForPage via buildZip extras', async () => {
render(<BuilderClientPage />)
const manifestName = 'My App Custom'
const robotsDisallow = '/private\n/tmp'
const nameInput = await screen.findByLabelText('Manifest Name')
fireEvent.change(nameInput, { target: { value: manifestName } })
const robotsInput = await screen.findByLabelText('Robots Disallow')
fireEvent.change(robotsInput, { target: { value: robotsDisallow } })
const exportBtn = await screen.findByRole('button', { name: 'builder.action.export' })
fireEvent.click(exportBtn)
expect(buildZipSpy).toHaveBeenCalled()
const first = buildZipSpy.mock.calls[0]
expect(first && first[0]).toBeTruthy()
const extras: Record<string, Uint8Array> = (first![0] as { extras: Record<string, Uint8Array> }).extras
const td = new TextDecoder()
const manifestRaw = td.decode(extras['site.webmanifest'])
const robotsRaw = td.decode(extras['robots.txt'])
const manifest = JSON.parse(manifestRaw)
expect(manifest.name).toBe(manifestName)
expect(robotsRaw).toMatch(/Disallow: \/private/)
expect(robotsRaw).toMatch(/Disallow: \/tmp/)
})
})
+26
View File
@@ -0,0 +1,26 @@
import { describe, it, expect } from 'vitest'
import { AssetManager } from '@/lib/assets/assetManager'
function u8(n: number): Uint8Array { const a = new Uint8Array(n); for (let i=0;i<n;i++) a[i]=i&0xff; return a }
describe('AssetManager pathStrategy grouped', () => {
it('writes assets under assets/images and assets/fonts when grouped', async () => {
const am = new AssetManager({ maxBytes: 1024*1024, allowedExts: ['png','woff2'], pathStrategy: 'grouped' })
const img = await am.add({ name: 'hero.png', type: 'image/png', bytes: u8(10) })
const font = await am.add({ name: 'main.woff2', type: 'font/woff2', bytes: u8(12) })
expect(img.path).toMatch(/^assets\/images\/[0-9a-f]{8}\.png$/)
expect(font.path).toMatch(/^assets\/fonts\/[0-9a-f]{8}\.woff2$/)
const zip = am.toZipStructure()
const keys = Object.keys(zip)
expect(keys.some(k => /^assets\/images\//.test(k))).toBe(true)
expect(keys.some(k => /^assets\/fonts\//.test(k))).toBe(true)
})
it('rewriteUrl marks referenced originals and returns grouped path', async () => {
const am = new AssetManager({ maxBytes: 1024*1024, allowedExts: ['png'], pathStrategy: 'grouped' })
const img = await am.add({ name: 'hero.png', type: 'image/png', bytes: u8(10) })
const rewritten = am.rewriteUrl('local:hero.png')
expect(rewritten).toBe(img.path)
expect(am.referencedList()).toContain('hero.png')
})
})
+20 -1
View File
@@ -16,6 +16,7 @@ export type AssetRef = {
export type AssetManagerOptions = {
maxBytes: number
allowedExts: string[] // e.g., ['png','jpg','jpeg','webp','svg']
pathStrategy?: 'flat' | 'grouped'
}
function extOf(name: string): string {
@@ -36,12 +37,15 @@ function hash8(bytes: Uint8Array): string {
export class AssetManager {
private readonly maxBytes: number
private readonly allowed: Set<string>
private readonly pathStrategy: 'flat' | 'grouped'
private byHash = new Map<string, AssetRef>()
private byOriginal = new Map<string, string>() // originalName -> path
private referenced = new Set<string>() // originalName referenced via rewrite
constructor(opts: AssetManagerOptions) {
this.maxBytes = opts.maxBytes
this.allowed = new Set(opts.allowedExts.map((e) => e.toLowerCase()))
this.pathStrategy = opts.pathStrategy ?? 'flat'
}
async add(file: AssetInput): Promise<AssetRef> {
@@ -60,7 +64,7 @@ export class AssetManager {
return existing
}
const path = `assets/${h}.${ext}`
const path = this.makePath(h, ext, file.type)
const ref: AssetRef = {
originalName: file.name,
mimeType: file.type,
@@ -91,8 +95,23 @@ export class AssetManager {
if (urlOrLocalRef.startsWith('local:')) {
const key = urlOrLocalRef.slice('local:'.length)
const p = this.byOriginal.get(key)
if (p) this.referenced.add(key)
return p ?? urlOrLocalRef
}
return urlOrLocalRef
}
referencedList(): string[] {
return Array.from(this.referenced)
}
private makePath(hash8: string, ext: string, mime: string): string {
if (this.pathStrategy === 'grouped') {
let group = 'other'
if (mime.startsWith('image/')) group = 'images'
else if (mime.startsWith('font/')) group = 'fonts'
return `assets/${group}/${hash8}.${ext}`
}
return `assets/${hash8}.${ext}`
}
}
+22
View File
@@ -0,0 +1,22 @@
import { describe, it, expect } from 'vitest'
import { AssetManager } from '@/lib/assets/assetManager'
import { buildAssetsIndex } from '@/lib/exporter/assets.index'
function u8(n: number): Uint8Array { const a = new Uint8Array(n); for (let i=0;i<n;i++) a[i]=i&0xff; return a }
describe('Assets index builder', () => {
it('groups assets by mime into images/fonts/other and lists zipPath', async () => {
const am = new AssetManager({ maxBytes: 1024*1024, allowedExts: ['png','woff2','txt'] })
await am.add({ name: 'a.png', type: 'image/png', bytes: u8(4) })
await am.add({ name: 'b.woff2', type: 'font/woff2', bytes: u8(6) })
await am.add({ name: 'c.txt', type: 'text/plain', bytes: u8(2) })
const bytes = buildAssetsIndex(am)
const obj = JSON.parse(new TextDecoder().decode(bytes)) as { images: string[]; fonts: string[]; other: string[] }
expect(obj.images.length).toBe(1)
expect(obj.fonts.length).toBe(1)
expect(obj.other.length).toBe(1)
expect(obj.images[0]).toMatch(/^assets\/[0-9a-f]{8}\.png$/)
expect(obj.fonts[0]).toMatch(/^assets\/[0-9a-f]{8}\.woff2$/)
expect(obj.other[0]).toMatch(/^assets\/[0-9a-f]{8}\.txt$/)
})
})
+21
View File
@@ -0,0 +1,21 @@
import type { AssetManager } from '@/lib/assets/assetManager'
export type AssetsIndex = {
images: string[]
fonts: string[]
other: string[]
}
export function buildAssetsIndex(am: AssetManager): Uint8Array {
const images: string[] = []
const fonts: string[] = []
const other: string[] = []
for (const ref of am.list()) {
if (ref.mimeType.startsWith('image/')) images.push(ref.path)
else if (ref.mimeType.startsWith('font/')) fonts.push(ref.path)
else other.push(ref.path)
}
const obj: AssetsIndex = { images, fonts, other }
const json = JSON.stringify(obj, null, 2)
return new TextEncoder().encode(json)
}
+30
View File
@@ -0,0 +1,30 @@
import { describe, it, expect } from 'vitest'
import { AssetManager } from '@/lib/assets/assetManager'
import { buildAssetsMetadata } from '@/lib/exporter/assets.meta'
import type { AssetMetaItem } from '@/lib/exporter/assets.meta'
function u8(n: number): Uint8Array {
const arr = new Uint8Array(n)
for (let i = 0; i < n; i++) arr[i] = (i * 31) & 0xff
return arr
}
describe('Assets metadata builder', () => {
it('emits assets.json with originalName/mime/size/hash/ext/zipPath', async () => {
const am = new AssetManager({ maxBytes: 1024 * 1024, allowedExts: ['png'] })
const bytes = u8(10)
await am.add({ name: 'hero.png', type: 'image/png', bytes })
const metaBytes = buildAssetsMetadata(am)
const json = new TextDecoder().decode(metaBytes)
const obj = JSON.parse(json) as { assets: AssetMetaItem[] }
expect(Array.isArray(obj.assets)).toBe(true)
expect(obj.assets.length).toBe(1)
const a = obj.assets[0]
expect(a.originalName).toBe('hero.png')
expect(a.mimeType).toBe('image/png')
expect(a.size).toBe(bytes.byteLength)
expect(a.ext).toBe('png')
expect(a.hash8).toMatch(/^[0-9a-f]{8}$/)
expect(a.zipPath).toMatch(/^assets\/[0-9a-f]{8}\.png$/)
})
})
+41
View File
@@ -0,0 +1,41 @@
import type { AssetManager } from '@/lib/assets/assetManager'
export type AssetMetaItem = {
originalName: string
mimeType: string
size: number
hash8: string
ext: string
zipPath: string
integrity: string
group: 'images' | 'fonts' | 'other'
referencedAt: string[]
}
export function buildAssetsMetadata(am: AssetManager): Uint8Array {
const list = am.list()
const referenced = new Set(am.referencedList())
const items: AssetMetaItem[] = list.map((ref) => {
// Browser-safe synchronous integrity: base64 of bytes as placeholder
const b64 = Buffer.from(ref.bytes).toString('base64')
const group: 'images' | 'fonts' | 'other' = ref.mimeType.startsWith('image/')
? 'images'
: ref.mimeType.startsWith('font/')
? 'fonts'
: 'other'
const referencedAt = referenced.has(ref.originalName) ? [`local:${ref.originalName}`] : []
return {
originalName: ref.originalName,
mimeType: ref.mimeType,
size: ref.bytes.byteLength,
hash8: ref.hash8,
ext: ref.ext,
zipPath: ref.path,
integrity: `sha256-${b64}`,
group,
referencedAt,
}
})
const json = JSON.stringify({ assets: items }, null, 2)
return new TextEncoder().encode(json)
}
@@ -0,0 +1,27 @@
import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
import { AssetManager } from '@/lib/assets/assetManager'
function makePage(): Page {
return pageSchema.parse({
title: 'Path Strategy',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'local:hero.png' } } ],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('자산 경로 구조 옵션', () => {
it('grouped 전략일 때 이미지가 assets/images/ 경로로 렌더된다', async () => {
const page = makePage()
const am = new AssetManager({ maxBytes: 1024 * 1024, allowedExts: ['png'], pathStrategy: 'grouped' })
// add hero image asset
const bytes = new Uint8Array([1,2,3,4,5])
await am.add({ name: 'hero.png', type: 'image/png', bytes })
const out = exportPage(page, { assetManager: am })
expect(out.html).toMatch(/assets\/images\/[a-f0-9]{8}\.png/i)
})
})
+44
View File
@@ -0,0 +1,44 @@
import { describe, it, expect } from 'vitest'
import { buildExtrasForPage } from '@/lib/exporter/extras'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(): Page {
return pageSchema.parse({
title: 'My Product',
locale: 'en',
theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
sections: [ { type: 'hero', props: { heading: 'Hello', subheading: '', imageUrl: 'https://example.com/hero.png' } } ],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
function toStr(bytes: Uint8Array) {
return new TextDecoder().decode(bytes)
}
describe('extras 자동 보강', () => {
it('manifest: 잘못된 theme_color는 무시하고 기본(primaryColor) 사용', () => {
const page = makePage()
const out = buildExtrasForPage(page, { manifest: { theme_color: 'not-a-hex' } })
const manifest = JSON.parse(toStr(out['site.webmanifest']))
expect(manifest.theme_color).toBe('#0ea5e9')
})
it('manifest: short_name은 12자 이내로 자동 절단', () => {
const page = makePage()
const out = buildExtrasForPage(page, { manifest: { name: 'Super Long Product Name' } })
const manifest = JSON.parse(toStr(out['site.webmanifest']))
expect(manifest.short_name.length).toBeLessThanOrEqual(12)
})
it('robots: 주어진 plain 경로 목록을 자동으로 User-agent 헤더와 Disallow 라인으로 보강', () => {
const page = makePage()
const robotsPlain = "/admin\n/private"
const out = buildExtrasForPage(page, { robotsText: robotsPlain })
const robots = toStr(out['robots.txt'])
expect(robots).toMatch(/^User-agent: \*/)
expect(robots).toMatch(/Disallow: \/admin/)
expect(robots).toMatch(/Disallow: \/private/)
})
})
+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')
})
})
+83
View File
@@ -0,0 +1,83 @@
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
}>
sheetsMode?: 'auto' | 'include' | 'exclude'
}
function toBytes(s: string): Uint8Array {
return new TextEncoder().encode(s)
}
function buildRobots(base?: string): string {
if (base && base.trim().length > 0) {
const s = base.trim()
if (/^User-agent:/i.test(s)) return s
const lines = s.split(/\n+/).map((l) => l.trim()).filter((l) => l.length > 0)
if (lines.length === 0) return 'User-agent: *\n'
const disallowLines = lines.map((l) => (l.startsWith('Disallow:') ? l : `Disallow: ${l}`))
return `User-agent: *\n${disallowLines.join('\n')}`
}
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 (auto-enrich and safe-merge)
const manifestBase = deriveManifest(page)
const ov = overrides?.manifest || {}
const name = ov.name && ov.name.trim().length > 0 ? ov.name : manifestBase.name
const short_name = ov.short_name && ov.short_name.trim().length > 0
? ov.short_name
: (name.length > 12 ? name.slice(0, 12) : name)
const start_url = ov.start_url && ov.start_url.trim().length > 0 ? ov.start_url : manifestBase.start_url
const display = ov.display && ov.display.trim().length > 0 ? ov.display : manifestBase.display
const hexOk = ov.theme_color ? /^#([0-9a-fA-F]{3}){1,2}$/.test(ov.theme_color) : false
const theme_color = hexOk ? (ov.theme_color as string) : manifestBase.theme_color
const manifestMerged = { name, short_name, start_url, display, theme_color }
const manifestJson = JSON.stringify(manifestMerged, null, 2)
out['site.webmanifest'] = toBytes(manifestJson)
// Google Sheets 템플릿: 기본 auto. overrides.sheetsMode로 강제 포함/제외 가능
const mode = overrides?.sheetsMode ?? 'auto'
const action = page.form?.actionUrl?.trim()
const hasAction = !!(action && action.length > 0)
const shouldInclude = mode === 'include' || (mode === 'auto' && !hasAction)
if (shouldInclude) {
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
}
+9 -9
View File
@@ -13,17 +13,17 @@ function makePage(): Page {
})
}
describe('Exporter - 폰트 최적화', () => {
it('head에 폰트 preconnect 링크가 포함된다(googleapis/gstatic)', () => {
const out = exportPage(makePage())
const html = out.html
expect(html).toMatch(/<link rel="preconnect" href="https:\/\/fonts\.googleapis\.com">/)
expect(html).toMatch(/<link rel="preconnect" href="https:\/\/fonts\.gstatic\.com" crossorigin>/)
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 out = exportPage(makePage())
const css = out.css
expect(css).toMatch(/font-family:[^;]*system-ui/i)
const page = makePage()
const out = exportPage(page)
expect(out.css).toMatch(/font-family:[^;]*system-ui/i)
})
})
+35
View File
@@ -0,0 +1,35 @@
import { describe, it, expect } from 'vitest'
import { exportPage, type ExportOptions } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(fontFamily = 'Inter'): Page {
return pageSchema.parse({
title: 'Font Preload',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily },
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('폰트 preload 옵션', () => {
it('옵션이 true이면 Google Fonts stylesheet preload/link를 head에 포함한다', () => {
const page = makePage('Inter')
const opts: ExportOptions = { fontPreload: true }
const out = exportPage(page, opts)
expect(out.html).toContain('rel="preload"')
expect(out.html).toContain('as="style"')
expect(out.html).toContain('fonts.googleapis.com/css2')
expect(out.html).toContain('family=Inter')
// onload print hack 포함
expect(out.html).toMatch(/rel=\"stylesheet\"[^>]+media=\"print\"[^>]+onload=\"this.media='all'\"/)
})
it('옵션이 false이면 preload/link를 포함하지 않는다', () => {
const page = makePage('Inter')
const opts: ExportOptions = { fontPreload: false }
const out = exportPage(page, opts)
expect(out.html).not.toMatch(/fonts.googleapis.com\/css2/)
})
})
+26 -6
View File
@@ -2,7 +2,14 @@ import type { Page, FormField } from '@/lib/schema/page'
import type { AssetManager } from '@/lib/assets/assetManager'
export type Exported = { html: string; css: string; js: string }
export type ExportOptions = { assetManager?: AssetManager }
export type ExportOptions = {
assetManager?: AssetManager
fontPreconnect?: boolean
fontPreload?: boolean
robotsMeta?: string
imageLoading?: 'lazy' | 'eager'
imageDecoding?: 'async' | 'sync'
}
function renderFaq(section: { props: { items: Array<{ q: string; a: string }> } }) {
const itemsRaw: Array<{ q: string; a: string }> = Array.isArray(section.props.items) ? section.props.items : []
@@ -116,6 +123,8 @@ function renderHero(section: { props: { heading: string; subheading?: string; im
const am = opts?.assetManager
const imageUrlRaw: string = section.props.imageUrl
const imageUrl = am ? am.rewriteUrl(imageUrlRaw) : imageUrlRaw
const loading = opts?.imageLoading ?? 'lazy'
const decoding = opts?.imageDecoding ?? 'async'
return `
<section class="hero" aria-labelledby="hero-heading">
<div class="container">
@@ -124,7 +133,7 @@ function renderHero(section: { props: { heading: string; subheading?: string; im
${subheading.length > 0 ? `<p>${escapeHtml(subheading)}</p>` : ''}
</div>
<div class="media">
<img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(heading)}" loading="lazy" decoding="async" />
<img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(heading)}" loading="${escapeHtml(loading)}" decoding="${escapeHtml(decoding)}" width="1200" height="675" />
</div>
</div>
</section>
@@ -222,7 +231,7 @@ function renderForm(page: Page) {
`
}
function buildHead(page: Page) {
function buildHead(page: Page, opts?: ExportOptions) {
const ogImage = page.seo.ogImage
const analyticsParts: string[] = []
const ga = page.analytics?.ga4MeasurementId
@@ -250,10 +259,23 @@ function buildHead(page: Page) {
</script>`)
}
const custom = page.analytics?.customHeadHtml || ''
const preconnect = opts?.fontPreconnect !== false
const robotsMeta = (opts?.robotsMeta && opts.robotsMeta.trim().length > 0) ? `<meta name="robots" content="${escapeHtml(opts!.robotsMeta!)}" />` : ''
const fontPreload = opts?.fontPreload === true
const rawFamily = (page.theme?.fontFamily || '').trim()
const fontHref = rawFamily.length > 0 ? `https://fonts.googleapis.com/css2?family=${encodeURIComponent(rawFamily).replace(/%20/g, '+')}&display=swap` : ''
return `
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href="/" />
${preconnect ? '<link rel="preconnect" href="https://fonts.googleapis.com" />' : ''}
${preconnect ? '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />' : ''}
${fontPreload && fontHref ? `<link rel="preload" as="style" href="${fontHref}" />` : ''}
${fontPreload && fontHref ? `<link rel="stylesheet" href="${fontHref}" media="print" onload="this.media='all'" />` : ''}
${fontPreload && fontHref ? `<noscript><link rel="stylesheet" href="${fontHref}" /></noscript>` : ''}
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="${escapeHtml(page.theme.primaryColor)}" />
${robotsMeta}
<title>${escapeHtml(page.seo.title)}</title>
<meta name="description" content="${escapeHtml(page.seo.description)}" />
<meta property="og:title" content="${escapeHtml(page.seo.title)}" />
@@ -335,9 +357,7 @@ export function exportPage(page: Page, opts?: ExportOptions): Exported {
const html = `<!DOCTYPE html>
<html lang="${escapeHtml(page.locale)}">
<head>
${buildHead(page)}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
${buildHead(page, opts)}
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
+31
View File
@@ -0,0 +1,31 @@
import { describe, it, expect } from 'vitest'
import { exportPage, type ExportOptions } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(): Page {
return pageSchema.parse({
title: 'Img Perf',
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('이미지 loading/decoding 토글', () => {
it('기본은 loading="lazy", decoding="async"', () => {
const page = makePage()
const out = exportPage(page)
expect(out.html).toContain('loading="lazy"')
expect(out.html).toContain('decoding="async"')
})
it('옵션으로 eager/sync로 바꿀 수 있다', () => {
const page = makePage()
const opts: ExportOptions = { imageLoading: 'eager', imageDecoding: 'sync' }
const out = exportPage(page, opts)
expect(out.html).toContain('loading="eager"')
expect(out.html).toContain('decoding="sync"')
})
})
+21
View File
@@ -0,0 +1,21 @@
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: 'Head Links',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('Exporter - head 링크 토큰', () => {
it('site.webmanifest 링크를 포함한다', () => {
const out = exportPage(makePage())
expect(out.html).toMatch(/<link rel="manifest" href="\/site\.webmanifest"\s*\/>/)
})
})
+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()
})
})
+29
View File
@@ -0,0 +1,29 @@
import { describe, it, expect } from 'vitest'
import { exportPage, type ExportOptions } from '@/lib/exporter/html'
import { pageSchema, type Page } from '@/lib/schema/page'
function makePage(): Page {
return pageSchema.parse({
title: 'Meta Robots',
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('meta robots', () => {
it('기본적으로 head에 robots 메타가 없다', () => {
const page = makePage()
const out = exportPage(page)
expect(out.html).not.toContain('<meta name="robots"')
})
it('옵션으로 robots 메타를 삽입할 수 있다', () => {
const page = makePage()
const opts: ExportOptions = { robotsMeta: 'noindex,nofollow' }
const out = exportPage(page, opts)
expect(out.html).toContain('<meta name="robots" content="noindex,nofollow" />')
})
})
@@ -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(): Page {
return pageSchema.parse({
title: 'SEO/Perf 2',
locale: 'en',
theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
sections: [
{ type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img.example/hero.png' } },
],
form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 'SEO2', description: 'Desc2' },
})
}
describe('Exporter - theme-color meta and hero image intrinsic size', () => {
it('includes theme-color meta using page.theme.primaryColor', () => {
const out = exportPage(makePage())
const html = out.html
expect(html).toMatch(/<meta name="theme-color" content="#0ea5e9"\s*\/>/)
})
it('renders hero image with width/height attributes for CLS reduction', () => {
const out = exportPage(makePage())
const html = out.html
expect(html).toMatch(/<img[^>]*\swidth="[0-9]+"/)
expect(html).toMatch(/<img[^>]*\sheight="[0-9]+"/)
})
})
+47
View File
@@ -0,0 +1,47 @@
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 makePageNoAction(): Page {
return pageSchema.parse({
title: 'Sheets Tpl',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img/h.png' } } ],
form: { actionUrl: '', fields: [ { type: 'text', name: 'email', label: 'Email', required: true } ], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
function makePageWithAction(): Page {
return pageSchema.parse({
title: 'Sheets Off',
locale: 'en',
theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img/h.png' } } ],
form: { actionUrl: 'https://example.com/submit', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
seo: { title: 't', description: 'd' },
})
}
describe('Sheets 템플릿 Export', () => {
it('actionUrl 미지정 시 extras에 Sheets 템플릿 파일을 포함한다', async () => {
const page = makePageNoAction()
const extras = buildExtrasForPage(page)
expect(Object.keys(extras)).toContain('sheets/Code.gs')
expect(Object.keys(extras)).toContain('sheets/README.txt')
const out = exportPage(page)
const zipBytes = await buildZip({ html: out.html, css: out.css, js: out.js, assets: {}, extras })
expect(zipBytes.byteLength).toBeGreaterThan(0)
})
it('actionUrl 지정 시 extras에는 Sheets 템플릿이 포함되지 않는다', () => {
const page = makePageWithAction()
const extras = buildExtrasForPage(page)
expect(Object.keys(extras)).not.toContain('sheets/Code.gs')
expect(Object.keys(extras)).not.toContain('sheets/README.txt')
})
})
@@ -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)
})
})