jaybe
396d0ac7a0
- ExportOptions에 이미지 옵션 추가 - hero 이미지에 조건부 속성 렌더링 - 테스트: image.responsive.options.test.ts - 전체 테스트 그린 유지
131 lines
4.8 KiB
Markdown
131 lines
4.8 KiB
Markdown
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
|
|
|
## Getting Started
|
|
|
|
First, run the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
# or
|
|
yarn dev
|
|
# or
|
|
pnpm dev
|
|
# or
|
|
bun dev
|
|
```
|
|
|
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
|
|
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
|
|
|
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
|
|
|
## Learn More
|
|
|
|
To learn more about Next.js, take a look at the following resources:
|
|
|
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
|
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
|
|
|
## Deploy on Vercel
|
|
|
|
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
|
|
- Integrity: assets.integrity.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
|
|
|
|
### assets.integrity.index.json
|
|
|
|
- entries: array of `{ path, integrity, size }`
|
|
- `path`: asset `zipPath` (e.g. `assets/abcd1234.png` or grouped `assets/images/...`)
|
|
- `integrity`: `sha256-<base64>` (real SHA-256 of the asset bytes)
|
|
- `size`: byte length of the asset
|
|
- bundleHash: `sha256-<base64>` over a deterministic join of `path` and `integrity` for all entries
|
|
|
|
Usage:
|
|
- Verify file-level integrity by recomputing SHA-256(base64) of each asset and comparing with `entries[].integrity`.
|
|
- Verify file size matches `entries[].size`.
|
|
- Verify bundle integrity by recomputing `bundleHash` from sorted entries; useful for quick tamper detection.
|
|
|
|
Example (Node):
|
|
|
|
```ts
|
|
import { verifyIntegrity } from '@/lib/exporter/verify'
|
|
|
|
// extras must include 'assets.integrity.index.json', assets is a map of zipPath -> bytes
|
|
const result = verifyIntegrity(extras, assets)
|
|
if (!result.ok) {
|
|
console.error('Integrity check failed:', result.errors)
|
|
}
|
|
console.log('Summary:', result.summary)
|
|
// { total, missing, integrityMismatches, sizeMismatches, bundleHashMismatch }
|
|
```
|
|
|
|
### 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.
|