website/content/how_this_site_is_built.md

title, date, description, author

title	date	description	author
How this site is built	2024-09-29	A technical explanation of how this site works	nullndr

How this site is built

This site is built with remix.run. There is no database for the posts, instead the posts are written directly in MDX.

The transformation from MDX to the component is done with the following function:

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.

The deploy is done with Coolify, running on an hetzener vps.