jaybe/landing-builder
1
0
Fork 0
Code Issues Pull Requests 9 Actions Packages Projects Releases Wiki Activity

feat(export-ui): Export 옵션 UI 추가(manifest short_name/start_url/display/theme_color, robots Disallow) 및 TDD
Auto PR / open-pr (push) Successful in 19s
Details
Auto Label PR / add-automerge-label (pull_request) Successful in 6s
Details
CI / test (pull_request) Successful in 1m5s
Details

Browse Source
This commit is contained in:
Jaybe
2025-11-15 02:35:52 +09:00
parent afd3b167ab
commit e2d3d91993
4 changed files with 243 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/BuilderClientPage.tsx
+107 -3
View File
@@ -48,6 +48,13 @@ 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 [viewport, setViewport] = useState<'desktop' | 'mobile'>(() => {
if (typeof window !== 'undefined') {
try {
@@ -186,7 +193,20 @@ export default function BuilderClientPage() {
}, [pageData, am])
const doExport = useCallback(async () => {
const valid = pageSchema.parse(pageData)
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)
}
const exported = exportPage(valid, { assetManager: am ?? undefined })
try {
if (typeof window !== 'undefined') {
@@ -197,10 +217,24 @@ export default function BuilderClientPage() {
}
} catch {}
const assets = am ? am.toZipStructure() : {}
const extras = buildExtrasForPage(valid)
// 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) manifestOverrideBase.theme_color = manifestThemeColor.trim()
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 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)
}, [pageData, am])
}, [pageData, am, manifestName, manifestShortName, manifestStartUrl, manifestDisplay, manifestThemeColor, robotsDisallow])
return (
<div className="p-6 space-y-6">
@@ -263,6 +297,76 @@ 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>
<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>
<input
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)}
placeholder="standalone"
/>
</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>
</div>
</div>
}
right={