https://github.com/okaryo/gatsby-remark-link-card

Gatsby Remark plugin to embed link card
https://github.com/okaryo/gatsby-remark-link-card

gatsby gatsby-plugin gatsby-remark gatsbyjs link-card

Last synced: 3 months ago
JSON representation

Gatsby Remark plugin to embed link card

• Host: GitHub
• URL: https://github.com/okaryo/gatsby-remark-link-card
• Owner: okaryo
• License: mit
• Created: 2024-01-02T08:22:44.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-10T21:01:24.000Z (9 months ago)
• Last Synced: 2024-04-12T00:46:26.487Z (9 months ago)
• Topics: gatsby, gatsby-plugin, gatsby-remark, gatsbyjs, link-card
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@okaryo/gatsby-remark-link-card
• Size: 313 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## @okaryo/gatsby-remark-link-card

Gatsby Remark plugin to embed link card to your markdown.

This plugin allows you to display links as link cards in Markdown without the need for any special syntax.

### Sample

![Smaple](./docs/sample.png)

### Installation

```sh

npm install @okaryo/gatsby-remark-link-card

```

### How to use

#### in Config

```js

// In your gatsby-config.js

plugins: [

  {

    resolve: `gatsby-transformer-remark`,

    options: {

      plugins: [

        `@okaryo/gatsby-remark-link-card`

      ]

    }

  }

];

```

#### in Markdown

Only the links that are formatted as a paragraph and surrounded by empty lines will be displayed as link cards.

```md

✅

(empty line)

https://github.com/okaryo/gatsby-remark-link-card

(empty line)

✅

## Header

https://github.com/okaryo/gatsby-remark-link-card

❌

text

https://github.com/okaryo/gatsby-remark-link-card

❌

(empty line)

[link text](https://github.com/okaryo/gatsby-remark-link-card)

(empty line)

❌

(empty line)

* https://github.com/okaryo/gatsby-remark-link-card

(empty line)

```

### Customization

You can apply custom styles to the classes specified within the link card to customize its appearance.

```css

.gatsby-remark-link-card__container {}

.gatsby-remark-link-card__link {}

.gatsby-remark-link-card__main {}

.gatsby-remark-link-card__content {}

.gatsby-remark-link-card__title {}

.gatsby-remark-link-card__description {}

.gatsby-remark-link-card__meta {}

.gatsby-remark-link-card__favicon {}

.gatsby-remark-link-card__url {}

.gatsby-remark-link-card__thumbnail {}

.gatsby-remark-link-card__image {}

```