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 + Tailwind CSS 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.
• 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).
• Code syntax highlighting is supported by highlighting.js (via rehype-highlight). rehype-highlight-code-lines can be used to highlight specific lines of code.
• 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 remark-github-blockquote-alert are used to support GitHub Flavored Markdown (GFM).

Style

• The icons are provided by Tabler Icons. Emojis come from Twemoji.
• Typed.js is a typing animation library that is used to generate the scrolled greeting text on the home page.
• shadncn/ui is a UI library that provides a variety of components and styles. I used a few basic components (with some modifications), including buttons and avatars. They are stored in the @/component/ui folder.
• tw-colors is used to generate two color schemes for the light and dark modes. With it, I no longer need to specify the color scheme for the dark mode using a cumbersome class name syntax (like text-blue-600 dark:text-blue-300).

Miscellaneous

• timlrx/pliny provides analytics and comment systems. The KBar search component is also modified from it.
• The built-in search function is provided by KBar. It supports Cmd+K shortcuts and can search for both pages and posts.
• 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.