Format

.vscode/settings.json

@@ -3,4 +3,4 @@
   "deno.unstable": true,
   "deno.importMap": ".netlify/edge-functions-import-map.json",
   "editor.defaultFormatter": "denoland.vscode-deno"
-}
+}

README.md

@@ -1,7 +1,8 @@
 # Open Graph Image Generation
 
 Generate Open Graph images with Deno and Netlify Edge Functions. This is a fork
-of the awesome [`@vercel/og`](https://www.npmjs.com/package/@vercel/og), ported to run on Deno.
+of the awesome [`@vercel/og`](https://www.npmjs.com/package/@vercel/og), ported
+to run on Deno.
 
 ## Usage
 
@@ -42,8 +43,8 @@ function = "og"
 path = "/og"
 ```
 
-Then run `netlify dev` and load http://localhost:8888/og, the React element will be
-rendered and responded as a PNG.
+Then run `netlify dev` and load http://localhost:8888/og, the React element will
+be rendered and responded as a PNG.
 
 To use with the Deno CLI or Deno Deploy, create a file with the following:
 
@@ -52,33 +53,30 @@ To use with the Deno CLI or Deno Deploy, create a file with the following:
 
 import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
 import React from "https://esm.sh/react@18.2.0";
-import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
+import { ImageResponse } from "https://deno.land/x/og_edge/mod.ts";
 
 async function handler(req: Request) {
-    return new ImageResponse(
-    (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: 128,
-          background: 'lavender',
-        }}
-      >
-        Hello!
-      </div>
-    )
-  )
+  return new ImageResponse(
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 128,
+        background: "lavender",
+      }}
+    >
+      Hello!
+    </div>,
+  );
 }
 
 serve(handler);
-
 ```
-Then run `deno run --allow-net=:8000 --allow-env og.tsx` 
 
+Then run `deno run --allow-net=:8000 --allow-env og.tsx`
 
 Read more about the API, supported features and check out the examples in the
 following sections.
@@ -131,9 +129,9 @@ Please refer to
 [Satori’s documentation](https://github.com/vercel/satori#documentation) for a
 list of supported HTML and CSS features.
 
-By default, `og_edge` only has the Noto Sans font included. If you need to
-use other fonts, you can pass them in the `fonts` option. Check the **Custom
-Font** example below for more details.
+By default, `og_edge` only has the Noto Sans font included. If you need to use
+other fonts, you can pass them in the `fonts` option. Check the **Custom Font**
+example below for more details.
 
 ## Examples
 
@@ -151,10 +149,12 @@ Font** example below for more details.
 
 ## Development / Contributing
 
-
 ## Acknowledgements
 
-Basically all of the credit for this goes to [shuding](https://github.com/shuding). I just ported it to Deno and added a few tweaks.
+Basically all of the credit for this goes to
+[shuding](https://github.com/shuding). I just ported it to Deno and added a few
+tweaks.
 
 ## License
-Mozilla Public Licence. Copyright Vercel and Matt Kane
+
+Mozilla Public Licence. Copyright Vercel and Matt Kane

emoji.ts

@@ -1,4 +1,3 @@
-
 const apis = {
   twemoji: (code: string) =>
     "https://twemoji.maxcdn.com/v/latest/svg/" + code.toLowerCase() + ".svg",
@@ -33,9 +32,9 @@ export function getIconCode(char: string): string {
   return d(char.indexOf(n) < 0 ? char.replace(O, "") : char);
 }
 
-function d(j:string) {
-    const t = []
-    let A = 0, k = 0
+function d(j: string) {
+  const t = [];
+  let A = 0, k = 0;
   for (let E = 0; E < j.length;) {
     A = j.charCodeAt(E++),
       k

mod.ts

@@ -86,7 +86,6 @@ const languageFontMap = {
   unknown: "Noto+Sans",
 };
 
-
 async function loadGoogleFont(font: string, text: string) {
   if (!font || !text) return;
 
@@ -114,7 +113,7 @@ async function loadGoogleFont(font: string, text: string) {
   return fetch(resource[1]).then((res) => res.arrayBuffer());
 }
 
-type Asset = SatoriOptions["fonts"][0] | string 
+type Asset = SatoriOptions["fonts"][0] | string;
 
 const assetCache = new Map<string, Asset | undefined>();
 const loadDynamicAsset = ({ emoji }: { emoji?: EmojiType }) => {

netlify/edge-functions/README.md

@@ -1 +1,2 @@
-Based on examples from https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs/pages/api
+Based on examples from
+https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs/pages/api

netlify/edge-functions/custom-font.ts

@@ -1,2 +1,2 @@
 // This is until https://github.com/netlify/edge-bundler/pull/161 is merged
-export { default } from "./custom-font.tsx"
+export { default } from "./custom-font.tsx";

netlify/edge-functions/custom-font.tsx

@@ -1,40 +1,39 @@
 /** @jsxImportSource https://esm.sh/react */
 
-import { ImageResponse } from '../../mod.ts'
+import { ImageResponse } from "../../mod.ts";
 
-const font = fetch(new URL('../../assets/TYPEWR__.TTF', import.meta.url)).then(
-  (res) => res.arrayBuffer()
-)
+const font = fetch("https://deno.land/x/og_edge@0.0.1/assets/TYPEWR__.TTF")
+  .then(
+    (res) => res.arrayBuffer(),
+  );
 
 export default async function handler() {
-  const fontData = await font
+  const fontData = await font;
 
   return new ImageResponse(
-    (
-      <div
-        style={{
-          backgroundColor: 'white',
-          height: '100%',
-          width: '100%',
-          fontSize: 100,
-          fontFamily: 'Typewriter',
-          paddingTop: '100px',
-          paddingLeft: '50px',
-        }}
-      >
-        Hello world!
-      </div>
-    ),
+    <div
+      style={{
+        backgroundColor: "white",
+        height: "100%",
+        width: "100%",
+        fontSize: 100,
+        fontFamily: "Typewriter",
+        paddingTop: "100px",
+        paddingLeft: "50px",
+      }}
+    >
+      Hello world!
+    </div>,
     {
       width: 1200,
       height: 630,
       fonts: [
         {
-          name: 'Typewriter',
+          name: "Typewriter",
           data: fontData,
-          style: 'normal',
+          style: "normal",
         },
       ],
-    }
-  )
+    },
+  );
 }

netlify/edge-functions/dynamic-image.ts

@@ -1,2 +1,2 @@
 // This is until https://github.com/netlify/edge-bundler/pull/161 is merged
-export { default } from "./dynamic-image.tsx"
+export { default } from "./dynamic-image.tsx";

netlify/edge-functions/dynamic-image.tsx

@@ -1,42 +1,40 @@
 /** @jsxImportSource https://esm.sh/react */
 
-import { ImageResponse } from '../../mod.ts'
+import { ImageResponse } from "../../mod.ts";
 
 export default function handler(req: Request) {
-  const { searchParams } = new URL(req.url)
-  const username = searchParams.get('username')
+  const { searchParams } = new URL(req.url);
+  const username = searchParams.get("username");
 
   return new ImageResponse(
-    (
-      <div
+    <div
+      style={{
+        fontSize: 60,
+        color: "black",
+        background: "#f6f6f6",
+        width: "100%",
+        height: "100%",
+        paddingTop: 50,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        display: "flex",
+      }}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        alt="avatar"
+        width="256"
+        src={`https://github.com/${username || "netlify"}.png`}
         style={{
-          fontSize: 60,
-          color: 'black',
-          background: '#f6f6f6',
-          width: '100%',
-          height: '100%',
-          paddingTop: 50,
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          display: 'flex',
+          borderRadius: 128,
         }}
-      >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          alt="avatar"
-          width="256"
-          src={`https://github.com/${username || 'netlify'}.png`}
-          style={{
-            borderRadius: 128,
-          }}
-        />
-        {username ?  <p>github.com/{username}</p> : <p>try /?username=ascorbic</p>}
-      </div>
-    ),
+      />
+      {username ? <p>github.com/{username}</p> : <p>try /?username=ascorbic</p>}
+    </div>,
     {
       width: 1200,
       height: 630,
-    }
-  )
+    },
+  );
 }

netlify/edge-functions/emoji.ts

@@ -1,2 +1,2 @@
 // This is until https://github.com/netlify/edge-bundler/pull/161 is merged
-export { default } from './emoji.tsx'
+export { default } from "./emoji.tsx";

netlify/edge-functions/emoji.tsx

@@ -1,32 +1,30 @@
 /** @jsxImportSource https://esm.sh/react */
 
-import { ImageResponse } from '../../mod.ts'
+import { ImageResponse } from "../../mod.ts";
 export default function handler() {
   return new ImageResponse(
-    (
-      <div
-        style={{
-          fontSize: 100,
-          color: 'black',
-          background: 'white',
-          width: '100%',
-          height: '100%',
-          padding: '50px 200px',
-          textAlign: 'center',
-          justifyContent: 'center',
-          alignItems: 'center',
-          display: 'flex',
-        }}
-      >
-        👋, 🌎
-      </div>
-    ),
+    <div
+      style={{
+        fontSize: 100,
+        color: "black",
+        background: "white",
+        width: "100%",
+        height: "100%",
+        padding: "50px 200px",
+        textAlign: "center",
+        justifyContent: "center",
+        alignItems: "center",
+        display: "flex",
+      }}
+    >
+      👋, 🌎
+    </div>,
     {
       width: 1200,
       height: 630,
       // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent', 'fluentFlat'
       // Default to 'twemoji'
-      emoji: 'twemoji',
-    }
-  )
+      emoji: "twemoji",
+    },
+  );
 }

netlify/edge-functions/image-svg.ts

@@ -1,2 +1,2 @@
 // This is until https://github.com/netlify/edge-bundler/pull/161 is merged
-export { default } from './image-svg.tsx'
+export { default } from "./image-svg.tsx";