webstudio 0.173.0 → 0.175.0

package/lib/cli.js

@@ -44,12 +44,41 @@ var zGlobalConfig = z.record(
 var jsonToGlobalConfig = (json) => {
   return zGlobalConfig.parse(json);
 };
-var PROJECT_TEMPALTES = [
-  { value: "vanilla", label: "Vanilla" },
-  { value: "vercel", label: "Vercel" },
-  { value: "netlify-functions", label: "Netlify Functions" },
-  { value: "netlify-edge-functions", label: "Netlify Edge Functions" },
-  { value: "ssg", label: "Static Site Generation (SSG)" }
+var PROJECT_TEMPLATES = [
+  {
+    value: "vanilla",
+    label: "Vanilla",
+    expand: ["defaults"]
+  },
+  { value: "vercel", label: "Vercel", expand: ["defaults", "vercel"] },
+  {
+    value: "netlify-functions",
+    label: "Netlify Functions",
+    expand: ["defaults", "netlify-functions"]
+  },
+  {
+    value: "netlify-edge-functions",
+    label: "Netlify Edge Functions",
+    expand: ["defaults", "netlify-edge-functions"]
+  },
+  { value: "ssg", label: "Static Site Generation (SSG)" },
+  {
+    value: "ssg-netlify",
+    label: "Static Site Generation (SSG) Netlify",
+    expand: ["ssg", "ssg-netlify"]
+  },
+  {
+    value: "ssg-vercel",
+    label: "Static Site Generation (SSG) Vercel",
+    expand: ["ssg", "ssg-vercel"]
+  }
+];
+var INTERNAL_TEMPLATES = [
+  {
+    value: "cloudflare",
+    label: "Cloudflare",
+    expand: ["defaults", "cloudflare"]
+  }
 ];
 
 // src/fs-utils.ts
@@ -99,20 +128,23 @@ import { cwd, exit } from "node:process";
 import { join as join2 } from "node:path";
 import { readFile as readFile2, writeFile as writeFile2 } from "node:fs/promises";
 import { cancel, isCancel, log, text } from "@clack/prompts";
+import { parseBuilderUrl } from "@webstudio-is/http-client";
 var parseShareLink = (value) => {
   const url = new URL(value);
-  const origin = url.origin;
   const token = url.searchParams.get("authToken");
-  const segments = url.pathname.split("/").slice(1);
-  if (segments.length !== 2 || segments[0] !== "builder") {
-    throw Error("Segments not matching");
+  let { projectId, sourceOrigin } = parseBuilderUrl(url.href);
+  if (projectId === void 0) {
+    const segments = url.pathname.split("/").slice(1);
+    if (segments.length !== 2 || segments[0] !== "builder") {
+      throw Error("Segments not matching");
+    }
+    projectId = segments[1];
   }
-  const [_builder, projectId] = segments;
   if (token == null) {
     throw Error("Token is missing");
   }
   return {
-    origin,
+    origin: sourceOrigin,
     projectId,
     token
   };
@@ -180,7 +212,7 @@ import pc from "picocolors";
 import { spinner } from "@clack/prompts";
 import {
   loadProjectDataByBuildId,
-  loadProjectDataById
+  loadProjectDataByProjectId
 } from "@webstudio-is/http-client";
 var syncOptions = (yargs) => yargs.option("buildId", {
   type: "string",
@@ -194,21 +226,13 @@ var syncOptions = (yargs) => yargs.option("buildId", {
 });
 var sync = async (options) => {
   const syncing = spinner();
-  syncing.start("Synchronizing project data");
-  const definedOptionValues = [
-    options.buildId,
-    options.origin,
-    options.authToken
-  ].filter(Boolean);
-  if (definedOptionValues.length > 0 && definedOptionValues.length < 3) {
-    syncing.stop(`Please provide buildId, origin and authToken`, 2);
-    return;
-  }
   let project;
+  syncing.start(`Synchronizing project data`);
   if (options.buildId !== void 0 && options.origin !== void 0 && options.authToken !== void 0) {
+    syncing.message(`Synchronizing project data from ${options.origin}`);
     project = await loadProjectDataByBuildId({
       buildId: options.buildId,
-      authToken: options.authToken,
+      seviceToken: options.authToken,
       origin: options.origin
     });
   } else {
@@ -235,8 +259,13 @@ var sync = async (options) => {
       return;
     }
     const { origin, token } = projectConfig;
+    syncing.message(`Synchronizing project data from ${origin}`);
     try {
-      project = await loadProjectDataById({
+      project = options.buildId !== void 0 ? await loadProjectDataByBuildId({
+        buildId: options.buildId,
+        authToken: token,
+        origin
+      }) : await loadProjectDataByProjectId({
         projectId: localConfig.projectId,
         authToken: token,
         origin
@@ -659,9 +688,6 @@ Please check webstudio --help for more details`
     exit2(1);
   }
   for (const template of options.template) {
-    if (template === "vanilla" || template === "ssg") {
-      continue;
-    }
     if (template.startsWith(".") || template.startsWith("/")) {
       continue;
     }
@@ -679,12 +705,8 @@ Please check webstudio --help for more details`
   await rm3(generatedDir, { recursive: true, force: true });
   const routesDir = join6(appRoot, "routes");
   await rm3(routesDir, { recursive: true, force: true });
-  await copyTemplates(options.template.includes("ssg") ? "ssg" : "defaults");
   await writeFile4(join6(cwd3(), ".npmrc"), "force=true");
   for (const template of options.template) {
-    if (template === "vanilla" || template === "ssg") {
-      continue;
-    }
     await copyTemplates(template);
   }
   let framework;
@@ -701,10 +723,6 @@ Please check webstudio --help for more details`
       `Project data is missing, please make sure you the project is synced.`
     );
   }
-  const domain = siteData.build.deployment?.projectDomain;
-  if (domain === void 0) {
-    throw new Error(`Project domain is missing from the project data`);
-  }
   const metas = /* @__PURE__ */ new Map();
   const componentSources = /* @__PURE__ */ new Map();
   for (const entry of framework.components) {
@@ -803,6 +821,10 @@ Please check webstudio --help for more details`
   }
   const assetsToDownload = [];
   const appDomain = options.preview ? "wstd.work" : "wstd.io";
+  const domain = siteData.build.deployment?.destination === "static" ? siteData.build.deployment?.assetsDomain : siteData.build.deployment?.projectDomain;
+  if (domain === void 0) {
+    throw new Error(`Project domain is missing from the project data`);
+  }
   const assetBuildUrl = `https://${domain}.${appDomain}/cgi/asset/`;
   const imageLoader = createImageLoader({
     imageBaseUrl: assetBuildUrl
@@ -851,6 +873,7 @@ Please check webstudio --help for more details`
       "useState",
       "Fragment",
       "useResource",
+      "useVariableState",
       "Page",
       "_props"
     ]);
@@ -948,7 +971,7 @@ Please check webstudio --help for more details`
 
       import { Fragment, useState } from "react";
       import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
-      import { useResource } from "@webstudio-is/react-sdk";
+      import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
       ${componentImports}
 
       export const siteName = ${JSON.stringify(projectMeta?.siteName)};
@@ -1102,7 +1125,23 @@ var buildOptions = (yargs) => yargs.option("assets", {
   type: "array",
   string: true,
   default: [],
-  describe: `Template to use for the build [choices: ${PROJECT_TEMPALTES.map(
+  coerce: (values) => {
+    const templates = [];
+    for (const value of values) {
+      const template = PROJECT_TEMPLATES.find((item) => item.value === value) ?? INTERNAL_TEMPLATES.find((item) => item.value === value);
+      if (template == null) {
+        templates.push(value);
+        continue;
+      }
+      if ("expand" in template && template.expand != null) {
+        templates.push(...template.expand);
+        continue;
+      }
+      templates.push(value);
+    }
+    return templates;
+  },
+  describe: `Template to use for the build [choices: ${PROJECT_TEMPLATES.map(
     (item) => item.value
   ).join(", ")}]`
 });
@@ -1178,7 +1217,7 @@ var initFlow = async (options) => {
     projectTemplate = exitIfCancelled(
       await select({
         message: "Where would you like to deploy your project?",
-        options: PROJECT_TEMPALTES
+        options: PROJECT_TEMPLATES
       })
     );
     shouldInstallDeps = exitIfCancelled(
@@ -1192,7 +1231,7 @@ var initFlow = async (options) => {
     projectTemplate = exitIfCancelled(
       await select({
         message: "Where would you like to deploy your project?",
-        options: PROJECT_TEMPALTES
+        options: PROJECT_TEMPLATES
       })
     );
   }
@@ -1242,7 +1281,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.173.0",
+  version: "0.175.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -1296,25 +1335,25 @@ var package_default = {
     "@jest/globals": "^29.7.0",
     "@netlify/remix-adapter": "^2.4.0",
     "@netlify/remix-edge-adapter": "3.3.0",
-    "@remix-run/cloudflare": "^2.10.3",
-    "@remix-run/cloudflare-pages": "^2.10.3",
-    "@remix-run/dev": "^2.10.3",
-    "@remix-run/node": "^2.10.3",
-    "@remix-run/react": "^2.10.3",
-    "@remix-run/server-runtime": "^2.10.3",
+    "@remix-run/cloudflare": "^2.11.0",
+    "@remix-run/cloudflare-pages": "^2.11.0",
+    "@remix-run/dev": "^2.11.0",
+    "@remix-run/node": "^2.11.0",
+    "@remix-run/react": "^2.11.0",
+    "@remix-run/server-runtime": "^2.11.0",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.32",
     "@vitejs/plugin-react": "^4.3.1",
-    "@webstudio-is/form-handlers": "workspace:*",
     "@webstudio-is/jest-config": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     react: "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "ts-expect": "^1.3.0",
     typescript: "5.5.2",
-    vike: "^0.4.180",
-    vite: "^5.3.4",
+    vike: "^0.4.182",
+    vite: "^5.4.0",
     wrangler: "^3.63.2"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.173.0",
+  "version": "0.175.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -37,24 +37,24 @@
     "strip-indent": "^4.0.0",
     "yargs": "^17.7.2",
     "zod": "^3.22.4",
-    "@webstudio-is/http-client": "0.173.0",
-    "@webstudio-is/sdk": "0.173.0",
-    "@webstudio-is/sdk-components-react": "0.173.0",
-    "@webstudio-is/image": "0.173.0",
-    "@webstudio-is/react-sdk": "0.173.0",
-    "@webstudio-is/sdk-components-react-radix": "0.173.0",
-    "@webstudio-is/sdk-components-react-remix": "0.173.0"
+    "@webstudio-is/http-client": "0.175.0",
+    "@webstudio-is/image": "0.175.0",
+    "@webstudio-is/react-sdk": "0.175.0",
+    "@webstudio-is/sdk": "0.175.0",
+    "@webstudio-is/sdk-components-react-remix": "0.175.0",
+    "@webstudio-is/sdk-components-react": "0.175.0",
+    "@webstudio-is/sdk-components-react-radix": "0.175.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@netlify/remix-adapter": "^2.4.0",
     "@netlify/remix-edge-adapter": "3.3.0",
-    "@remix-run/cloudflare": "^2.10.3",
-    "@remix-run/cloudflare-pages": "^2.10.3",
-    "@remix-run/dev": "^2.10.3",
-    "@remix-run/node": "^2.10.3",
-    "@remix-run/react": "^2.10.3",
-    "@remix-run/server-runtime": "^2.10.3",
+    "@remix-run/cloudflare": "^2.11.0",
+    "@remix-run/cloudflare-pages": "^2.11.0",
+    "@remix-run/dev": "^2.11.0",
+    "@remix-run/node": "^2.11.0",
+    "@remix-run/react": "^2.11.0",
+    "@remix-run/server-runtime": "^2.11.0",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
@@ -62,11 +62,11 @@
     "@vitejs/plugin-react": "^4.3.1",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "ts-expect": "^1.3.0",
     "typescript": "5.5.2",
-    "vike": "^0.4.180",
-    "vite": "^5.3.4",
+    "vike": "^0.4.182",
+    "vite": "^5.4.0",
     "wrangler": "^3.63.2",
-    "@webstudio-is/form-handlers": "0.173.0",
     "@webstudio-is/jest-config": "1.0.7",
     "@webstudio-is/tsconfig": "1.0.7"
   },

package/templates/cloudflare/package.json

@@ -12,8 +12,8 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.10.3",
-    "@remix-run/cloudflare-pages": "2.10.3"
+    "@remix-run/cloudflare": "2.11.0",
+    "@remix-run/cloudflare-pages": "2.11.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240620.0",

package/templates/defaults/app/extension.ts

@@ -1,10 +1,16 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { AppLoadContext } from "@remix-run/server-runtime";
+import { ResourceRequest } from "@webstudio-is/sdk";
 
 declare module "@remix-run/server-runtime" {
   interface AppLoadContext {
     EXCLUDE_FROM_SEARCH: boolean;
-    N8N_FORM_EMAIL_HOOK: string;
+    getDefaultActionResource?: (options: {
+      url: URL;
+      projectId: string;
+      contactEmail: string;
+      formData: FormData;
+    }) => ResourceRequest;
   }
 }

package/templates/defaults/app/route-templates/html.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import {
   type ServerRuntimeMetaFunction as MetaFunction,
   type LinksFunction,
@@ -14,13 +13,10 @@ import {
   isLocalResource,
   loadResource,
   loadResources,
-} from "@webstudio-is/sdk";
-import { ReactSdkContext } from "@webstudio-is/react-sdk";
-import {
-  n8nHandler,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/form-handlers";
+} from "@webstudio-is/sdk";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
   siteName,
@@ -251,24 +247,22 @@ export const action = async ({
   { success: true } | { success: false; errors: string[] }
 > => {
   try {
-    const pageUrl = new URL(request.url);
-    pageUrl.host = getRequestHost(request);
+    const url = new URL(request.url);
+    url.host = getRequestHost(request);
 
     const formData = await request.formData();
 
     const system = {
       params: {},
       search: {},
-      origin: pageUrl.origin,
+      origin: url.origin,
     };
 
     const resourceName = formData.get(formIdFieldName);
-
-    if (resourceName == null || typeof resourceName !== "string") {
-      throw new Error("No form id in FormData");
-    }
-
-    const resource = getResources({ system }).action.get(resourceName);
+    let resource =
+      typeof resourceName === "string"
+        ? getResources({ system }).action.get(resourceName)
+        : undefined;
 
     const formBotValue = formData.get(formBotFieldName);
 
@@ -292,32 +286,32 @@ export const action = async ({
     formData.delete(formBotFieldName);
 
     if (resource) {
-      const { ok, statusText } = await loadResource(fetch, {
-        ...resource,
-        body: Object.fromEntries(formData),
+      resource.headers.push({
+        name: "Content-Type",
+        value: "application/json",
       });
-      if (ok) {
-        return { success: true };
+      resource.body = Object.fromEntries(formData);
+    } else {
+      if (contactEmail === undefined) {
+        throw new Error("Contact email not found");
       }
-      return { success: false, errors: [statusText] };
-    }
 
-    if (contactEmail === undefined) {
-      throw new Error("Contact email not found");
-    }
-
-    const result = await n8nHandler({
-      formInfo: {
-        formId: [projectId, resourceName].join("--"),
+      resource = context.getDefaultActionResource?.({
+        url,
+        projectId,
+        contactEmail,
         formData,
-        pageUrl: pageUrl.toString(),
-        toEmail: contactEmail,
-        fromEmail: pageUrl.hostname + "@webstudio.email",
-      },
-      hookUrl: context.N8N_FORM_EMAIL_HOOK,
-    });
+      });
+    }
 
-    return result;
+    if (resource === undefined) {
+      throw Error("Resource not found");
+    }
+    const { ok, statusText } = await loadResource(fetch, resource);
+    if (ok) {
+      return { success: true };
+    }
+    return { success: false, errors: [statusText] };
   } catch (error) {
     console.error(error);
 

package/templates/defaults/app/route-templates/xml.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable camelcase */
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk";
-import { ReactSdkContext } from "@webstudio-is/react-sdk";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { Page } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageBaseUrl, imageLoader } from "__CONSTANTS__";

package/templates/defaults/package.json

@@ -8,26 +8,25 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "2.10.3",
-    "@remix-run/react": "2.10.3",
-    "@remix-run/server-runtime": "2.10.3",
-    "@webstudio-is/react-sdk": "0.173.0",
-    "@webstudio-is/sdk-components-react-radix": "0.173.0",
-    "@webstudio-is/sdk-components-react-remix": "0.173.0",
-    "@webstudio-is/sdk-components-react": "0.173.0",
-    "@webstudio-is/form-handlers": "0.173.0",
-    "@webstudio-is/image": "0.173.0",
-    "@webstudio-is/sdk": "0.173.0",
-    "isbot": "^5.1.13",
+    "@remix-run/node": "2.11.0",
+    "@remix-run/react": "2.11.0",
+    "@remix-run/server-runtime": "2.11.0",
+    "@webstudio-is/react-sdk": "0.175.0",
+    "@webstudio-is/sdk-components-react-radix": "0.175.0",
+    "@webstudio-is/sdk-components-react-remix": "0.175.0",
+    "@webstudio-is/sdk-components-react": "0.175.0",
+    "@webstudio-is/image": "0.175.0",
+    "@webstudio-is/sdk": "0.175.0",
+    "isbot": "^5.1.17",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.10.3",
+    "@remix-run/dev": "2.11.0",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.5.2",
-    "vite": "^5.3.4"
+    "vite": "^5.4.0"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/internal/package.json

@@ -4,7 +4,6 @@
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
     "@webstudio-is/sdk-components-react-remix": "workspace:*",
     "@webstudio-is/sdk-components-react": "workspace:*",
-    "@webstudio-is/form-handlers": "workspace:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/sdk": "workspace:*"
   }

package/templates/ssg/app/constants.mjs

@@ -9,5 +9,9 @@ export const imageBaseUrl = "/assets/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
+  if (URL.canParse(src)) {
+    return src;
+  }
+
   return imageBaseUrl + src;
 };

package/templates/ssg/app/route-templates/html/+Page.tsx

@@ -1,5 +1,5 @@
 import type { PageContext } from "vike/types";
-import { ReactSdkContext } from "@webstudio-is/react-sdk";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { assetBaseUrl, imageBaseUrl, imageLoader } from "__CONSTANTS__";
 import { Page } from "__CLIENT__";
 

package/templates/ssg/package.json

@@ -8,22 +8,21 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@webstudio-is/react-sdk": "0.173.0",
-    "@webstudio-is/sdk-components-react-radix": "0.173.0",
-    "@webstudio-is/sdk-components-react": "0.173.0",
-    "@webstudio-is/form-handlers": "0.173.0",
-    "@webstudio-is/image": "0.173.0",
-    "@webstudio-is/sdk": "0.173.0",
+    "@webstudio-is/react-sdk": "0.175.0",
+    "@webstudio-is/sdk-components-react-radix": "0.175.0",
+    "@webstudio-is/sdk-components-react": "0.175.0",
+    "@webstudio-is/image": "0.175.0",
+    "@webstudio-is/sdk": "0.175.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vike": "^0.4.180"
+    "vike": "^0.4.182"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^4.3.1",
     "typescript": "5.5.2",
-    "vite": "^5.3.4"
+    "vite": "^5.4.0"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/ssg-netlify/app/constants.mjs

@@ -0,0 +1,33 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+export const imageBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (URL.canParse(props.src)) {
+    return props.src;
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    return imageBaseUrl + props.src;
+  }
+
+  if (props.format === "raw") {
+    return imageBaseUrl + props.src;
+  }
+
+  // https://docs.netlify.com/image-cdn/overview/
+  return (
+    "/.netlify/images?url=" +
+    encodeURIComponent(imageBaseUrl + props.src) +
+    "&w=" +
+    props.width +
+    "&q=" +
+    props.quality
+  );
+};

package/templates/ssg-vercel/app/constants.mjs

@@ -0,0 +1,33 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+export const imageBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (URL.canParse(props.src)) {
+    return props.src;
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    return imageBaseUrl + props.src;
+  }
+
+  if (props.format === "raw") {
+    return imageBaseUrl + props.src;
+  }
+
+  // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
+  return (
+    "/_vercel/image?url=" +
+    encodeURIComponent(imageBaseUrl + props.src) +
+    "&w=" +
+    props.width +
+    "&q=" +
+    props.quality
+  );
+};

package/templates/ssg-vercel/public/vercel.json

@@ -0,0 +1,11 @@
+{
+  "images": {
+    "domains": [],
+    "sizes": [
+      16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048,
+      3840
+    ],
+    "minimumCacheTTL": 60,
+    "formats": ["image/webp", "image/avif"]
+  }
+}