Analog User Guide - Tech Stack

Analog is based on many open source frameworks and tools. Here is a list of the main tools used in Analog:

Basics

• Next.js + React constitute the main tech stack of Analog. The main reason for choosing them is simply because I initially referred to a excellent blog template - timlrx/tailwind-nextjs-starter-blog. Of course, the fact that these frameworks are popular is also a key reason - I can easily obtain information for reference.
• Chakra UI is used to provide a set of basic components, such as boxes and buttons. Chakra's built-in Layout components are amazing, especially for someone like me who has never been exposed to HTML programming. Chakra also provides a syntax highlighting adapter for code blocks in MDX files, which is driven by Shiki.
• Content Collections is used to convert MDX files (including posts and about) into HTMLs. It can be well integrated with Rehype and Remark plugins, thus achieving functions such as syntax highlighting and ToC extraction. A similar tool, ContentLayer, is currently not actively maintained, so I chose to migrate to Content Collections.
• Vercel is used to deploy this demo blog. Of course, you can also deploy it to other platforms, such as GitHub Pages.

Writing

• MDX is used to write posts. It is a combination of Markdown and JSX, which can be easily integrated with React components. In most cases, it is a superset of Markdown, so there is usually no need to worry about syntax compatibility issues during migration (except for changing the file extension from .md to .mdx).

Rehype & Remark Plugins

• The mathematical formula environment is supported by Katex (via rehype-katex and remark-math).
• rehype-probe-image-size can automatically obtain the image sizes and add them to the <img> tags as attributes. A explicit width and height are required by the Next.js Image component. rehype-unwrap-images can remove the <p> tags that wrap the <img> tags.
• remark-gfm and rehype-github-alerts are used to support GitHub Flavored Markdown (GFM).
• rehype-pre-language and rehype-mdx-code-props are adopted to extract the language and other attributes from the MDX code blocks, so that the code blocks can be correctly rendered with Shiki syntax highlighting.

Miscellaneous

• The icons are provided by Tabler Icons. Emojis come from Twemoji.
• The built-in Cmd+K search function is developed by myself. The sorted results are generated by match-sorter.
• feed is used to generate the RSS feed.

Inspiration

At the beginning of the implementation, I referenced the look and style of timlrx/tailwind-nextjs-starter-blog. But as development progressed, I basically reimplemented all the needed components from scratch. I was a Hexo user before, so I also drew inspiration from ppoffice/hexo-theme-icarus.

The greeting part on the home page refers to Karhdo's Blog and thetalhatahir.com.

The image placeholders (i.e., post banners) are generated by Lorem Picsum.

Thanks to all the open source projects and developers who have contributed to the above tools and resources.