How I use Obsidian as my portfolio CMS

const data = await octokit.rest.repos.getContent({
	owner: 'mbaharip',
	path: 'posts/{{ post type }}/{{ post slug }}',
	repo: 'mbaharip-blog-posts'
})

type IndexedPost {
	title: string;
	slug: string; // New
	// summary: string;
	type: 'article' | 'project'; // New
	tags: string[];
	// thumbnail: string;
	// thumbnail_x: number;
	// thumbnail_y: number;
	created_at: string; // Renamed
	updated_at: string; // Renamed
	// path: string;
}

import matter from 'gray-matter';

/**
* Fetch raw content logic goes here
*/

const markdownData = matter(rawContent);
const {content, data} = markdownData;

let formattedContent = content;

/**
* Check if there any line breaks between the content and metadata
* Since gray matter splitting the metadata by '---', the content might have line breaks.
*/
if(formattedContent.startsWith('\n')) markdownContent = markdownContent.slice(1);

/**
* Replace all wikilink image into markdown image
*/
markdownContent = markdownContent.replace(
	/!\[\[([^\]]+)\]\]/g,
	'![$1](path/to/attachments/folder/$1)'
);

const Schema_PostContent_Item = z.object({
		type: z.literal("markdown"),
		content: z.string()
	}).or(
		z.object({
			type: z.literal("toc"),
			headings: z.array(
				z.object({
					id: z.string(),
					text: z.string(),
					level: z.number().min(1).max(6)
				})
			)
		})
	);
const Schema_PostContent = z.object({
	slug: z.string(),
	content: z.array(Schema_PostContent_Item)
})

const content_data: z.infer<typeof Schema_PostContent> = {
	slug: post.frontmatter.slug,
	content: []
}

// Check if data-toc exists inside the post
if(post.content.includes("{{ data-toc }}")) {
	// This would return array with 2 items, Introduction section, and Content content section
	const [introduction, content] = post.content.split("{{ data-toc }}");

	// Extract headings from the post
	const headings = content.match(/^(#+)\s(.+)$/gm);
	const toc = headings?.map((heading) => {
		const level = heading.match(/^(#+)/)![0].length;
		const text = heading.replace(/^(#+)\s/, "");
		const id = text
			.toLowerCase()
			.replace(/[^\W\s]/gi, "") // Remove all symbols
			.replace(/\s/g, "-") // Replace all space with hyphens
			.replace(/-+/g, "-"); // Remove double hyphens
		return { id, text, level };
	})

	content_data.content.push({
		type: "markdown",
		content: introduction
	});
	content_data.content.push({
		type: "toc",
		headings: toc || []
	});
	content_data.content.push({
		type: "markdown",
		content: content
	})
} else {
	content_data.content.push({
		type: "markdown",
		content: post.content
	});
}

// Type checking, if the value of content_data not satisfy the schema, it will return an error
Schema_PostContent.parse(content_data);

// Render the markdown
return (
	<Space direction="vertical">
		{content_data.content.map((item, index) => {
			switch(item.type):
				case "markdown":
					return <Markdown key={index}>{item.content}</Markdown>
				case "toc":
					return <ToC items={item.content} />
				default:
					return null
		})}
	</Space>
)

:::blockquote{slot="info" title="Notice"}
The content of the alert component
:::

<ReactMarkdown 
	components={{
		blockquote: ({children, ...props}) => {
			if(props.slot) {
				return <Alert message={children} type={props.slot} />
			}
			
			return (
				<blockquote {...props}>
					{children}
				</blockquote>
			)
		}
	}}
/>