webstudio 0.111.0 → 0.111.1-0d68965.0

package/lib/cli.js

@@ -357,6 +357,11 @@ var prebuild = async (options) => {
   const spinner = ora2("Scaffolding the project files");
   spinner.start();
   spinner.text = "Generating files";
+  const appRoot = "app";
+  const generatedDir = join4(appRoot, "__generated__");
+  await rm(generatedDir, { recursive: true, force: true });
+  const routesDir = join4(appRoot, "routes");
+  await rm(routesDir, { recursive: true, force: true });
   await copyTemplates();
   if (options.template !== void 0) {
     await copyTemplates(options.template);
@@ -456,6 +461,12 @@ var prebuild = async (options) => {
   }
   const assetsToDownload = [];
   const fontAssets = [];
+  const imageAssets = [];
+  for (const asset of siteData.assets) {
+    if (asset.type === "image") {
+      imageAssets.push(asset);
+    }
+  }
   const appDomain = options.preview ? "wstd.work" : "wstd.io";
   const assetBuildUrl = `https://${domain}.${appDomain}/cgi/asset/`;
   const temporaryDir = await mkdtemp(join4(tmpdir(), "webstudio-"));
@@ -466,8 +477,6 @@ var prebuild = async (options) => {
     for (const asset of siteData.assets) {
       if (asset.type === "image") {
         const imageSrc = imageLoader({
-          width: 16,
-          quality: 100,
           src: asset.name,
           format: "raw"
         });
@@ -493,11 +502,6 @@ var prebuild = async (options) => {
     }
   }
   spinner.text = "Generating routes and pages";
-  const appRoot = "app";
-  const generatedDir = join4(appRoot, "__generated__");
-  await rm(generatedDir, { recursive: true, force: true });
-  const routesDir = join4(appRoot, "routes");
-  await rm(routesDir, { recursive: true, force: true });
   const routeFileTemplate = await readFile4(
     normalize(
       join4(
@@ -556,6 +560,7 @@ var prebuild = async (options) => {
     }
     const pageData = siteDataByPage[pathName];
     const renderedPageData = {
+      site: siteData.build.pages.meta,
       page: pageData.page
     };
     const rootInstanceId = pageData.page.rootInstanceId;
@@ -583,9 +588,10 @@ var prebuild = async (options) => {
 
 import { type ReactNode, useState } from "react";
 import type { PageData } from "~/routes/_index";
-import type { Asset } from "@webstudio-is/sdk";
+import type { Asset, ImageAsset, SiteMeta } from "@webstudio-is/sdk";
 ${componentImports}
 export const fontAssets: Asset[] = ${JSON.stringify(fontAssets)}
+export const imageAssets: ImageAsset[] = ${JSON.stringify(imageAssets)}
 export const pageData: PageData = ${JSON.stringify(renderedPageData)};
 export const user: { email: string | null } | undefined = ${JSON.stringify(
       siteData.user
@@ -785,7 +791,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.111.0",
+  version: "0.111.1-0d68965.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.111.0",
+  "version": "0.111.1-0d68965.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,21 +28,21 @@
     "title-case": "^4.1.0",
     "yargs": "^17.7.2",
     "zod": "^3.21.4",
-    "@webstudio-is/http-client": "0.111.0",
-    "@webstudio-is/image": "0.111.0",
-    "@webstudio-is/react-sdk": "0.111.0",
-    "@webstudio-is/sdk": "0.111.0",
-    "@webstudio-is/sdk-components-react": "0.111.0",
-    "@webstudio-is/sdk-components-react-radix": "0.111.0",
-    "@webstudio-is/sdk-components-react-remix": "0.111.0"
+    "@webstudio-is/http-client": "0.111.1-0d68965.0",
+    "@webstudio-is/image": "0.111.1-0d68965.0",
+    "@webstudio-is/react-sdk": "0.111.1-0d68965.0",
+    "@webstudio-is/sdk": "0.111.1-0d68965.0",
+    "@webstudio-is/sdk-components-react": "0.111.1-0d68965.0",
+    "@webstudio-is/sdk-components-react-radix": "0.111.1-0d68965.0",
+    "@webstudio-is/sdk-components-react-remix": "0.111.1-0d68965.0"
   },
   "devDependencies": {
     "@types/node": "^18.17.1",
     "@types/prompts": "^2.4.5",
     "tsx": "^3.12.8",
     "typescript": "5.2.2",
-    "@webstudio-is/form-handlers": "0.111.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/form-handlers": "0.111.1-0d68965.0",
+    "@webstudio-is/tsconfig": "1.0.8-0d68965.0"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/defaults/app/extension.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { AppLoadContext } from "@remix-run/server-runtime";
+
+declare module "@remix-run/server-runtime" {
+  interface AppLoadContext {
+    EXCLUDE_FROM_SEARCH: boolean;
+  }
+}

package/templates/defaults/app/routes/[robots.txt].tsx

@@ -0,0 +1,25 @@
+import type { LoaderArgs } from "@remix-run/server-runtime";
+
+export const loader = (arg: LoaderArgs) => {
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+
+  return new Response(
+    `
+User-agent: *
+Disallow: /api/
+
+# Uncomment
+# Sitemap: https://${host}/sitemap.xml
+
+  `,
+    {
+      headers: {
+        "Content-Type": "text/plain",
+      },
+      status: 200,
+    }
+  );
+};

package/templates/defaults/remix.env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="@remix-run/dev" />
 /// <reference types="@remix-run/node" />
+

package/templates/route-template.tsx

@@ -4,9 +4,10 @@ import {
   type LinksFunction,
   type LinkDescriptor,
   type ActionArgs,
+  type LoaderArgs,
   json,
 } from "@remix-run/server-runtime";
-import type { Page as PageType } from "@webstudio-is/sdk";
+import type { Page as PageType, SiteMeta } from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
@@ -18,34 +19,122 @@ import {
   pagesPaths,
   formsProperties,
   Page,
+  imageAssets,
 } from "../__generated__/index";
 import css from "../__generated__/index.css";
 import { assetBaseUrl, imageBaseUrl, imageLoader } from "~/constants.mjs";
 
 export type PageData = {
+  site?: SiteMeta;
   page: PageType;
 };
 
-export const meta: V2_ServerRuntimeMetaFunction = () => {
-  const { page } = pageData;
-  const metas: ReturnType<V2_ServerRuntimeMetaFunction> = [
-    { title: page?.title || "Webstudio" },
-  ];
-  for (const [name, value] of Object.entries(page?.meta ?? {})) {
-    if (name.startsWith("og:")) {
-      metas.push({
-        property: name,
-        content: value,
-      });
-      continue;
-    }
+export const loader = async (arg: LoaderArgs) => {
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+
+  const url = new URL(arg.request.url);
+  url.host = host;
+  url.protocol = "https";
+
+  // typecheck
+  arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
+
+  return json(
+    {
+      host,
+      url: url.href,
+      excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH,
+    },
+    // No way for current information to change, so add cache for 10 minutes
+    // In case of CRM Data, this should be set to 0
+    { headers: { "Cache-Control": "public, max-age=600" } }
+  );
+};
+
+export const headers = () => {
+  return {
+    "Cache-Control": "public, max-age=0, must-revalidate",
+  };
+};
+
+export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
+  const { page, site } = pageData;
+
+  const metas: ReturnType<V2_ServerRuntimeMetaFunction> = [];
+
+  if (data?.url) {
+    metas.push({
+      property: "og:url",
+      content: data.url,
+    });
+  }
+
+  if (page.title) {
+    metas.push({ title: page.title });
 
     metas.push({
-      name,
-      content: value,
+      property: "og:title",
+      content: page.title,
     });
   }
 
+  metas.push({ property: "og:type", content: "website" });
+
+  const origin = `https://${data?.host}`;
+
+  if (site?.siteName) {
+    metas.push({
+      property: "og:site_name",
+      content: site.siteName,
+    });
+    metas.push({
+      "script:ld+json": {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        name: site.siteName,
+        url: origin,
+      },
+    });
+  }
+
+  if (page.meta.excludePageFromSearch || data?.excludeFromSearch) {
+    metas.push({
+      name: "robots",
+      content: "noindex",
+    });
+  }
+
+  if (page.meta.description) {
+    metas.push({
+      name: "description",
+      content: page.meta.description,
+    });
+    metas.push({
+      property: "og:description",
+      content: page.meta.description,
+    });
+  }
+
+  if (page.meta.socialImageAssetId) {
+    const imageAsset = imageAssets.find(
+      (asset) => asset.id === page.meta.socialImageAssetId
+    );
+
+    if (imageAsset) {
+      metas.push({
+        property: "og:image",
+        content: `https://${data?.host}${imageLoader({
+          src: imageAsset.name,
+          // Do not transform social image (not enough information do we need to do this)
+          format: "raw",
+        })}`,
+      });
+    }
+  }
+
   return metas;
 };
 
@@ -57,6 +146,39 @@ export const links: LinksFunction = () => {
     href: css,
   });
 
+  const { site } = pageData;
+
+  if (site?.faviconAssetId) {
+    const imageAsset = imageAssets.find(
+      (asset) => asset.id === site.faviconAssetId
+    );
+
+    if (imageAsset) {
+      result.push({
+        rel: "icon",
+        href: imageLoader({
+          src: imageAsset.name,
+          width: 128,
+          quality: 100,
+          format: "auto",
+        }),
+        type: undefined,
+      });
+    }
+  } else {
+    result.push({
+      rel: "icon",
+      href: "/favicon.ico",
+      type: "image/x-icon",
+    });
+
+    result.push({
+      rel: "shortcut icon",
+      href: "/favicon.ico",
+      type: "image/x-icon",
+    });
+  }
+
   for (const asset of fontAssets) {
     if (asset.type === "font") {
       result.push({

package/templates/vercel/app/constants.mjs

@@ -8,18 +8,22 @@ export const imageBaseUrl = "/assets/";
 /**
  * @type {import("@webstudio-is/image").ImageLoader}
  */
-export const imageLoader = ({ quality, src, width }) => {
+export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return imageBaseUrl + src;
+    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 + src) +
+    encodeURIComponent(imageBaseUrl + props.src) +
     "&w=" +
-    width +
+    props.width +
     "&q=" +
-    quality
+    props.quality
   );
 };