fix: resolve favicon images properly (#4712)

Fixes #4443
webstudio-is · Jan 5, 2025 · f495363 · f495363
1 parent 88d4aec
commit f495363
Show file tree

Hide file tree

Showing 39 changed files with 128 additions and 109 deletions.
diff --git a/fixtures/ssg-netlify-by-project-id/app/constants.mjs b/fixtures/ssg-netlify-by-project-id/app/constants.mjs
@@ -24,12 +24,13 @@ export const imageLoader = (props) => {
   }
 
   // https://docs.netlify.com/image-cdn/overview/
-  return (
-    "/.netlify/images?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  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}`;
 };
diff --git a/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx b/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx
@@ -60,7 +60,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
         <link
           rel="icon"
           href={imageLoader({
-            src: favIconAsset.name,
+            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,

diff --git a/fixtures/ssg/pages/another-page/+Head.tsx b/fixtures/ssg/pages/another-page/+Head.tsx
@@ -60,7 +60,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
         <link
           rel="icon"
           href={imageLoader({
-            src: favIconAsset.name,
+            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,

diff --git a/fixtures/ssg/pages/index/+Head.tsx b/fixtures/ssg/pages/index/+Head.tsx
@@ -60,7 +60,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
         <link
           rel="icon"
           href={imageLoader({
-            src: favIconAsset.name,
+            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,

diff --git a/fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-custom-template/app/routes/_index.tsx b/fixtures/webstudio-custom-template/app/routes/_index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/constants.mjs b/fixtures/webstudio-remix-netlify-edge-functions/app/constants.mjs
@@ -18,12 +18,13 @@ export const imageLoader = (props) => {
   }
 
   // https://docs.netlify.com/image-cdn/overview/
-  return (
-    "/.netlify/images?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  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}`;
 };
diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/[another-page]._index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/[another-page]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-netlify-functions/.webstudio/data.json b/fixtures/webstudio-remix-netlify-functions/.webstudio/data.json
@@ -1,14 +1,14 @@
 {
   "build": {
-    "id": "a2e8de30-03d5-4514-a3a6-406b3266a3af",
+    "id": "f565d527-32e7-4731-bc71-aca9e9574587",
     "projectId": "d845c167-ea07-4875-b08d-83e97c09dcce",
-    "version": 38,
-    "createdAt": "2024-07-29T12:50:07.515+00:00",
-    "updatedAt": "2024-07-29T12:50:07.515+00:00",
+    "version": 43,
+    "createdAt": "2025-01-04T11:01:50.091+00:00",
+    "updatedAt": "2025-01-04T11:01:50.091+00:00",
     "pages": {
       "meta": {
         "siteName": "",
-        "faviconAssetId": "",
+        "faviconAssetId": "d0974db9300c1a3b0fb8b291dd9fabd45ad136478908394280af2f7087e3aecd",
         "code": ""
       },
       "homePage": {
@@ -408,8 +408,10 @@
       ]
     ],
     "deployment": {
-      "domains": [],
-      "projectDomain": "cli-basic-test-d0osr"
+      "destination": "saas",
+      "domains": ["cli-basic-test-d0osr"],
+      "assetsDomain": "cli-basic-test-d0osr",
+      "excludeWstdDomainFromSearch": false
     }
   },
   "page": {

diff --git a/fixtures/webstudio-remix-netlify-functions/app/__generated__/$resources.sitemap.xml.ts b/fixtures/webstudio-remix-netlify-functions/app/__generated__/$resources.sitemap.xml.ts
diff --git a/fixtures/webstudio-remix-netlify-functions/app/__generated__/[another-page]._index.tsx b/fixtures/webstudio-remix-netlify-functions/app/__generated__/[another-page]._index.tsx
diff --git a/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.tsx b/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.tsx
diff --git a/fixtures/webstudio-remix-netlify-functions/app/constants.mjs b/fixtures/webstudio-remix-netlify-functions/app/constants.mjs
@@ -18,12 +18,13 @@ export const imageLoader = (props) => {
   }
 
   // https://docs.netlify.com/image-cdn/overview/
-  return (
-    "/.netlify/images?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  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}`;
 };
diff --git a/fixtures/webstudio-remix-netlify-functions/app/routes/[another-page]._index.tsx b/fixtures/webstudio-remix-netlify-functions/app/routes/[another-page]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-netlify-functions/package.json b/fixtures/webstudio-remix-netlify-functions/package.json
@@ -2,11 +2,11 @@
   "scripts": {
     "build": "remix vite:build",
     "dev": "remix vite:dev",
-    "start": "netlify serve",
+    "start": "npx netlify-cli serve",
     "typecheck": "tsc",
     "cli": "NODE_OPTIONS='--conditions=webstudio --import=tsx' webstudio",
     "fixtures:link": "pnpm cli link --link https://p-d845c167-ea07-4875-b08d-83e97c09dcce-dot-${BUILDER_HOST:-main.development.webstudio.is}'?authToken=e9d1343f-9298-4fd3-a66e-f89a5af2dd93'",
-    "fixtures:sync": "pnpm cli sync --buildId a2e8de30-03d5-4514-a3a6-406b3266a3af && pnpm prettier --write ./.webstudio/",
+    "fixtures:sync": "pnpm cli sync --buildId f565d527-32e7-4731-bc71-aca9e9574587 && pnpm prettier --write ./.webstudio/",
     "fixtures:build": "pnpm cli build --template netlify-functions --template internal && pnpm prettier --write ./app/ ./package.json ./tsconfig.json"
   },
   "dependencies": {

diff --git a/fixtures/webstudio-remix-vercel/app/constants.mjs b/fixtures/webstudio-remix-vercel/app/constants.mjs
@@ -18,12 +18,9 @@ export const imageLoader = (props) => {
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
-  return (
-    "/_vercel/image?url=" +
-    encodeURIComponent(props.src) +
-    "&w=" +
-    props.width +
-    "&q=" +
-    props.quality
-  );
+  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}`;
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[class-names]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[class-names]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[content-block]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[content-block]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[expressions]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[expressions]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/fixtures/webstudio-remix-vercel/app/routes/_index.tsx b/fixtures/webstudio-remix-vercel/app/routes/_index.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,

diff --git a/packages/cli/templates/defaults/app/route-templates/html.tsx b/packages/cli/templates/defaults/app/route-templates/html.tsx
@@ -205,7 +205,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: favIconAsset.name,
+        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,