move stuff to opengraph-image.jsx files

src/app/generator/page.js

···
     const fn = async () => {
       if (!addr) return;
       const params = new URLSearchParams(props)
-      const image = await fetch(`/${addr}/preview?${params.toString()}`)
+      const image = await fetch(`/${addr}/opengraph-image?${params.toString()}`)
       if (image.status !== 200) return;
       const imageBlob = await image.blob()
       const reader = new FileReader()

src/app/series/[seriesId]/opengraph-image.jsx

···
+import { getSeries } from "@fujocoded/ao3.js"
+import sanitizeData from "@/lib/sanitizeData.js"
+import OGImage from "@/lib/ogimage.js"
+import baseFonts from "@/lib/baseFonts.js"
+import titleFonts from "@/lib/titleFonts.js"
+
+export const size = {
+  width: 1600,
+  height: 900,
+}
+export const alt = 'fixAO3'
+
+export const contentType = 'image/webp'
+
+export default async function Image({params}) {
+  const { seriesId } = await params
+  const props = new URLSearchParams({
+    theme: 'ao3',
+    baseFont: 'bricolagegrotesque',
+    titleFont: 'stacksansnotch',
+    category: true,
+    rating: true,
+    warnings: false,
+    charTags: false,
+    relTags: false,
+    freeTags: false,
+    summary: true,
+    wordcount: true,
+    chapters: true,
+    postedAt: true,
+    updatedAt: false,
+    summaryType: 'basic',
+    customSummary: ''
+  })
+  const addr = `series/${seriesId}`
+  const data = await getSeries({seriesId: seriesId})
+  const imageParams = await sanitizeData({type: 'series', data: data, props: props})
+  const theme = imageParams.theme
+  const baseFont = baseFonts[imageParams.baseFont].displayName
+  const titleFont = titleFonts[imageParams.titleFont].displayName
+  const opts = imageParams.opts
+  return OGImage({theme: theme, baseFont: baseFont, titleFont: titleFont, image: imageParams, addr: addr, opts: opts})
+}

src/app/series/[seriesId]/page.js

···
     title: title,
     description: description, 
     openGraph: {
-      description: description,
-      images: [`/${addr}/preview`]
+      description: description
     }
   }
 }

src/app/works/[workId]/chapters/[chapterId]/opengraph-image.jsx

···
+import { getWork } from "@fujocoded/ao3.js"
+import sanitizeData from "@/lib/sanitizeData.js"
+import OGImage from "@/lib/ogimage.js"
+import baseFonts from "@/lib/baseFonts.js"
+import titleFonts from "@/lib/titleFonts.js"
+
+export const size = {
+  width: 1600,
+  height: 900,
+}
+export const alt = 'fixAO3'
+
+export const contentType = 'image/webp'
+
+export default async function Image({params}) {
+  const { workId, chapterId } = await params
+  const props = new URLSearchParams({
+    theme: 'ao3',
+    baseFont: 'bricolagegrotesque',
+    titleFont: 'stacksansnotch',
+    category: true,
+    rating: true,
+    warnings: false,
+    charTags: false,
+    relTags: false,
+    freeTags: false,
+    summary: true,
+    wordcount: true,
+    chapters: true,
+    postedAt: true,
+    updatedAt: false,
+    summaryType: 'basic',
+    customSummary: ''
+  })
+  const addr = `works/${workId}/chapters/${chapterId}`
+  const data = await getWork({workId: workId, chapterId: chapterId})
+  const imageParams = await sanitizeData({type: 'work', data: data, props: props})
+  const theme = imageParams.theme
+  const baseFont = baseFonts[imageParams.baseFont].displayName
+  const titleFont = titleFonts[imageParams.titleFont].displayName
+  const opts = imageParams.opts
+  return OGImage({theme: theme, baseFont: baseFont, titleFont: titleFont, image: imageParams, addr: addr, opts: opts})
+}

src/app/works/[workId]/chapters/[chapterId]/page.js

···
     title: title,
     description: description, 
     openGraph: {
-      description: description,
-      images: [`/${addr}/preview`]
+      description: description
     }
   }
 }

src/app/works/[workId]/opengraph-image.jsx

···
+import { getWork } from "@fujocoded/ao3.js"
+import sanitizeData from "@/lib/sanitizeData.js"
+import OGImage from "@/lib/ogimage.js"
+import baseFonts from "@/lib/baseFonts.js"
+import titleFonts from "@/lib/titleFonts.js"
+
+export const size = {
+  width: 1600,
+  height: 900,
+}
+export const alt = 'fixAO3'
+
+export const contentType = 'image/webp'
+
+export default async function Image({params}) {
+  const { workId } = await params
+  const props = new URLSearchParams({
+    theme: 'ao3',
+    baseFont: 'bricolagegrotesque',
+    titleFont: 'stacksansnotch',
+    category: true,
+    rating: true,
+    warnings: false,
+    charTags: false,
+    relTags: false,
+    freeTags: false,
+    summary: true,
+    wordcount: true,
+    chapters: true,
+    postedAt: true,
+    updatedAt: false,
+    summaryType: 'basic',
+    customSummary: ''
+  })
+  const addr = `works/${workId}`
+  const data = await getWork({workId: workId})
+  const imageParams = await sanitizeData({type: 'work', data: data, props: props})
+  const theme = imageParams.theme
+  const baseFont = baseFonts[imageParams.baseFont].displayName
+  const titleFont = titleFonts[imageParams.titleFont].displayName
+  const opts = imageParams.opts
+  return OGImage({theme: theme, baseFont: baseFont, titleFont: titleFont, image: imageParams, addr: addr, opts: opts})
+}

src/app/works/[workId]/page.js

···
     title: title,
     description: description, 
     openGraph: {
-      description: description,
-      images: [`/${addr}/preview`]
+      description: description
     }
   }
 }