48 lines
1.4 KiB
Plaintext
48 lines
1.4 KiB
Plaintext
---
|
|
title: How this site is built
|
|
published: 2024-09-29
|
|
description: A technical explanation of how this site works
|
|
isFeatured: false
|
|
---
|
|
|
|
This site is built with [remix.run](https://remix.run). There is no database for the posts, instead the posts are written directly in [MDX](https://mdxjs.com/).
|
|
|
|
The transformation from MDX to the component is done with the following function:
|
|
|
|
```typescript
|
|
type FrontMatter = {
|
|
title: string;
|
|
description: string;
|
|
published: Date;
|
|
isFeatured: boolean;
|
|
};
|
|
|
|
export const getMdxFile = async (file: string) => {
|
|
const filePath = path.join(process.cwd(), `posts/${file}.mdx`);
|
|
const postContent = (await readfile(filepath)).tostring()
|
|
return bundleMDX<FrontMatter>({
|
|
source: postContent,
|
|
mdxOptions(options) {
|
|
return {
|
|
rehypePlugins: [...(options.rehypePlugins ?? [])],
|
|
remarkPlugins: [
|
|
...(options.remarkPlugins ?? []),
|
|
[
|
|
remarkCodeHike,
|
|
{
|
|
theme: "one-dark-pro",
|
|
lineNumbers: true,
|
|
showCopyButton: true,
|
|
autoImport: true,
|
|
},
|
|
],
|
|
],
|
|
};
|
|
},
|
|
});
|
|
};
|
|
```
|
|
|
|
The function simply reads the content of the post, delagating the real transformation to [mdx-bundler](https://github.com/kentcdodds/mdx-bundler).
|
|
|
|
The deploy is done with [Coolify](https://github.com/coollabsio/coolify), running on an hetzener vps. |