Installation

Using npm:

npm install cardlink --save

Using CDN:

<script src="https://cdn.jsdelivr.net/npm/cardlink"></script>

<!-- Only use parseer -->
<script src="https://cdn.jsdelivr.net/npm/cardlink/dist/parse.js"></script>
<script>
  /**
   * Get info
   * @param {String} html String type html
   * @param {String} link Website address
   * @returns {{ title: string; link: string; icon: string }} Website info
   */
  cardLinkParse(html, link)
<script>

Usage

Modules

import cardLink from 'cardlink' // or const cardLink = require('cardlink')

// Only use parseer
import cardLinkParse from 'cardlink/parse' // or const cardLinkParse = require('cardlink/parse')

Browser

1. Usage

<script>
  cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>

2. Usage

<script>
  // Set the cardlink property for the specified a tag, and finally call cardLink()
  document.querySelectorAll('article a[target=_blank]').forEach((el) => {
    el.setAttribute('cardlink', '')
  })

  // OR
  document.querySelector('a#example').setAttribute('cardlink', '')

  // By default, card links are generated for all `a[cardlink]` on the page
  cardLink()
</script>

Problems

Since this is a front-end request for HTML, some sites may have cross-domain (CORS) issues, so cardLink allows you to use a proxy server to request HTML from the target site

<script>
  // Note: cardLink sends requests to the proxy server only when cross-domain requests occur (thus reducing the pressure on the proxy server)
  // Preset the proxy server before executing cardLink
  cardLink.server = 'https://api.allorigins.win/raw?url='

  cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>

Options API

cardLink(nodes)

Type: NodeList

default: document.querySelectorAll('a[cardlink]')

By default, card links are generated for all a[cardlink] on the page

Design Sketch