website/routes/membres/[id]/index.tsx

import { PageProps } from '$fresh/server.ts'
import { Markdown } from ':components/Markdown.tsx'
import { MemberCard } from ':components/MemberCard.tsx'
import { db } from ':src/db/mod.ts'
import { fetchCarnet, userToMemberCardProps } from ':src/members/mod.ts'

export default async function Member(_: Request, { params, url }: PageProps) {
	const uuid = params.id as ReturnType<Crypto['randomUUID']>
	const user = await db.resource.user.get({ uuid }).catch(() => undefined)

	if (!user) {
		return <h3>Membre inconnu, peut être serez vous le prochain</h3>
	}

	const memberCardProps = await userToMemberCardProps(user)
	const carnet = await fetchCarnet(user.login)

	return (
		<div
			style={{
				display: 'grid',
				gridTemplateColumns: 'auto 1fr',
				gap: 'var(--_gap)',
				justifyContent: 'center',
			}}
		>
			<style>{'.markdown-body { max-width: 80dvw; }'}</style>
			<div>
				{MemberCard(memberCardProps)}
				<br />
				<a
					href={`https://${
						user.login.replace('.', '-')
					}.portfolio.${url.hostname}`}
					class='cta'
					target='_blank'
				>
					Portfolio
				</a>
			</div>
			<Markdown
				options={{
					baseUrl:
						`https://git.cohabit.fr/${user.login}/.carnet/raw/branch/main/index.md`,
					allowMath: true,
				}}
			>
				{carnet}
			</Markdown>
		</div>
	)
}