transitivebullsh-A Notion-based blogging project with over 4,000 GitHub stars.

Key Features

• Main Technology Stack: Uses Notion as a CMS, combined with react-notion-x, Next.js, and Vercel.

• Features: Quick setup, full support for Notion content, built with Next.js, TypeScript, and React, excellent page load speed, smooth image preview, automatic social images, beautiful URLs, automatic table of contents, dark mode support, fast search, responsive design, optimized use of Next.js and Vercel.

• Setup: All configurations are defined in the middle, and the latest version of Node.js is required. Includes cloning the repository, modifying configurations, installing dependencies, local testing, and deploying to Vercel.

• URL Paths: There is a slight difference in URL paths between development and production environments. The Notion page ID is displayed during development, and it is more concise in production.

• Preview Images: Use and generate optimized images. Preview images are enabled by default and can be disabled through the configuration file.

• Redis: Optional Redis caching for speeding up the generation of preview images, requires setting up environment variables.

• Styling: Custom CSS styles for Notion content are located, and you can customize styles for specific blocks.

• Automatic Social Images: Automatically generate Open Graph and social meta tags from Notion content, using headless Chrome to generate social images.

• Automatic Table of Contents: Article pages display a table of contents by default, using scrollspy logic to automatically update the current section.

• Analytics: Optional analytics features such as Fathom Analytics and PostHog Analytics, enabled through environment variables.

• Environment Variables: If you use Redis, analytics, or other features that require environment variables, you need to add them to your Vercel project.

More Images