gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup markdown

Browse Source
This commit is contained in:
Gregor Lohaus
2026-06-18 01:32:05 +02:00
parent c1fe73dbd0
commit 73ba2b573d
11 changed files with 137 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/_components/Form/Fields/MdeFormField.tsx
View File

@@ -8,6 +8,7 @@ import type { Control, FieldValues, Path } from "react-hook-form";
import { FormControl, FormField, FormItem, FormLabel } from "~/components/ui/form";
import { Button } from "~/components/ui/button";
import { cn } from "~/lib/utils";
import { ClientMdx } from "~/components/ClientMdx";
import {
InternalLinkTextarea,
type AutocompleteTriggerConfig,
@@ -81,7 +82,7 @@ export default function MdeFormField<T extends FieldValues>(params: {
),
preview: params.renderPreview
? (source) => params.renderPreview?.(source) ?? <></>
: undefined,
: (source) => <ClientMdx source={source} fallback={source} />,
}}
/>
</FormControl>

2
src/app/admin/blog/_components/BlogMdxEditorPreview.tsx
View File

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'
import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
import { mdxComponents } from '~/app/blog/_components/mdx-components'
import { mdxComponents } from '~/components/mdx-components'
export default function BlogMdxEditorPreview(params: { source: string }) {
const [compiled, setCompiled] = useState<MDXRemoteSerializeResult | null>(null)

29
src/app/blog/[slug]/page.tsx
View File

@@ -1,9 +1,10 @@
import { notFound } from "next/navigation";
import { MDXRemote } from "next-mdx-remote/rsc";
import { TRPCError } from "@trpc/server";
import matter from "gray-matter";
import { servTrpc } from "~/app/_trpc/ServerClient";
import { Badge } from "~/components/ui/badge";
import { mdxComponents } from "../_components/mdx-components";
import { mdxComponents } from "~/components/mdx-components";
type Props = {
params: Promise<{ slug: string }>;
@@ -12,37 +13,47 @@ type Props = {
export default async function BlogPostPage({ params }: Props) {
const { slug } = await params;
let post: Awaited<ReturnType<typeof servTrpc.blog.bySlug>>;
let post: Awaited<ReturnType<typeof servTrpc.blog.metadataBySlug>>;
try {
post = await servTrpc.blog.bySlug(slug);
post = await servTrpc.blog.metadataBySlug(slug);
} catch (e) {
if (e instanceof TRPCError && e.code === "NOT_FOUND") notFound();
throw e;
}
const response = await fetch(post.fileUrl, { next: { revalidate: 3600 } });
if (!response.ok) notFound();
const parsed = matter(await response.text());
const tags = Array.isArray(parsed.data.tags)
? parsed.data.tags.map((tag) => String(tag).trim()).filter(Boolean)
: post.tags;
const title = typeof parsed.data.title === "string" ? parsed.data.title : post.title;
const date = typeof parsed.data.date === "string" ? parsed.data.date : post.date;
return (
<main className="mx-auto max-w-2xl px-4 py-12">
<header className="mb-8">
<h1 className="text-3xl font-bold">{post.title}</h1>
{post.date && (
<h1 className="text-3xl font-bold">{title}</h1>
{date && (
<time className="text-muted-foreground text-sm">
{new Date(post.date).toLocaleDateString("en-US", {
{new Date(date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</time>
)}
{post.tags.length > 0 && (
{tags.length > 0 && (
<div className="mt-3 flex flex-wrap gap-1.5">
{post.tags.map((tag) => (
{tags.map((tag) => (
<Badge key={tag} variant="outline">{tag}</Badge>
))}
</div>
)}
</header>
<article className="prose dark:prose-invert max-w-none">
<MDXRemote source={post.content} components={mdxComponents} />
<MDXRemote source={parsed.content} components={mdxComponents} />
</article>
</main>
);

128
src/app/blog/_components/mdx-components.tsx
View File

@@ -1,128 +0,0 @@
import Link from "next/link";
import { Children, isValidElement, type ComponentPropsWithoutRef, type ReactNode } from "react";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { cn } from "~/lib/utils";
type CalloutVariant = "note" | "tip" | "warning";
const calloutStyles: Record<CalloutVariant, string> = {
note: "border-sky-500/40 bg-sky-500/10 text-sky-950 dark:text-sky-100",
tip: "border-emerald-500/40 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100",
warning: "border-amber-500/40 bg-amber-500/10 text-amber-950 dark:text-amber-100",
};
function Callout({
title,
variant = "note",
children,
}: {
title?: string;
variant?: CalloutVariant;
children: ReactNode;
}) {
return (
<aside className={cn("my-6 rounded-md border px-4 py-3", calloutStyles[variant])}>
{title && <p className="mb-2 font-semibold">{title}</p>}
<div className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0">{children}</div>
</aside>
);
}
function Lead({ children }: { children: ReactNode }) {
return <span className="text-muted-foreground my-6 block text-lg leading-8">{children}</span>;
}
function TagList({ tags }: { tags: string[] }) {
return (
<div className="my-4 flex flex-wrap gap-1.5">
{tags.map((tag) => (
<Badge key={tag} variant="outline">
{tag}
</Badge>
))}
</div>
);
}
function ButtonLink({
href,
children,
variant = "default",
}: {
href: string;
children: ReactNode;
variant?: ComponentPropsWithoutRef<typeof Button>["variant"];
}) {
const isExternal = /^https?:\/\//.test(href);
return (
<Button asChild variant={variant}>
{isExternal ? (
<a href={href} target="_blank" rel="noreferrer">
{children}
</a>
) : (
<Link href={href}>{children}</Link>
)}
</Button>
);
}
function Figure({
src,
alt,
caption,
}: {
src: string;
alt: string;
caption?: string;
}) {
return (
<figure className="my-8">
<img src={src} alt={alt} className="w-full rounded-md border object-cover" />
{caption && <figcaption className="text-muted-foreground mt-2 text-center text-sm">{caption}</figcaption>}
</figure>
);
}
function PullQuote({ children }: { children: ReactNode }) {
return (
<blockquote className="border-primary my-8 border-l-4 pl-5 text-xl leading-8 font-medium">
{children}
</blockquote>
);
}
function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
const href = props.href ?? "";
const isExternal = /^https?:\/\//.test(href);
if (!isExternal) return <a {...props} />;
return <a {...props} target="_blank" rel="noreferrer" />;
}
const blockComponents = new Set<unknown>([Callout, Figure, PullQuote, TagList]);
function Paragraph({ children }: { children: ReactNode }) {
const containsBlockComponent = Children.toArray(children).some(
(child) => isValidElement(child) && blockComponents.has(child.type),
);
if (containsBlockComponent) return <>{children}</>;
return <p>{children}</p>;
}
export const mdxComponents = {
a: ExternalLink,
p: Paragraph,
Badge,
ButtonLink,
Callout,
Figure,
Lead,
PullQuote,
TagList,
};

7
src/app/chat/_components/AssistantMessage.tsx
View File

@@ -1,6 +1,5 @@
import type { UIMessage } from "ai";
import Markdown from "react-markdown";
import { cn } from "~/lib/utils";
import { ClientMdx } from "~/components/ClientMdx";
export const AssistantMessage = (props: { message: UIMessage }) => {
let message = props.message;
@@ -16,9 +15,7 @@ export const AssistantMessage = (props: { message: UIMessage }) => {
{message.parts.map((part, i) => {
if (part.type === 'text') {
return (
<Markdown key={crypto.randomUUID()}>
{part.text}
</Markdown>
<ClientMdx key={i} source={part.text} fallback={part.text} />
)
}
if (part.type === 'tool-scheduleMeeting') {

6
src/app/cv/_components/CvEntry.tsx
View File

@@ -1,13 +1,11 @@
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
import { cn } from "~/lib/utils"
import Markdown from 'react-markdown'
import { format } from 'date-fns'
import rehypeHighlight from 'rehype-highlight'
import rehypeRaw from 'rehype-raw'
import type { ArrayElement } from "type-fest"
import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
import type { CvCategoryData } from "./CvCategory"
import { ClientMdx } from "~/components/ClientMdx"
export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
@@ -30,7 +28,7 @@ export default function CvEntry({ entry, className, position = 0 }: {
<CardContent className="text-sm lg:text-base">
<AnimatePopUp position={position + 0.2}>
<article className="prose prose-zinc dark:prose-invert max-w-none">
<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{entry.description}</Markdown>
<ClientMdx source={entry.description} fallback={entry.description} />
</article>
</AnimatePopUp>
</CardContent> :

5
src/app/projects/page.tsx
View File

@@ -4,14 +4,13 @@ import { trpc } from "~/app/_trpc/Client";
import * as Card from "~/components/ui/card";
import { Badge } from "~/components/ui/badge";
import { StackBadge } from "~/components/StackBadge";
import Markdown from "react-markdown";
import { ScrollArea } from "~/components/ui/scroll-area";
import AnimatedPageTitle from "../_components/Animated/AnimatedPageTitle";
import AnimateTextIn from "../_components/Animated/AnimateIn";
import { useTimeLine } from "../_providers/GsapProvicer";
import AnimatePopUp from "../_components/Animated/AnimatePopUp";
import { Button } from "~/components/ui/button";
import remarkGfm from "remark-gfm"
import { ClientMdx } from "~/components/ClientMdx";
export default function ProjectsPage() {
const { data: projects, isLoading } = trpc.projectv2.listWithStack.useQuery();
@@ -63,7 +62,7 @@ export default function ProjectsPage() {
{project.description && (
<div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
<AnimatePopUp once position={i + 1.4} duration={10}>
<Markdown remarkPlugins={[remarkGfm]}>{project.description}</Markdown>
<ClientMdx source={project.description} fallback={project.description} />
</AnimatePopUp>
</div>
)}