redirecter for ao3 that adds opengraph metadata

fix opengraph image for main

Changed files
+54 -27
src
+54
src/app/opengraph-image.jsx
···
+
import { ImageResponse } from "next/og"
+
import { readFile } from 'node:fs/promises'
+
import { join } from 'node:path'
+
+
export const size = {
+
width: 1600,
+
height: 900,
+
}
+
export const alt = 'fixAO3'
+
+
export const contentType = 'image/webp'
+
+
export default async function Image() {
+
return new ImageResponse(
+
(
+
<div
+
style={{
+
backgroundColor: '#990000',
+
color: '#FFFFFF',
+
display: 'flex',
+
alignItems: 'center',
+
justifyContent: 'center',
+
width: '100%',
+
height: '100%',
+
fontFamily: 'Stack Sans Notch',
+
fontSize: 288,
+
fontWeight: 700
+
}}
+
>
+
{process.env.SITENAME}
+
</div>
+
),
+
{
+
fonts: [
+
{
+
name: 'Stack Sans Notch',
+
data: await readFile(
+
join(process.cwd(), '/fonts/StackSansNotch-Regular.ttf')
+
),
+
style: 'normal',
+
weight: 400
+
},
+
{
+
name: 'Stack Sans Notch',
+
data: await readFile(
+
join(process.cwd(), '/fonts/StackSansNotch-Bold.ttf')
+
),
+
style: 'normal',
+
weight: 700
+
}
+
]
+
}
+
)
+
}
-26
src/app/page.js
···
-
import { ImageResponse } from "next/og"
import styles from "./page.module.css";
-
-
export const metadata = {
-
title: process.env.SITENAME,
-
description: process.env.DESCRIPTION,
-
openGraph: {
-
description: process.env.DESCRIPTION,
-
images: [new ImageResponse(
-
(
-
<div
-
style={{
-
backgroundColor: '#990000',
-
color: '#FFFFFF',
-
display: 'flex',
-
alignItems: 'center',
-
justifyContent: 'center',
-
width: '100%',
-
height: '100%'
-
}}
-
>
-
{process.env.SITENAME}
-
</div>
-
)
-
)]
-
}
-
}
export default function Index() {
return (
-1
src/lib/ogimage.js
···
import ChoseNotToWarn from "@/icons/chosenottowarn.js"
export default async function OGImage ({ theme, baseFont, titleFont, image, addr, opts }) {
-
console.log(image)
return new ImageResponse(
(
<div