From e2116e8cb264fa3aa57c419262e0f8e2523601ce Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 7 Mar 2026 20:41:26 +0200
Subject: [PATCH] text-wrap: balance; & text-wrap: pretty; + article page fixes

---
 app/components/Markdown.tsx              |  3 ++-
 app/features/articles/routes/a.$slug.tsx | 22 +++++++++++++++++++++-
 app/styles/common.css                    |  9 +++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/components/Markdown.tsx b/app/components/Markdown.tsx
index 512a16534..8c13d91d7 100644
--- a/app/components/Markdown.tsx
+++ b/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
diff --git a/app/features/articles/routes/a.$slug.tsx b/app/features/articles/routes/a.$slug.tsx
index 456010b8c..519edbbd2 100644
--- a/app/features/articles/routes/a.$slug.tsx
+++ b/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>();
 
diff --git a/app/styles/common.css b/app/styles/common.css
index 018be8682..0a187cffc 100644
--- a/app/styles/common.css
+++ b/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,