first design

README.md

@@ -1,5 +1,3 @@
-<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fog-image&demo-title=OG%20Image%20Generator&demo-description=A%20service%20that%20generates%20dynamic%20Open%20Graph%20images&demo-url=https%3A%2F%2Fog-image.vercel.app%2F&demo-image=https%3A%2F%2Fog-image.vercel.app%2FOpen%2520Graph%2520Image%2520as%2520a%2520Service.png%3Ftheme%3Dlight%26md%3D1%26fontSize%3D95px%26images%3Dhttps%253A%252F%252Fassets.vercel.com%252Fimage%252Fupload%252Ffront%252Fassets%252Fdesign%252Fzeit-black-triangle.svg"><img src="https://vercel.com/button" alt="Deploy with Vercel" align="right" width="128"/></a>
-
 # [Open Graph Image as a Service](https://og-image.vercel.app)
 
 <a href="https://twitter.com/vercel">
@@ -10,9 +8,6 @@ Serverless service that generates dynamic Open Graph images that you can embed i
 
 For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.
 
-See the image embedded in the tweet for a real use case.
-
-
 ## What is an Open Graph Image?
 
 Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup?

api/_lib/parser.ts

@@ -52,14 +52,15 @@ function getArray(stringOrArray: string[] | string | undefined): string[] {
 
 function getDefaultImages(images: string[], theme: Theme): string[] {
     const defaultImage = theme === 'light'
-        ? 'https://assets.vercel.com/image/upload/front/assets/design/vercel-triangle-black.svg'
-        : 'https://assets.vercel.com/image/upload/front/assets/design/vercel-triangle-white.svg';
+        ? '/images/ih_logo.svg'
+        : '/images/ih_logo_white.svg';
 
     if (!images || !images[0]) {
         return [defaultImage];
     }
-    if (!images[0].startsWith('https://assets.vercel.com/') && !images[0].startsWith('https://assets.zeit.co/')) {
-        images[0] = defaultImage;
-    }
+    // FIXME
+    // if (!images[0].startsWith('https://assets.vercel.com/') && !images[0].startsWith('https://assets.zeit.co/')) {
+    //     images[0] = defaultImage;
+    // }
     return images;
 }

api/_lib/sanitizer.ts

@@ -8,6 +8,6 @@ const entityMap: { [key: string]: string } = {
 };
 
 export function sanitizeHtml(html: string) {
-    return String(html).replace(/[&<>"'\/]/g, key => entityMap[key]);
+    return  String(html).replace(/[&<>"'\/]/g, key => entityMap[key]);
 }
 

api/_lib/template.ts

@@ -11,6 +11,13 @@ const rglr = readFileSync(`${__dirname}/../_fonts/Inter-Regular.woff2`).toString
 const bold = readFileSync(`${__dirname}/../_fonts/Inter-Bold.woff2`).toString('base64');
 const mono = readFileSync(`${__dirname}/../_fonts/Vera-Mono.woff2`).toString('base64');
 
+const baseUrl = {
+    development: process.env.WEBSITE_URL || 'http://localhost:3000',
+    production: `https://${process.env.VERCEL_URL}`,
+}[process.env.NODE_ENV === 'production' ? 'production' : 'development'];
+
+console.log(baseUrl)
+
 function getCss(theme: string, fontSize: string) {
     let background = 'white';
     let foreground = 'black';
@@ -134,8 +141,8 @@ export function getHtml(parsedReq: ParsedRequest) {
 function getImage(src: string, width ='auto', height = '225') {
     return `<img
         class="logo"
-        alt="Generated Image"
-        src="${sanitizeHtml(src)}"
+        alt="${baseUrl}${sanitizeHtml(src)}"
+        src="${baseUrl}${sanitizeHtml(src)}"
         width="${sanitizeHtml(width)}"
         height="${sanitizeHtml(height)}"
     />`