diff --git a/app/layout.tsx b/app/layout.tsx index 364e640..94afe99 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,16 +1,15 @@ import type { Metadata } from 'next' -import { Hanken_Grotesk } from 'next/font/google' import '@/styles/globals.css' import '@/styles/loading-ui.css' import Script from 'next/script' -import { title, description } from '@/constants' +import { title, description, font, liveUrl } from '@/constants' -const hankenGrotesk = Hanken_Grotesk({ - subsets: ['latin'], - variable: '--font-hanken-grotesk' -}) - -export const metadata: Metadata = { title, description } +export const metadata: Metadata = { + title, + description, + alternates: { canonical: liveUrl }, + metadataBase: new URL(liveUrl) +} export default function RootLayout({ children @@ -26,7 +25,7 @@ export default function RootLayout({ data-website-id="6565eff1-a1c8-4b3e-a6c4-08ecb00b06ab" /> - {children} + {children} ) } diff --git a/app/opengraph-image-assets/HankenGrotesk-Bold.ttf b/app/opengraph-image-assets/HankenGrotesk-Bold.ttf new file mode 100644 index 0000000..59eb24c Binary files /dev/null and b/app/opengraph-image-assets/HankenGrotesk-Bold.ttf differ diff --git a/app/opengraph-image-assets/HankenGrotesk-Regular.ttf b/app/opengraph-image-assets/HankenGrotesk-Regular.ttf new file mode 100644 index 0000000..8b01d15 Binary files /dev/null and b/app/opengraph-image-assets/HankenGrotesk-Regular.ttf differ diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx new file mode 100644 index 0000000..7d5117a --- /dev/null +++ b/app/opengraph-image.tsx @@ -0,0 +1,77 @@ +import { title, description, font } from '@/constants' +import { ImageResponse } from 'next/og' + +export const runtime = 'edge' + +export const alt = title +export const size = { width: 1200, height: 630 } +export const contentType = 'image/png' + +export default async function Image() { + const fontDataBold = await fetch( + new URL('./opengraph-image-assets/HankenGrotesk-Bold.ttf', import.meta.url) + ).then((res) => res.arrayBuffer()) + const fontDataRegular = await fetch( + new URL( + './opengraph-image-assets/HankenGrotesk-Regular.ttf', + import.meta.url + ) + ).then((res) => res.arrayBuffer()) + + return new ImageResponse( + ( +
+

+ {title} +

+

{description}

+

+ + + + + krema.eth +

+
+ ), + { + ...size, + fonts: [ + { + name: 'Hanken Grotesk', + data: fontDataBold, + style: 'normal', + weight: 700 + }, + { + name: 'Hanken Grotesk', + data: fontDataRegular, + style: 'normal', + weight: 400 + } + ] + } + ) +} diff --git a/constants.ts b/constants.ts index 1f040a2..d0d7d95 100644 --- a/constants.ts +++ b/constants.ts @@ -1,8 +1,10 @@ import { Token } from '@/types' +import { Hanken_Grotesk } from 'next/font/google' export const title = 'ASI Calculator' export const description = 'See how much ASI you get for your OCEAN, AGIX, or FET.' +export const liveUrl = 'https://asi.kremalicious.com' export const ratioOceanToAsi = 0.43322638231018 export const ratioAgixToAsi = 0.43335018345744 @@ -13,3 +15,8 @@ export const tokens: Token[] = [ { symbol: 'FET', address: '0xaea46a60368a7bd060eec7df8cba43b7ef41ad85' }, { symbol: 'AGIX', address: '0x5b7533812759b45c2b44c19e320ba2cd2681b542' } ] + +export const font = Hanken_Grotesk({ + subsets: ['latin'], + variable: '--font-hanken-grotesk' +}) diff --git a/tsconfig.json b/tsconfig.json index e7ff90f..522b6a0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,11 +12,7 @@ "isolatedModules": true, "jsx": "preserve", "incremental": true, - "plugins": [ - { - "name": "next" - } - ], + "plugins": [{ "name": "next" }], "paths": { "@/*": ["./*"] }