@diy-website-builder/sdk 0.1.0 → 0.1.2

package/README.md

@@ -2,6 +2,16 @@
 
 Framework-agnostic **v3** visual website builder editor. Mounts into any `HTMLElement`.
 
+## Get an API key
+
+1. Create an account or sign in at [diy-website-builder.com](https://diy-website-builder.com).
+2. Open [Developers](https://diy-website-builder.com/developers) and enable the developer product for your account (free to start).
+3. Go to [API keys](https://diy-website-builder.com/developer/keys) in the developer dashboard.
+4. Create a key. Copy the full key when it is shown. You will only see the complete value at create or rotate time.
+5. Optional: add allowed domains on the key so it only works from those hosts. Leave empty to allow any domain.
+
+Use that key as `apiKey` in the examples below.
+
 ## Install
 
 ```bash
@@ -10,6 +20,8 @@ npm install @diy-website-builder/sdk
 
 ## Usage
 
+### Hosted publish (default)
+
 ```ts
 import DIYWebsiteBuilderEditor from "@diy-website-builder/sdk";
 
@@ -25,28 +37,101 @@ const editor = new DIYWebsiteBuilderEditor.Builder({
 editor.destroy();
 ```
 
+### Export HTML to your host
+
+Paid developer plans can export compiled HTML instead of publishing to DIY hosting. Media (images, videos, fonts) stays on the DIY CDN.
+
+```ts
+import DIYWebsiteBuilderEditor from "@diy-website-builder/sdk";
+
+const editor = new DIYWebsiteBuilderEditor.Builder({
+  apiKey: "YOUR_API_KEY",
+  shortId: "my-site",
+  container: document.getElementById("editor")!,
+  publishMode: "export",
+  onExport: async (site) => {
+    // site.pages[].html is ready to host. Asset URLs point at the DIY CDN.
+    await fetch("/api/sites/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(site),
+    });
+  },
+  onExportProgress: ({ phase, current, total }) => {
+    console.log(phase, current, total);
+  },
+  onPaidFeatureClick: (event) => {
+    if (event === "websiteExportRestricted") {
+      window.location.href = "https://diy-website-builder.com/developers#pricing";
+    }
+  },
+});
+
+// Or trigger export from your own UI:
+// const site = await editor.exportSite();
+```
+
+Site export requires a paid developer plan (`devBasic` and above). Free plans can still download a single page from the editor menu when allowed.
+
+#### CSP
+
+If your host sets a Content-Security-Policy, allow DIY CDN media:
+
+```http
+Content-Security-Policy: img-src 'self' https://cdn.diy-website-builder.com; media-src 'self' https://cdn.diy-website-builder.com; font-src 'self' https://cdn.diy-website-builder.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdn.diy-website-builder.com https://cdn.jsdelivr.net; script-src 'self' https://cdn.diy-website-builder.com;
+```
+
+Deleting assets or the DIY project can break exported sites that still reference those CDN URLs.
+
+## CDN
+
+Load the UMD bundle from a CDN, then use the global `DIYWebsiteBuilderEditor`:
+
+```html
+<div id="editor"></div>
+<script src="https://cdn.jsdelivr.net/npm/@diy-website-builder/sdk/dist/diy-website-builder-editor.js"></script>
+<script>
+  const editor = new DIYWebsiteBuilderEditor.Builder({
+    apiKey: "YOUR_API_KEY",
+    shortId: "my-site",
+    container: document.getElementById("editor"),
+    exitURL: "/dashboard",
+    onPublish: (url) => console.log("published", url),
+  });
+</script>
+```
+
+Alternatives:
+
+- jsDelivr: `https://cdn.jsdelivr.net/npm/@diy-website-builder/sdk/dist/diy-website-builder-editor.js`
+- unpkg: `https://unpkg.com/@diy-website-builder/sdk/dist/diy-website-builder-editor.js`
+
+Pin a version in production, for example:
+
+`https://cdn.jsdelivr.net/npm/@diy-website-builder/sdk@0.1.0/dist/diy-website-builder-editor.js`
+
 ## API
 
 | Option | Type | Required | Notes |
 | --- | --- | --- | --- |
-| `apiKey` | `string` | yes | Project API key |
+| `apiKey` | `string` | yes | From [API keys](https://diy-website-builder.com/developer/keys) |
 | `shortId` | `string` | yes | Project short id |
 | `container` | `HTMLElement` | yes | Mount node |
-| `language` | `string` | no | UI language |
+| `language` | `"en" \| "fr" \| "de" \| "es"` | no | UI language (default `"en"`) |
 | `exitURL` | `string` | no | Exit / back navigation |
-| `enableAI` | `boolean` | no | Enable AI / vibe features |
-| `onPublish` | `(url?: string) => void` | no | After publish |
+| `publishMode` | `"hosted" \| "export"` | no | Default `"hosted"`. `"export"` compiles HTML and calls `onExport` |
+| `onPublish` | `(url?: string) => void` | no | After DIY hosted publish |
+| `onExport` | `(site: SiteExport) => void \| Promise<void>` | no | Required when `publishMode` is `"export"` |
+| `onExportProgress` | `(progress) => void` | no | Save/compile progress for site export |
 | `onPaidFeatureClick` | `(event) => void` | no | Upgrade / paywall hooks |
 | `showMessage` | `(message, type, options?) => void` | no | Toast host |
 
-Styles are injected by the bundle (`injectStyles`).
+### Methods
 
-## Build (contributors)
+| Method | Notes |
+| --- | --- |
+| `exportSite()` | Full-site HTML package (paid developer). Calls `onExport` when set. |
+| `exportPage(pageId?)` | Single page HTML (uses page-download entitlement). |
+| `destroy()` | Unmount and clean up |
 
-```bash
-npm install
-npm run build
-npm run pack   # writes a publishable .tgz under dist/package/
-```
-
-The published package ships only the UMD bundle + public `dist/index.d.ts` (no workspace `file:` dependencies).
+Styles are injected by the bundle (`injectStyles`).