webstudio 0.111.0 → 0.111.1-3138155.0

package/lib/cli.js

@@ -456,6 +456,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 +472,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"
         });
@@ -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-3138155.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-3138155.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-3138155.0",
+    "@webstudio-is/image": "0.111.1-3138155.0",
+    "@webstudio-is/react-sdk": "0.111.1-3138155.0",
+    "@webstudio-is/sdk": "0.111.1-3138155.0",
+    "@webstudio-is/sdk-components-react": "0.111.1-3138155.0",
+    "@webstudio-is/sdk-components-react-radix": "0.111.1-3138155.0",
+    "@webstudio-is/sdk-components-react-remix": "0.111.1-3138155.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-3138155.0",
+    "@webstudio-is/tsconfig": "1.0.8-3138155.0"
   },
   "scripts": {
     "typecheck": "tsc",

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,78 @@ 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;
+export const loader = async (arg: LoaderArgs) => {
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  return json({ host });
+};
+
+export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
+  const { page, site } = pageData;
+
   const metas: ReturnType<V2_ServerRuntimeMetaFunction> = [
-    { title: page?.title || "Webstudio" },
+    { title: page.title },
+    {
+      property: "og:title",
+      content: page.title,
+    },
   ];
-  for (const [name, value] of Object.entries(page?.meta ?? {})) {
-    if (name.startsWith("og:")) {
-      metas.push({
-        property: name,
-        content: value,
-      });
-      continue;
-    }
 
+  if (site?.siteName) {
+    metas.push({
+      property: "og:site_name",
+      content: site.siteName,
+    });
     metas.push({
-      name,
-      content: value,
+      "script:ld+json": {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        name: site.siteName,
+        url: `https://${data?.host}`,
+      },
     });
   }
 
+  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: imageLoader({
+          src: imageAsset.name,
+          // Do not transform social image (not enough information do we need to do this)
+          format: "raw",
+        }),
+      });
+    }
+  }
+
   return metas;
 };
 
@@ -57,6 +102,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
   );
 };