text-wrap: balance; & text-wrap: pretty; + article page fixes

app/components/Markdown.tsx

@@ -13,7 +13,8 @@ export function Markdown({ children }: { children: string }) {
 		.replace(/style\s*=\s*("[^"]*"|'[^']*')/gi, (_match, value) => {
 			const sanitized = value.replace(CSS_URL_REGEX, "");
 			return `style=${sanitized}`;
-		});
+		})
+		.replace(/ +$/gm, "");
 
 	return (
 		<MarkdownToJsx

app/features/articles/routes/a.$slug.tsx

@@ -64,12 +64,32 @@ export default function ArticlePage() {
 				<div className="text-sm text-lighter">
 					by <Author /> • <time>{data.dateString}</time>
 				</div>
-				<Markdown>{data.content}</Markdown>
+				<Markdown>{contentWithoutLeadingTitle(data.content, data.title)}</Markdown>
 			</article>
 		</Main>
 	);
 }
 
+function normalizeText(text: string) {
+	return text
+		.replace(/\*+/g, "")
+		.replace(/…/g, "...")
+		.replace(/\\!/g, "!")
+		.trim();
+}
+
+function contentWithoutLeadingTitle(content: string, title: string) {
+	const trimmed = content.trimStart();
+	const firstLineEnd = trimmed.indexOf("\n");
+	const firstLine = firstLineEnd === -1 ? trimmed : trimmed.slice(0, firstLineEnd);
+
+	if (firstLine.startsWith("# ") && normalizeText(firstLine.slice(2)) === normalizeText(title)) {
+		return trimmed.slice(firstLine.length).trimStart();
+	}
+
+	return content;
+}
+
 function Author() {
 	const data = useLoaderData<typeof loader>();
 

app/styles/common.css

@@ -47,6 +47,15 @@ p {
 	overflow-wrap: anywhere;
 }
 
+h1,
+h2,
+h3 {
+	text-wrap: balance;
+}
+p {
+	text-wrap: pretty;
+}
+
 img,
 svg,
 canvas,