About Link Cards#

Link Cards are similar to the <LinkCard> component in Starlight, displaying links in a card format.

Usage#

Include only a single “bare” link (a link without descriptive text), or something similar, within a paragraph in Markdown, and it will automatically be converted into a Link Card.

**External Links**

https://astro.build/

<https://github.com/saicaca/fuwari/>

[https://fuwari.vercel.app/](https://fuwari.vercel.app/)

**Internal Links**

[/posts/guide/](/posts/guide/)

For more details, see the internalLink option section.

**IDN (Internationalized Domain Name)**

https://はじめよう.みんな/

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

astro.build

GitHub - saicaca/fuwari: ✨A static blog template built with Astro.

✨A static blog template built with Astro. . Contribute to saicaca/fuwari development by creating an account on GitHub.

github.com

Fuwari - Demo Site

Fuwari - Demo Site

fuwari.vercel.app

Simple Guides for Fuwari - Fuwari

How to use this blog template.

fuwari.vercel.app

.みんな | Google Registry

.みんな is the world's first open hiragana top-level domain. .みんな means "everyone" in Japanese.

はじめよう.みんな

NOTE

Once the cards are displayed, try changing the theme color or enabling dark mode!

Options#

You can specify the options in the astro.config.mjs file.

...
import fuwariLinkCard from "./src/plugins/fuwari-link-card.js"
...
export default defineConfig({
  ...
  integrations: [
    ...
    fuwariLinkCard(), // Plugin here
    ...

If the order of plugins is complex, you can also specify it as a remark plugin.

...
import remarkLinkCard from "./src/plugins/remark-link-card.js"
...
export default defineConfig({
  ...
  markdown: {
    ...
    remarkPlugins: [
      ...
      remarkLinkCard, // Plugin here
      ...

rewriteRules: [
  {
    url: /^https:\/\/github\.com\/[^\/]+\/[^\/]+\/?$/,
    rewriteSteps: [
      { key: "title", pattern: /:.*/, replacement: "" },
      {
        key: "description",
        pattern: /(?: (?:\. )?Contribute to (?:.+\/.+) .+\.?)|(?: - (?:.+\/.+))$/,
        replacement: "",
      },
      {
        key: "description",
        pattern: /^Contribute to (?:.+\/.+) .+\.?$/,
        replacement: "No description provided.",
      },
    ],
  },
],

Quick and Easy Options Setup#

This plugin uses @fastify/deepmerge to simplify options setup.

@fastify/deepmerge

Merges the enumerable properties of two or more objects deeply.. Latest version: 2.0.2, last published: 23 days ago. Start using @fastify/deepmerge in your project by running `npm i @fastify/deepmerge`. There are 83 other projects in the npm registry using @fastify/deepmerge.

www.npmjs.com

2025-01-31T15:45:51Z

HTML Structure for Styling#

The styles are specified in src/styles/link-card.css, and the HTML is automatically generated. Below is an example structure to guide you when customizing the styles:

<div class="link-card__container">
  <a href="https://astro.build/" class="link-card">
    <div class="link-card__info">
      <div class="link-card__title">Astro</div>
      <div class="link-card__description">Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.</div>
      <div class="link-card__metadata">
        <div class="link-card__domain">
          <img alt="favicon" class="link-card__favicon" src="https://www.google.com/s2/favicons?domain=astro.build">
          <span class="link-card__domain-name">astro.build</span>
        </div>
      </div>
    </div>
    <div class="link-card__thumbnail">
      <img alt="Astro - Build the web you want." class="link-card__image" src="https://astro.build/og/astro.jpg">
    </div>
  </a>
</div>