Merge branch 'dev' into libsquoosh-ts-remaining

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",

src/static-build/pages/index/index.tsx

@@ -16,7 +16,8 @@ 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 { escapeStyleScriptContent } from 'static-build/utils';
+import ogImage from 'url:static-build/assets/icon-large-maskable.png';
+import { escapeStyleScriptContent, siteOrigin } from 'static-build/utils';
 import Intro from 'shared/prerendered-app/Intro';
 
 interface Props {}
@@ -27,7 +28,27 @@ 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."
+      />
+      <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={`${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" />
+      <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."
       />
       <meta
         name="viewport"

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';
+})();