first

apps/web/modules/marketing/blog/utils/lib/posts.ts

@@ -0,0 +1,25 @@
+import type { Post } from "@marketing/blog/types";
+import { allPosts } from "content-collections";
+
+export async function getAllPosts(): Promise<Post[]> {
+	// ... add a custom loader here for your posts and map it to the post schema
+
+	return Promise.resolve(allPosts);
+}
+
+export async function getPostBySlug(
+	slug: string,
+	options?: {
+		locale?: string;
+	},
+): Promise<Post | null> {
+	// ... add a custom loader here for your posts and map it to the post schema
+
+	return Promise.resolve(
+		allPosts.find(
+			(post) =>
+				post.path === slug &&
+				(!options?.locale || post.locale === options.locale),
+		) ?? null,
+	);
+}

apps/web/modules/marketing/blog/utils/mdx-components.tsx

@@ -0,0 +1,103 @@
+import { LocaleLink } from "@i18n/routing";
+import { slugifyHeadline } from "@shared/lib/content";
+import type { MDXComponents } from "mdx/types";
+import type { ImageProps } from "next/image";
+import Image from "next/image";
+
+export const mdxComponents = {
+	a: (props) => {
+		const { href, children, ...rest } = props;
+		const isInternalLink =
+			href && (href.startsWith("/") || href.startsWith("#"));
+
+		return isInternalLink ? (
+			<LocaleLink href={href} {...rest}>
+				{children}
+			</LocaleLink>
+		) : (
+			<a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
+				{children}
+			</a>
+		);
+	},
+	img: (props) =>
+		props.src ? (
+			<Image
+				{...(props as ImageProps)}
+				sizes="100vw"
+				style={{ width: "100%", height: "auto" }}
+				className="rounded-lg shadow"
+				loading="lazy"
+			/>
+		) : null,
+	h1: ({ children, ...rest }) => (
+		<h1
+			id={slugifyHeadline(children as string)}
+			className="mb-6 font-bold text-4xl"
+			{...rest}
+		>
+			{children}
+		</h1>
+	),
+	h2: ({ children, ...rest }) => (
+		<h2
+			id={slugifyHeadline(children as string)}
+			className="mb-4 font-bold text-2xl"
+			{...rest}
+		>
+			{children}
+		</h2>
+	),
+	h3: ({ children, ...rest }) => (
+		<h3
+			id={slugifyHeadline(children as string)}
+			className="mb-4 font-bold text-xl"
+			{...rest}
+		>
+			{children}
+		</h3>
+	),
+	h4: ({ children, ...rest }) => (
+		<h4
+			id={slugifyHeadline(children as string)}
+			className="mb-4 font-bold text-lg"
+			{...rest}
+		>
+			{children}
+		</h4>
+	),
+	h5: ({ children, ...rest }) => (
+		<h5
+			id={slugifyHeadline(children as string)}
+			className="mb-4 font-bold text-base"
+			{...rest}
+		>
+			{children}
+		</h5>
+	),
+	h6: ({ children, ...rest }) => (
+		<h6
+			id={slugifyHeadline(children as string)}
+			className="mb-4 font-bold text-sm"
+			{...rest}
+		>
+			{children}
+		</h6>
+	),
+	p: ({ children, ...rest }) => (
+		<p className="mb-6 text-foreground/60 leading-relaxed" {...rest}>
+			{children}
+		</p>
+	),
+	ul: ({ children, ...rest }) => (
+		<ul className="mb-6 list-inside list-disc space-y-2 pl-4" {...rest}>
+			{children}
+		</ul>
+	),
+	ol: ({ children, ...rest }) => (
+		<ol className="mb-6 list-inside list-decimal space-y-2 pl-4" {...rest}>
+			{children}
+		</ol>
+	),
+	li: ({ children, ...rest }) => <li {...rest}>{children}</li>,
+} satisfies MDXComponents;