alex/daichendt.one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: lighthouse issues

Browse source
This commit is contained in:
Alexander Daichendt 2025-01-02 00:08:25 +01:00
parent 91182a834c
commit a31e367ef5
3 changed files with 97 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

121
src/layouts/BlogPost.astro
View file

@ -5,77 +5,72 @@ import BaseLayout from "./BaseLayout.astro";
import { Picture } from "astro:assets";
type Props = CollectionEntry<"blog">["data"] & {
readingTime: number;
readingTime: number;
};
const { title, description, pubDate, updatedDate, heroImage, readingTime } =
Astro.props;
Astro.props;
---
<BaseLayout title={title} description={description}>
<article>
<div class="hero-image">
{
heroImage && (
<Picture src={heroImage} alt="" width={1020} height={510} />
)
}
<article>
<div class="hero-image">
{heroImage && <Picture src={heroImage} alt="" width={752} />}
</div>
<div class="prose">
<div class="title">
<div class="date">
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
Last updated on <FormattedDate date={updatedDate} />
</div>
)
}
</div>
<div class="prose">
<div class="title">
<div class="date">
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
Last updated on{" "}
<FormattedDate date={updatedDate} />
</div>
)
}
</div>
<h1>{title}</h1>
<p>{readingTime}</p>
<hr />
</div>
<slot />
</div>
</article>
<h1>{title}</h1>
<p>{readingTime}</p>
<hr />
</div>
<slot />
</div>
</article>
</BaseLayout>
<style>
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.hero-image {
width: 100%;
}
.hero-image img {
display: block;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
.prose {
color: rgb(var(--gray-dark));
text-wrap: pretty;
}
.title {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
line-height: 1;
}
.title h1 {
margin: 0 0 0.5em 0;
}
.date {
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
.last-updated-on {
font-style: italic;
}
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.hero-image {
width: 100%;
}
.hero-image img {
display: block;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
.prose {
color: rgb(var(--gray-dark));
text-wrap: pretty;
}
.title {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
line-height: 1;
}
.title h1 {
margin: 0 0 0.5em 0;
}
.date {
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
.last-updated-on {
font-style: italic;
}
</style>