m/asi-calculator
1
0
Fork 0
mirror of https://github.com/kremalicious/asi-calculator.git synced 2024-12-22 09:23:16 +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 type { Metadata } from 'next'
import { Hanken_Grotesk } from 'next/font/google'
import '@/styles/globals.css' import '@/styles/globals.css'
import '@/styles/loading-ui.css' import '@/styles/loading-ui.css'
import Script from 'next/script' import Script from 'next/script'
import { title, description } from '@/constants' import { title, description, font, liveUrl } from '@/constants'
const hankenGrotesk = Hanken_Grotesk({ export const metadata: Metadata = {
subsets: ['latin'], title,
variable: '--font-hanken-grotesk' description,
}) alternates: { canonical: liveUrl },
metadataBase: new URL(liveUrl)
export const metadata: Metadata = { title, description } }
export default function RootLayout({ export default function RootLayout({
children children
@ -26,7 +25,7 @@ export default function RootLayout({
data-website-id="6565eff1-a1c8-4b3e-a6c4-08ecb00b06ab" data-website-id="6565eff1-a1c8-4b3e-a6c4-08ecb00b06ab"
/> />
</head> </head>
<body className={hankenGrotesk.variable}>{children}</body> <body className={font.variable}>{children}</body>
</html> </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 { Token } from '@/types'
import { Hanken_Grotesk } from 'next/font/google'
export const title = 'ASI Calculator' export const title = 'ASI Calculator'
export const description = export const description =
'See how much ASI you get for your OCEAN, AGIX, or FET.' '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 ratioOceanToAsi = 0.43322638231018
export const ratioAgixToAsi = 0.43335018345744 export const ratioAgixToAsi = 0.43335018345744
@ -13,3 +15,8 @@ export const tokens: Token[] = [
{ symbol: 'FET', address: '0xaea46a60368a7bd060eec7df8cba43b7ef41ad85' }, { symbol: 'FET', address: '0xaea46a60368a7bd060eec7df8cba43b7ef41ad85' },
{ symbol: 'AGIX', address: '0x5b7533812759b45c2b44c19e320ba2cd2681b542' } { 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, "isolatedModules": true,
"jsx": "preserve", "jsx": "preserve",
"incremental": true, "incremental": true,
"plugins": [ "plugins": [{ "name": "next" }],
{
"name": "next"
}
],
"paths": { "paths": {
"@/*": ["./*"] "@/*": ["./*"]
} }