diff --git a/app/Libraries/Vite/Vite.php b/app/Libraries/Vite/Vite.php
index a7192eed1303d21253b2e22f582015532e7f163e..1cceec4880f1d35553d1f97e6f6a81a8df02f14c 100644
--- a/app/Libraries/Vite/Vite.php
+++ b/app/Libraries/Vite/Vite.php
@@ -120,7 +120,7 @@ class Vite
CODE_SAMPLE
,
'js' => <<<CODE_SAMPLE
- <script type="module" src="{$assetUrl}"></script>
+ <script type="module" src="{$assetUrl}" defer></script>
CODE_SAMPLE
,
default => '',
diff --git a/app/Resources/js/audio-player.ts b/app/Resources/js/audio-player.ts
index 577853e4d2dee2c2762a192d9108fecbe63e3d86..74cebcc25100348b08951f6f6e6452d695d23b04 100644
--- a/app/Resources/js/audio-player.ts
+++ b/app/Resources/js/audio-player.ts
@@ -44,7 +44,7 @@ const player = html`<div
style="display: none;"
>
<div class="flex items-center">
- <img src="" alt="" class="h-[52px] w-[52px]" />
+ <img src="" alt="" class="h-[52px] w-[52px]" loading="lazy" />
<div class="flex flex-col px-2">
<p
class="text-sm w-48 truncate font-semibold"
diff --git a/app/Resources/js/modules/EpisodesMap.ts b/app/Resources/js/modules/EpisodesMap.ts
index a90e558532fada1aaafda88998d22bf3f5beae45..390564f9f6ae267757b646669cef3dc18b25ec2d 100644
--- a/app/Resources/js/modules/EpisodesMap.ts
+++ b/app/Resources/js/modules/EpisodesMap.ts
@@ -50,7 +50,7 @@ const drawEpisodesMap = async (mapDivId: string, dataUrl: string) => {
data[i].cover_url +
'" alt="' +
data[i].episode_title +
- '" class="rounded w-16 h-16" /><div class="flex flex-col flex-1"><h2 class="leading-tight text-sm w-56 line-clamp-2 font-bold"><a href="' +
+ '" class="rounded w-16 h-16" loading="lazy" /><div class="flex flex-col flex-1"><h2 class="leading-tight text-sm w-56 line-clamp-2 font-bold"><a href="' +
data[i].episode_link +
'" class="hover:underline font-semibold !text-accent-base">' +
data[i].episode_title +
diff --git a/themes/cp_admin/_partials/_nav_header.php b/themes/cp_admin/_partials/_nav_header.php
index 0631b61a387fc697051d1c98128e8ca95e5ca1e0..03a8ec0acb56b5cc9f612641d46a23ce9a46ad53 100644
--- a/themes/cp_admin/_partials/_nav_header.php
+++ b/themes/cp_admin/_partials/_nav_header.php
@@ -25,7 +25,7 @@
aria-expanded="false"><div class="relative mr-1">
<?= icon('account-circle', 'text-3xl opacity-60') ?>
<?= user()
- ->podcasts === [] ? '' : '<img src="' . interact_as_actor()->avatar_image_url . '" class="absolute bottom-0 w-4 h-4 border rounded-full -right-1 border-navigation-bg" />' ?>
+ ->podcasts === [] ? '' : '<img src="' . interact_as_actor()->avatar_image_url . '" class="absolute bottom-0 w-4 h-4 border rounded-full -right-1 border-navigation-bg" loading="lazy" />' ?>
</div>
<?= user()->username ?>
<?= icon('caret-down', 'ml-auto text-2xl') ?></button>
@@ -36,7 +36,7 @@
$interactButtons .= <<<CODE_SAMPLE
<button class="inline-flex items-center w-full px-4 py-1 hover:bg-highlight" id="interact-as-actor-{$userPodcast->id}" name="actor_id" value="{$userPodcast->actor_id}">
- <div class="inline-flex items-center flex-1 text-sm"><img src="{$userPodcast->cover->tiny_url}" class="w-6 h-6 mr-2 rounded-full" /><span class="truncate">{$userPodcast->title}</span>{$checkMark}</div>
+ <div class="inline-flex items-center flex-1 text-sm"><img src="{$userPodcast->cover->tiny_url}" class="w-6 h-6 mr-2 rounded-full" loading="lazy" /><span class="truncate">{$userPodcast->title}</span>{$checkMark}</div>
</button>
CODE_SAMPLE;
}
diff --git a/themes/cp_admin/episode/_card.php b/themes/cp_admin/episode/_card.php
index 87f552f117dfbbb100affeb8de6a1646e5680dfc..6cde92c17ce16c374a1534b65a1e7b7d13cdc881 100644
--- a/themes/cp_admin/episode/_card.php
+++ b/themes/cp_admin/episode/_card.php
@@ -1,8 +1,8 @@
<article class="relative flex flex-col flex-1 flex-shrink-0 w-full transition group overflow-hidden bg-elevated border-3 snap-center hover:shadow-lg focus-within:shadow-lg focus-within:ring-accent border-subtle rounded-xl min-w-[12rem] max-w-[17rem]">
<a href="<?= route_to('episode-view', $episode->podcast->id, $episode->id) ?>" class="flex flex-col justify-end w-full h-full text-white group">
<div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
- <div class="w-full h-full overflow-hidden">
- <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform group-focus:scale-105 group-hover:scale-105 aspect-square" />
+ <div class="w-full h-full overflow-hidden bg-header">
+ <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform group-focus:scale-105 group-hover:scale-105 aspect-square" loading="lazy" />
</div>
<?= publication_pill($episode->published_at, $episode->publication_status, 'absolute top-0 left-0 ml-2 mt-2 text-sm'); ?>
<div class="absolute z-20 flex flex-col items-start px-4 py-2">
diff --git a/themes/cp_admin/episode/_sidebar.php b/themes/cp_admin/episode/_sidebar.php
index 50b2d703a768c7be0399b6e43a8d7be58185579a..f6dea48616dc56ba06d661c6544e4d410beec429 100644
--- a/themes/cp_admin/episode/_sidebar.php
+++ b/themes/cp_admin/episode/_sidebar.php
@@ -17,6 +17,7 @@ $podcastNavigation = [
src="<?= $podcast->cover->tiny_url ?>"
alt="<?= $podcast->title ?>"
class="object-cover w-6 h-6 rounded aspect-square"
+ loading="lazy"
/>
<span class="flex-1 w-full px-2 text-xs font-semibold truncate" title="<?= $podcast->title ?>"><?= $podcast->title ?></span>
</a>
@@ -25,6 +26,7 @@ $podcastNavigation = [
src="<?= $episode->cover->thumbnail_url ?>"
alt="<?= $episode->title ?>"
class="object-cover w-16 h-16 rounded aspect-square"
+ loading="lazy"
/>
<div class="flex flex-col items-start flex-1 w-48 px-2">
<span class="w-full font-semibold truncate" title="<?= $episode->title ?>"><?= $episode->title ?></span>
diff --git a/themes/cp_admin/episode/list.php b/themes/cp_admin/episode/list.php
index 81ab34e8c33e0863864e4480d249c2aec071ab07..b240931c7bfa5b05102f11f03d5f07508f6f4016 100644
--- a/themes/cp_admin/episode/list.php
+++ b/themes/cp_admin/episode/list.php
@@ -34,7 +34,7 @@
$episode->audio->duration,
) .
'</time>' .
- '<img loading="lazy" src="' . $episode->cover->thumbnail_url . '" alt="' . $episode->title . '" class="object-cover w-20 rounded-lg shadow-inner aspect-square" />' .
+ '<img src="' . $episode->cover->thumbnail_url . '" alt="' . $episode->title . '" class="object-cover w-20 rounded-lg shadow-inner aspect-square" loading="lazy" />' .
'</div>' .
'<a class="overflow-x-hidden text-sm hover:underline" href="' . route_to(
'episode-view',
diff --git a/themes/cp_admin/episode/persons.php b/themes/cp_admin/episode/persons.php
index 57f57ce3e51e963430aef08e064c27b119271f58..0f5e63736953dd862d60951017f6b3fe54044bc5 100644
--- a/themes/cp_admin/episode/persons.php
+++ b/themes/cp_admin/episode/persons.php
@@ -58,7 +58,7 @@
return '<div class="flex">' .
'<a href="' .
route_to('person-view', $person->id) .
- "\"><img src=\"{$person->avatar->thumbnail_url}\" alt=\"{$person->full_name}\" class=\"object-cover w-16 rounded-full aspect-square\" /></a>" .
+ "\"><img src=\"{$person->avatar->thumbnail_url}\" alt=\"{$person->full_name}\" class=\"object-cover w-16 rounded-full aspect-square\" loading=\"lazy\" /></a>" .
'<div class="flex flex-col ml-3">' .
$person->full_name .
implode(
diff --git a/themes/cp_admin/episode/publish.php b/themes/cp_admin/episode/publish.php
index eacfa9dbb02d6960fdbbc41bc9f09f80996f0264..26d22f6a31642555fe9c6df00487f356d60e11fa 100644
--- a/themes/cp_admin/episode/publish.php
+++ b/themes/cp_admin/episode/publish.php
@@ -28,7 +28,7 @@
<small class="max-w-md mb-2 text-skin-muted"><?= lang('Episode.publish_form.post_hint') ?></small>
<div class="mb-8 overflow-hidden shadow-md bg-elevated rounded-xl">
<div class="flex px-4 py-3 gap-x-2">
- <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col min-w-0">
<p class="flex items-baseline min-w-0">
<span class="mr-2 font-semibold truncate"><?= $podcast->actor->display_name ?></span>
@@ -41,7 +41,7 @@
</div>
<div class="flex border-y">
<img src="<?= $episode->cover
- ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" />
+ ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" loading="lazy" />
<div class="flex flex-col flex-1">
<a href="<?= $episode->link ?>" class="flex-1 px-4 py-2">
<div class="flex items-baseline">
diff --git a/themes/cp_admin/episode/publish_edit.php b/themes/cp_admin/episode/publish_edit.php
index 80b2860d53d681569adaa1e3487de2ed5761e52d..0e63bc71adeafc3c51969057f8548ca54e46049c 100644
--- a/themes/cp_admin/episode/publish_edit.php
+++ b/themes/cp_admin/episode/publish_edit.php
@@ -29,7 +29,7 @@
<small class="max-w-md mb-2 text-skin-muted"><?= lang('Episode.publish_form.post_hint') ?></small>
<div class="mb-8 overflow-hidden shadow-md bg-elevated rounded-xl">
<div class="flex px-4 py-3 gap-x-2">
- <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col min-w-0">
<p class="flex items-baseline min-w-0">
<span class="mr-2 font-semibold truncate"><?= $podcast->actor->display_name ?></span>
@@ -43,7 +43,7 @@
</div>
<div class="flex border-y">
<img src="<?= $episode->cover
- ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" />
+ ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" loading="lazy" />
<div class="flex flex-col flex-1">
<a href="<?= $episode->link ?>" class="flex-1 px-4 py-2">
<div class="flex items-baseline">
diff --git a/themes/cp_admin/episode/video_clips_new.php b/themes/cp_admin/episode/video_clips_new.php
index b8683f6efb6239d21d8643c94045975f92b15a48..89a002ff7ae2d1380b8b220466fa0fba1a9ad8cf 100644
--- a/themes/cp_admin/episode/video_clips_new.php
+++ b/themes/cp_admin/episode/video_clips_new.php
@@ -14,7 +14,7 @@
<div class="flex-1 w-full rounded-xl border-3 border-subtle">
<video-clip-previewer duration="<?= old('duration', 30) ?>">
- <img slot="preview_image" src="<?= $episode->cover->thumbnail_url ?>" alt="<?= $episode->cover->description ?>" />
+ <img slot="preview_image" src="<?= $episode->cover->thumbnail_url ?>" alt="<?= $episode->cover->description ?>" loading="lazy" />
</video-clip-previewer>
<audio-clipper start-time="<?= old('start_time', 0) ?>" duration="<?= old('duration', 30) ?>" min-duration="10" volume=".5" height="50">
<audio slot="audio" src="<?= $episode->audio->file_url ?>" preload="auto">
diff --git a/themes/cp_admin/person/_card.php b/themes/cp_admin/person/_card.php
index 8bdba05a0f1b20cd3ad7b88a096b12666518bb02..747598c5a2aff2fbdb8da1e0ee42b25ea3f34ccd 100644
--- a/themes/cp_admin/person/_card.php
+++ b/themes/cp_admin/person/_card.php
@@ -1,8 +1,8 @@
<article class="relative h-full overflow-hidden transition shadow bg-elevated border-3 border-subtle rounded-xl group hover:shadow-xl focus-within:shadow-xl focus-within:ring-accent">
<a href="<?= route_to('person-view', $person->id) ?>" class="flex flex-col justify-end w-full h-full text-white group">
<div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
- <div class="w-full h-full overflow-hidden">
- <img alt="<?= $person->full_name ?>" src="<?= $person->avatar->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" />
+ <div class="w-full h-full overflow-hidden bg-header">
+ <img alt="<?= $person->full_name ?>" src="<?= $person->avatar->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" loading="lazy" />
</div>
<div class="absolute z-20">
<h2 class="px-4 py-2 font-semibold leading-tight"><?= $person->full_name ?></h2>
diff --git a/themes/cp_admin/person/view.php b/themes/cp_admin/person/view.php
index 7e22a94b75d4e866e9813c6f3c230dea0d78d889..87c2c3a92c3a794b6f61f74fd4a6ea937a606195 100644
--- a/themes/cp_admin/person/view.php
+++ b/themes/cp_admin/person/view.php
@@ -18,8 +18,9 @@
<div class="flex flex-wrap gap-2">
<img
src="<?= $person->avatar->medium_url ?>"
- alt="$person->full_name"
+ alt="<?= $person->full_name ?>"
class="object-cover w-full max-w-xs rounded aspect-square"
+ loading="lazy"
/>
<div class="flex flex-col">
<?= $person->full_name ?>
diff --git a/themes/cp_admin/podcast/_card.php b/themes/cp_admin/podcast/_card.php
index 6d7e979adabb73cb10b15252f222cd9e6cb44df6..9fc16545da1fe39d2227767468c7913fe22b7879 100644
--- a/themes/cp_admin/podcast/_card.php
+++ b/themes/cp_admin/podcast/_card.php
@@ -1,10 +1,10 @@
<article class="relative h-full overflow-hidden transition shadow bg-elevated border-3 border-subtle group rounded-xl hover:shadow-xl focus-within:shadow-xl focus-within:ring-accent">
<a href="<?= route_to('podcast-view', $podcast->id) ?>" class="flex flex-col justify-end w-full h-full text-white group">
<div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
- <div class="w-full h-full overflow-hidden">
+ <div class="w-full h-full overflow-hidden bg-header">
<img
alt="<?= $podcast->title ?>"
- src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" />
+ src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" loading="lazy" />
</div>
<div class="absolute z-20 w-full px-4 pb-4 transition duration-75 ease-out translate-y-6 group-focus:translate-y-0 group-hover:translate-y-0">
<h2 class="font-bold leading-none truncate font-display"><?= $podcast->title ?></h2>
diff --git a/themes/cp_admin/podcast/_sidebar.php b/themes/cp_admin/podcast/_sidebar.php
index e72c1ee0226e986913596f91e09bc173fb0f648a..574fd9e526d62a388c8eac5832acdd8810d0b159 100644
--- a/themes/cp_admin/podcast/_sidebar.php
+++ b/themes/cp_admin/podcast/_sidebar.php
@@ -40,6 +40,7 @@ $podcastNavigation = [
src="<?= $podcast->cover->thumbnail_url ?>"
alt="<?= $podcast->title ?>"
class="object-cover w-16 h-16 rounded aspect-square"
+ loading="lazy"
/>
<div class="flex flex-col items-start flex-1 w-48 px-2">
<span class="w-full font-semibold truncate" title="<?= $podcast->title ?>"><?= $podcast->title ?></span>
diff --git a/themes/cp_admin/podcast/edit.php b/themes/cp_admin/podcast/edit.php
index 6b7aea1361c73c48c5f04899b3c6af1bf071ac95..7d9c1be5a07367ca3785481cccde52bea57523ba 100644
--- a/themes/cp_admin/podcast/edit.php
+++ b/themes/cp_admin/podcast/edit.php
@@ -25,10 +25,10 @@
<?php if ($podcast->banner_id !== null): ?>
<a href="<?= route_to('podcast-banner-delete', $podcast->id) ?>" class="absolute p-1 text-red-700 bg-red-100 border-2 rounded-full hover:text-red-900 border-contrast focus:ring-accent top-2 right-2" title="<?= lang('Podcast.form.banner_delete') ?>" data-tooltip="bottom"><?= icon('delete-bin') ?></a>
<?php endif; ?>
- <img src="<?= $podcast->banner->small_url ?>" alt="" class="w-full aspect-[3/1] bg-header" />
+ <img src="<?= $podcast->banner->small_url ?>" alt="" class="w-full aspect-[3/1] bg-header" loading="lazy" />
<div class="flex px-4 py-2">
<img src="<?= $podcast->cover->thumbnail_url ?>" alt="<?= $podcast->title ?>"
- class="w-16 h-16 mr-4 -mt-8 rounded-full ring-2 ring-background-elevated aspect-square" />
+ class="w-16 h-16 mr-4 -mt-8 rounded-full ring-2 ring-background-elevated aspect-square" loading="lazy" />
<div class="flex flex-col">
<p class="font-semibold leading-none"><?= $podcast->title ?></p>
<p class="text-sm text-skin-muted">@<?= $podcast->handle ?></p>
diff --git a/themes/cp_admin/podcast/persons.php b/themes/cp_admin/podcast/persons.php
index fda00612ebc45dcb84b67466337a459b29b53e0e..542642babb891d305b9624b45d06ad3ceed013af 100644
--- a/themes/cp_admin/podcast/persons.php
+++ b/themes/cp_admin/podcast/persons.php
@@ -55,7 +55,7 @@
return '<div class="flex">' .
'<a href="' .
route_to('person-view', $person->id) .
- "\"><img src=\"{$person->avatar->thumbnail_url}\" alt=\"{$person->full_name}\" class=\"object-cover aspect-square w-16 h-16 rounded-full\" /></a>" .
+ "\"><img src=\"{$person->avatar->thumbnail_url}\" alt=\"{$person->full_name}\" class=\"object-cover aspect-square w-16 h-16 rounded-full\" loading=\"lazy\" /></a>" .
'<div class="flex flex-col ml-3">' .
$person->full_name .
implode(
diff --git a/themes/cp_admin/settings/general.php b/themes/cp_admin/settings/general.php
index 3394731fed17ff86e33d38eb30da4c05fd75e707..7c6a4a51bea711b576e2cd9401d3ec2cdf60ab5a 100644
--- a/themes/cp_admin/settings/general.php
+++ b/themes/cp_admin/settings/general.php
@@ -46,7 +46,7 @@
<?php if (config('App')->siteIcon['ico'] !== service('settings')->get('App.siteIcon')['ico']): ?>
<div class="relative ml-2">
<a href="<?= route_to('settings-instance-delete-icon') ?>" class="absolute p-1 text-red-700 bg-red-100 border-2 rounded-full hover:text-red-900 border-contrast -top-3 -right-3 focus:ring-accent" title="<?= lang('Settings.instance.site_icon_delete') ?>" data-tooltip="top"><?= icon('delete-bin') ?></a>
- <img src="<?= service('settings')->get('App.siteIcon')['64'] ?>" alt="<?= service('settings')->get('App.siteName') ?> Favicon" class="w-10 h-10 aspect-square" />
+ <img src="<?= service('settings')->get('App.siteIcon')['64'] ?>" alt="<?= service('settings')->get('App.siteName') ?> Favicon" class="w-10 h-10 aspect-square" loading="lazy" />
</div>
<?php endif; ?>
</div>
diff --git a/themes/cp_app/_admin_navbar.php b/themes/cp_app/_admin_navbar.php
index 0cea27a6fa4808f3c4fbde0d7856a4dac9e605bd..f2aaa7c06e8cb86bc27651cc724f98f779cc99ec 100644
--- a/themes/cp_app/_admin_navbar.php
+++ b/themes/cp_app/_admin_navbar.php
@@ -20,7 +20,7 @@
aria-expanded="false"><div class="relative mr-1">
<?= icon('account-circle', 'text-3xl opacity-60') ?>
<?= user()
- ->podcasts === [] ? '' : '<img src="' . interact_as_actor()->avatar_image_url . '" class="absolute bottom-0 w-4 h-4 border rounded-full -right-1 border-navigation-bg" />' ?>
+ ->podcasts === [] ? '' : '<img src="' . interact_as_actor()->avatar_image_url . '" class="absolute bottom-0 w-4 h-4 border rounded-full -right-1 border-navigation-bg" loading="lazy" />' ?>
</div>
<?= user()->username ?>
<?= icon('caret-down', 'ml-auto text-2xl') ?></button>
@@ -31,7 +31,7 @@
$interactButtons .= <<<CODE_SAMPLE
<button class="inline-flex items-center w-full px-4 py-1 hover:bg-highlight" id="interact-as-actor-{$userPodcast->id}" name="actor_id" value="{$userPodcast->actor_id}">
- <div class="inline-flex items-center flex-1 text-sm"><img src="{$userPodcast->cover->tiny_url}" class="w-6 h-6 mr-2 rounded-full" /><span class="truncate">{$userPodcast->title}</span>{$checkMark}</div>
+ <div class="inline-flex items-center flex-1 text-sm"><img src="{$userPodcast->cover->tiny_url}" class="w-6 h-6 mr-2 rounded-full" loading="lazy" /><span class="truncate">{$userPodcast->title}</span>{$checkMark}</div>
</button>
CODE_SAMPLE;
}
diff --git a/themes/cp_app/_persons_modal.php b/themes/cp_app/_persons_modal.php
index 8979882447f99a4d7e52fabb1c88ce8ab1279295..f2be55dc8ccb8a10ff87671629292c52c58a0ebc 100644
--- a/themes/cp_app/_persons_modal.php
+++ b/themes/cp_app/_persons_modal.php
@@ -17,7 +17,7 @@
<div class="flex flex-col items-start p-4 gap-y-4">
<?php foreach ($persons as $person): ?>
<div class="flex gap-x-2">
- <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-10 rounded-full aspect-square" />
+ <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-10 rounded-full bg-header aspect-square" loading="lazy" />
<div class="flex flex-col">
<h4 class="text-sm font-semibold">
<?php if ($person->information_url): ?>
diff --git a/themes/cp_app/embed.php b/themes/cp_app/embed.php
index 7a3e38363d567836a499b69c59e439437082a908..9adf406f9fe3e67698e1642842e1b5d38ce41ae8 100644
--- a/themes/cp_app/embed.php
+++ b/themes/cp_app/embed.php
@@ -20,7 +20,7 @@
</head>
<body class="flex" style="background: <?= $themeData['background'] ?>; color: <?= $themeData['text'] ?>;">
- <img src="<?= $episode->cover->thumbnail_url ?>" alt="<?= $episode->title ?>" class="flex-shrink w-36 h-36 aspect-square" />
+ <img src="<?= $episode->cover->thumbnail_url ?>" alt="<?= $episode->title ?>" class="flex-shrink w-36 h-36 aspect-square" loading="lazy" />
<div class="flex flex-col items-start flex-1 min-w-0 px-4 pt-4 h-36">
<a href="https://castopod.org/" class="absolute top-0 right-0 mt-1 mr-2 text-2xl text-pine-500 hover:opacity-75" title="<?= lang('Common.powered_by', [
'castopod' => 'Castopod',
diff --git a/themes/cp_app/episode/_layout.php b/themes/cp_app/episode/_layout.php
index 0f81cd593ca44ecc49a160959aa902ec269a958f..ba9291fde6130181d9c00f2a228f60e0e9077fec 100644
--- a/themes/cp_app/episode/_layout.php
+++ b/themes/cp_app/episode/_layout.php
@@ -49,7 +49,7 @@
]) ?>">
<?= icon('arrow-left', 'mr-2 text-lg') ?>
<div class="inline-flex items-center gap-x-2">
- <img class="w-8 h-8 rounded-full" src="<?= $episode->podcast->cover->tiny_url ?>" alt="<?= $episode->podcast->title ?>" />
+ <img class="w-8 h-8 rounded-full" src="<?= $episode->podcast->cover->tiny_url ?>" alt="<?= $episode->podcast->title ?>" loading="lazy" />
<div class="flex flex-col">
<span class="text-sm font-semibold leading-none"><?= $episode->podcast->title ?></span>
<span class="text-xs"><?= lang('Podcast.followers', [
@@ -81,7 +81,7 @@
<div class="absolute top-0 left-0 w-full h-full bg-center bg-no-repeat bg-cover blur-lg mix-blend-overlay filter grayscale" style="background-image: url('<?= $episode->podcast->banner->small_url ?>');"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-background-header to-transparent"></div>
<div class="z-10 flex flex-col items-start gap-y-2 gap-x-4 sm:flex-row">
- <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" loading="lazy" class="rounded-md shadow-xl h-36 aspect-square" />
+ <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="rounded-md shadow-xl h-36 aspect-square" loading="lazy" />
<div class="flex flex-col items-start text-white">
<?= episode_numbering($episode->number, $episode->season_number, 'text-sm leading-none font-semibold px-1 py-1 text-white/90 border !no-underline border-subtle', true) ?>
<h1 class="inline-flex items-baseline max-w-md mt-2 text-2xl font-bold sm:leading-none sm:text-3xl font-display line-clamp-2"><?= $episode->title ?></h1>
@@ -91,7 +91,7 @@
<div class="inline-flex flex-row-reverse">
<?php $i = 0; ?>
<?php foreach ($episode->persons as $person): ?>
- <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-4 border-2 rounded-full aspect-square border-background-header last:ml-0" />
+ <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-4 border-2 rounded-full aspect-square border-background-header last:ml-0" loading="lazy" />
<?php $i++; if ($i === 3) {
break;
}?>
diff --git a/themes/cp_app/episode/_partials/card.php b/themes/cp_app/episode/_partials/card.php
index f024d232a0b5df7a9f3cc5dd83cc411eabcd9bf2..ed915ac8f1d2d818bf51e7448a3e8f573a5158c5 100644
--- a/themes/cp_app/episode/_partials/card.php
+++ b/themes/cp_app/episode/_partials/card.php
@@ -3,8 +3,8 @@
<time class="absolute px-1 text-xs font-semibold text-white rounded bottom-2 right-2 bg-black/75" datetime="PT<?= $episode->audio->duration ?>S">
<?= format_duration($episode->audio->duration) ?>
</time>
- <img loading="lazy" src="<?= $episode->cover
- ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="object-cover w-20 rounded-lg shadow-inner aspect-square" />
+ <img src="<?= $episode->cover
+ ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="object-cover w-20 rounded-lg shadow-inner aspect-square" loading="lazy" />
</div>
<div class="flex items-center flex-1 gap-x-4">
<div class="flex flex-col flex-1">
diff --git a/themes/cp_app/episode/_partials/comment.php b/themes/cp_app/episode/_partials/comment.php
index f365f413f6a30f01aaa9685188019bc57d3d5958..665396c865f948bd00a38903602e586de59456db 100644
--- a/themes/cp_app/episode/_partials/comment.php
+++ b/themes/cp_app/episode/_partials/comment.php
@@ -1,5 +1,5 @@
<article class="relative z-10 flex w-full px-4 py-2 rounded-conditional-2xl gap-x-2">
- <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex-1">
<header class="w-full mb-2 text-sm">
<a href="<?= $comment->actor
diff --git a/themes/cp_app/episode/_partials/comment_card.php b/themes/cp_app/episode/_partials/comment_card.php
index 1bfb091c05813d1e4785ee483c505856d4841b5c..7c534fab50ae4d46292532cde8d5877757ed3a0c 100644
--- a/themes/cp_app/episode/_partials/comment_card.php
+++ b/themes/cp_app/episode/_partials/comment_card.php
@@ -1,5 +1,5 @@
<article class="relative z-10 flex w-full p-4 shadow bg-elevated rounded-conditional-2xl gap-x-2">
- <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex-1">
<header class="w-full mb-2 text-sm">
<a href="<?= $comment->actor->uri ?>" class="flex items-baseline hover:underline" <?= $comment->actor->is_local
diff --git a/themes/cp_app/episode/_partials/comment_reply.php b/themes/cp_app/episode/_partials/comment_reply.php
index d2b3e854e7c4bf82576187798c9d199dd8e46a5f..4fabdde008cbe56ab457f179cbaf6cf2295a7467 100644
--- a/themes/cp_app/episode/_partials/comment_reply.php
+++ b/themes/cp_app/episode/_partials/comment_reply.php
@@ -1,6 +1,6 @@
<article class="flex px-6 py-4 bg-base gap-x-2">
<img src="<?= $reply->actor->avatar_image_url ?>" alt="<?= $reply->actor
- ->display_name ?>" class="z-10 w-10 h-10 rounded-full ring-gray-50 ring-2 aspect-square" />
+ ->display_name ?>" class="z-10 w-10 h-10 rounded-full ring-gray-50 ring-2 aspect-square" loading="lazy" />
<div class="flex flex-col flex-1 min-w-0">
<header class="flex items-center mb-2">
<a href="<?= $reply->actor
diff --git a/themes/cp_app/episode/_partials/comment_with_replies.php b/themes/cp_app/episode/_partials/comment_with_replies.php
index 6e76f8301e63648208fc4aa559c71812328370d7..f6382360df891076142b099d7d9431de370d8da5 100644
--- a/themes/cp_app/episode/_partials/comment_with_replies.php
+++ b/themes/cp_app/episode/_partials/comment_with_replies.php
@@ -15,7 +15,7 @@ if ($comment->in_reply_to_id): ?>
<form action="<?= route_to('comment-attempt-reply', $podcast->id, $episode->id, $comment->id) ?>" method="POST" class="flex px-6 pt-8 pb-4 gap-x-2 bg-base">
<img src="<?= interact_as_actor()
->avatar_image_url ?>" alt="<?= interact_as_actor()
- ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col flex-1">
<Forms.Textarea
name="message"
diff --git a/themes/cp_app/episode/_partials/preview_card.php b/themes/cp_app/episode/_partials/preview_card.php
index bba7ab1b8ef7a0777a4e68591b514e7c832ea40b..4554051227b1f02ee64c418811273b57467b2813 100644
--- a/themes/cp_app/episode/_partials/preview_card.php
+++ b/themes/cp_app/episode/_partials/preview_card.php
@@ -5,7 +5,7 @@
</time>
<img
src="<?= $episode->cover->thumbnail_url ?>"
- alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square"/>
+ alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" loading="lazy" />
</div>
<div class="flex flex-col flex-1 px-4 py-2">
<div class="inline-flex">
diff --git a/themes/cp_app/episode/activity.php b/themes/cp_app/episode/activity.php
index 17f2b12cf7462db7351d73d6302d577d18622176..93c0d9043af3512858114cac67f73ae3e523125b 100644
--- a/themes/cp_app/episode/activity.php
+++ b/themes/cp_app/episode/activity.php
@@ -9,7 +9,7 @@
<img src="<?= interact_as_actor()
->avatar_image_url ?>" alt="<?= interact_as_actor()
- ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col flex-1 min-w-0 gap-y-2">
<input name="episode_url" value="<?= $episode->link ?>" type="hidden" />
<Forms.Textarea
diff --git a/themes/cp_app/episode/comments.php b/themes/cp_app/episode/comments.php
index 47a409962cdf4b9371c35bef351168b109be6a35..dc6ee95a42fc0963101eba50fefe022ac3e86b3e 100644
--- a/themes/cp_app/episode/comments.php
+++ b/themes/cp_app/episode/comments.php
@@ -9,7 +9,7 @@
<img src="<?= interact_as_actor()
->avatar_image_url ?>" alt="<?= interact_as_actor()
- ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col flex-1 min-w-0 gap-y-2">
<Forms.Textarea
name="message"
diff --git a/themes/cp_app/home.php b/themes/cp_app/home.php
index 7eebda46eea2e235429180cd2471e17e88f6d7bf..7947a61e4eb6b1dbcb158328f74d94efd7d3e940 100644
--- a/themes/cp_app/home.php
+++ b/themes/cp_app/home.php
@@ -60,8 +60,8 @@
<a href="<?= $podcast->link ?>" class="relative w-full h-full overflow-hidden transition shadow focus:ring-accent rounded-xl border-subtle hover:shadow-xl focus:shadow-xl group border-3">
<article class="text-white">
<div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
- <div class="w-full h-full overflow-hidden">
- <img alt="<?= $podcast->title ?>" src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" />
+ <div class="w-full h-full overflow-hidden bg-header">
+ <img alt="<?= $podcast->title ?>" src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform bg-header aspect-square group-focus:scale-105 group-hover:scale-105" loading="lazy" />
</div>
<div class="absolute bottom-0 left-0 z-20 px-4 pb-2">
<h2 class="font-bold leading-none truncate font-display"><?= $podcast->title ?></h2>
diff --git a/themes/cp_app/pages/credits.php b/themes/cp_app/pages/credits.php
index 98a4dbf472c04b6c3b35a1d5e4371628df0d6c4f..fc961cff76b6a2d1a709ec6b38dd08da4dc76e7d 100644
--- a/themes/cp_app/pages/credits.php
+++ b/themes/cp_app/pages/credits.php
@@ -17,7 +17,7 @@
<div class="flex mt-2 mb-2">
<img src="<?= $persons['thumbnail_url'] ?>" alt="<?= $persons[
'full_name'
-] ?>" class="object-cover w-16 rounded-full aspect-square md:h-24 md:w-24 border-gray" />
+] ?>" class="object-cover w-16 rounded-full aspect-square md:h-24 md:w-24 border-gray" loading="lazy" />
<div class="flex flex-col ml-3 mr-4">
<span class="text-lg font-semibold text-skin-muted md:text-xl">
<?= $persons['full_name'] ?>
diff --git a/themes/cp_app/podcast/_layout.php b/themes/cp_app/podcast/_layout.php
index e76bd1990a494c580cccce05b07e566caf66cbff..0f77aa72412473c6a1b42be8e436232a0a32e9e6 100644
--- a/themes/cp_app/podcast/_layout.php
+++ b/themes/cp_app/podcast/_layout.php
@@ -46,7 +46,7 @@
<header class="relative z-50 flex flex-col-reverse justify-between w-full col-start-2 bg-top bg-no-repeat bg-cover sm:flex-row sm:items-end bg-header aspect-[3/1]" style="background-image: url('<?= $podcast->banner->medium_url ?>');">
<div class="absolute bottom-0 left-0 w-full h-full backdrop-gradient mix-blend-multiply"></div>
<div class="z-10 flex items-center pl-4 -mb-6 md:pl-8 md:-mb-8 gap-x-4">
- <img src="<?= $podcast->cover->thumbnail_url ?>" alt="<?= $podcast->title ?>" loading="lazy" class="h-24 rounded-full sm:h-28 md:h-36 ring-3 ring-background-elevated aspect-square" />
+ <img src="<?= $podcast->cover->thumbnail_url ?>" alt="<?= $podcast->title ?>" class="h-24 rounded-full sm:h-28 md:h-36 ring-3 ring-background-elevated aspect-square" loading="lazy" />
<div class="relative flex flex-col text-white -top-2 sm:top-0 md:top-2">
<h1 class="text-lg font-bold leading-none line-clamp-2 md:leading-none md:text-2xl font-display"><?= $podcast->title ?><span class="ml-1 font-sans text-base font-normal">@<?= $podcast->handle ?></span></h1>
<span class="text-xs"><?= lang('Podcast.followers', [
diff --git a/themes/cp_app/podcast/about.php b/themes/cp_app/podcast/about.php
index 3ea8d70eab84f22ba676b364896bf7721b30951a..24b6a674a061bab1a8f30ae7b3fceee0a4b380e9 100644
--- a/themes/cp_app/podcast/about.php
+++ b/themes/cp_app/podcast/about.php
@@ -25,7 +25,7 @@
<div class="inline-flex flex-row-reverse">
<?php $i = 0; ?>
<?php foreach ($podcast->persons as $person): ?>
- <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 -ml-4 border-2 rounded-full aspect-square border-background-base last:ml-0" />
+ <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 -ml-4 border-2 rounded-full aspect-square bg-header border-background-base last:ml-0" loading="lazy" />
<?php $i++; if ($i === 3) {
break;
}?>
diff --git a/themes/cp_app/podcast/activity.php b/themes/cp_app/podcast/activity.php
index 54e84407a40a9304ffc1ece18d71de6850447154..bc5b42d375ffccb93955c9069a3d392743c265c0 100644
--- a/themes/cp_app/podcast/activity.php
+++ b/themes/cp_app/podcast/activity.php
@@ -10,7 +10,7 @@
<img src="<?= interact_as_actor()
->avatar_image_url ?>" alt="<?= interact_as_actor()
- ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col flex-1 min-w-0 gap-y-2">
<Forms.Textarea
name="message"
diff --git a/themes/cp_app/podcast/follow.php b/themes/cp_app/podcast/follow.php
index 71245c7cdac416d085358cfb96bde2ff8a799ac9..a08f4210c0fe877f9c3a2b6e384145c8bd079665 100644
--- a/themes/cp_app/podcast/follow.php
+++ b/themes/cp_app/podcast/follow.php
@@ -38,10 +38,10 @@
'Fediverse.follow.subtitle',
) ?></h1>
<div class="flex flex-col w-full max-w-xs -mt-24 overflow-hidden shadow bg-elevated rounded-xl">
- <img src="<?= $actor->podcast->banner->small_url ?>" alt="" class="w-full aspect-[3/1] bg-header" />
+ <img src="<?= $actor->podcast->banner->small_url ?>" alt="" class="w-full aspect-[3/1] bg-header" loading="lazy" />
<div class="flex px-4 py-2">
<img src="<?= $actor->avatar_image_url ?>" alt="<?= $actor->display_name ?>"
- class="w-16 h-16 mr-4 -mt-8 rounded-full ring-2 ring-background-elevated aspect-square" />
+ class="w-16 h-16 mr-4 -mt-8 rounded-full ring-2 ring-background-elevated aspect-square" loading="lazy" />
<div class="flex flex-col">
<p class="font-semibold"><?= $actor->display_name ?></p>
<p class="text-sm text-skin-muted">@<?= $actor->username ?></p>
diff --git a/themes/cp_app/post/_partials/card.php b/themes/cp_app/post/_partials/card.php
index efe7a952b1bf8bda12f98081a2f94668763a75f3..eaef1e8ca3d6df45ae9c4b0559b0b2fe47a082b9 100644
--- a/themes/cp_app/post/_partials/card.php
+++ b/themes/cp_app/post/_partials/card.php
@@ -1,7 +1,7 @@
<article class="relative z-10 w-full shadow bg-elevated sm:rounded-conditional-2xl">
<header class="flex px-6 py-4 gap-x-2">
<img src="<?= $post->actor
- ->avatar_image_url ?>" alt="<?= $post->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ ->avatar_image_url ?>" alt="<?= $post->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col min-w-0">
<a href="<?= $post->actor
->uri ?>" class="flex items-baseline hover:underline" <?= $post
diff --git a/themes/cp_app/post/_partials/post_with_replies.php b/themes/cp_app/post/_partials/post_with_replies.php
index 02128f0e11bb25f49694610129d8a96dc0405bef..91075d56b35041d4ff9915551926aabff4d855b1 100644
--- a/themes/cp_app/post/_partials/post_with_replies.php
+++ b/themes/cp_app/post/_partials/post_with_replies.php
@@ -20,7 +20,7 @@ if ($post->in_reply_to_id): ?>
<form action="<?= route_to('post-attempt-action', interact_as_actor()->username, $post->id) ?>" method="POST" class="flex gap-x-2" >
<img src="<?= interact_as_actor()
->avatar_image_url ?>" alt="<?= interact_as_actor()
- ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col flex-1">
<Forms.Textarea
name="message"
diff --git a/themes/cp_app/post/_partials/preview_card.php b/themes/cp_app/post/_partials/preview_card.php
index 7014a44aee7f4b52d344805300a4d1c0860485e8..54c013cc1968e671ae6c8777b4758fe00a4dfcec 100644
--- a/themes/cp_app/post/_partials/preview_card.php
+++ b/themes/cp_app/post/_partials/preview_card.php
@@ -8,7 +8,7 @@ if ($preview_card->type === 'image'): ?>
'external-link',
'absolute inset-0 m-auto text-6xl bg-accent-base bg-opacity-50 group-hover:bg-opacity-100 text-accent-contrast rounded-full p-2',
) ?>
- <img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-full aspect-video" />
+ <img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-full aspect-video" loading="lazy" />
</div>
<?php endif; ?>
@@ -24,7 +24,7 @@ if ($preview_card->type === 'image'): ?>
'play',
'absolute inset-0 m-auto text-6xl bg-accent-base bg-opacity-50 group-hover:bg-opacity-100 text-accent-contrast rounded-full p-2',
) ?>
- <img class="object-cover w-full aspect-video" src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" />
+ <img class="object-cover w-full aspect-video" src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" loading="lazy" />
</div>
<?php endif; ?>
@@ -36,7 +36,7 @@ if ($preview_card->type === 'image'): ?>
<?php else: ?>
<a href="<?= $preview_card->url ?>" class="flex items-center bg-highlight">
<?php if ($preview_card->image): ?>
- <img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-20 aspect-square" />
+ <img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-20 aspect-square" loading="lazy" />
<?php endif; ?>
<p class="flex flex-col flex-1 px-4 py-2">
<span class="text-xs tracking-wider uppercase text-skin-muted"><?= $preview_card->provider_name ?></span>
diff --git a/themes/cp_app/post/_partials/reblog.php b/themes/cp_app/post/_partials/reblog.php
index eb20a9e5976db17458e57a9ff3fa6113c2360187..1e4227e8cc4ebe1633bb669789f8ec9e0a998cd3 100644
--- a/themes/cp_app/post/_partials/reblog.php
+++ b/themes/cp_app/post/_partials/reblog.php
@@ -8,7 +8,7 @@
]) ?></p>
<header class="flex px-6 py-4 gap-x-2">
<img src="<?= $post->actor
- ->avatar_image_url ?>" alt="<?= $post->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+ ->avatar_image_url ?>" alt="<?= $post->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
<div class="flex flex-col min-w-0">
<a href="<?= $post->actor
->uri ?>" class="flex items-baseline hover:underline" <?= $post
diff --git a/themes/cp_app/post/_partials/reply.php b/themes/cp_app/post/_partials/reply.php
index 480287caa257111cf4fa95d1c4f54e9df5edfb31..fcef3b417d65c463842f1c814c4d8629b85d391b 100644
--- a/themes/cp_app/post/_partials/reply.php
+++ b/themes/cp_app/post/_partials/reply.php
@@ -1,6 +1,6 @@
<article class="flex px-6 py-4 bg-base gap-x-2">
<img src="<?= $reply->actor->avatar_image_url ?>" alt="<?= $reply->actor
- ->display_name ?>" class="z-10 w-10 h-10 rounded-full ring-background-base ring-2 aspect-square" />
+ ->display_name ?>" class="z-10 w-10 h-10 rounded-full ring-background-base ring-2 aspect-square" loading="lazy" />
<div class="flex flex-col flex-1 min-w-0">
<header class="flex items-center mb-2">
<a href="<?= $reply->actor