mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-21 19:55:41 +00:00
Test og images
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m42s
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m42s
This commit is contained in:
parent
ff5a2c910a
commit
829c6ba4be
63
app/api/og-image/route.tsx
Normal file
63
app/api/og-image/route.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import {ImageResponse} from 'next/og'
|
||||||
|
|
||||||
|
export const runtime = 'edge'
|
||||||
|
|
||||||
|
const font = fetch(new URL('/assets/Inter.ttf', import.meta.url)).then(
|
||||||
|
(res) => res.arrayBuffer()
|
||||||
|
)
|
||||||
|
|
||||||
|
const gradients = [
|
||||||
|
'radial-gradient(at right top, rgb(221, 214, 254), rgb(239, 68, 68), rgb(251, 146, 60))',
|
||||||
|
'radial-gradient(at right bottom, rgb(255, 255, 255), rgb(244, 114, 182), rgb(240, 171, 252))',
|
||||||
|
'radial-gradient(at left bottom, rgb(254, 202, 202), rgb(8, 145, 178), rgb(236, 252, 203))',
|
||||||
|
'radial-gradient(at left top, rgb(124, 58, 237), rgb(220, 252, 231), rgb(31, 41, 55))',
|
||||||
|
'radial-gradient(at left bottom, rgb(214, 211, 209), rgb(190, 242, 100), rgb(190, 242, 100))'
|
||||||
|
]
|
||||||
|
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const fontData = await font
|
||||||
|
const {searchParams} = new URL(request.url)
|
||||||
|
const title = searchParams.get('title')
|
||||||
|
|
||||||
|
return new ImageResponse(
|
||||||
|
(
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: 64,
|
||||||
|
fontFamily: 'Inter',
|
||||||
|
background: 'black',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
textAlign: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
lineHeight: '1',
|
||||||
|
padding: '0 128px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundImage: gradients[Math.floor(gradients.length * Math.random())],
|
||||||
|
backgroundClip: 'text',
|
||||||
|
// @ts-ignore
|
||||||
|
'-webkit-background-clip': 'text',
|
||||||
|
color: 'transparent',
|
||||||
|
}}>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
{
|
||||||
|
width: 1200,
|
||||||
|
height: 600,
|
||||||
|
fonts: [
|
||||||
|
{
|
||||||
|
name: 'Inter',
|
||||||
|
data: fontData,
|
||||||
|
style: 'normal'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
@ -7,7 +7,11 @@ import '@/styles/tailwind.css'
|
|||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'Ryan Freeman - Full-stack software engineer from Dublin, Ireland.',
|
title: 'Ryan Freeman - Full-stack software engineer from Dublin, Ireland.',
|
||||||
description: 'Full-stack software engineer who enjoys building cloud-native applications.'
|
description: 'Full-stack software engineer who enjoys building cloud-native applications.',
|
||||||
|
metadataBase: new URL('https://ryanfreeman.dev'),
|
||||||
|
alternates: {
|
||||||
|
canonical: '/'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RootLayout({children}: { children: ReactNode }) {
|
export default function RootLayout({children}: { children: ReactNode }) {
|
||||||
|
@ -10,10 +10,28 @@ import {EmailIcon} from '@/components/icons/EmailIcon'
|
|||||||
import {RocketIcon} from '@/components/icons/RocketIcon'
|
import {RocketIcon} from '@/components/icons/RocketIcon'
|
||||||
import {ShoppingBagIcon} from '@/components/icons/ShoppingBagIcon'
|
import {ShoppingBagIcon} from '@/components/icons/ShoppingBagIcon'
|
||||||
|
|
||||||
export const metadata = {
|
const meta = {
|
||||||
title: 'Services - Ryan Freeman',
|
title: 'Services - Ryan Freeman',
|
||||||
|
heading: 'I offer a wide range of digital services to elevate and transform your business',
|
||||||
description: 'Whether you need a WordPress website, React app, AWS support or odd coding jobs, I\'m here to help. ' +
|
description: 'Whether you need a WordPress website, React app, AWS support or odd coding jobs, I\'m here to help. ' +
|
||||||
'As an experienced software engineer, I produce high-quality software that will deliver immediate value for you and your customers.'
|
'As an experienced software engineer, I produce high-quality software that will deliver immediate value for you and your customers.',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
...meta,
|
||||||
|
openGraph: {
|
||||||
|
title: meta.title,
|
||||||
|
description: meta.description,
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: `/api/og-image?title=${meta.heading}`,
|
||||||
|
width: 1200,
|
||||||
|
height: 600,
|
||||||
|
alt: meta.heading,
|
||||||
|
type: 'image/png'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
type Services = {
|
type Services = {
|
||||||
|
BIN
assets/Inter.ttf
Normal file
BIN
assets/Inter.ttf
Normal file
Binary file not shown.
@ -4,7 +4,7 @@ export function CloudIcon(props: Props) {
|
|||||||
return (
|
return (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"
|
||||||
{...props}>
|
{...props}>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round"
|
<path strokeLinecap="round" strokeLinejoin="round"
|
||||||
d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z"/>
|
d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user