ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: use mastodon account avatar as og:image

Browse source
This commit is contained in:
Ayo Ayco 2026-02-25 20:41:52 +01:00
parent 634a1d446c
commit 607a7720e5
2 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Head.astro
View file

@ -3,17 +3,20 @@ export interface Props {
title?: string | undefined
description?: string | undefined
ogImage?: string | undefined
ogFileType?: string | undefined
}
const defaultDescription =
'Professional software engineer specializing in web development with a decade of experience building web applications for both private businesses and government-funded high-impact projects utilizing web technologies, IoT, data viz/insights, remote sensing, and GIS'
const defaultTitle = 'Ayo Ayco - Tech Leader, Software Engineer, Web Developer'
const defaultOgImage = 'ayo.png'
const defaultOgFileType = 'image/png'
let {
title,
description = defaultDescription,
ogImage = defaultOgImage,
ogFileType = defaultOgFileType,
} = Astro.props
const baseURL = Astro.site?.toString().slice(0, -1) // ?? 'https://ayo.ayco.io'
@ -35,7 +38,8 @@ const baseURL = Astro.site?.toString().slice(0, -1) // ?? 'https://ayo.ayco.io'
<meta property="og:url" content={baseURL + Astro.url.pathname} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={`/${ogImage}`} />
<meta property="og:image:type" content={ogFileType} />
<meta property="og:image" content={ogImage} />
<!-- Links -->
<link rel="canonical" href={baseURL + Astro.url.pathname} />

25
src/layouts/Layout.astro
View file

@ -8,15 +8,34 @@ import { links } from '../constants/links'
export interface Props {
title?: string
description?: string
ogImage?: string
}
const { title, description, ogImage } = Astro.props
const { title, description } = Astro.props
import { getImage } from 'astro:assets'
// fetch mastodon account
const response = await fetch(
'https://social.ayco.io/api/v1/accounts/lookup?acct=ayo'
)
const data = await response.json()
const { avatar } = data
const ogImage = await getImage({
src: avatar,
width: 400,
height: 400,
format: 'png',
})
const ogFileType = 'image/png'
---
<!doctype html>
<html lang="en">
<Head title={title} description={description} ogImage={ogImage} />
<Head
title={title}
description={description}
ogImage={ogImage.src}
ogFileType={ogFileType}
/>
<body class="h-card">
<Nav links={links} />