Preview hover-links on Manifold

TODO: make it feel faster by hiding Tippy default CSS?

common/envs/constants.ts

@@ -3,7 +3,7 @@ import { DEV_CONFIG } from './dev'
 import { EnvConfig, PROD_CONFIG } from './prod'
 import { THEOREMONE_CONFIG } from './theoremone'
 
-export const ENV = process.env.NEXT_PUBLIC_FIREBASE_ENV ?? 'PROD'
+export const ENV = process.env.NEXT_PUBLIC_FIREBASE_ENV ?? 'DEV'
 
 const CONFIGS: { [env: string]: EnvConfig } = {
   PROD: PROD_CONFIG,

web/components/page.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx'
-import { ReactNode } from 'react'
+import { useEffect } from 'react'
 import { BottomNavBar } from './nav/nav-bar'
 import Sidebar from './nav/sidebar'
+import { initPreviews } from 'link-summoner'
+import { ReactNode } from 'react'
 import { Toaster } from 'react-hot-toast'
 
 export function Page(props: {

web/package.json

@@ -28,6 +28,7 @@
     "firebase": "9.6.0",
     "gridjs": "5.0.2",
     "gridjs-react": "5.0.2",
+    "link-summoner": "1.3.1",
     "lodash": "4.17.21",
     "next": "12.1.2",
     "node-fetch": "3.2.4",

web/pages/_app.tsx

@@ -5,6 +5,12 @@ import Head from 'next/head'
 import Script from 'next/script'
 import { usePreserveScroll } from 'web/hooks/use-preserve-scroll'
 import { QueryClient, QueryClientProvider } from 'react-query'
+import {
+  createIframe,
+  defaultRenderers,
+  iframeRenderer,
+  initPreviews,
+} from 'link-summoner'
 
 function firstLine(msg: string) {
   return msg.replace(/\r?\n.*/s, '')
@@ -23,6 +29,48 @@ function printBuildInfo() {
   }
 }
 
+const domain = 'localhost:3000'
+
+/**
+ * Example:
+ * https://manifold.markets/SG/will-elon-musk-buy-twitter-this-yea
+ * -> https://manifold.markets/embed/SG/will-elon-musk-buy-twitter-this-yea
+ */
+function rewriteToEmbed(link: string) {
+  const alreadyEmbed = link.includes(`localhost:3000/embed/`)
+  if (alreadyEmbed) return link
+
+  const match = link.match(regex)!
+
+  console.log(
+    'Hello world',
+    `http://localhost:3000/embed/${match[1]}/${match[2]}`
+  )
+
+  return `http://localhost:3000/embed/${match[1]}/${match[2]}`
+}
+// Only rewrite market links in regex
+const regex = /^https?:\/\/localhost\:3000\/(?!charity\/)([^\/]+)\/([^\/]+)/
+
+if (typeof document !== 'undefined') {
+  // Seems to be undefined; because of https://i.imgur.com/4bMQ8rA.png ?
+  console.log('initPreviews', initPreviews)
+  initPreviews({
+    renderers: [
+      // Just for localhost markets
+      {
+        canRender: async (url: URL) => regex.test(url.href),
+
+        render: async (url: URL) =>
+          createIframe(rewriteToEmbed(url.href), 'manifold-preview'),
+      },
+      // All localhost URLs
+      iframeRenderer(/localhost\:3000/),
+      ...defaultRenderers,
+    ],
+  })
+}
+
 function MyApp({ Component, pageProps }: AppProps) {
   usePreserveScroll()
 

yarn.lock

@@ -884,6 +884,11 @@
   resolved "https://registry.yarnpkg.com/@panva/asn1.js/-/asn1.js-1.0.0.tgz#dd55ae7b8129e02049f009408b97c61ccf9032f6"
   integrity sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw==
 
+"@popperjs/core@^2.9.0":
+  version "2.11.5"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
+  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -3591,6 +3596,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+link-summoner@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/link-summoner/-/link-summoner-1.3.1.tgz#90952340f7ff83066a8b58f5b4940550d47ace7a"
+  integrity sha512-TbpUMO1g+mmmaHG4VqIDK48yeAdLyLVZGffdNa7FxfrvLT2OySIrIct97BFWBw3f+5qqcWMWfC1CTTnq5m5CnQ==
+  dependencies:
+    tippy.js "^6.3.7"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -5075,6 +5087,13 @@ thunkify@^2.1.2:
   resolved "https://registry.yarnpkg.com/thunkify/-/thunkify-2.1.2.tgz#faa0e9d230c51acc95ca13a361ac05ca7e04553d"
   integrity sha1-+qDp0jDFGsyVyhOjYawFyn4EVT0=
 
+tippy.js@^6.3.7:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 tmp@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"