Vanilla

It is available as npm package
npm install @microlink/vanilla --save
The vanilla bundle is based on the React version, but exported as Universal Module Definition (UMD).
Since the bundle doesn't include the depdendencies, we recommend load it from a CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/microlink.min.js"></script>
or even better, just one line:
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/umd/react.production.min.js,npm/[email protected]/umd/react-dom.production.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
After that, microlink will available in the global scope.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    // Example 1
    // Replace all `a` tags for microlink cards
    microlink('a')
    // Example 2
    // Replace all elements with `link-preview` class
    // for microlink cards
    microlink('.link-previews')
    // Example 3
    // Replace all elements with `link-preview` class
    // for microlink cards, passing API specific options
    microlink('.link-previews', { size: 'large' })
  })
</script>

We recommend calling the `microlink` method before the DOM finishes loading.

The vanilla interface is pretty simliar to jQuery/Zepto: You need to provide a CSS selector as target element you want to convert into beautiful preview.
You can pass any API Parameter as a object property, for example, size
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', { 
      size: 'large'
    })
  })
</script>
Note that the API parameters you pass there will be attached for all the links.
If you want to pass specific API Parameters just for some cases, you can pass them as data attributes:
<a 
  src="https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk" 
  class"link-preview" 
  data-size="large">
</a>

Passing specific API Parameters as second argument.

Although it is shipped with a default styles, you can customize it using CSS Classnames
<style>
  .microlink-card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', { 
      size: 'large'
    })
  })
</script>
that it will be rendered as

Vanilla

It is available as npm package
npm install @microlink/vanilla --save
The vanilla bundle is based on the React version, but exported as Universal Module Definition (UMD).
Since the bundle doesn't include the depdendencies, we recommend load it from a CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/microlink.min.js"></script>
or even better, just one line:
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/umd/react.production.min.js,npm/[email protected]/umd/react-dom.production.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
After that, microlink will available in the global scope.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    // Example 1
    // Replace all `a` tags for microlink cards
    microlink('a')
    // Example 2
    // Replace all elements with `link-preview` class
    // for microlink cards
    microlink('.link-previews')
    // Example 3
    // Replace all elements with `link-preview` class
    // for microlink cards, passing API specific options
    microlink('.link-previews', { size: 'large' })
  })
</script>

We recommend calling the `microlink` method before the DOM finishes loading.

The vanilla interface is pretty simliar to jQuery/Zepto: You need to provide a CSS selector as target element you want to convert into beautiful preview.
You can pass any API Parameter as a object property, for example, size
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', { 
      size: 'large'
    })
  })
</script>
Note that the API parameters you pass there will be attached for all the links.
If you want to pass specific API Parameters just for some cases, you can pass them as data attributes:
<a 
  src="https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk" 
  class"link-preview" 
  data-size="large">
</a>

Passing specific API Parameters as second argument.

Although it is shipped with a default styles, you can customize it using CSS Classnames
<style>
  .microlink-card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', { 
      size: 'large'
    })
  })
</script>
that it will be rendered as