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

feat: use mastodon account avatar as remote source for astro Picture component

Browse source
This commit is contained in:
ayo 2026-02-25 20:06:32 +01:00
parent d501aadbbb
commit 1d975fdc09
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
astro.config.mjs
View file

@ -11,7 +11,8 @@ import icon from 'astro-icon'
export default defineConfig({ export default defineConfig({
site: 'https://ayo.ayco.io', site: 'https://ayo.ayco.io',
image: { image: {
domains: ['cdn.bsky.app'], domains: ['cdn.bsky.app', 'media.ayco.io'],
remotePatterns: [{ protocol: 'https' }],
}, },
integrations: [ integrations: [
sitemap(), sitemap(),

25
src/pages/index.astro
View file

@ -3,6 +3,16 @@ import Layout from '../layouts/Layout.astro'
import Card from '../components/Card.astro' import Card from '../components/Card.astro'
import Footer from '../components/Footer.astro' import Footer from '../components/Footer.astro'
import now from '../constants/now.json' import now from '../constants/now.json'
import { Picture } 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 avatarSize = 150
--- ---
<Layout> <Layout>
@ -18,12 +28,13 @@ import now from '../constants/now.json'
hobby projects. hobby projects.
</p> </p>
</div> </div>
<img <Picture
class="u-photo highlighted-section__content__profile-picture" class="u-photo highlighted-section__content__profile-picture"
alt="Ayo Ayco's avatar" alt="Ayo Ayco's avatar"
src="/ayo-2025-sm.png" formats={['avif', 'webp']}
width="140" src={avatar}
height="140" width={avatarSize}
height={avatarSize}
/> />
<div class="highlighted-section__content__text"> <div class="highlighted-section__content__text">
<h1 title="Ayo Ayco | Software Engineer + Web Developer"> <h1 title="Ayo Ayco | Software Engineer + Web Developer">
@ -67,7 +78,7 @@ import now from '../constants/now.json'
<Footer /> <Footer />
</Layout> </Layout>
<style> <style define:vars={{ avatarSize }}>
h1 { h1 {
margin: 0; margin: 0;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
@ -125,8 +136,8 @@ import now from '../constants/now.json'
background-color: var(--color-brand-blue-1); background-color: var(--color-brand-blue-1);
display: block; display: block;
border-radius: 50%; border-radius: 50%;
width: 140px; width: var(--avatarSize);
height: 140px; height: var(--avatarSize);
} }
.highlighted-section__content ul a { .highlighted-section__content ul a {