Add screenshotting

.gitignore

@@ -14,4 +14,5 @@ yarn-debug.log*
 yarn-error.log*
 
 # misc
-.DS_Store
+.DS_Store
+.env

pages/api/screenshot.ts

@@ -0,0 +1,27 @@
+import 'isomorphic-fetch';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+async function getScreenshot() {
+  const request = await fetch(`https://api.browshot.com/api/v1/screenshot/create?url=https://cryptofees.info/&instance_id=12&size=screen&cache=${60 * 60 * 24}&key=${process.env.NEXT_APP_BROWSHOT}`)
+  const json = await request.json();
+
+  if (json.status === 'in_queue') {
+    await wait(500);
+    return getScreenshot();
+  }
+
+  return json;
+}
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const screenshot = await getScreenshot();
+
+  res.writeHead(302, {
+    Location: screenshot.screenshot_url,
+  });
+  res.end();
+};
+
+export default handler

pages/index.tsx

@@ -27,12 +27,12 @@ export const Home: NextPage<HomeProps> = ({ data }) => {
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" />
 
         <meta property="og:title" content="Crypto Fees" />
-        <meta property="og:image" content="https://cryptofees.info/screenshot.jpg" />
+        <meta property="og:image" content="https://cryptofees.info/api/screenshot" />
         <meta property="og:description" content="There's tons of crypto projects. Which ones are people actually paying to use?" />
 
         <meta name="twitter:title" content="Crypto Fees" />
         <meta name="twitter:description" content="There's tons of crypto projects. Which ones are people actually paying to use?" />
-        <meta name="twitter:image" content="https://cryptofees.info/screenshot.jpg" />
+        <meta name="twitter:image" content="https://cryptofees.info/api/screenshot" />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>