remark-link-card-plus

remark plugin to convert text links to link cards, building upon and improving remark-link-card.

You can see it in action on the demo page.

Features

remark-link-card-plus is a fork of the original remark-link-card with the following changes:

Differences from the original:

• TypeScript support: Fully rewritten in TypeScript for improved type safety and developer experience.
• Target blank: Links in link cards now open in a new tab using target="_blank".
• No link cards in lists: Links inside list items (listItem) are not converted into link cards.
• Thumbnail position customization: Select whether the thumbnail is displayed on the left or right of the card.

Retained features:

• Options support:
  • cache: Cache images for faster loading and local storage.
  • shortenUrl: Display only the hostname of URLs in link cards.
• Customizable styling: Cards can be styled freely using provided class names (note that class names have been slightly updated).

Install

npm i remark-link-card-plus

Usage

Basic Example

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

const exampleMarkdown = `
# Example Markdown

## Link Card Demo

Bare links like this:

https://github.com

will be converted into a link card.

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

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

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

You can get converted result like this.

# Example Markdown

## Link Card Demo

Bare links like this:

<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>

will be converted into a link card.

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

Astro Example

You can also use remark-link-card-plus in an Astro project. Below is an example astro.config.mjs configuration:

// astro.config.mjs
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",
        },
      ],
    ],
  },
});

Options

Option	Type	Default	Description
cache	boolean	false	Caches Open Graph images and favicons locally. Images are saved to process.cwd()/public/remark-link-card-plus/ and paths start with /remark-link-card-plus/. This reduces server load on the linked site.
shortenUrl	boolean	true	Displays only the hostname of the URL in the link card instead of the full URL.
thumbnailPosition	string	right	Specifies the position of the thumbnail in the card. Accepts "left" or "right".

Styling

Link cards can be styled using the following class names:

.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 {}

Feel free to customize these styles as needed.