From cea6a61366892db13439b9f30b186f731164c067 Mon Sep 17 00:00:00 2001
From: Mike DelGaudio <dmike@google.com>
Date: Fri, 9 Jul 2021 15:53:18 -0400
Subject: [PATCH 01/10] Modify meta data

---
 src/static-build/pages/index/index.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index c5809c5e..26e9376c 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -27,7 +27,19 @@ const Index: FunctionalComponent<Props> = () => (
       <title>Squoosh</title>
       <meta
         name="description"
-        content="Compress and compare images with different codecs, right in your browser"
+        content="Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser."
+      />
+      Optimizilla is the ultimate image optimizer to compress your images in
+      JPEG and PNG formats to the minimum possible size.
+      <meta
+        name="keywords"
+        content="best image optimizer, png to webp, online image compressor, image optimizer, online image optimizer, compress image, jpg to webp, shrink image size"
+      />
+      <meta property="og:title" content="Squoosh" />
+      <meta name="og:site_name" content="Squoosh" />
+      <meta
+        name="og:description"
+        content="Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser."
       />
       <meta
         name="viewport"

From f5d9535fd210dffbd173d7d131366898d216d000 Mon Sep 17 00:00:00 2001
From: Mike DelGaudio <dmike@google.com>
Date: Mon, 12 Jul 2021 11:13:51 -0400
Subject: [PATCH 02/10] adding meta tags for better SEO

---
 src/static-build/pages/index/index.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index 26e9376c..d58dad53 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -16,6 +16,7 @@ import baseCss from 'css:./base.css';
 import initialCss from 'initial-css:';
 import { allSrc } from 'client-bundle:client/initial-app';
 import favicon from 'url:static-build/assets/favicon.ico';
+import ogImage from 'url:static-build/assets/icon-large-maskable.png';
 import { escapeStyleScriptContent } from 'static-build/utils';
 import Intro from 'shared/prerendered-app/Intro';
 
@@ -29,14 +30,20 @@ const Index: FunctionalComponent<Props> = () => (
         name="description"
         content="Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser."
       />
-      Optimizilla is the ultimate image optimizer to compress your images in
-      JPEG and PNG formats to the minimum possible size.
       <meta
         name="keywords"
         content="best image optimizer, png to webp, online image compressor, image optimizer, online image optimizer, compress image, jpg to webp, shrink image size"
       />
       <meta property="og:title" content="Squoosh" />
-      <meta name="og:site_name" content="Squoosh" />
+      <meta property="og:type" content="website" />
+      <meta property="og:image" content={ogImage} />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:image:width" content="500" />
+      <meta property="og:image:height" content="500" />
+      <meta
+        property="og:image:alt"
+        content="A cartoon of a hand squeezing an image file on a dark background."
+      />
       <meta
         name="og:description"
         content="Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser."

From 71ca1ab0cae0b9140f70af3f49cb212d7102e290 Mon Sep 17 00:00:00 2001
From: Mike DelGaudio <43451174+mikedelgaudio@users.noreply.github.com>
Date: Mon, 12 Jul 2021 14:40:37 -0400
Subject: [PATCH 03/10] Update src/static-build/pages/index/index.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Joan León <joan.leon@gmail.com>
---
 src/static-build/pages/index/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index d58dad53..d16dea41 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -32,7 +32,7 @@ const Index: FunctionalComponent<Props> = () => (
       />
       <meta
         name="keywords"
-        content="best image optimizer, png to webp, online image compressor, image optimizer, online image optimizer, compress image, jpg to webp, shrink image size"
+        content="best image optimizer, png to webp, online image compressor, image optimizer, online image optimizer, compress image, jpg to webp, jpg to avif, shrink image size"
       />
       <meta property="og:title" content="Squoosh" />
       <meta property="og:type" content="website" />

From 7232524f4da95cee21745b81bc1c34e879b4a07e Mon Sep 17 00:00:00 2001
From: Mike DelGaudio <43451174+mikedelgaudio@users.noreply.github.com>
Date: Mon, 19 Jul 2021 20:20:03 -0400
Subject: [PATCH 04/10] add twitter

---
 src/static-build/pages/index/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index d16dea41..c3e25fcf 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -34,6 +34,8 @@ const Index: FunctionalComponent<Props> = () => (
         name="keywords"
         content="best image optimizer, png to webp, online image compressor, image optimizer, online image optimizer, compress image, jpg to webp, jpg to avif, shrink image size"
       />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:site" content="@SquooshApp" />
       <meta property="og:title" content="Squoosh" />
       <meta property="og:type" content="website" />
       <meta property="og:image" content={ogImage} />

From ff40000473120037ba5912bf36417f46957b2374 Mon Sep 17 00:00:00 2001
From: Mike DelGaudio <43451174+mikedelgaudio@users.noreply.github.com>
Date: Mon, 19 Jul 2021 20:28:23 -0400
Subject: [PATCH 05/10] adding secure

---
 src/static-build/pages/index/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index c3e25fcf..e1b84979 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -39,6 +39,7 @@ const Index: FunctionalComponent<Props> = () => (
       <meta property="og:title" content="Squoosh" />
       <meta property="og:type" content="website" />
       <meta property="og:image" content={ogImage} />
+      <meta property="og:image:secure" content={ogImage} />
       <meta property="og:image:type" content="image/png" />
       <meta property="og:image:width" content="500" />
       <meta property="og:image:height" content="500" />

From b37cc0784f5f0a95521c1c2fbe818604fe373f5f Mon Sep 17 00:00:00 2001
From: Mike DelGaudio <43451174+mikedelgaudio@users.noreply.github.com>
Date: Mon, 19 Jul 2021 20:31:58 -0400
Subject: [PATCH 06/10] typo fix for secure

---
 src/static-build/pages/index/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index e1b84979..8b50686f 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -39,7 +39,7 @@ const Index: FunctionalComponent<Props> = () => (
       <meta property="og:title" content="Squoosh" />
       <meta property="og:type" content="website" />
       <meta property="og:image" content={ogImage} />
-      <meta property="og:image:secure" content={ogImage} />
+      <meta property="og:image:secure_url" content={ogImage} />
       <meta property="og:image:type" content="image/png" />
       <meta property="og:image:width" content="500" />
       <meta property="og:image:height" content="500" />

From f038c1bd7da9b451141b2fcdc326657f88f5addb Mon Sep 17 00:00:00 2001
From: Surma <surma@surma.dev>
Date: Tue, 20 Jul 2021 11:26:19 +0100
Subject: [PATCH 07/10] Update src/static-build/pages/index/index.tsx

---
 src/static-build/pages/index/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index 8b50686f..9b07f287 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -36,6 +36,7 @@ const Index: FunctionalComponent<Props> = () => (
       />
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@SquooshApp" />
+      <meta name="twitter:image" content={ogImage} />
       <meta property="og:title" content="Squoosh" />
       <meta property="og:type" content="website" />
       <meta property="og:image" content={ogImage} />

From 48efb4ddebd2d78eec601d98060a94be7674dce5 Mon Sep 17 00:00:00 2001
From: Mike DelGaudio <43451174+mikedelgaudio@users.noreply.github.com>
Date: Tue, 20 Jul 2021 10:55:47 -0400
Subject: [PATCH 08/10] remove twitter image

---
 src/static-build/pages/index/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index 9b07f287..8b50686f 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -36,7 +36,6 @@ const Index: FunctionalComponent<Props> = () => (
       />
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@SquooshApp" />
-      <meta name="twitter:image" content={ogImage} />
       <meta property="og:title" content="Squoosh" />
       <meta property="og:type" content="website" />
       <meta property="og:image" content={ogImage} />

From ce7be359c08ba0efc826e787b2a33cc2868a70e8 Mon Sep 17 00:00:00 2001
From: Mike DelGaudio <43451174+mikedelgaudio@users.noreply.github.com>
Date: Mon, 26 Jul 2021 12:23:00 -0400
Subject: [PATCH 09/10] remove keywords

Co-authored-by: Anton <dev@atjn.dk>
---
 src/static-build/pages/index/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index 8b50686f..f6b64e4a 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -30,10 +30,6 @@ const Index: FunctionalComponent<Props> = () => (
         name="description"
         content="Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser."
       />
-      <meta
-        name="keywords"
-        content="best image optimizer, png to webp, online image compressor, image optimizer, online image optimizer, compress image, jpg to webp, jpg to avif, shrink image size"
-      />
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@SquooshApp" />
       <meta property="og:title" content="Squoosh" />

From 0ed7ef842f38c81b018186f2642d5a889d889622 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Tue, 27 Jul 2021 11:30:58 +0100
Subject: [PATCH 10/10] Include site origin in build

---
 package.json                           |  4 ++--
 src/static-build/pages/index/index.tsx |  9 ++++++---
 src/static-build/utils.tsx             | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 5ed11038..fbc99ee4 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,9 @@
   "scripts": {
     "build": "rollup -c && node lib/move-output.js",
     "debug": "node --inspect-brk node_modules/.bin/rollup -c",
-    "dev": "run-p watch serve",
+    "dev": "DEV_PORT=\"${DEV_PORT:=5000}\" run-p watch serve",
     "watch": "rollup -cw",
-    "serve": "serve --config ../../../serve.json .tmp/build/static"
+    "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx
index f6b64e4a..ea95d7f3 100644
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -17,7 +17,7 @@ import initialCss from 'initial-css:';
 import { allSrc } from 'client-bundle:client/initial-app';
 import favicon from 'url:static-build/assets/favicon.ico';
 import ogImage from 'url:static-build/assets/icon-large-maskable.png';
-import { escapeStyleScriptContent } from 'static-build/utils';
+import { escapeStyleScriptContent, siteOrigin } from 'static-build/utils';
 import Intro from 'shared/prerendered-app/Intro';
 
 interface Props {}
@@ -34,8 +34,11 @@ const Index: FunctionalComponent<Props> = () => (
       <meta name="twitter:site" content="@SquooshApp" />
       <meta property="og:title" content="Squoosh" />
       <meta property="og:type" content="website" />
-      <meta property="og:image" content={ogImage} />
-      <meta property="og:image:secure_url" content={ogImage} />
+      <meta property="og:image" content={`${siteOrigin}${ogImage}`} />
+      <meta
+        property="og:image:secure_url"
+        content={`${siteOrigin}${ogImage}`}
+      />
       <meta property="og:image:type" content="image/png" />
       <meta property="og:image:width" content="500" />
       <meta property="og:image:height" content="500" />
diff --git a/src/static-build/utils.tsx b/src/static-build/utils.tsx
index fa57e910..4f91cc34 100644
--- a/src/static-build/utils.tsx
+++ b/src/static-build/utils.tsx
@@ -56,3 +56,17 @@ export function escapeStyleScriptContent(str: string): string {
     .replace(/<style/g, '<\\style')
     .replace(/<\/style/g, '<\\/style');
 }
+
+/**
+ * Origin of the site, depending on the environment.
+ */
+export const siteOrigin = (() => {
+  if (process.env.DEV_PORT) return `http://localhost:${process.env.DEV_PORT}`;
+  // https://docs.netlify.com/configure-builds/environment-variables/#build-metadata
+  if (process.env.CONTEXT === 'production') return 'https://squoosh.app';
+  if (process.env.DEPLOY_PRIME_URL) return process.env.DEPLOY_PRIME_URL;
+  console.warn(
+    'Unable to determine site origin, defaulting to https://squoosh.app',
+  );
+  return 'https://squoosh.app';
+})();