feat: Add head component (#4751)

## Description

Allows Head component

Hidden under `headSlotComponent` flag

Vercel fixture now have a HTMLRewriter example. Improves development.

## Todo In Next PR
- Head Title support
- Icons
- Allow reset `as` field

- [x] - BG is now white always
- [x] - It's shown as fixed element to not break layout 


##  Implementation details

This component has more priority above PageSettings meta tags
e.g. If some tag exists in PageSettings and in HeadSlot the HeadSlot
wins

## Steps for reproduction

Create HeadSlot

<img width="674" alt="image"
src="https://github.com/user-attachments/assets/b41f878e-b8fd-48b4-9204-5f079dc1719b"
/>

- [x] - Visit
https://webstudio-fixture-project-a-0su3o.wstd.work/head-tag
check server response.

<img width="433" alt="image"
src="https://github.com/user-attachments/assets/efb7de0d-c23e-4b0d-b775-170e6b61648e"
/>

See `og:title` is not duplicated.

- [x] - Check Elements Panel

<img width="565" alt="image"
src="https://github.com/user-attachments/assets/5742c3a8-47b1-4877-9b01-528eb3afffe5"
/>

See no duplicated. All tags exists.


- [x] - Click Home. 
See no meta tags are in Elements panel from `/head-tag` page

- [x] - Click back button

<img width="555" alt="image"
src="https://github.com/user-attachments/assets/2b166249-5fd0-4d0f-a451-ff3c1b4e62b5"
/>

See all meta is rendered and is not duplicated. 



## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

.github/workflows/main.yml

@@ -85,7 +85,7 @@ jobs:
             const results = [
               await assertSize('./fixtures/ssg/dist/client', 352),
               await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 440),
-              await assertSize('./fixtures/webstudio-remix-vercel/build/client', 908),
+              await assertSize('./fixtures/webstudio-remix-vercel/build/client', 926),
             ]
             for (const result of results) {
               if (result.passed) {

apps/builder/app/builder/features/components/components.tsx

@@ -61,6 +61,14 @@ const $metas = computed(
     for (const [name, componentMeta] of componentMetas) {
       // only set available components from component meta
       availableComponents.add(name);
+
+      if (
+        isFeatureEnabled("headSlotComponent") === false &&
+        name === "HeadSlot"
+      ) {
+        continue;
+      }
+
       metas.push({
         name,
         category: componentMeta.category ?? "hidden",

fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx

@@ -16,7 +16,10 @@ import {
   formIdFieldName,
   formBotFieldName,
 } from "@webstudio-is/sdk/runtime";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  PageSettingsMeta,
+} from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
   siteName,
@@ -117,33 +120,15 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (data === undefined) {
     return metas;
   }
-  const { pageMeta } = data;
 
-  if (data.url) {
-    metas.push({
-      property: "og:url",
-      content: data.url,
-    });
-  }
+  const { pageMeta } = data;
+  const origin = `https://${data.host}`;
 
   if (pageMeta.title) {
     metas.push({ title: pageMeta.title });
-
-    metas.push({
-      property: "og:title",
-      content: pageMeta.title,
-    });
   }
 
-  metas.push({ property: "og:type", content: "website" });
-
-  const origin = `https://${data.host}`;
-
   if (siteName) {
-    metas.push({
-      property: "og:site_name",
-      content: siteName,
-    });
     metas.push({
       "script:ld+json": {
         "@context": "https://schema.org",
@@ -154,42 +139,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (pageMeta.excludePageFromSearch) {
-    metas.push({
-      name: "robots",
-      content: "noindex, nofollow",
-    });
-  }
-
-  if (pageMeta.description) {
-    metas.push({
-      name: "description",
-      content: pageMeta.description,
-    });
-    metas.push({
-      property: "og:description",
-      content: pageMeta.description,
-    });
-  }
-
-  if (pageMeta.socialImageAssetName) {
-    metas.push({
-      property: "og:image",
-      content: `https://${data.host}${imageLoader({
-        src: pageMeta.socialImageAssetName,
-        // Do not transform social image (not enough information do we need to do this)
-        format: "raw",
-      })}`,
-    });
-  } else if (pageMeta.socialImageUrl) {
-    metas.push({
-      property: "og:image",
-      content: pageMeta.socialImageUrl,
-    });
-  }
-
-  metas.push(...pageMeta.custom);
-
   return metas;
 };
 
@@ -323,7 +272,8 @@ export const action = async ({
 };
 
 const Outlet = () => {
-  const { system, resources, url } = useLoaderData<typeof loader>();
+  const { system, resources, url, pageMeta, host } =
+    useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -334,6 +284,13 @@ const Outlet = () => {
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
       <Page key={url} system={system} />
+      <PageSettingsMeta
+        url={url}
+        pageMeta={pageMeta}
+        host={host}
+        siteName={siteName}
+        imageLoader={imageLoader}
+      />
     </ReactSdkContext.Provider>
   );
 };

fixtures/webstudio-cloudflare-template/app/routes/_index.tsx

@@ -16,7 +16,10 @@ import {
   formIdFieldName,
   formBotFieldName,
 } from "@webstudio-is/sdk/runtime";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  PageSettingsMeta,
+} from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
   siteName,
@@ -117,33 +120,15 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (data === undefined) {
     return metas;
   }
-  const { pageMeta } = data;
 
-  if (data.url) {
-    metas.push({
-      property: "og:url",
-      content: data.url,
-    });
-  }
+  const { pageMeta } = data;
+  const origin = `https://${data.host}`;
 
   if (pageMeta.title) {
     metas.push({ title: pageMeta.title });
-
-    metas.push({
-      property: "og:title",
-      content: pageMeta.title,
-    });
   }
 
-  metas.push({ property: "og:type", content: "website" });
-
-  const origin = `https://${data.host}`;
-
   if (siteName) {
-    metas.push({
-      property: "og:site_name",
-      content: siteName,
-    });
     metas.push({
       "script:ld+json": {
         "@context": "https://schema.org",
@@ -154,42 +139,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (pageMeta.excludePageFromSearch) {
-    metas.push({
-      name: "robots",
-      content: "noindex, nofollow",
-    });
-  }
-
-  if (pageMeta.description) {
-    metas.push({
-      name: "description",
-      content: pageMeta.description,
-    });
-    metas.push({
-      property: "og:description",
-      content: pageMeta.description,
-    });
-  }
-
-  if (pageMeta.socialImageAssetName) {
-    metas.push({
-      property: "og:image",
-      content: `https://${data.host}${imageLoader({
-        src: pageMeta.socialImageAssetName,
-        // Do not transform social image (not enough information do we need to do this)
-        format: "raw",
-      })}`,
-    });
-  } else if (pageMeta.socialImageUrl) {
-    metas.push({
-      property: "og:image",
-      content: pageMeta.socialImageUrl,
-    });
-  }
-
-  metas.push(...pageMeta.custom);
-
   return metas;
 };
 
@@ -323,7 +272,8 @@ export const action = async ({
 };
 
 const Outlet = () => {
-  const { system, resources, url } = useLoaderData<typeof loader>();
+  const { system, resources, url, pageMeta, host } =
+    useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -334,6 +284,13 @@ const Outlet = () => {
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
       <Page key={url} system={system} />
+      <PageSettingsMeta
+        url={url}
+        pageMeta={pageMeta}
+        host={host}
+        siteName={siteName}
+        imageLoader={imageLoader}
+      />
     </ReactSdkContext.Provider>
   );
 };

fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx

@@ -16,7 +16,10 @@ import {
   formIdFieldName,
   formBotFieldName,
 } from "@webstudio-is/sdk/runtime";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  PageSettingsMeta,
+} from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
   siteName,
@@ -117,33 +120,15 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (data === undefined) {
     return metas;
   }
-  const { pageMeta } = data;
 
-  if (data.url) {
-    metas.push({
-      property: "og:url",
-      content: data.url,
-    });
-  }
+  const { pageMeta } = data;
+  const origin = `https://${data.host}`;
 
   if (pageMeta.title) {
     metas.push({ title: pageMeta.title });
-
-    metas.push({
-      property: "og:title",
-      content: pageMeta.title,
-    });
   }
 
-  metas.push({ property: "og:type", content: "website" });
-
-  const origin = `https://${data.host}`;
-
   if (siteName) {
-    metas.push({
-      property: "og:site_name",
-      content: siteName,
-    });
     metas.push({
       "script:ld+json": {
         "@context": "https://schema.org",
@@ -154,42 +139,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (pageMeta.excludePageFromSearch) {
-    metas.push({
-      name: "robots",
-      content: "noindex, nofollow",
-    });
-  }
-
-  if (pageMeta.description) {
-    metas.push({
-      name: "description",
-      content: pageMeta.description,
-    });
-    metas.push({
-      property: "og:description",
-      content: pageMeta.description,
-    });
-  }
-
-  if (pageMeta.socialImageAssetName) {
-    metas.push({
-      property: "og:image",
-      content: `https://${data.host}${imageLoader({
-        src: pageMeta.socialImageAssetName,
-        // Do not transform social image (not enough information do we need to do this)
-        format: "raw",
-      })}`,
-    });
-  } else if (pageMeta.socialImageUrl) {
-    metas.push({
-      property: "og:image",
-      content: pageMeta.socialImageUrl,
-    });
-  }
-
-  metas.push(...pageMeta.custom);
-
   return metas;
 };
 
@@ -323,7 +272,8 @@ export const action = async ({
 };
 
 const Outlet = () => {
-  const { system, resources, url } = useLoaderData<typeof loader>();
+  const { system, resources, url, pageMeta, host } =
+    useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -334,6 +284,13 @@ const Outlet = () => {
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
       <Page key={url} system={system} />
+      <PageSettingsMeta
+        url={url}
+        pageMeta={pageMeta}
+        host={host}
+        siteName={siteName}
+        imageLoader={imageLoader}
+      />
     </ReactSdkContext.Provider>
   );
 };