m/asi-calculator
1
0
Fork 0
mirror of https://github.com/kremalicious/asi-calculator.git synced 2024-12-21 17:03:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

dynamic opengraph image

Browse Source 
* closes #3
This commit is contained in:
Matthias Kretschmann 2024-04-02 12:58:12 +01:00
parent 3625cbfe9b
commit 45a0bc81f6
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 93 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/layout.tsx
View File

@ -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"
/>
</head>
<body className={hankenGrotesk.variable}>{children}</body>
<body className={font.variable}>{children}</body>
</html>
)
}

BIN
app/opengraph-image-assets/HankenGrotesk-Bold.ttf Normal file
View File

Binary file not shown.

BIN
app/opengraph-image-assets/HankenGrotesk-Regular.ttf Normal file
View File

Binary file not shown.

77
app/opengraph-image.tsx Normal file
View File

@ -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(
(
<div
style={{
backgroundImage:
'radial-gradient(circle at 30% 0%, rgb(27, 40, 62) 0%, rgb(15, 18, 33) 30%, rgb(0, 0, 0) 100%)',
color: 'rgb(200, 200, 200)',
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
textAlign: 'left',
padding: '0 100px'
}}
>
<h1 style={{ fontSize: 90, marginBottom: '0', color: 'white' }}>
{title}
</h1>
<p style={{ fontSize: 43, marginTop: '0' }}>{description}</p>
<p style={{ fontSize: 30, display: 'flex', alignItems: 'center' }}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 512 512"
style={{ marginRight: '0.25em', borderRadius: '50%' }}
>
<rect fill="#e7eef4" width="512" height="512" />
<path
fill="#6b7f88"
d="M397,91 L421,115 L114,421 L91,398 L397,91 Z M397,182 L421,206 L205,421 L182,398 L397,182 Z M307,91 L330,115 L114,330 L91,307 L307,91 Z"
/>
</svg>
<span style={{ opacity: 0.7 }}>krema.eth</span>
</p>
</div>
),
{
...size,
fonts: [
{
name: 'Hanken Grotesk',
data: fontDataBold,
style: 'normal',
weight: 700
},
{
name: 'Hanken Grotesk',
data: fontDataRegular,
style: 'normal',
weight: 400
}
]
}
)
}

7
constants.ts
View File

@ -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'
})

6
tsconfig.json
View File

@ -12,11 +12,7 @@
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"plugins": [{ "name": "next" }],
"paths": {
"@/*": ["./*"]
}