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

import { PageProps } from '$fresh/server.ts'
import { MemberCard, memberMock } from '../../../components/MemberCard.tsx'
import { CSS, render as renderMd } from 'gfm'

function Markdown({ children }: { children: string }) {
	return (
		<>
			<style dangerouslySetInnerHTML={{ __html: CSS }}></style>
			<div
				class='markdown-body'
				dangerouslySetInnerHTML={{ __html: renderMd(children) }}
			>
			</div>
		</>
	)
}

const db = [
	'julien.oculi',
]

async function getCarnet(user: string): Promise<string> {
	try {
		const response = await fetch(
			`https://git.cohabit.fr/${user}/.carnet/raw/branch/main/index.md`,
		)
		return response.text()
	} catch (error) {
		return 'Carnet introuvable\n```js\nString(error)\n```'
	}
}

export default async function Member(_: Request, { params }: PageProps) {
	const id = Number(params.id)
	const Member = memberMock.at(id)

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

	const carnet = await getCarnet(db.at(id)!)

	return (
		<div
			style={{
				display: 'grid',
				gridTemplateColumns: 'auto 1fr',
				gap: 'var(--_gap)',
				justifyContent: 'center',
			}}
		>
			<style>{'.markdown-body { max-width: 80dvw; }'}</style>
			<div>
				{MemberCard(Member)}
				<br />
				<a
					href={`/membres/${id}/portfolio/index.html`}
					class='cta'
					target='_blank'
				>
					Portfolio
				</a>
			</div>
			<Markdown>{carnet}</Markdown>
		</div>
	)
}