<article
	class="mx-auto mb-16 flex w-full max-w-4xl flex-col items-start justify-center px-4 sm:px-8"
>
	<h1 class="mb-8 text-3xl font-bold tracking-tight text-black dark:text-white md:text-5xl ">
		{json.title}
	</h1>
	{#if json.subtitle}
		<p class="mb-4 italic tracking-tight text-black dark:text-white md:text-xl">
			{json.subtitle}
		</p>
	{/if}
	<div
		class="bg mt-2 flex w-full justify-between sm:flex-col sm:items-start md:flex-row md:items-center"
	>
		<p class="flex items-center text-sm text-gray-700 dark:text-gray-300">swyx</p>
		<p class="min-w-32 flex items-center text-sm text-gray-600 dark:text-gray-400 md:mt-0">
			<a href={json.ghMetadata.issueUrl} rel="external" class="no-underline" target="_blank">
				<span class="font-mono text-xs text-gray-700 text-opacity-70 dark:text-gray-300"
					>{json.ghMetadata.reactions.total_count} reactions
				</span>
			</a>
			{#if json.data.devToReactions}
				<a href={json.data.devToUrl} rel="external" class="no-underline" target="_blank">
					<span class="ml-2 font-mono text-xs text-gray-700 text-opacity-70 dark:text-gray-300">
						(+{json.data.devToReactions} on dev.to)
					</span>
				</a>
			{/if}
			<span class="ml-4">
				{new Date(json.date).toISOString().slice(0, 10)}
			</span>
		</p>
	</div>
	<div
		class="-mx-8 my-2 flex h-1 w-[calc(100%+4rem)] bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 sm:mx-0 sm:w-full"
	/>

	{#if json.data.disclosure}
		<p class="mt-4 text-sm text-gray-600 dark:text-gray-400">
			<a
				aria-label="What is my disclosure policy?"
				target="_blank"
				title="What is my disclosure policy?"
				rel="noopener"
				href="https://www.swyx.io/digital-gaxrden-tos/#2-epistemic-disclosure"
				color="blue"
			>
				<span class="relative font-bold"
					>Disclosure<svg
						xmlns="http://www.w3.org/2000/svg"
						width="1em"
						height="1em"
						class="ml-1 inline"
						viewBox="0 0 24 24"
						fill="none"
						stroke="#999"
						stroke-width="2"
						stroke-linecap="round"
						stroke-linejoin="round"
					>
						<circle cx="12" cy="12" r="10" />
						<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
						<line x1="12" y1="17" x2="12" y2="17" />
					</svg></span
				></a
			>: {json.data.disclosure}
		</p>
	{/if}
	<div class="prose mt-16 mb-16 w-full max-w-none dark:prose-invert">
		{@html json.content}
	</div>
</article>