Adds GraphQL Example

2022-11-02-og-image-demo/netlify.toml

@@ -73,9 +73,24 @@ path = "/og/pokemon/p/*"
 function = "custom-font"
 path = "/og/custom-font"
 
-# Example for dynamic-image - dynamic-image
+# Example for dynamic-image ascorbic - GitHub dynamic-image ascorbic
 [[edge_functions]]
-function = "dynamic-immge"
+function = "dynamic-image"
+path = "/og/dynamic-image"
+
+# Example for dynamic-image dthyresson - GitHub dynamic-image dthyresson
+[[edge_functions]]
+function = "dynamic-image"
+path = "/og/dynamic-image"
+
+# Example for dynamic-image RedwoodJS - GitHub dynamic-image redwoodjs
+[[edge_functions]]
+function = "dynamic-image"
+path = "/og/dynamic-image"
+
+# Example for dynamic-image default - dynamic-image
+[[edge_functions]]
+function = "dynamic-image"
 path = "/og/dynamic-image"
 
 # Example for Emoji - Shows emoji
@@ -132,3 +147,8 @@ path = "/og/pokemon"
 [[edge_functions]]
 function = "pokemon"
 path = "/og/pokemon/p/*"
+
+# Example for GraphQL Query - Fetch all image examples via GraphQL
+[[edge_functions]]
+function = "graphql"
+path = "/og/graphql"

2022-11-02-og-image-demo/netlify/edge-functions/graphql.tsx

@@ -0,0 +1,91 @@
+import React from 'https://esm.sh/[email protected]'
+import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
+import { Request, Context } from 'https://edge.netlify.com'
+
+import { errorImage } from './lib/errors.tsx'
+import { graphqlUrl } from './lib/urls.ts'
+
+export default async (request: Request, context: Context) => {
+  const graphqlQuery = `query {
+    redwood {
+      version
+      prismaVersion
+    }
+    images {
+      id
+      name
+      description
+    }
+  }`
+
+  const variables = {}
+  const headers = {}
+
+  try {
+    const image = await fetch(graphqlUrl(request), {
+      method: 'POST',
+      body: JSON.stringify({
+        query: graphqlQuery,
+        variables,
+        headers,
+      }),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}.`)
+        }
+
+        return response.json()
+      })
+      .then((payload) => {
+        const { data } = payload
+
+        console.log(data)
+
+        return new ImageResponse(
+          (
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                // alignItems: 'left',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                // fontSize: 12,
+                color: 'white',
+                background: '#2dd4bf',
+                padding: 12,
+              }}
+            >
+              <h1 tw="text-2xl m-0 p-0 mb-4 font-bold">
+                {data.images.length} OpenGraph Dynamic Image Generation Examples
+              </h1>
+              {data.images.map((image) => (
+                <p key={image.id} tw="flex m-0 p-0 text-lg font-bold">
+                  📸 "{image.name}" 👉 {image.description}
+                </p>
+              ))}
+            </div>
+          ),
+          {
+            width: 1200,
+            height: 630,
+            // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent', 'fluentFlat'
+            // Default to 'twemoji'
+            emoji: 'twemoji',
+          }
+        )
+      })
+      .catch((error) => {
+        console.error(error)
+        return errorImage
+      })
+
+    return image
+  } catch (e) {
+    console.error(e)
+
+    return errorImage
+  }
+}

2022-11-02-og-image-demo/netlify/edge-functions/lib/errors.tsx

@@ -0,0 +1,22 @@
+import React from 'https://esm.sh/[email protected]'
+import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
+
+export const errorImage = new ImageResponse(
+  (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: 72,
+        color: 'white',
+        background: '#bebebe',
+        padding: 32,
+      }}
+    >
+      Ooops.
+    </div>
+  )
+)

2022-11-02-og-image-demo/netlify/edge-functions/lib/urls.ts

@@ -0,0 +1,12 @@
+import { Request, Context } from 'https://edge.netlify.com'
+
+export const graphqlUrl = (request: Request): string => {
+  const { protocol, host } = new URL(request.url)
+
+  const api = protocol + '//' + (host || 'localhost')
+  const requestUrl = new URL(api)
+  requestUrl.host = host
+  requestUrl.pathname = '.netlify/functions/graphql'
+
+  return requestUrl.toString()
+}

2022-11-02-og-image-demo/netlify/edge-functions/pokemon.tsx

@@ -2,25 +2,7 @@ import React from 'https://esm.sh/[email protected]'
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
 import { Context } from 'https://edge.netlify.com'
 
-const errorImage = new ImageResponse(
-  (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: 72,
-        color: 'white',
-        background: '#bebebe',
-        padding: 32,
-      }}
-    >
-      Ooops.
-    </div>
-  )
-)
+import { errorImage } from './lib/errors.tsx'
 
 export default async (request: Request, context: Context) => {
   const DEFAULT_POKEMON = 'pikachu'

2022-11-02-og-image-demo/scripts/seed.ts

@@ -116,6 +116,13 @@ export default async () => {
         path: '/og/pokemon/p/*',
         src: '/og/pokemon/p/bulbasaur',
       },
+      {
+        name: 'GraphQL Query',
+        description: 'Fetch all image examples via GraphQL',
+        function: 'graphql',
+        path: '/og/graphql',
+        src: '/og/graphql',
+      },
     ]
 
     await db.image.createMany({ data })

2022-11-02-og-image-demo/web/src/components/Image/Image.tsx

@@ -1,3 +1,5 @@
+import { Link, routes } from '@redwoodjs/router'
+
 import { PhotoIcon } from '@heroicons/react/24/solid'
 
 const Image = ({ image }) => {
@@ -7,7 +9,9 @@ const Image = ({ image }) => {
       <p className="text-md mb-4 text-gray-600">{image.description}</p>
 
       <div className="align-center align-items-center mb-4 flex justify-center">
-        <img src={image.src} className="h-48" />
+        <Link key={image.id} to={routes.image({ id: image.id })}>
+          <img src={image.src} className="h-48" />
+        </Link>
       </div>
 
       <p className="text-md text-gray-500">

2022-11-02-og-image-demo/web/src/components/ImagesCell/ImagesCell.tsx

@@ -1,7 +1,6 @@
 import type { ImagesQuery } from 'types/graphql'
 import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
 
-import { Link, routes } from '@redwoodjs/router'
 import Image from 'src/components/Image/Image'
 
 export const QUERY = gql`
@@ -29,11 +28,7 @@ export const Success = ({ images }: CellSuccessProps<ImagesQuery>) => {
   return (
     <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       {images.map((example) => {
-        return (
-          <Link key={example.id} to={routes.image({ id: example.id })}>
-            <Image image={example} />
-          </Link>
-        )
+        return <Image key={`image-${example.id}`} image={example} />
       })}
     </ul>
   )