External/kycnotme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 2025-05-20-0D8p

Browse Source
This commit is contained in:
pluja
2025-05-20 01:47:50 +00:00
parent 587480d140
commit af3df8f79a
35 changed files with 1091 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/Captcha.astro
View File

@@ -1,7 +1,6 @@
---
import { Icon } from 'astro-icon/components'
import { isInputError, type ActionAccept, type ActionClient } from 'astro:actions'
import { Image } from 'astro:assets'
import { CAPTCHA_LENGTH, generateCaptcha } from '../lib/captcha'
import { cn } from '../lib/cn'

7
web/src/components/ChatMessages.astro
View File

@@ -1,9 +1,9 @@
---
import { Picture } from 'astro:assets'
import { cn } from '../lib/cn'
import { formatDateShort } from '../lib/timeAgo'
import MyPicture from './MyPicture.astro'
import type { Prisma } from '@prisma/client'
import type { HTMLAttributes } from 'astro/types'
@@ -73,13 +73,12 @@ const { messages, userId, class: className, ...htmlProps } = Astro.props
{!isCurrentUser && !isNextFromSameUser && (
<p class="text-day-500 mb-0.5 text-xs">
{!!message.user.picture && (
<Picture
<MyPicture
src={message.user.picture}
height={16}
width={16}
class="inline-block rounded-full align-[-0.33em]"
alt=""
formats={['jxl', 'avif', 'webp']}
/>
)}
{message.user.name}

5
web/src/components/CommentItem.astro
View File

@@ -1,5 +1,4 @@
---
import Image from 'astro/components/Image.astro'
import { Icon } from 'astro-icon/components'
import { Markdown } from 'astro-remote'
import { Schema } from 'astro-seo-schema'
@@ -19,6 +18,7 @@ import { formatDateShort } from '../lib/timeAgo'
import BadgeSmall from './BadgeSmall.astro'
import CommentModeration from './CommentModeration.astro'
import CommentReply from './CommentReply.astro'
import MyPicture from './MyPicture.astro'
import TimeFormatted from './TimeFormatted.astro'
import Tooltip from './Tooltip.astro'
@@ -158,11 +158,10 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
<span class="flex items-center gap-1">
{
comment.author.picture && (
<Image
<MyPicture
src={comment.author.picture}
alt={`Profile for ${comment.author.displayName ?? comment.author.name}`}
class="size-6 rounded-full bg-zinc-700 object-cover"
loading="lazy"
height={24}
width={24}
/>

42
web/src/components/MyPicture.astro Normal file
View File

@@ -0,0 +1,42 @@
---
import type { ComponentProps } from 'react'
import { Picture } from 'astro:assets'
import defaultServiceImage from '../assets/fallback-service-image.jpg'
const fallbackImages = {
service: defaultServiceImage,
} as const satisfies Record<string, typeof defaultServiceImage>
type Props = Omit<ComponentProps<typeof Picture>, 'src'> & {
src: ComponentProps<typeof Picture>['src'] | null | undefined
fallback?: keyof typeof fallbackImages
}
const {
src,
formats = ['avif', 'webp'],
fallback = undefined as keyof typeof fallbackImages | undefined,
height,
width,
...props
} = Astro.props
const fallbackImage = fallback ? fallbackImages[fallback] : undefined
---
{/* eslint-disable @typescript-eslint/no-explicit-any */}
{
!!(src ?? fallbackImage) && (
<Picture
src={
typeof src === 'string' ? new URL(src, Astro.url).href : ((src ?? fallbackImage) as unknown as string)
}
formats={formats}
height={height ? Number(height) * 2 : undefined}
width={width ? Number(width) * 2 : undefined}
{...(props as any)}
/>
)
}

344
web/src/components/OgImage.tsx
View File

@@ -2,16 +2,16 @@ import fs from 'node:fs'
import path from 'node:path'
import { ImageResponse } from '@vercel/og'
import sharp from 'sharp'
import defaultOGImageBg from '../assets/ogimage-bg.png'
import defaultOGImage from '../assets/ogimage.png'
import { makeOverallScoreInfo } from '../lib/overallScore'
import { urlWithParams } from '../lib/urls'
import type { APIContext } from 'astro'
import type { Prettify } from 'ts-essentials'
export type GenericOgImageProps = Partial<Record<string, string>>
//////////////////////////////////////////////////////
// NOTE //
// Use this website to create and preview templates //
@@ -52,15 +52,41 @@ const defaultOptions = {
)
),
},
{
name: 'Space Grotesk',
weight: 400,
style: 'normal',
data: fs.readFileSync(
path.resolve(
process.cwd(),
'node_modules',
'@fontsource',
'space-grotesk',
'files',
'space-grotesk-latin-400-normal.woff'
)
),
},
{
name: 'Space Grotesk',
weight: 700,
style: 'normal',
data: fs.readFileSync(
path.resolve(
process.cwd(),
'node_modules',
'@fontsource',
'space-grotesk',
'files',
'space-grotesk-latin-700-normal.woff'
)
),
},
],
} as const satisfies ConstructorParameters<typeof ImageResponse>[1]
function absoluteUrl(url: string, context: Pick<APIContext, 'url'>) {
return new URL(url, context.url.origin).href
}
export const ogImageTemplates = {
default: (_props: Record<never, never> = {}, context: APIContext) => {
default: (_props: Record<never, never> = {}, context) => {
return new ImageResponse(
(
<img
@@ -74,37 +100,278 @@ export const ogImageTemplates = {
defaultOptions
)
},
generic: ({ title }: { title?: string }, context) => {
service: async (
{
title,
description,
categories,
score,
imageUrl,
}: {
title: string
description: string
categories: {
name: string
icon: string
}[]
score: number
imageUrl: string | null
},
context
) => {
const scoreInfo = makeOverallScoreInfo(score, 10)
const scoreColors = {
'bg-score-1': '#e26136',
'bg-score-2': '#eba370',
'bg-score-3': '#eddb82',
'bg-score-4': '#8de2d7',
'bg-score-5': '#3cdd71',
} as const satisfies Record<string, string>
const scoreColor =
Object.entries(scoreColors).find(([className]) => scoreInfo.classNameBg?.includes(className))?.[1] ??
'white'
const PADING = 80
return new ImageResponse(
(
<div
style={{
fontSize: 100,
fontWeight: 'bold',
color: 'white',
backgroundImage: `url(${absoluteUrl(defaultOGImageBg.src, context)})`,
width: '100%',
height: '100%',
padding: '50px 200px',
textAlign: 'center',
justifyContent: 'space-around',
alignItems: 'center',
padding: PADING,
display: 'flex',
flexDirection: 'column',
position: 'relative',
gap: 20,
}}
>
<span>{title}</span>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
gap: 10,
flex: 1,
}}
>
{!!imageUrl && (
<img
src={absoluteUrl(imageUrl, context)}
style={{
width: 140,
height: 140,
borderRadius: 20,
objectFit: 'contain',
}}
/>
)}
<div style={{ display: 'flex', paddingTop: 20 }}>
<span
style={{
fontSize: 100,
fontWeight: 'bold',
color: '#3bdb78',
fontFamily: 'Space Grotesk',
lineHeight: 1.2,
height: 120,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
marginTop: -20,
}}
>
{title}
</span>
</div>
</div>
<div
style={{
alignItems: 'flex-end',
display: 'flex',
gap: 50,
position: 'relative',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: 10,
flex: 1,
justifyContent: 'space-between',
alignSelf: 'stretch',
}}
>
<span
style={{
fontSize: 30,
color: 'white',
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
maxHeight: 115,
}}
>
{description}
</span>
<div
style={{
display: 'flex',
gap: 40,
flexWrap: 'wrap',
fontWeight: 'bold',
fontSize: 50,
marginTop: 10,
color: 'white',
}}
>
{await Promise.all(
categories.map(async (category) => (
<span style={{ display: 'flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap' }}>
<img
src={await iconUrl(category.icon, 50)}
width={50}
height={50}
style={{ width: 50, height: 50 }}
/>
{category.name}
</span>
))
)}
</div>
</div>
<div style={{ display: 'flex' }}>
<div
style={{
fontSize: 150,
color: 'black',
height: 200,
width: 200,
borderRadius: 30,
backgroundColor: scoreColor,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 'bold',
}}
>
{score}
</div>
</div>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="white"
width={400}
viewBox="0 0 204 28"
style={{ position: 'absolute', top: PADING, right: PADING }}
>
<path d="M1 0a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h74a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1Zm4 4h2a1 1 0 0 1 1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 1 1 1v3h3a1 1 0 0 1 1 1v3h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3h-3a1 1 0 0 1-1-1v-3H9a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Zm12 0h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm12.82 0h2.37a1 1 0 0 1 .85.46L38 12.27l4.97-7.8A1 1 0 0 1 43.8 4h2.37a1 1 0 0 1 .85 1.54l-6.87 10.8a1 1 0 0 0-.16.53V23a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-6.13a1 1 0 0 0-.15-.53l-6.87-10.8A1 1 0 0 1 29.82 4ZM57 4h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H56v12h15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H57a1 1 0 0 1-1-1v-3h-3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3V5a1 1 0 0 1 1-1zm24 0a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7.6l9.18 15.9c.18.3.5.5.86.5H99a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v15.4L86.83 4.5a1 1 0 0 0-.87-.5Zm29 0a1 1 0 0 0-1 1v3h12V5a1 1 0 0 0-1-1zm11 4v12h3a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm0 12h-12v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1zm-12 0V8h-3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1zm21-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4v15a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm27 0a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V11.4l5.53 12.02a1 1 0 0 0 .91.58h3.12a1 1 0 0 0 .91-.58L176 11.4V23a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-3.36a1 1 0 0 0-.9.58L168 19.21l-6.73-14.63a1 1 0 0 0-.9-.58Zm32 0a1 1 0 0 0-1 1v3h15a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-1 4h-3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-14a1 1 0 0 1-1-1v-3h7a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7zm-38 12a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z" />
</svg>
</div>
),
defaultOptions
)
},
} as const satisfies Record<string, (props: GenericOgImageProps, context: APIContext) => ImageResponse | null>
generic: async (
{
title,
description,
icon,
}: {
title: string
description?: string | null
icon?: string | null
},
context
) => {
const PADING = 80
return new ImageResponse(
(
<div
style={{
color: 'white',
backgroundImage: `url(${absoluteUrl(defaultOGImageBg.src, context)})`,
width: '100%',
height: '100%',
padding: PADING,
display: 'flex',
flexDirection: 'column',
position: 'relative',
gap: 20,
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="white"
width={400}
viewBox="0 0 204 28"
style={{ marginBottom: 'auto' }}
>
<path d="M1 0a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h74a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1Zm4 4h2a1 1 0 0 1 1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 1 1 1v3h3a1 1 0 0 1 1 1v3h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3h-3a1 1 0 0 1-1-1v-3H9a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Zm12 0h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm12.82 0h2.37a1 1 0 0 1 .85.46L38 12.27l4.97-7.8A1 1 0 0 1 43.8 4h2.37a1 1 0 0 1 .85 1.54l-6.87 10.8a1 1 0 0 0-.16.53V23a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-6.13a1 1 0 0 0-.15-.53l-6.87-10.8A1 1 0 0 1 29.82 4ZM57 4h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H56v12h15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H57a1 1 0 0 1-1-1v-3h-3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3V5a1 1 0 0 1 1-1zm24 0a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7.6l9.18 15.9c.18.3.5.5.86.5H99a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v15.4L86.83 4.5a1 1 0 0 0-.87-.5Zm29 0a1 1 0 0 0-1 1v3h12V5a1 1 0 0 0-1-1zm11 4v12h3a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm0 12h-12v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1zm-12 0V8h-3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1zm21-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4v15a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm27 0a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V11.4l5.53 12.02a1 1 0 0 0 .91.58h3.12a1 1 0 0 0 .91-.58L176 11.4V23a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-3.36a1 1 0 0 0-.9.58L168 19.21l-6.73-14.63a1 1 0 0 0-.9-.58Zm32 0a1 1 0 0 0-1 1v3h15a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-1 4h-3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-14a1 1 0 0 1-1-1v-3h7a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7zm-38 12a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z" />
</svg>
<div style={{ display: 'flex', paddingTop: 20 }}>
<span
style={{
fontSize: 100,
fontWeight: 'bold',
color: '#3bdb78',
fontFamily: 'Space Grotesk',
lineHeight: 1.2,
height: 120,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
marginTop: -20,
}}
>
{title}
</span>
</div>
<span
style={{
fontSize: 40,
color: 'white',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxHeight: 200,
}}
>
{description}
</span>
{!!icon && (
<img
src={await iconUrl(icon, 200)}
width={200}
height={200}
style={{
position: 'absolute',
top: PADING,
right: PADING,
}}
/>
)}
</div>
),
defaultOptions
)
},
} as const satisfies Record<
string,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(props: any, context: APIContext) => ImageResponse | Promise<ImageResponse | null> | null
>
type OgImageTemplate = keyof typeof ogImageTemplates
type OgImageProps<T extends OgImageTemplate> = Parameters<(typeof ogImageTemplates)[T]>[0]
// eslint-disable-next-line @typescript-eslint/sort-type-constituents
export type OgImageAllTemplatesWithGenericProps = { template: OgImageTemplate } & GenericOgImageProps
export type OgImageAllTemplatesWithProps = Prettify<
{
@@ -119,5 +386,44 @@ export function makeOgImageUrl(
) {
return typeof ogImage === 'string'
? new URL(ogImage, baseUrl).href
: urlWithParams(new URL('/ogimage.png', baseUrl), ogImage ?? {})
: urlWithParams(new URL('/ogimage.png', baseUrl), { data: JSON.stringify(ogImage ?? {}) })
}
// Utilities ------------------------------------------------------------
function absoluteUrl(url: string, context: Pick<APIContext, 'url'>) {
return new URL(url, context.url.origin).href
}
async function svgUrlToBase64Png(svgUrl: string, width?: number, height?: number): Promise<string> {
// 1. Fetch the SVG file
const response = await fetch(svgUrl)
if (!response.ok) {
throw new Error(`Failed to fetch SVG: ${response.statusText}`)
}
const svgBuffer = await response.arrayBuffer()
// 2. Convert SVG to PNG using sharp
let image = sharp(svgBuffer).png().negate({ alpha: false })
if (width || height) {
image = image.resize(width, height, {
fit: 'contain',
background: { r: 0, g: 0, b: 0, alpha: 0 },
})
}
const pngBuffer = await image.toBuffer()
// 3. Convert to base64 string
const base64 = pngBuffer.toString('base64')
return `data:image/png;base64,${base64}`
}
async function iconUrl(icon: string, size = 30) {
const [, prefix, name] = /^([^:]+):(.*)$/.exec(icon) ?? []
if (!prefix || !name) return undefined
const url = `https://api.iconify.design/${prefix}/${name}.svg`
const result = await svgUrlToBase64Png(url, size, size)
return result
}

28
web/src/components/ScoreSquare.astro
View File

@@ -2,6 +2,7 @@
import { Schema } from 'astro-seo-schema'
import { cn } from '../lib/cn'
import { makeOverallScoreInfo } from '../lib/overallScore'
import { KYCNOTME_SCHEMA_MINI } from '../lib/schema'
import { transformCase } from '../lib/strings'
@@ -16,33 +17,6 @@ export type Props = HTMLAttributes<'div'> & {
const { score, label, total = 10, class: className, itemReviewedId, ...htmlProps } = Astro.props
export function makeOverallScoreInfo(score: number, total = 10) {
const classNamesByColor = {
red: 'bg-score-1 text-black',
orange: 'bg-score-2 text-black',
yellow: 'bg-score-3 text-black',
blue: 'bg-score-4 text-black',
green: 'bg-score-5 text-black',
} as const satisfies Record<string, string>
const formattedScore = Math.round(score).toLocaleString()
const n = score / total
if (n > 1) return { text: '', classNameBg: classNamesByColor.green, formattedScore }
if (n >= 0.9 && n <= 1) return { text: 'Excellent', classNameBg: classNamesByColor.green, formattedScore }
if (n >= 0.8 && n < 0.9) return { text: 'Very Good', classNameBg: classNamesByColor.blue, formattedScore }
if (n >= 0.7 && n < 0.8) return { text: 'Good', classNameBg: classNamesByColor.blue, formattedScore }
if (n >= 0.6 && n < 0.7) return { text: 'Okay', classNameBg: classNamesByColor.yellow, formattedScore }
if (n >= 0.5 && n < 0.6) {
return { text: 'Acceptable', classNameBg: classNamesByColor.yellow, formattedScore }
}
if (n >= 0.4 && n < 0.5) return { text: 'Bad', classNameBg: classNamesByColor.orange, formattedScore }
if (n >= 0.3 && n < 0.4) return { text: 'Very Bad', classNameBg: classNamesByColor.orange, formattedScore }
if (n >= 0.2 && n < 0.3) return { text: 'Really Bad', classNameBg: classNamesByColor.red, formattedScore }
if (n >= 0 && n < 0.2) return { text: 'Terrible', classNameBg: classNamesByColor.red, formattedScore }
return { text: '', classNameBg: undefined, formattedScore }
}
const { text, classNameBg, formattedScore } = makeOverallScoreInfo(score, total)
---

11
web/src/components/ServiceCard.astro
View File

@@ -1,14 +1,13 @@
---
import { Icon } from 'astro-icon/components'
import { Image } from 'astro:assets'
import defaultImage from '../assets/fallback-service-image.jpg'
import { currencies } from '../constants/currencies'
import { verificationStatusesByValue } from '../constants/verificationStatus'
import { cn } from '../lib/cn'
import { makeOverallScoreInfo } from '../lib/overallScore'
import { transformCase } from '../lib/strings'
import { makeOverallScoreInfo } from './ScoreSquare.astro'
import MyPicture from './MyPicture.astro'
import Tooltip from './Tooltip.astro'
import type { Prisma } from '@prisma/client'
@@ -76,9 +75,9 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
>
<!-- Header with Icon and Title -->
<div class="flex items-center gap-(--gap)">
<Image
src={// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
imageUrl || (defaultImage as unknown as string)}
<MyPicture
src={imageUrl}
fallback="service"
alt={name || 'Service logo'}
class="size-12 shrink-0 rounded-sm object-contain text-white"
width={48}

2
web/src/components/ServicesFilters.astro
View File

@@ -3,11 +3,11 @@ import { Icon } from 'astro-icon/components'
import { kycLevels } from '../constants/kycLevels'
import { cn } from '../lib/cn'
import { makeOverallScoreInfo } from '../lib/overallScore'
import { type ServicesFiltersObject, type ServicesFiltersOptions } from '../pages/index.astro'
import Button from './Button.astro'
import PillsRadioGroup from './PillsRadioGroup.astro'
import { makeOverallScoreInfo } from './ScoreSquare.astro'
import Tooltip from './Tooltip.astro'
import type { HTMLAttributes } from 'astro/types'

3
web/src/layouts/MarkdownLayout.astro
View File

@@ -16,6 +16,7 @@ type Props = ComponentProps<typeof BaseLayout> &
author: string
pubDate: string
description: string
icon?: string
}>
const { frontmatter, schemas, ...baseLayoutProps } = Astro.props
@@ -23,6 +24,8 @@ const publishDate = frontmatter.pubDate ? new Date(frontmatter.pubDate) : null
const ogImageTemplateData = {
template: 'generic',
title: frontmatter.title,
description: frontmatter.description,
icon: frontmatter.icon,
} satisfies OgImageAllTemplatesWithProps
const weAreAuthor = frontmatter.author.toLowerCase().trim() === 'kycnot.me'
---

26
web/src/lib/overallScore.ts Normal file
View File

@@ -0,0 +1,26 @@
export function makeOverallScoreInfo(score: number, total = 10) {
const classNamesByColor = {
red: 'bg-score-1 text-black',
orange: 'bg-score-2 text-black',
yellow: 'bg-score-3 text-black',
blue: 'bg-score-4 text-black',
green: 'bg-score-5 text-black',
} as const satisfies Record<string, string>
const formattedScore = Math.round(score).toLocaleString()
const n = score / total
if (n > 1) return { text: '', classNameBg: classNamesByColor.green, formattedScore }
if (n >= 0.9 && n <= 1) return { text: 'Excellent', classNameBg: classNamesByColor.green, formattedScore }
if (n >= 0.8 && n < 0.9) return { text: 'Very Good', classNameBg: classNamesByColor.blue, formattedScore }
if (n >= 0.7 && n < 0.8) return { text: 'Good', classNameBg: classNamesByColor.blue, formattedScore }
if (n >= 0.6 && n < 0.7) return { text: 'Okay', classNameBg: classNamesByColor.yellow, formattedScore }
if (n >= 0.5 && n < 0.6) {
return { text: 'Acceptable', classNameBg: classNamesByColor.yellow, formattedScore }
}
if (n >= 0.4 && n < 0.5) return { text: 'Bad', classNameBg: classNamesByColor.orange, formattedScore }
if (n >= 0.3 && n < 0.4) return { text: 'Very Bad', classNameBg: classNamesByColor.orange, formattedScore }
if (n >= 0.2 && n < 0.3) return { text: 'Really Bad', classNameBg: classNamesByColor.red, formattedScore }
if (n >= 0 && n < 0.2) return { text: 'Terrible', classNameBg: classNamesByColor.red, formattedScore }
return { text: '', classNameBg: undefined, formattedScore }
}

3
web/src/lib/zodUtils.ts
View File

@@ -50,7 +50,6 @@ export const ACCEPTED_IMAGE_TYPES = [
'image/svg+xml',
'image/png',
'image/jpeg',
'image/jxl',
'image/avif',
'image/webp',
] as const satisfies string[]
@@ -66,7 +65,7 @@ export const imageFileSchema = z
)
.refine(
(file) => !file || ACCEPTED_IMAGE_TYPES.some((type) => file.type === type),
'Only SVG, PNG, JPG, JPEG XL, AVIF, WebP formats are supported.'
'Only SVG, PNG, JPG, AVIF, WebP formats are supported.'
)
export const imageFileSchemaRequired = imageFileSchema.refine((file) => !!file, 'Required')

1
web/src/pages/about.md
View File

@@ -4,6 +4,7 @@ title: About
author: KYCnot.me
pubDate: 2025-05-15
description: 'Learn how KYCnot.me website works and about our mission to protect privacy in cryptocurrency.'
icon: 'ri:information-line'
---
## What is this page?

2
web/src/pages/account/edit.astro
View File

@@ -24,7 +24,7 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
<MiniLayout
pageTitle={`Edit Profile - ${user.name}`}
description="Edit your user profile"
ogImage={{ template: 'generic', title: 'Edit Profile' }}
ogImage={{ template: 'generic', title: 'Edit Profile', icon: 'ri:user-settings-line' }}
layoutHeader={{
icon: 'ri:edit-line',
title: 'Edit profile',

7
web/src/pages/account/generate.astro
View File

@@ -25,7 +25,12 @@ const prettyToken = preGeneratedToken ? prettifyUserSecretToken(preGeneratedToke
<MiniLayout
pageTitle="Create Account"
description="Create a new account"
ogImage={{ template: 'generic', title: 'Create Account' }}
ogImage={{
template: 'generic',
title: 'Create Account',
description: 'Zero data, 100% anonymous',
icon: 'ri:user-add-line',
}}
layoutHeader={{
icon: 'ri:user-add-line',
title: 'New account',

23
web/src/pages/account/index.astro
View File

@@ -1,12 +1,11 @@
---
import { Icon } from 'astro-icon/components'
import { actions } from 'astro:actions'
import { Picture } from 'astro:assets'
import { sortBy } from 'lodash-es'
import defaultServiceImage from '../../assets/fallback-service-image.jpg'
import BadgeSmall from '../../components/BadgeSmall.astro'
import Button from '../../components/Button.astro'
import MyPicture from '../../components/MyPicture.astro'
import TimeFormatted from '../../components/TimeFormatted.astro'
import Tooltip from '../../components/Tooltip.astro'
import { getKarmaTransactionActionInfo } from '../../constants/karmaTransactionActions'
@@ -161,7 +160,12 @@ if (!user) return Astro.rewrite('/404')
<BaseLayout
pageTitle={`${user.name} - Account`}
description="Manage your user profile"
ogImage={{ template: 'generic', title: `${user.name} | Account` }}
ogImage={{
template: 'generic',
title: `${user.name} | Account`,
description: 'Manage your user profile',
icon: 'ri:user-3-line',
}}
widthClassName="max-w-screen-md"
className={{
main: 'space-y-6',
@@ -180,7 +184,13 @@ if (!user) return Astro.rewrite('/404')
<header class="flex items-center gap-4">
{
user.picture ? (
<img src={user.picture} alt="" class="ring-day-500/30 size-16 rounded-full ring-2" />
<MyPicture
src={user.picture}
alt=""
class="ring-day-500/30 size-16 rounded-full ring-2"
width={64}
height={64}
/>
) : (
<div class="bg-day-500/10 ring-day-500/30 text-day-400 flex size-16 items-center justify-center rounded-full ring-2">
<Icon name="ri:user-3-line" class="size-8" />
@@ -460,8 +470,9 @@ if (!user) return Astro.rewrite('/404')
href={`/service/${affiliation.service.slug}`}
class="text-day-300 group flex min-w-32 items-center gap-2 text-sm"
>
<Picture
src={affiliation.service.imageUrl ?? (defaultServiceImage as unknown as string)}
<MyPicture
src={affiliation.service.imageUrl}
fallback="service"
alt={affiliation.service.name}
width={40}
height={40}

7
web/src/pages/account/login.astro
View File

@@ -30,7 +30,12 @@ const message = Astro.url.searchParams.get('message')
<MiniLayout
pageTitle="Login"
description="Login to your account"
ogImage={{ template: 'generic', title: 'Login' }}
ogImage={{
template: 'generic',
title: 'Login',
description: message ?? 'Enter your login key',
icon: 'ri:login-box-line',
}}
layoutHeader={{
icon: 'ri:user-line',
title: 'Welcome back',

7
web/src/pages/account/welcome.astro
View File

@@ -17,7 +17,12 @@ const prettyToken = result ? prettifyUserSecretToken(result.data.token) : null
<MiniLayout
pageTitle="Welcome"
description="New account welcome page"
ogImage={{ template: 'generic', title: 'Welcome' }}
ogImage={{
template: 'generic',
title: 'Welcome',
description: 'New account welcome page',
icon: 'ri:key-2-line',
}}
layoutHeader={{
icon: 'ri:key-2-line',
title: 'Save your Login Key',

4
web/src/pages/admin/services/[slug]/edit.astro
View File

@@ -8,8 +8,8 @@ import {
} from '@prisma/client'
import { Icon } from 'astro-icon/components'
import { actions, isInputError } from 'astro:actions'
import { Image } from 'astro:assets'
import MyPicture from '../../../../components/MyPicture.astro'
import { serviceVisibilities } from '../../../../constants/serviceVisibility'
import BaseLayout from '../../../../layouts/BaseLayout.astro'
import { cn } from '../../../../lib/cn'
@@ -334,7 +334,7 @@ const buttonSmallWarningClasses = cn(
{
service.imageUrl ? (
<div class="mt-2 shrink-0">
<Image
<MyPicture
src={service.imageUrl}
alt="Current service image"
width={100}

28
web/src/pages/admin/services/index.astro
View File

@@ -2,9 +2,8 @@
import { ServiceVisibility, VerificationStatus, type Prisma } from '@prisma/client'
import { z } from 'astro/zod'
import { Icon } from 'astro-icon/components'
import { Image } from 'astro:assets'
import defaultImage from '../../../assets/fallback-service-image.jpg'
import MyPicture from '../../../components/MyPicture.astro'
import SortArrowIcon from '../../../components/SortArrowIcon.astro'
import { getKycLevelInfo } from '../../../constants/kycLevels'
import { getVerificationStatusInfo } from '../../../constants/verificationStatus'
@@ -343,23 +342,14 @@ const truncate = (text: string, length: number) => {
<td class="px-4 py-3">
<div class="flex items-center space-x-3">
<div class="h-10 w-10 flex-shrink-0">
{service.imageUrl ? (
<Image
src={service.imageUrl}
alt={service.name}
width={40}
height={40}
class="h-10 w-10 rounded-md object-cover"
/>
) : (
<Image
src={defaultImage}
alt={service.name}
width={40}
height={40}
class="h-10 w-10 rounded-md object-cover"
/>
)}
<MyPicture
src={service.imageUrl}
fallback="service"
alt={service.name}
width={40}
height={40}
class="h-10 w-10 rounded-md object-cover"
/>
</div>
<div class="min-w-0 flex-1">
<div class="text-sm font-medium text-zinc-200">{service.name}</div>

8
web/src/pages/admin/users/[username].astro
View File

@@ -1,7 +1,6 @@
---
import { Icon } from 'astro-icon/components'
import { actions, isInputError } from 'astro:actions'
import { Image } from 'astro:assets'
import BadgeSmall from '../../../components/BadgeSmall.astro'
import Button from '../../../components/Button.astro'
@@ -11,6 +10,7 @@ import InputSelect from '../../../components/InputSelect.astro'
import InputSubmitButton from '../../../components/InputSubmitButton.astro'
import InputText from '../../../components/InputText.astro'
import InputTextArea from '../../../components/InputTextArea.astro'
import MyPicture from '../../../components/MyPicture.astro'
import TimeFormatted from '../../../components/TimeFormatted.astro'
import { getServiceUserRoleInfo, serviceUserRoles } from '../../../constants/serviceUserRoles'
import BaseLayout from '../../../layouts/BaseLayout.astro'
@@ -123,7 +123,7 @@ if (!user) return Astro.rewrite('/404')
<div class="mt-12">
{
!!user.picture && (
<Image
<MyPicture
src={user.picture}
alt=""
width={80}
@@ -218,7 +218,7 @@ if (!user) return Astro.rewrite('/404')
value={user.picture}
error={updateInputErrors.pictureFile}
square
description="Upload a square image for best results. Supported formats: JPG, PNG, WebP, AVIF, JXL. Max size: 5MB."
description="Upload a square image for best results. Supported formats: JPG, PNG, WebP, AVIF. Max size: 5MB."
/>
<InputCardGroup
@@ -265,7 +265,7 @@ if (!user) return Astro.rewrite('/404')
<div class="mb-1 flex items-center justify-between gap-4">
<div class="flex items-center gap-1">
{!!note.addedByUser?.picture && (
<Image
<MyPicture
src={note.addedByUser.picture}
alt=""
width={12}

19
web/src/pages/attributes.astro
View File

@@ -1,12 +1,11 @@
---
import { Icon } from 'astro-icon/components'
import { Markdown } from 'astro-remote'
import { Picture } from 'astro:assets'
import { z } from 'astro:content'
import { orderBy } from 'lodash-es'
import BadgeStandard from '../components/BadgeStandard.astro'
import { makeOverallScoreInfo } from '../components/ScoreSquare.astro'
import MyPicture from '../components/MyPicture.astro'
import SortArrowIcon from '../components/SortArrowIcon.astro'
import { getAttributeCategoryInfo } from '../constants/attributeCategories'
import { getAttributeTypeInfo } from '../constants/attributeTypes'
@@ -15,6 +14,7 @@ import BaseLayout from '../layouts/BaseLayout.astro'
import { sortAttributes } from '../lib/attributes'
import { cn } from '../lib/cn'
import { formatNumber } from '../lib/numbers'
import { makeOverallScoreInfo } from '../lib/overallScore'
import { zodParseQueryParamsStoringErrors } from '../lib/parseUrlFilters'
import { prisma } from '../lib/prisma'
@@ -102,8 +102,13 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
<BaseLayout
pageTitle="Attributes"
description="Browse all available service attributes used to evaluate privacy and trust scores on KYCnot.me."
ogImage={{ template: 'generic', title: 'All attributes' }}
description="Browse all available service attributes used to evaluate privacy and trust scores."
ogImage={{
template: 'generic',
title: 'All attributes',
description: 'Browse all available service attributes',
icon: 'ri:list-radio',
}}
>
<h1 class="font-title mb-2 text-center text-3xl font-bold text-white">Service attributes</h1>
@@ -202,12 +207,11 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
class="flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-zinc-800"
>
{service.imageUrl ? (
<Picture
<MyPicture
src={service.imageUrl}
alt={service.name}
width={24}
height={24}
formats={['jxl', 'avif', 'webp']}
class="size-6 shrink-0 rounded-xs object-contain"
/>
) : (
@@ -349,12 +353,11 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
class="flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-zinc-800"
>
{service.imageUrl ? (
<Picture
<MyPicture
src={service.imageUrl}
alt={service.name}
width={24}
height={24}
formats={['jxl', 'avif', 'webp']}
class="size-6 shrink-0 rounded-xs object-contain"
/>
) : (

15
web/src/pages/events.astro
View File

@@ -1,11 +1,11 @@
---
import { z } from 'astro/zod'
import { Icon } from 'astro-icon/components'
import { Picture } from 'astro:assets'
import { orderBy } from 'lodash-es'
import Button from '../components/Button.astro'
import FormatTimeInterval from '../components/FormatTimeInterval.astro'
import MyPicture from '../components/MyPicture.astro'
import TimeFormatted from '../components/TimeFormatted.astro'
import {
eventTypes,
@@ -151,7 +151,12 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
description="Discover important events, updates, and news about KYC-free services in chronological order."
widthClassName="max-w-screen-lg"
className={{ main: 'sm:flex sm:items-start sm:gap-6' }}
ogImage={{ template: 'generic', title: 'Events' }}
ogImage={{
template: 'generic',
title: 'Events',
description: 'Discover important events, updates, and news about KYC-free services',
icon: 'ri:calendar-event-line',
}}
htmx
>
<h1 class="font-title mb-6 block text-center text-2xl font-bold text-white sm:hidden">
@@ -287,12 +292,11 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
class="group flex h-8 items-center gap-2 rounded-full border border-green-500/30 bg-black/40 px-3 text-sm text-white"
>
{service?.imageUrl && (
<Picture
<MyPicture
src={service.imageUrl}
alt={service.name}
width={16}
height={16}
formats={['jxl', 'avif', 'webp']}
class="size-4 shrink-0 rounded-xs object-contain"
/>
)}
@@ -385,12 +389,11 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
class="-m-1.5 flex w-fit items-center rounded-md p-1.5 leading-none transition-colors hover:bg-zinc-800"
>
{event.service.imageUrl && (
<Picture
<MyPicture
src={event.service.imageUrl}
alt={event.service.name}
width={16}
height={16}
formats={['jxl', 'avif', 'webp']}
class="size-4 shrink-0 rounded-xs object-contain"
/>
)}

1
web/src/pages/karma.mdx
View File

@@ -2,6 +2,7 @@
layout: ../layouts/MarkdownLayout.astro
title: How does karma work?
description: "KYCnot.me has a user karma system, here's how it works"
icon: 'ri:hearts-line'
author: KYCnot.me
pubDate: 2025-05-15
---

7
web/src/pages/notifications.astro
View File

@@ -183,7 +183,12 @@ const notifications = dbNotifications.map((notification) => ({
pageTitle="Notifications"
description="View your notifications and manage your notification preferences."
widthClassName="max-w-screen-lg"
ogImage={{ template: 'generic', title: 'Notifications' }}
ogImage={{
template: 'generic',
title: 'Notifications',
description: 'View and manage your notifications',
icon: 'ri:notification-line',
}}
>
<section class="mx-auto w-full">
<div class="mb-4 flex items-center justify-between">

24
web/src/pages/ogimage.png.ts
View File

@@ -1,19 +1,31 @@
import { ogImageTemplates } from '../components/OgImage'
import { urlParamsToObject } from '../lib/urls'
import { ogImageTemplates, type OgImageAllTemplatesWithProps } from '../components/OgImage'
import type { APIRoute } from 'astro'
import type { Misc } from 'ts-toolbelt'
export const GET: APIRoute = (context) => {
const { template, ...props } = urlParamsToObject(context.url.searchParams)
function toJSON<T extends Misc.JSON.Value>(data: string | null | undefined): T | undefined {
if (!data) return undefined
try {
return JSON.parse(data) as T
} catch (_error) {
return undefined
}
}
if (!template) return ogImageTemplates.default({}, context)
export const GET: APIRoute = async (context) => {
const { template, ...props } = toJSON<OgImageAllTemplatesWithProps>(
context.url.searchParams.get('data')
) ?? { template: 'default' }
if (!template as unknown) return ogImageTemplates.default({}, context)
if (!(template in ogImageTemplates)) {
console.error(`Invalid template: "${template}"`)
return ogImageTemplates.default({}, context)
}
const response = ogImageTemplates[template as keyof typeof ogImageTemplates](props, context)
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
const response = await ogImageTemplates[template](props as any, context)
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!response) {
console.error(`Cannot generate image for template: ${template} and props: ${JSON.stringify(props)}`)

7
web/src/pages/service-suggestion/[id].astro
View File

@@ -86,7 +86,12 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
<BaseLayout
pageTitle={`${serviceSuggestion.service.name} | Service suggestion`}
description="View your service suggestion"
ogImage={{ template: 'generic', title: serviceSuggestion.service.name }}
ogImage={{
template: 'generic',
title: 'My service suggestions',
description: 'View and manage your service suggestion',
icon: 'ri:service-line',
}}
widthClassName="max-w-screen-md"
htmx
breadcrumbs={[

7
web/src/pages/service-suggestion/edit.astro
View File

@@ -65,7 +65,12 @@ if (!service) return Astro.rewrite('/404')
<BaseLayout
pageTitle="Edit service"
description="Suggest an edit to service"
ogImage={{ template: 'generic', title: 'Edit service' }}
ogImage={{
template: 'generic',
title: 'Edit service',
description: 'Suggest an edit to service',
icon: 'ri:edit-line',
}}
widthClassName="max-w-screen-md"
breadcrumbs={[
{

16
web/src/pages/service-suggestion/index.astro
View File

@@ -1,11 +1,10 @@
---
import { Icon } from 'astro-icon/components'
import { actions } from 'astro:actions'
import { Picture } from 'astro:assets'
import { z } from 'astro:content'
import defaultServiceImage from '../../assets/fallback-service-image.jpg'
import Button from '../../components/Button.astro'
import MyPicture from '../../components/MyPicture.astro'
import TimeFormatted from '../../components/TimeFormatted.astro'
import Tooltip from '../../components/Tooltip.astro'
import {
@@ -72,7 +71,12 @@ const success = !!createResult && !createResult.error
<BaseLayout
pageTitle="My service suggestions"
description="Manage your service suggestions"
ogImage={{ template: 'generic', title: 'Service suggestions' }}
ogImage={{
template: 'generic',
title: 'Service suggestions',
description: 'Manage your service suggestions',
icon: 'ri:service-line',
}}
widthClassName="max-w-screen-md"
breadcrumbs={[
{
@@ -122,13 +126,13 @@ const success = !!createResult && !createResult.error
href={`/service/${suggestion.service.slug}`}
class="inline-flex w-full min-w-32 items-center gap-2 hover:underline"
>
<Picture
src={suggestion.service.imageUrl ?? (defaultServiceImage as unknown as string)}
<MyPicture
src={suggestion.service.imageUrl}
fallback="service"
alt={suggestion.service.name}
width={32}
height={32}
class="inline-block size-8 min-w-8 shrink-0 rounded-md"
formats={['jxl', 'avif', 'webp']}
/>
<span class="shrink truncate">{suggestion.service.name}</span>
</a>

7
web/src/pages/service-suggestion/new.astro
View File

@@ -65,7 +65,12 @@ const [categories, attributes] = await Astro.locals.banners.tryMany([
<BaseLayout
pageTitle="New service"
description="Suggest a new service to be added to KYCnot.me"
ogImage={{ template: 'generic', title: 'New service' }}
ogImage={{
template: 'generic',
title: 'New service',
description: 'Suggest a new service to be listed',
icon: 'ri:add-circle-line',
}}
widthClassName="max-w-screen-md"
breadcrumbs={[
{

13
web/src/pages/service/[slug].astro
View File

@@ -4,8 +4,7 @@ import { Icon } from 'astro-icon/components'
import { Markdown } from 'astro-remote'
import { Schema } from 'astro-seo-schema'
import { actions } from 'astro:actions'
import { Picture } from 'astro:assets'
import { head, orderBy, shuffle, sortBy, tail } from 'lodash-es'
import { head, orderBy, pick, shuffle, sortBy, tail } from 'lodash-es'
import AdminOnly from '../../components/AdminOnly.astro'
import BadgeSmall from '../../components/BadgeSmall.astro'
@@ -17,6 +16,7 @@ import DropdownButton from '../../components/DropdownButton.astro'
import DropdownButtonItemForm from '../../components/DropdownButtonItemForm.astro'
import DropdownButtonItemLink from '../../components/DropdownButtonItemLink.astro'
import FormatTimeInterval from '../../components/FormatTimeInterval.astro'
import MyPicture from '../../components/MyPicture.astro'
import { makeOgImageUrl, type OgImageAllTemplatesWithProps } from '../../components/OgImage'
import ScoreGauge from '../../components/ScoreGauge.astro'
import ScoreSquare from '../../components/ScoreSquare.astro'
@@ -349,8 +349,12 @@ const getVerificationStepStatusInfo = (status: VerificationStepStatus) => {
const itemReviewedId = new URL(`/service/${service.slug}`, Astro.url).href
const ogImageTemplateData = {
template: 'generic',
template: 'service',
title: service.name,
description: service.description,
categories: service.categories.map((category) => pick(category, ['name', 'icon'])),
score: service.overallScore,
imageUrl: service.imageUrl,
} satisfies OgImageAllTemplatesWithProps
---
@@ -477,9 +481,8 @@ const ogImageTemplateData = {
<div class="flex items-center gap-4">
{
!!service.imageUrl && (
<Picture
<MyPicture
src={service.imageUrl}
formats={['jxl', 'avif', 'webp']}
alt={service.name || "Service's logo"}
class="size-12 shrink-0 rounded-sm object-contain"
width={48}

24
web/src/pages/u/[username].astro
View File

@@ -1,14 +1,13 @@
---
import { Icon } from 'astro-icon/components'
import { actions } from 'astro:actions'
import { Picture } from 'astro:assets'
import { sortBy } from 'lodash-es'
import defaultServiceImage from '../../assets/fallback-service-image.jpg'
import AdminOnly from '../../components/AdminOnly.astro'
import BadgeSmall from '../../components/BadgeSmall.astro'
import InputSubmitButton from '../../components/InputSubmitButton.astro'
import InputTextArea from '../../components/InputTextArea.astro'
import MyPicture from '../../components/MyPicture.astro'
import TimeFormatted from '../../components/TimeFormatted.astro'
import Tooltip from '../../components/Tooltip.astro'
import { getKarmaTransactionActionInfo } from '../../constants/karmaTransactionActions'
@@ -178,7 +177,13 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
<BaseLayout
pageTitle={`${user.name} - Account`}
description="Manage your user profile"
ogImage={{ template: 'generic', title: `${user.name} | Account` }}
ogImage={{
template: 'generic',
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
title: user.displayName || user.name,
description: 'User profile page',
icon: 'ri:user-3-line',
}}
widthClassName="max-w-screen-md"
className={{
main: 'space-y-6',
@@ -238,7 +243,13 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
<header class="flex items-center gap-4">
{
user.picture ? (
<img src={user.picture} alt="" class="ring-day-500/30 size-16 rounded-full ring-2" />
<MyPicture
src={user.picture}
alt=""
class="ring-day-500/30 size-16 rounded-full ring-2"
width={64}
height={64}
/>
) : (
<div class="bg-day-500/10 ring-day-500/30 text-day-400 flex size-16 items-center justify-center rounded-full ring-2">
<Icon name="ri:user-3-line" class="size-8" />
@@ -555,8 +566,9 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
href={`/service/${affiliation.service.slug}`}
class="text-day-300 group flex min-w-32 items-center gap-2 text-sm"
>
<Picture
src={affiliation.service.imageUrl ?? (defaultServiceImage as unknown as string)}
<MyPicture
src={affiliation.service.imageUrl}
fallback="service"
alt={affiliation.service.name}
width={40}
height={40}