Released remark-link-card-plus: A Remark Plugin to Convert Links into Cards

Introduction

A while ago, I rebuilt my blog from Gatsby to Astro.

During this process, I used a plugin called remark-link-card to convert links in articles into cards. However, I encountered an issue where links inside lists were also processed, causing the first node of the article to be converted into a card. Although I raised an issue, it seemed like there had been a significant gap since the last release. So, I decided to create my own plugin.

What is This Plugin?

This is a remark plugin that converts links in Markdown into cards. It is based on remark-link-card but rebuilt with additional features and fixes. Here are the similarities and differences with the original:

Similarities

• The options cache and shortenUrl are still available.
• While it doesn’t provide card styles, you can customize the styles by applying CSS to the class names of the card’s HTML tags (the class names have been changed from the original).

Differences

• Rewritten in TypeScript.
• Added target="_blank" to the anchor (<a>) tags so links open in a new tab.
• Links within lists are excluded from being converted into cards, fixing the issue where the first element in Markdown was being converted into a card.
• Added the ability to choose the thumbnail image’s position (left or right).

Let’s take a closer look.

How to Use It

Like other plugins, you can use it by applying use(remarkLinkCard[, options]) to remark, which converts links in Markdown into cards.

import { remark } from "remark";
import remarkLinkCard from "remark-link-card-plus";

const exampleMarkdown = `
## Example

https://github.com

Inline links like [GitHub](https://github.com) will **not** be converted.
contents
`;

(async () => {
  const result = await remark()
    .use(remarkLinkCard, { cache: true, shortenUrl: true })
    .process(exampleMarkdown);

  console.log(result.value);
})();

The output will look like this:

## Example

<div class="remark-link-card-plus__container">
  <a href="https://github.com/" target="_blank" rel="noreferrer noopener" class="remark-link-card-plus__card">
    <div class="remark-link-card-plus__main">
      <div class="remark-link-card-plus__content">
        <div class="remark-link-card-plus__title">GitHub · Build and ship software on a single, collaborative platform</div>
        <div class="remark-link-card-plus__description">Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.</div>
      </div>
      <div class="remark-link-card-plus__meta">
        <img src="https://www.google.com/s2/favicons?domain=github.com" class="remark-link-card-plus__favicon" width="14" height="14" alt="favicon">
        <span class="remark-link-card-plus__url">github.com</span>
      </div>
    </div>
    <div class="remark-link-card-plus__thumbnail">
      <img src="https://github.githubassets.com/assets/home24-5939032587c9.jpg" class="remark-link-card-plus__image" alt="ogImage">
    </div>
  </a>
</div>

Inline links like [GitHub](https://github.com) will **not** be converted.
contents

This is especially useful when you want to convert links into cards for blogs built with Astro. You just need to specify it in the remarkPlugins section of your astro.config.mjs file.

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import remarkLinkCard from 'remark-link-card-plus';

export default defineConfig({
  integrations: [
    tailwind(),
  ],
  markdown: {
    remarkPlugins: [
      [
        remarkLinkCard, {
          cache: true,
          shortenUrl: true,
          thumbnailPosition: "right",
        },
      ],
    ],
  },
});

Note that styles are not included in the HTML tags generated by this plugin, so you need to apply your own styles. You can style the following classes:

.remark-link-card-plus__container {}

.remark-link-card-plus__card {}

.remark-link-card-plus__main {}

.remark-link-card-plus__content {}

.remark-link-card-plus__title {}

.remark-link-card-plus__description {}

.remark-link-card-plus__meta {}

.remark-link-card-plus__favicon {}

.remark-link-card-plus__url {}

.remark-link-card-plus__thumbnail {}

.remark-link-card-plus__image {}

Available Options

As of version v0.2.0, the following three options are available:

• cache
  • Caches OG images and favicons in the process.cwd()/public/remark-link-card-plus/ directory, reducing server load on the linked site.
  • Be cautious on platforms like Cloudflare Pages, which have a file count limit for deployment.
  • Default: false.
• shortenUrl
  • Controls whether URLs displayed in cards are shown as hostnames.
  • Default: true.
• thumbnailPosition
  • Specifies whether the OG image is displayed on the left or right of the card.
  • Default: "right".

You can see a demo page showing the cards displayed in an Astro blog.

Conclusion

Feel free to try it out! The source code is available on GitHub, so you’re welcome to create issues for bugs or suggestions. If you like the plugin, I’d appreciate it if you could give it a star!

GitHub - okaryo/remark-link-card-plus: Remark plugin to convert text links to link cards

Remark plugin to convert text links to link cards. Contribute to okaryo/remark-link-card-plus development by creating an account on GitHub.

github.com