Barazo default frontend
barazo.forum
Merge pull request #64 from barazo-forum/chore/pre-p3-cleanup
chore: replace img elements with next/image
authored by
Guido X Jansen
and committed by
GitHub
620c0ca8
a3a04486
+20
-16
+3
-6
next.config.ts
+3
-6
next.config.ts
···
9
9
// Standalone output for Docker (includes Node.js server)
10
10
output: 'standalone',
11
11
12
-
// Image optimization
12
+
// Image optimization — allow any HTTPS source for AT Protocol PDS avatars/banners.
13
+
// Self-hosted PDS instances can use arbitrary domains, so a wildcard is necessary.
13
14
images: {
14
15
remotePatterns: [
15
16
{
16
17
protocol: 'https',
17
-
hostname: '*.bsky.social',
18
-
},
19
-
{
20
-
protocol: 'https',
21
-
hostname: 'cdn.bsky.app',
18
+
hostname: '**',
22
19
},
23
20
],
24
21
},
+1
-1
src/app/t/[slug]/[rkey]/edit/page.tsx
+1
-1
src/app/t/[slug]/[rkey]/edit/page.tsx
+6
-3
src/app/u/[handle]/page.tsx
+6
-3
src/app/u/[handle]/page.tsx
···
9
9
'use client'
10
10
11
11
import { useState, useEffect } from 'react'
12
+
import Image from 'next/image'
12
13
import { User, CalendarBlank, ChatCircle } from '@phosphor-icons/react'
13
14
import { ForumLayout } from '@/components/layout/forum-layout'
14
15
import { Breadcrumbs } from '@/components/breadcrumbs'
···
139
140
{/* Banner */}
140
141
{profile.bannerUrl && (
141
142
<div className="relative h-48 overflow-hidden">
142
-
<img src={profile.bannerUrl} alt="" className="h-full w-full object-cover" />
143
+
<Image src={profile.bannerUrl} alt="" fill className="object-cover" />
143
144
</div>
144
145
)}
145
146
···
147
148
<div className="flex items-start gap-4">
148
149
{/* Avatar */}
149
150
{profile.avatarUrl ? (
150
-
<img
151
+
<Image
151
152
src={profile.avatarUrl}
152
153
alt={`${profile.displayName ?? profile.handle}'s avatar`}
153
-
className="h-16 w-16 rounded-full object-cover"
154
+
width={64}
155
+
height={64}
156
+
className="rounded-full object-cover"
154
157
/>
155
158
) : (
156
159
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+5
-3
src/components/reply-card.tsx
+5
-3
src/components/reply-card.tsx
···
6
6
*/
7
7
8
8
import Link from 'next/link'
9
+
import Image from 'next/image'
9
10
import { Heart, Clock, Link as LinkIcon } from '@phosphor-icons/react/dist/ssr'
10
11
import type { Reply } from '@/lib/api/types'
11
12
import { cn } from '@/lib/utils'
···
67
68
className="flex items-center gap-2 hover:text-foreground"
68
69
>
69
70
{reply.author?.avatarUrl ? (
70
-
<img
71
+
<Image
71
72
src={reply.author.avatarUrl}
72
73
alt=""
73
-
className="h-6 w-6 rounded-full object-cover"
74
-
loading="lazy"
74
+
width={24}
75
+
height={24}
76
+
className="rounded-full object-cover"
75
77
/>
76
78
) : (
77
79
<span
+5
-3
src/components/topic-card.tsx
+5
-3
src/components/topic-card.tsx
···
5
5
*/
6
6
7
7
import Link from 'next/link'
8
+
import Image from 'next/image'
8
9
import { ChatCircle, Heart, Clock } from '@phosphor-icons/react/dist/ssr'
9
10
import type { Topic } from '@/lib/api/types'
10
11
import { cn } from '@/lib/utils'
···
46
47
className="flex items-center gap-1.5 hover:text-foreground"
47
48
>
48
49
{topic.author?.avatarUrl ? (
49
-
<img
50
+
<Image
50
51
src={topic.author.avatarUrl}
51
52
alt=""
52
-
className="h-5 w-5 rounded-full object-cover"
53
-
loading="lazy"
53
+
width={20}
54
+
height={20}
55
+
className="rounded-full object-cover"
54
56
/>
55
57
) : (
56
58
<span