Exploration - fetch og:image for feature

src/services/images.ts

@@ -3,6 +3,7 @@ import { getFodyImage } from './images/getFodyImage';
 import { getMapillaryImage } from './images/getMapillaryImage';
 import { getWikiApiUrl, getWikiImage } from './images/getWikiImage';
 import { Feature, Image } from './types';
+import { getOgImage } from './images/getOgImage';
 
 export const LOADING = null;
 
@@ -58,7 +59,22 @@ export const getFeatureImage = async (feature: Feature): Promise<Image> => {
   }
 
   // fallback to mapillary
-  return (
-    mapillaryPromise ?? (center ? await getMapillaryImage(center) : undefined)
-  );
+  if (center) {
+    const mapillaryImage = mapillaryPromise
+      ? await mapillaryPromise
+      : await getMapillaryImage(center);
+    if (mapillaryImage) {
+      return mapillaryImage;
+    }
+  }
+
+  // lets try luck with og:image
+  if (tags?.website) {
+    const ogImage = await getOgImage(tags.website);
+    if (ogImage) {
+      return ogImage;
+    }
+  }
+
+  return undefined;
 };

src/services/images/getOgImage.ts

@@ -0,0 +1,22 @@
+import { fetchText } from '../fetch';
+
+const protocol = /^\w+:\/\//;
+const fixHttp = (url) => (url.match(protocol) ? url : `http://${url}`);
+
+export const getOgImage = async (website: string) => {
+  const url = fixHttp(website);
+
+  // TODO in browser we need a proxy to avoid CORS
+  const html = await fetchText(url);
+  const content = html.match(/<meta property="og:image" content="([^"]+)"/);
+
+  if (content) {
+    return {
+      source: `${website} og:image`,
+      link: url,
+      thumb: content[1],
+      portrait: true,
+    };
+  }
+  return undefined;
+};