May 5, 2022 . 1 min read

Hello!

Photo by Rohit Tandon on Unsplash

Welcome to my blog! This is the first post of my blog.

I’ll be using this as a platform for very short articles regarding

1. Interesting projects that I have done
2. Learning regarding web developments
3. Learning about other interesting stuff

How I build this blog

• React: For the UI
• Remix: Framework for the Client/Server/Routing
• TypeScript: For maintaibility of project overtime
• Tailwind CSS: Styling
• React-Gist: To render github gist in MDX
• HighlightJS: For codeblock highlighting

Remix provides a different approach to building apps, and provides several useful features such as server-side rendering(SSR) and file-system-based routing. Also, it provides various functionality such as easy integration with Tailwind and HighlightJS via rehypePlugins

Simply add this into remix.config.js as well as using Tailwind's prose should allow you to get almost a full functionality of a blog!

module.exports = {
  mdx: async (filename) => {
    const [rehypeHighlight] = await Promise.all([
      import("rehype-highlight").then((mod) => mod.default),
    ]);

    return { rehypePlugins: [rehypeHighlight] };
  },
};

To add the highlighting feature, add this into root.tsx or any other layout route will do.

import styles from "highlight.js/styles/atom-one-dark.css";

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: styles }];
};

Next Post