Create interactive demo

example/.env.example

@@ -0,0 +1 @@
+GITHUB_MAIN_BRANCH_API_DIRECTORY=

example/components/GithubCorner.tsx

@@ -0,0 +1,34 @@
+export function GithubCorner(props: any) {
+  return (
+    <svg
+      width={80}
+      height={80}
+      viewBox="0 0 250 250"
+      style={{
+        position: 'absolute',
+        top: 0,
+        border: 0,
+        right: 0,
+      }}
+      aria-hidden="true"
+      fill="#151513"
+      color="#fff"
+      {...props}
+    >
+      <path d="M0 0l115 115h15l12 27 108 108V0z" />
+      <path
+        d="M128.3 109c-14.5-9.3-9.3-19.4-9.3-19.4 3-6.9 1.5-11 1.5-11-1.3-6.6 2.9-2.3 2.9-2.3 3.9 4.6 2.1 11 2.1 11-2.6 10.3 5.1 14.6 8.9 15.9"
+        fill="currentColor"
+        style={{
+          transformOrigin: '130px 106px',
+        }}
+        className="prefix__octo-arm"
+      />
+      <path
+        d="M115 115c-.1.1 3.7 1.5 4.8.4l13.9-13.8c3.2-2.4 6.2-3.2 8.5-3-8.4-10.6-14.7-24.2 1.6-40.6 4.7-4.6 10.2-6.8 15.9-7 .6-1.6 3.5-7.4 11.7-10.9 0 0 4.7 2.4 7.4 16.1 4.3 2.4 8.4 5.6 12.1 9.2 3.6 3.6 6.8 7.8 9.2 12.2 13.7 2.6 16.2 7.3 16.2 7.3-3.6 8.2-9.4 11.1-10.9 11.7-.3 5.8-2.4 11.2-7.1 15.9-16.4 16.4-30 10-40.6 1.6.2 2.8-1 6.8-5 10.8L141 136.5c-1.2 1.2.6 5.4.8 5.3z"
+        fill="currentColor"
+        className="prefix__octo-body"
+      />
+    </svg>
+  )
+}

example/components/ImagePreview.tsx

@@ -0,0 +1,20 @@
+import NextImage from 'next/image'
+import { Box } from '@chakra-ui/react'
+
+type ImagePreviewProps = {
+  src: string
+}
+
+export function ImagePreview({ src }: ImagePreviewProps) {
+  return (
+    <Box w="100%">
+      {src ? (
+        <NextImage width={1920} height={1080} src={src} />
+      ) : (
+        <Box w="100%" h="100%">
+          Please submit form
+        </Box>
+      )}
+    </Box>
+  )
+}

example/components/Link.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+import NextLink from 'next/link'
+import { Link as ChakraLink } from '@chakra-ui/layout'
+
+type LinkProps = {
+  href: string
+  children: ReactNode
+}
+
+export function Link({ href, children }: LinkProps) {
+  return (
+    <NextLink href={href} passHref>
+      <ChakraLink color="teal.500">{children}</ChakraLink>
+    </NextLink>
+  )
+}

example/components/OptionSelect.tsx

@@ -0,0 +1,20 @@
+import { Select } from '@chakra-ui/select'
+import { useState } from 'react'
+
+type OptionSelectProps = {
+  options: Array<string>
+  onOptionSelect: (option: string) => void
+  [rest: string]: any
+}
+
+export function OptionSelect({ options, onOptionSelect, ...rest }: OptionSelectProps) {
+  return (
+    <Select {...rest} onChange={({ target: { value } }) => onOptionSelect(value)}>
+      {options.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </Select>
+  )
+}

example/components/index.ts

@@ -0,0 +1,4 @@
+export * from 'components/GithubCorner'
+export * from 'components/ImagePreview'
+export * from 'components/Link'
+export * from 'components/OptionSelect'

example/hooks/index.ts

@@ -0,0 +1 @@
+export * from 'hooks/use-og-image'

example/hooks/use-og-image.ts

@@ -0,0 +1,70 @@
+import 'isomorphic-fetch'
+
+type RetrieveOgImageResponseType = 'image' | 'html'
+
+type RetrieveOgImageStrategy = 'post-json' | 'get-query'
+
+export type RetrieveOgImageProps = {
+  content: string
+  type: RetrieveOgImageResponseType
+  strategy: RetrieveOgImageStrategy
+}
+
+export function useOgImage(routeName: string) {
+  const blobToBase64 = (blob: Blob) =>
+    new Promise((resolve, _) => {
+      const reader = new FileReader()
+      reader.onloadend = () => resolve(reader.result)
+      reader.readAsDataURL(blob)
+    })
+
+  const retrieve = async (
+    strategy: RetrieveOgImageStrategy,
+    queryOrBody: object,
+  ): Promise<RetrieveOgImageProps> => {
+    const url = `/api/${routeName}${
+      strategy === 'get-query' ? `?${new URLSearchParams({ ...queryOrBody }).toString()}` : ''
+    }`
+
+    const response = await fetch(url, {
+      method: strategy === 'get-query' ? 'GET' : 'POST',
+      ...(strategy === 'post-json'
+        ? {
+            body: JSON.stringify(queryOrBody),
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        : null),
+    })
+
+    const incomingContentType = response.headers.get('Content-Type')
+
+    const responseType: RetrieveOgImageResponseType = incomingContentType.startsWith('text/html')
+      ? 'html'
+      : incomingContentType.split('/')[0].startsWith('image')
+      ? 'image'
+      : null
+
+    if (!responseType) {
+      throw new Error(
+        `Unsupported content type ${incomingContentType}. The allowed values are "text/html" or "image/*"`,
+      )
+    }
+
+    const content =
+      responseType === 'html'
+        ? `data:text/html;charset=utf-8,${await response.text()}`
+        : await blobToBase64(await response.blob())
+
+    return {
+      content: content as string,
+      type: responseType,
+      strategy,
+    }
+  }
+
+  return {
+    retrieve,
+  }
+}

example/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited