feat: first working version!!

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@vercel/og": "0.0.14",
     "next": "latest",
+    "node-fetch": "2.6.1",
     "react": "latest",
     "react-dom": "latest"
   },

pages/api/dynamic-image.tsx

@@ -1,20 +1,77 @@
 import { ImageResponse } from '@vercel/og'
 import { NextRequest } from 'next/server'
+import fetch from 'node-fetch';
 
 export const config = {
   runtime: 'experimental-edge',
 }
 
+const TITLE = "Measure is unceasing"
+
+const getHiTitle = (body, i) => {
+  console.log(`Getting h${i}`)
+  let hi = `h${i}`
+  let regex = new RegExp(hi + "\>(.*)\<\/" + hi)
+  console.log(regex)
+  let his = body.split("\n").filter(line => line.includes(`<${hi}>`))
+  for (let line of his) {
+    let regexOutput = regex.exec(line)
+    if (regexOutput != null) {
+      let regexMatch = regexOutput[1]
+      if (regexMatch != TITLE && !regexMatch.includes(TITLE)) {
+        return regexMatch
+      }
+    }
+  }
+  return TITLE
+}
+
+const getTitle = body => {
+  let bestH1match = getHiTitle(body, 1)
+  if (bestH1match == TITLE) {
+    let bestH2match = getHiTitle(body, 2)
+    return bestH2match
+  }
+  return bestH1match
+}
+
+const getFirstImgurImage = body => {
+  let lines = body.split("\n").filter(line => line.includes('img src="https://i.imgur.com/'))
+  if (lines.length > 0) {
+    let regex = new RegExp('img src="https://i.imgur.com/(.*?)"')
+    let regexOutput = regex.exec(lines[0])
+    if (regexOutput != null) {
+      let regexMatch = regexOutput[1]
+      let imgurUrl =  `https://i.imgur.com/${regexMatch}`
+      console.log(imgurUrl)
+      return imgurUrl
+    }
+  }
+}
+
 export default async function handler(req: NextRequest) {
   const { searchParams } = req.nextUrl
-  const username = searchParams.get('username')
-  if (!username) {
-    return new ImageResponse(<>{'Visit with "?username=vercel"'}</>, {
+  const endpoint = searchParams.get('endpoint')
+  console.log(searchParams)
+
+  if (!endpoint) {
+    return new ImageResponse(<>{'Try with "?endpoint=blog/2022/09/02/simple-estimation-examples-in-squiggle/"'}</>, {
       width: 1200,
       height: 630,
     })
   }
 
+  const response = await fetch(`https://nunosempere.com/${endpoint}`);
+  const body = await response.text();
+
+  // Ah fuck it, I'll just use a regex.
+  // 
+  let title = getTitle(body)
+  console.log(title)
+
+  let image = getFirstImgurImage(body)
+
+
   return new ImageResponse(
     (
       <div
@@ -24,23 +81,24 @@ export default async function handler(req: NextRequest) {
           background: '#f6f6f6',
           width: '100%',
           height: '100%',
-          paddingTop: 50,
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
           display: 'flex',
+          paddingTop: 40
         }}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           alt="avatar"
-          width="256"
-          src={`https://github.com/${username}.png`}
+          height="400"
+          src={image || "https://i.imgur.com/5uk7LBH.png"}
           style={{
-            borderRadius: 128,
+            borderRadius: 0,
           }}
         />
-        <p>github.com/{username}</p>
+        <h1 style={{ fontSize: "50px", paddingBottom: 0, }}>{title || "Measure is unceasing"}</h1>
+        <h2 style={{ fontSize: "30px", paddingTop: 0, }}>nunosempere.com/{endpoint}</h2>
       </div>
     ),
     {

yarn.lock

@@ -222,6 +222,11 @@ next@latest:
     "@next/swc-win32-ia32-msvc" "13.0.2"
     "@next/swc-win32-x64-msvc" "13.0.2"
 
+node-fetch@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"