Skip to content

Commit 9bf8289

Browse files
gallaylgallayl
committed
lighthouse fixes
1 parent 9111a9e commit 9bf8289

File tree

10 files changed

+26
-19
lines changed

10 files changed

+26
-19
lines changed

‎src/components/Footer.astro‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
---
2+
import { Image } from 'astro:assets';
23
import { SITE_TITLE, SOCIAL } from '../consts';
4+
import logo from '../../public/images/furystack-logo-512.png';
35
---
46

57
<footer class="site-footer">
68
<div class="footer-inner">
79
<div class="footer-top">
810
<div class="footer-brand">
911
<a href="/" class="footer-logo">
10-
<img src="/images/furystack-logo-512.png" alt={SITE_TITLE} width="24" height="24" />
12+
<Image src={logo} alt={SITE_TITLE} width={24} height={24} loading="eager" />
1113
<span>FuryStack</span>
1214
</a>
1315
<p class="footer-tagline">A flexible end-to-end framework for building complex services</p>
@@ -70,7 +72,7 @@ import { SITE_TITLE, SOCIAL } from '../consts';
7072
margin-bottom: 8px;
7173
}
7274
.footer-logo:hover { text-decoration: none; color: #fff; }
73-
.footer-logo img { border-radius: 4px; }
75+
.footer-logo :global(img) { border-radius: 4px; }
7476

7577
.footer-tagline {
7678
font-size: 1.35rem;

‎src/components/PostCard.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import type { CollectionEntry } from 'astro:content';
66
interface Props {
77
post: CollectionEntry<'posts'>;
88
large?: boolean;
9+
eager?: boolean;
910
}
1011
11-
const { post, large = false } = Astro.props;
12+
const { post, large = false, eager = false } = Astro.props;
1213
const { title, date, tags, excerpt, image, author } = post.data;
1314
1415
const datetime = format(date, 'yyyy-MM-dd');
@@ -23,7 +24,7 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
2324
<article class:list={['post-card', { 'no-image': !image, 'post-card-large': large }]}>
2425
{image && (
2526
<div class="post-card-image">
26-
<Image src={image} alt={`${title} cover image`} width={720} height={400} />
27+
<Image src={image} alt={title} width={720} height={400} loading={eager ? 'eager' : 'lazy'} />
2728
</div>
2829
)}
2930
<div class="post-card-body">

‎src/components/SiteNav.astro‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
2+
import { Image } from 'astro:assets';
23
import { SOCIAL, SITE_TITLE } from '../consts';
34
import GitHubIcon from './icons/GitHubIcon.astro';
45
import XIcon from './icons/XIcon.astro';
6+
import logo from '../../public/images/furystack-logo-512.png';
57
68
interface Props {
79
isHome?: boolean;
@@ -14,7 +16,7 @@ const { isHome = false } = Astro.props;
1416
<div class="site-nav-left">
1517
{!isHome && (
1618
<a class="site-nav-logo" href="/">
17-
<img src="/images/furystack-logo-512.png" alt={SITE_TITLE} />
19+
<Image src={logo} alt={SITE_TITLE} width={24} height={24} loading="eager" />
1820
<span>FuryStack</span>
1921
</a>
2022
)}
@@ -32,12 +34,12 @@ const { isHome = false } = Astro.props;
3234
</div>
3335
<div class="site-nav-right">
3436
{SOCIAL.github && (
35-
<a class="social-link" href={SOCIAL.github} target="_blank" rel="noopener noreferrer" title="GitHub">
37+
<a class="social-link" href={SOCIAL.github} target="_blank" rel="noopener noreferrer" aria-label="GitHub">
3638
<GitHubIcon />
3739
</a>
3840
)}
3941
{SOCIAL.x && (
40-
<a class="social-link" href={SOCIAL.x} target="_blank" rel="noopener noreferrer" title="X (Twitter)">
42+
<a class="social-link" href={SOCIAL.x} target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)">
4143
<XIcon />
4244
</a>
4345
)}
@@ -88,7 +90,7 @@ const { isHome = false } = Astro.props;
8890
white-space: nowrap;
8991
}
9092
.site-nav-logo:hover { text-decoration: none; opacity: 0.9; }
91-
.site-nav-logo img { width: 24px; height: 24px; border-radius: 4px; }
93+
.site-nav-logo :global(img) { width: 24px; height: 24px; border-radius: 4px; }
9294

9395
.nav-toggle {
9496
display: none;

‎src/components/icons/GitHubIcon.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ interface Props {
66
const { size = 18 } = Astro.props;
77
---
88

9-
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
9+
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><title>GitHub</title><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>

‎src/components/icons/XIcon.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ interface Props {
66
const { size = 16 } = Astro.props;
77
---
88

9-
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="currentColor" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>
9+
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><title>X (Twitter)</title><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>

‎src/layouts/PostLayout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const primaryTag = tags?.[0];
3737
<div class="post-byline">
3838
{authorData.map(a => (
3939
<a class="byline-avatar" href={`/author/${a.id.toLowerCase()}/`}>
40-
<img src={a.avatar} alt={a.id} width="36" height="36" />
40+
<img src={a.avatar} alt={a.id} width="36" height="36" loading="eager" />
4141
</a>
4242
))}
4343
<div class="byline-text">
@@ -60,7 +60,7 @@ const primaryTag = tags?.[0];
6060

6161
{image && (
6262
<figure class="post-image">
63-
<Image src={image} alt={title} width={1920} height={1080} format="jpg" />
63+
<Image src={image} alt={title} width={1920} height={1080} format="jpg" loading="eager" />
6464
</figure>
6565
)}
6666

‎src/pages/author/[author].astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const title = `${author.id} - ${SITE_TITLE}`;
4242
<BaseLayout title={title} description={author.bio} ogType="profile">
4343
<header class="author-header">
4444
<div class="author-header-inner">
45-
<img class="author-avatar" src={author.avatar} alt={author.id} width="80" height="80" />
45+
<img class="author-avatar" src={author.avatar} alt={author.id} width="80" height="80" loading="eager" />
4646
<div class="author-info">
4747
<h1>{author.id}</h1>
4848
{author.bio && <p class="author-bio">{author.bio}</p>}
@@ -59,7 +59,7 @@ const title = `${author.id} - ${SITE_TITLE}`;
5959
<main id="main-content" class="author-main">
6060
<div class="inner">
6161
<div class="posts-grid">
62-
{posts.map(post => <PostCard post={post} />)}
62+
{posts.map((post, i) => <PostCard post={post} eager={i === 0} />)}
6363
</div>
6464
</div>
6565
</main>

‎src/pages/index.astro‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
---
2+
import { Image } from 'astro:assets';
23
import BaseLayout from '../layouts/BaseLayout.astro';
34
import PostCard from '../components/PostCard.astro';
45
import GitHubIcon from '../components/icons/GitHubIcon.astro';
56
import { getCollection } from 'astro:content';
67
import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL, SOCIAL } from '../consts';
8+
import logo from '../../public/images/furystack-logo-512.png';
79
810
const allPosts = await getCollection('posts', ({ data }) => !data.draft);
911
const posts = allPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
@@ -15,7 +17,7 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
1517
<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION} ogImage={ogImage} isHome>
1618
<section class="hero">
1719
<div class="hero-inner">
18-
<img class="hero-logo" src="/images/furystack-logo-512.png" alt={SITE_TITLE} width="64" height="64" />
20+
<Image class="hero-logo" src={logo} alt={SITE_TITLE} width={64} height={64} loading="eager" />
1921
<h1 class="hero-title">FuryStack</h1>
2022
<p class="hero-description">{SITE_DESCRIPTION}</p>
2123
<div class="hero-actions">
@@ -33,15 +35,15 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
3335
{featured && (
3436
<section class="featured-section">
3537
<span class="section-label">Latest</span>
36-
<PostCard post={featured} large />
38+
<PostCard post={featured} large eager />
3739
</section>
3840
)}
3941

4042
{rest.length > 0 && (
4143
<section class="posts-section">
4244
<span class="section-label">All Posts</span>
4345
<div class="posts-grid">
44-
{rest.map(post => <PostCard post={post} />)}
46+
{rest.map((post, i) => <PostCard post={post} eager={i < 3} />)}
4547
</div>
4648
</section>
4749
)}

‎src/pages/packages.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const packages = [
4747
<a href={`https://www.npmjs.com/package/${pkg}`} target="_blank" rel="noopener noreferrer">{pkg}</a>
4848
</div>
4949
<div class="pkg-badge">
50-
<img src={`https://img.shields.io/npm/v/${pkg}.svg?maxAge=3600`} alt={`${pkg} version`} loading="lazy" />
50+
<img src={`https://img.shields.io/npm/v/${pkg}.svg?maxAge=3600`} alt={`${pkg} version`} loading="lazy" decoding="async" />
5151
</div>
5252
<a class="pkg-posts-link" href={`/tags/${shortName}/`}>Posts &rarr;</a>
5353
</div>

‎src/pages/tags/[tag].astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const description = tagData?.description ?? '';
4949
<main id="main-content" class="tag-main">
5050
<div class="inner">
5151
<div class="posts-grid">
52-
{posts.map(post => <PostCard post={post} />)}
52+
{posts.map((post, i) => <PostCard post={post} eager={i === 0} />)}
5353
</div>
5454
</div>
5555
</main>

0 commit comments

Comments
 (0)