manifold/web/pages/_app.tsx

import 'tailwindcss/tailwind.css'
import type { AppProps } from 'next/app'
import { useEffect } from 'react'
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, '')
}

function printBuildInfo() {
  // These are undefined if e.g. dev server
  if (process.env.NEXT_PUBLIC_VERCEL_ENV) {
    const env = process.env.NEXT_PUBLIC_VERCEL_ENV
    const msg = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_MESSAGE
    const owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER
    const repo = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG
    const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
    const url = `https://github.com/${owner}/${repo}/commit/${sha}`
    console.info(`Build: ${env} / ${firstLine(msg || '???')} / ${url}`)
  }
}

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()

  useEffect(printBuildInfo, [])

  return (
    <>
      <Script src="https://www.googletagmanager.com/gtag/js?id=G-SSFK1Q138D" />
      <Script id="google-analytics">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-SSFK1Q138D');
        `}
      </Script>
      {/* Hotjar Tracking Code for https://manifold.markets */}
      <Script id="hotjar">
        {`
          (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:2968940,hjsv:6};
            a=o.getElementsByTagName('head')[0];
            r=o.createElement('script');r.async=1;
            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
            a.appendChild(r);
          })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
        `}
      </Script>
      <Head>
        <title>Manifold Markets — A market for every question</title>

        <meta
          property="og:title"
          name="twitter:title"
          content="Manifold Markets — A market for every question"
          key="title"
        />
        <meta
          name="description"
          content="Manifold Markets lets you create a market on any question. Sign up in 30 seconds and start trading on politics, sports, or anything that interests you."
          key="description1"
        />
        <meta
          property="og:description"
          name="twitter:description"
          content="Manifold Markets lets you create a market on any question. Sign up in 30 seconds and start trading on politics, sports, or anything that interests you."
          key="description2"
        />
        <meta property="og:url" content="https://manifold.markets" key="url" />
        <meta name="twitter:card" content="summary" key="card" />
        <meta name="twitter:site" content="@manifoldmarkets" />
        <meta
          property="og:image"
          content="https://manifold.markets/logo-cover.png"
          key="image1"
        />
        <meta
          name="twitter:image"
          content="https://manifold.markets/logo-bg-white.png"
          key="image2"
        />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1"
        />
      </Head>

      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </>
  )
}

const queryClient = new QueryClient()

export default MyApp
Prettier: no semi, spaces 2, single quote, trailing comma 2021-12-02 23:49:46 +00:00			`import 'tailwindcss/tailwind.css'`
			`import type { AppProps } from 'next/app'`
Print out build info in console (#179) * Print out build info in console * Fix up build info printing per feedback 2022-05-11 03:57:09 +00:00			`import { useEffect } from 'react'`
test 2021-12-16 04:52:07 +00:00			`import Head from 'next/head'`
Reinstate eslint warning cleanup (#174) * Reinstate eslint upgrade and related fixes * Another shot at improving ContractLeaderboard 2022-05-10 21:49:24 +00:00			`import Script from 'next/script'`
More absolute imports (#156) * Configure functions module to allow absolute imports * Convert common imports in functions to be absolute * Convert common imports in web to be absolute * Convert lib imports in web to be absolute * Convert hooks imports in web to be absolute * Convert components imports in web to be absolute 2022-05-09 13:04:36 +00:00			`import { usePreserveScroll } from 'web/hooks/use-preserve-scroll'`
Categories (#132) * basic market categories * use tags to store market category * display category in market * display full category * category selector component on feed * Move feed data fetching to new file * Decrease batch size for updating feed to prevent out-of-memory error * Compute and update category feeds! * Show feeds based on category tabs * Add react-query package! * Use react query to cache contracts * Remove 'other' category * Add back personal / friends to feed categories * Show scrollbar temporarily for categories * Remove 5 categories, change geopolitics to world * finance => economics * Show categories on two lines on larger screens Co-authored-by: James Grugett <jahooma@gmail.com> 2022-05-12 15:07:10 +00:00			`import { QueryClient, QueryClientProvider } from 'react-query'`
Preview hover-links on Manifold TODO: make it feel faster by hiding Tippy default CSS? 2022-05-28 04:26:59 +00:00			`import {`
			`createIframe,`
			`defaultRenderers,`
			`iframeRenderer,`
			`initPreviews,`
			`} from 'link-summoner'`
Create Nextjs template app under web directory. 2021-12-01 04:20:13 +00:00
Truncate multi-line commit messages in console build info (#180) 2022-05-11 04:12:00 +00:00			`function firstLine(msg: string) {`
			`return msg.replace(/\r?\n.*/s, '')`
			`}`

Print out build info in console (#179) * Print out build info in console * Fix up build info printing per feedback 2022-05-11 03:57:09 +00:00			`function printBuildInfo() {`
			`// These are undefined if e.g. dev server`
			`if (process.env.NEXT_PUBLIC_VERCEL_ENV) {`
Add more linting to `web` package (#343) * Import React a lot * Fix misc. linting concerns * Turn on many recommended lints for `web` package 2022-05-26 21:41:24 +00:00			`const env = process.env.NEXT_PUBLIC_VERCEL_ENV`
			`const msg = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_MESSAGE`
			`const owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER`
			`const repo = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG`
			`const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA`
			const url = `https://github.com/${owner}/${repo}/commit/${sha}`
Truncate multi-line commit messages in console build info (#180) 2022-05-11 04:12:00 +00:00			console.info(`Build: ${env} / ${firstLine(msg \|\| '???')} / ${url}`)
Print out build info in console (#179) * Print out build info in console * Fix up build info printing per feedback 2022-05-11 03:57:09 +00:00			`}`
			`}`

Preview hover-links on Manifold TODO: make it feel faster by hiding Tippy default CSS? 2022-05-28 04:26:59 +00:00			`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,`
			`],`
			`})`
			`}`

Create Nextjs template app under web directory. 2021-12-01 04:20:13 +00:00			`function MyApp({ Component, pageProps }: AppProps) {`
Preserve scroll on back 2022-01-15 00:43:00 +00:00			`usePreserveScroll()`

Print build info only once 2022-05-13 18:33:02 +00:00			`useEffect(printBuildInfo, [])`
Print out build info in console (#179) * Print out build info in console * Fix up build info printing per feedback 2022-05-11 03:57:09 +00:00
test 2021-12-16 04:52:07 +00:00			`return (`
			`<>`
Reinstate eslint warning cleanup (#174) * Reinstate eslint upgrade and related fixes * Another shot at improving ContractLeaderboard 2022-05-10 21:49:24 +00:00			`<Script src="https://www.googletagmanager.com/gtag/js?id=G-SSFK1Q138D" />`
			`<Script id="google-analytics">`
			{`
			`window.dataLayer = window.dataLayer \|\| [];`
			`function gtag(){dataLayer.push(arguments);}`
			`gtag('js', new Date());`
			`gtag('config', 'G-SSFK1Q138D');`
			`}
			`</Script>`
Try out Hotjar 2022-05-13 14:11:57 +00:00			`{/* Hotjar Tracking Code for https://manifold.markets */}`
Put back hotjar code, but deactivate from hotjar site 2022-05-13 19:07:32 +00:00			`<Script id="hotjar">`
Try out Hotjar 2022-05-13 14:11:57 +00:00			{`
Fix hotjar typo Copy+pasting is hard >.> 2022-05-13 14:59:47 +00:00			`(function(h,o,t,j,a,r){`
Try out Hotjar 2022-05-13 14:11:57 +00:00			`h.hj=h.hj\|\|function(){(h.hj.q=h.hj.q\|\|[]).push(arguments)};`
			`h._hjSettings={hjid:2968940,hjsv:6};`
			`a=o.getElementsByTagName('head')[0];`
			`r=o.createElement('script');r.async=1;`
			`r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;`
			`a.appendChild(r);`
			`})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`
			`}
Put back hotjar code, but deactivate from hotjar site 2022-05-13 19:07:32 +00:00			`</Script>`
test 2021-12-16 04:52:07 +00:00			`<Head>`
"A market for every question" 2022-04-06 18:20:16 +00:00			`<title>Manifold Markets — A market for every question</title>`
test 2021-12-16 04:52:07 +00:00
			`<meta`
			`property="og:title"`
			`name="twitter:title"`
"A market for every question" 2022-04-06 18:20:16 +00:00			`content="Manifold Markets — A market for every question"`
test 2021-12-16 04:52:07 +00:00			`key="title"`
			`/>`
			`<meta`
			`name="description"`
"A market for every question" 2022-04-06 18:20:16 +00:00			`content="Manifold Markets lets you create a market on any question. Sign up in 30 seconds and start trading on politics, sports, or anything that interests you."`
SEO component 2021-12-16 18:40:23 +00:00			`key="description1"`
test 2021-12-16 04:52:07 +00:00			`/>`
			`<meta`
			`property="og:description"`
			`name="twitter:description"`
"A market for every question" 2022-04-06 18:20:16 +00:00			`content="Manifold Markets lets you create a market on any question. Sign up in 30 seconds and start trading on politics, sports, or anything that interests you."`
SEO component 2021-12-16 18:40:23 +00:00			`key="description2"`
test 2021-12-16 04:52:07 +00:00			`/>`
Rename to Manifold Markets! (#19) * Update logo and about page to manifold * Change urls, titles / metatags, landing page 2022-01-06 18:48:30 +00:00			`<meta property="og:url" content="https://manifold.markets" key="url" />`
Use the generated OpenGraph card in all markets (#23) * Run OpenGraph server on dev port 3001 * Cut '%' since frontend already passes it * Use the generated card in markets * Rename to ogCardProps * Don't show creator avatar url, for now * Remove bad comment 2022-01-10 07:05:24 +00:00			`<meta name="twitter:card" content="summary" key="card" />`
Rename to Manifold Markets! (#19) * Update logo and about page to manifold * Change urls, titles / metatags, landing page 2022-01-06 18:48:30 +00:00			`<meta name="twitter:site" content="@manifoldmarkets" />`
test 2021-12-16 04:52:07 +00:00			`<meta`
			`property="og:image"`
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case 2022-01-10 05:50:31 +00:00			`content="https://manifold.markets/logo-cover.png"`
Use the generated OpenGraph card in all markets (#23) * Run OpenGraph server on dev port 3001 * Cut '%' since frontend already passes it * Use the generated card in markets * Rename to ogCardProps * Don't show creator avatar url, for now * Remove bad comment 2022-01-10 07:05:24 +00:00			`key="image1"`
meta image tag 2022-01-07 03:54:11 +00:00			`/>`
			`<meta`
test 2021-12-16 04:52:07 +00:00			`name="twitter:image"`
New logo: oragami crane (#25) * new logo * Switch out mantis for crane in logos * White svg on dark background. Align correctly on landing page. * Mobile navbar: hide your name, write out Manifold Markets Co-authored-by: mantikoros <sgrugett@gmail.com> 2022-01-11 06:16:58 +00:00			`content="https://manifold.markets/logo-bg-white.png"`
Use the generated OpenGraph card in all markets (#23) * Run OpenGraph server on dev port 3001 * Cut '%' since frontend already passes it * Use the generated card in markets * Rename to ogCardProps * Don't show creator avatar url, for now * Remove bad comment 2022-01-10 07:05:24 +00:00			`key="image2"`
test 2021-12-16 04:52:07 +00:00			`/>`
app: viewport meta tag to prevent Safari from automatically zooming in 2022-04-07 03:54:44 +00:00			`<meta`
			`name="viewport"`
			`content="width=device-width, initial-scale=1, maximum-scale=1"`
			`/>`
test 2021-12-16 04:52:07 +00:00			`</Head>`
Categories (#132) * basic market categories * use tags to store market category * display category in market * display full category * category selector component on feed * Move feed data fetching to new file * Decrease batch size for updating feed to prevent out-of-memory error * Compute and update category feeds! * Show feeds based on category tabs * Add react-query package! * Use react query to cache contracts * Remove 'other' category * Add back personal / friends to feed categories * Show scrollbar temporarily for categories * Remove 5 categories, change geopolitics to world * finance => economics * Show categories on two lines on larger screens Co-authored-by: James Grugett <jahooma@gmail.com> 2022-05-12 15:07:10 +00:00
			`<QueryClientProvider client={queryClient}>`
			`<Component {...pageProps} />`
			`</QueryClientProvider>`
test 2021-12-16 04:52:07 +00:00			`</>`
			`)`
Create Nextjs template app under web directory. 2021-12-01 04:20:13 +00:00			`}`

Categories (#132) * basic market categories * use tags to store market category * display category in market * display full category * category selector component on feed * Move feed data fetching to new file * Decrease batch size for updating feed to prevent out-of-memory error * Compute and update category feeds! * Show feeds based on category tabs * Add react-query package! * Use react query to cache contracts * Remove 'other' category * Add back personal / friends to feed categories * Show scrollbar temporarily for categories * Remove 5 categories, change geopolitics to world * finance => economics * Show categories on two lines on larger screens Co-authored-by: James Grugett <jahooma@gmail.com> 2022-05-12 15:07:10 +00:00			`const queryClient = new QueryClient()`

Prettier: no semi, spaces 2, single quote, trailing comma 2021-12-02 23:49:46 +00:00			`export default MyApp`