webstudio 0.0.0-021f2d4

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

@@ -0,0 +1,92 @@
+import type { PageContext } from "vike/types";
+import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
+import {
+  favIconAsset,
+  pageBackgroundImageAssets,
+  pageFontAssets,
+  siteName,
+} from "__CLIENT__";
+import "__CSS__";
+
+export const Head = ({ data }: { data: PageContext["data"] }) => {
+  const { pageMeta } = data;
+  const { origin } = new URL(data.url);
+  const ldJson = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: siteName,
+    url: origin,
+  };
+  let socialImageUrl = pageMeta.socialImageUrl;
+  if (pageMeta.socialImageAssetName) {
+    socialImageUrl = `${origin}${imageLoader({
+      src: pageMeta.socialImageAssetName,
+      // Do not transform social image (not enough information do we need to do this)
+      format: "raw",
+    })}`;
+  }
+  return (
+    <>
+      {data.url && <meta property="og:url" content={data.url} />}
+      <title>{pageMeta.title}</title>
+      <meta property="og:title" content={pageMeta.title} />
+      {pageMeta.description && (
+        <>
+          <meta name="description" content={pageMeta.description} />
+          <meta property="og:description" content={pageMeta.description} />
+        </>
+      )}
+      <meta property="og:type" content="website" />
+      {siteName && <meta property="og:site_name" content={siteName} />}
+      {socialImageUrl && (
+        <meta property="og:image" content={pageMeta.socialImageUrl} />
+      )}
+      {siteName && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(ldJson, null, 2),
+          }}
+        ></script>
+      )}
+      {pageMeta.excludePageFromSearch && (
+        <meta name="robots" content="noindex, nofollow" />
+      )}
+      {pageMeta.custom.map(({ property, content }) => (
+        <meta key={property} property={property} content={content} />
+      ))}
+
+      {favIconAsset && (
+        <link
+          rel="icon"
+          href={imageLoader({
+            src: `${assetBaseUrl}${favIconAsset.name}`,
+            // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
+            width: 144,
+            height: 144,
+            fit: "pad",
+            quality: 100,
+            format: "auto",
+          })}
+        />
+      )}
+      {pageFontAssets.map((asset) => (
+        <link
+          key={asset.id}
+          rel="preload"
+          href={`${assetBaseUrl}${asset.name}`}
+          as="font"
+          crossOrigin="anonymous"
+        />
+      ))}
+      {pageBackgroundImageAssets.map((asset) => (
+        <link
+          key={asset.id}
+          rel="preload"
+          href={`${assetBaseUrl}${asset.name}`}
+          as="image"
+        />
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,21 @@
+import type { PageContext } from "vike/types";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
+import { Page } from "__CLIENT__";
+
+const PageComponent = ({ data }: { data: PageContext["data"] }) => {
+  const { system, resources, url } = data;
+  return (
+    <ReactSdkContext.Provider
+      value={{
+        imageLoader,
+        assetBaseUrl,
+        resources,
+      }}
+    >
+      {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
+      <Page key={url} system={system} />
+    </ReactSdkContext.Provider>
+  );
+};
+export default PageComponent;

package/templates/ssg/app/route-templates/html/+data.ts

@@ -0,0 +1,37 @@
+import type { PageContextServer } from "vike/types";
+import { redirect } from "vike/abort";
+import { loadResources } from "@webstudio-is/sdk/runtime";
+import { getPageMeta, getResources } from "__SERVER__";
+
+export const data = async (pageContext: PageContextServer) => {
+  const url = new URL(pageContext.urlOriginal, "http://url");
+  const headers = new Headers(pageContext.headers ?? {});
+  const host = headers.get("x-forwarded-host") || headers.get("host") || "";
+  url.host = host;
+  url.protocol = "https";
+
+  const params = pageContext.routeParams;
+  const system = {
+    params,
+    search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
+  };
+
+  const resources = await loadResources(fetch, getResources({ system }).data);
+  const pageMeta = getPageMeta({ system, resources });
+
+  if (pageMeta.redirect) {
+    const status =
+      pageMeta.status === 301 || pageMeta.status === 302
+        ? pageMeta.status
+        : 302;
+    throw redirect(pageMeta.redirect, status);
+  }
+
+  return {
+    url: url.href,
+    system,
+    resources,
+    pageMeta,
+  } satisfies PageContextServer["data"];
+};

package/templates/ssg/package.json

@@ -0,0 +1,31 @@
+{
+  "type": "module",
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@webstudio-is/image": "0.0.0-021f2d4",
+    "@webstudio-is/react-sdk": "0.0.0-021f2d4",
+    "@webstudio-is/sdk": "0.0.0-021f2d4",
+    "@webstudio-is/sdk-components-react": "0.0.0-021f2d4",
+    "@webstudio-is/sdk-components-animation": "0.0.0-021f2d4",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-021f2d4",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "vike": "^0.4.220"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "5.7.3",
+    "vite": "^5.4.11"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/templates/ssg/pages/+config.ts

@@ -0,0 +1,12 @@
+import type { Config } from "vike/types";
+
+export default {
+  meta: {
+    Head: {
+      env: { server: true, client: true },
+    },
+    lang: {
+      env: { server: true, client: true },
+    },
+  },
+} satisfies Config;

package/templates/ssg/renderer/+onRenderClient.tsx

@@ -0,0 +1,30 @@
+import { type Root, createRoot } from "react-dom/client";
+import type { OnRenderClientSync } from "vike/types";
+// @todo think about how to make __generated__ typeable
+/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+// @ts-ignore
+import { CustomCode } from "../app/__generated__/_index";
+
+let root: Root;
+
+export const onRenderClient: OnRenderClientSync = (pageContext) => {
+  const lang = pageContext.data.pageMeta.language || "en";
+  const Head = pageContext.config.Head ?? (() => <></>);
+  const Page = pageContext.Page ?? (() => <></>);
+  const htmlContent = (
+    <>
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Head data={pageContext.data} />
+        <CustomCode />
+      </head>
+      <Page data={pageContext.data} />
+    </>
+  );
+  if (root === undefined) {
+    root = createRoot(document.documentElement);
+  }
+  document.documentElement.lang = lang;
+  root.render(htmlContent);
+};

package/templates/ssg/renderer/+onRenderHtml.tsx

@@ -0,0 +1,29 @@
+import { renderToString } from "react-dom/server";
+import { dangerouslySkipEscape, escapeInject } from "vike/server";
+import type { OnRenderHtmlSync } from "vike/types";
+// @todo think about how to make __generated__ typeable
+/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+// @ts-ignore
+import { CustomCode } from "../app/__generated__/_index";
+
+export const onRenderHtml: OnRenderHtmlSync = (pageContext) => {
+  const lang = pageContext.data.pageMeta.language || "en";
+  const Head = pageContext.config.Head ?? (() => <></>);
+  const Page = pageContext.Page ?? (() => <></>);
+  const html = dangerouslySkipEscape(
+    renderToString(
+      <html lang={lang}>
+        <head>
+          <meta charSet="UTF-8" />
+          <meta name="viewport" content="width=device-width,initial-scale=1" />
+          <Head data={pageContext.data} />
+          <CustomCode />
+        </head>
+        <Page data={pageContext.data} />
+      </html>
+    )
+  );
+  return escapeInject`<!DOCTYPE html>
+${html}
+`;
+};

package/templates/ssg/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": [
+      "vite/client",
+      "@webstudio-is/react-sdk/placeholder",
+      "./vike.d.ts"
+    ],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  }
+}

package/templates/ssg/vike.d.ts

@@ -0,0 +1,25 @@
+import type { ImageLoader } from "@webstudio-is/image";
+import type { PageMeta, System } from "@webstudio-is/sdk";
+
+declare global {
+  namespace Vike {
+    interface Config {
+      lang?: (props: { data: PageData }) => string;
+      Head?: (props: { data: PageData }) => React.ReactNode;
+    }
+
+    interface PageContext {
+      constants: {
+        assetBaseUrl: string;
+        imageLoader: ImageLoader;
+      };
+      data: {
+        url: string;
+        system: System;
+        resources: Record<string, unknown>;
+        pageMeta: PageMeta;
+      };
+      Page?: (props: { data: PageData }) => React.ReactNode;
+    }
+  }
+}

package/templates/ssg/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import vike from "vike/plugin";
+
+export default defineConfig({
+  plugins: [react(), vike({ prerender: true })],
+});

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

@@ -0,0 +1,30 @@
+/**
+ * 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/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (process.env.NODE_ENV !== "production") {
+    return props.src;
+  }
+
+  if (props.format === "raw") {
+    return props.src;
+  }
+
+  // https://docs.netlify.com/image-cdn/overview/
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  if (props.height) {
+    searchParams.set("h", props.height.toString());
+  }
+  searchParams.set("q", props.quality.toString());
+  // fit=contain by default
+  return `/.netlify/images?${searchParams}`;
+};

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

@@ -0,0 +1,26 @@
+/**
+ * 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/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (process.env.NODE_ENV !== "production") {
+    return props.src;
+  }
+
+  if (props.format === "raw") {
+    return props.src;
+  }
+
+  // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  searchParams.set("q", props.quality.toString());
+  return `/_vercel/image?${searchParams}`;
+};

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

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

package/templates/vercel/.vercelignore

@@ -0,0 +1,8 @@
+node_modules
+
+.cache
+.env
+.vercel
+.webstudio
+build
+public/build

package/templates/vercel/app/constants.mjs

@@ -0,0 +1,25 @@
+/**
+ * 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/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (process.env.NODE_ENV !== "production") {
+    return props.src;
+  }
+
+  if (props.format === "raw") {
+    return props.src;
+  }
+
+  // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  searchParams.set("q", props.quality.toString());
+  return `/_vercel/image?${searchParams}`;
+};

package/templates/vercel/package.json

@@ -0,0 +1 @@
+{}

package/templates/vercel/vercel.json

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