Despite my ongoing goal to start writing consistently, my blog has mostly served as a playground for trying out new ideas. It’s become a space where I can experiment with design, functionality, and unique features, keeping the technical side of blogging alive even with limited content. Inspired by , I wanted to share some of the small but impactful elements I’m experimenting with to enhance the reading experience.

One feature I love is the ability to preview links seamlessly. Much like Notion’s approach, I’ve implemented a system where links display both a favicon and a mini screenshot on hover. This provides readers with context before they even click, improving navigation and making the links more engaging. It’s a subtle feature but adds a polished touch, showing readers exactly where they're headed.

What do we want to achieve?

• Expand inline links with the favicon and title (optional) of the linked page using a custom MDX component
• Preview the link on hover; it will be any image that is found in the meta tags of the linked page or otherwise a screenshot of the page
• Ability to change all links in the content to use the new component by using custom Rehype plugin

Understanding MDX, Rehype, and Remark

In the modern web development ecosystem, tools like MDX, , and Remark have become essential for creating rich, dynamic content. Each of these tools serves a unique purpose and, when combined, they offer powerful capabilities for content management and rendering. Let's dive deeper into what these tools are, why they are used, and how they fit into the larger picture of web development.

What is MDX?

MDX is a syntax that combines Markdown with JSXJSX is an extension to JavaScript that looks like HTML but makes it convenient to use components (reusable things), enabling you to use React components within your Markdown content. This blend allows for a more dynamic and interactive approach to writing content. MDX is particularly popular in the context of static site generators and documentation sites, where both rich content and interactivity are crucial.

Key Features of MDX:

• Markdown Syntax: Write content using the familiar Markdown syntax.
• JSX Integration: Embed React components directly in your Markdown.
• Interactivity: Enhance static content with interactive elements.
• Custom Components: Use custom React components to extend Markdown functionality.

import {Chart} from './snowfall.js'
export const year = 2013
 
# Last year’s snowfall
 
In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.
 
<Chart year={year} color="#fcb32c" />

What is Rehype?

Rehype is a powerful HTML processor built on the Unified ecosystem. It allows you to transform HTML content through a series of plugins. Rehype is highly flexible and can be used to manipulate HTML in various ways, such as parsing, transforming, and stringifying.

Key Features of Rehype: HTML Parsing: Convert HTML strings into an Abstract Syntax Tree (AST) for manipulation. Plugin System: Apply transformations using a wide range of plugins. Output Control: Convert the transformed AST back into HTML strings. Integration: Works seamlessly with other Unified ecosystem tools.

Setting Up a Next.js Project with MDX Support

First, ensure you have Node.js installed, then create a new Next.js project:

npx create-next-app link-preview-mdx
cd link-preview-mdx

Next, add the necessary packages for MDX support:

npm install @next/mdx @mdx-js/loader

Create a next.config.js file in the root of your project and configure MDX support:

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    rehypePlugins: [],
    remarkPlugins: [],
  },
});
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
});