Display Markdown Links as Cards in Astro Blog

Introduction

Recently, I released a remark plugin, remark-link-card-plus, which converts links in Markdown into card formats.

Released remark-link-card-plus: A Remark Plugin to Convert Links into Cards | okaryo.log

New Year Driven Development

blog.okaryo.studio

This article demonstrates how to use this plugin to display links in Markdown as cards in an Astro blog.

Setup

First, install the plugin:

npm i remark-link-card-plus

Next, add the configuration to remarkPlugins in astro.config.mjs:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import remarkLinkCard from 'remark-link-card-plus';

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

As of version 0.2.0, the following options are available:

By adding this configuration, links in Markdown will be displayed as cards. However, the styles are not applied by default, so you need to create them yourself.

Here is an example CSS using TailwindCSS:

.remark-link-card-plus__container {
  @apply mb-4;
}

.remark-link-card-plus__card {
  @apply h-32 flex bg-white overflow-hidden rounded-xl border border-slate-300 hover:bg-slate-100 hover:border-slate-500 transition-colors !no-underline;
}

.remark-link-card-plus__main {
  @apply flex flex-col flex-1 p-4;
}

.remark-link-card-plus__content {
}

.remark-link-card-plus__title {
  @apply text-lg font-semibold leading-6 line-clamp-2 text-gray-900 hover:!text-gray-900;
}

.remark-link-card-plus__description {
  @apply mt-1 text-sm text-gray-500 line-clamp-1;
}

.remark-link-card-plus__meta {
  @apply flex items-center mt-auto;
}

.remark-link-card-plus__favicon {
  @apply !my-0 mr-1 h-4 w-4;
}

.remark-link-card-plus__url {
  @apply text-xs text-gray-600;
}

.remark-link-card-plus__thumbnail {
  @apply h-32 w-1/3 md:max-w-64;
}

.remark-link-card-plus__image {
  @apply h-full w-full !my-0 object-cover;
}

Include this CSS in your article page:

---
import "../styles/index.css";
---

<!-- Article Page -->

With this setup, you can apply styles to link cards in your articles. Below is an example of a styled link card:

Keep in mind that there are specific conditions for links to be converted into cards.

Cases Where Links Are Converted to Cards

A line consisting of only a link

(blank line)
https://example.com
(blank line)

When the link text matches the URL

[https://example.com](https://example.com)

Cases Where Links Are Not Converted

When there is text on the same line as the link

Links are not converted if there is text on the same line: https://example.com

When there are multiple links on the same line

https://github.com https://example.com

Links in lists

* list
  * https://example.com

Conclusion

By adding the plugin to astro.config.mjs and defining styles, you can easily convert links into cards. Give it a try!

The source code is available on GitHub. Feel free to create an issue for any bugs or suggestions. If you find it useful, a star on GitHub would be much appreciated.

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