https://github.com/robot-inventor/astro-link-card

Astro integration to automatically convert bare links into link cards.
https://github.com/robot-inventor/astro-link-card

Last synced: 22 days ago
JSON representation

Astro integration to automatically convert bare links into link cards.

• Host: GitHub
• URL: https://github.com/robot-inventor/astro-link-card
• Owner: Robot-Inventor
• License: mit
• Created: 2024-07-31T06:54:47.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-23T10:50:19.000Z (11 months ago)
• Last Synced: 2025-04-26T09:43:42.350Z (11 months ago)
• Language: TypeScript
• Size: 608 KB
• Stars: 13
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# astro-link-card

Astro integration to automatically convert bare links into link cards. This is a wrapper for [rehype-og-card](https://github.com/Robot-Inventor/rehype-og-card) with some configuration optimizations for Astro.

## Features

This integration will automatically convert bare links into link cards. This is useful for creating a more visually appealing website with link previews. Here are some key features:

- Automatically convert bare links into link cards

- Server-side image caching

- Build cache for images and Open Graph metadata for faster builds

- Lazy loading and async decoding for images

- Zero runtime JavaScript (all processing is done at build time)

The following links will be converted to link cards:

- Bare links

- Links that have the same URL and text (if you enable the `enableSameTextURLConversion` option)

The following links will NOT be converted to link cards:

- Links in lists

- Links in code blocks

- Links in sentences

- Non-bare links

- Links that have the same URL and text (if you disable the enableSameTextURLConversion option)

Input:

```markdown

this is a link: https://blog.google/products/android/world-emoji-day-2024/

`https://blog.google/products/android/world-emoji-day-2024/`

https://blog.google/products/android/world-emoji-day-2024/

```

Output (formatted for readability):

```html

this is a link: https://blog.google/products/android/world-emoji-day-2024/

https://blog.google/products/android/world-emoji-day-2024/



    

        


            
10 fun facts about emoji for World Emoji Day

            
Celebrate World Emoji Day with Google, and check out what’s new for Emoji Kitchen.

            


                

                blog.google

            

        

        


            

        

    



```


## Installation

### `astro add` command (Recommended)

```bash

npx astro add astro-link-card

```

### Manual Installation (Alternative)

```bash

npm install astro-link-card

```

```typescript

import { defineConfig } from "astro";

import linkCard from "astro-link-card";

// https://astro.build/config

export default defineConfig({

    // ... other config

    integrations: [

        linkCard({

            // options

        })

    ]

});

```

## Options

All rehype-og-card options are supported. You can find the full list of options [here](https://github.com/Robot-Inventor/rehype-og-card?tab=readme-ov-file#options). Some options below are optimized for Astro:

- `enableSameTextURLConversion` (default: `true`): Enable conversion of links that have the same URL and text. This is useful for projects that have `markdown.gfm` enabled.

- `serverCache` (default: `true`): Enable server-side image caching.

- `serverCachePath` (default: `"./public"`): Path to store server-side image cache.

- `buildCache` (default: `true`): Enable build cache for images and Open Graph metadata.

- `buildCachePath` (default: `"./node_modules/.astro"`): Path to store build cache.