diff --git a/posts/how_this_site_is_built.mdx b/posts/how_this_site_is_built.mdx new file mode 100644 index 0000000..ff91408 --- /dev/null +++ b/posts/how_this_site_is_built.mdx @@ -0,0 +1,48 @@ +--- +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({ + 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. \ No newline at end of file