selector

Type:

Values:

It defines the

you want to pick from the HTML markup over the url:


const mql = require('@microlink/mql')

const github = username =>
  mql(`https://github.com/${username}`, {
    data: {
      avatar: {
        selector: 'meta[property="og:image"]:not([content=""])',
        attr: 'content',
        type: 'image'
      }
    }
  })

const username = 'kikobeats'
const { response, data } = await github(username)

console.log(
  `GitHub avatar for @${username}: ${data.avatar.url} (${data.avatar.size_pretty})`
)

It's equivalent to

Document.querySelector()

and any

CSS selector

can be specified, such as:

An HTML tag (e.g., 'img').
A CSS class or pseudo class, id or data-attribute (e.g., '#avatar').
A combination of both (e.g., 'img:first').

If you pass a collection of selectors, they are considered as fallbacks values:


const mql = require('@microlink/mql')

const github = username =>
  mql(`https://github.com/${username}`, {
    data: {
      avatar: [
        {
          selector: 'meta[name="twitter:image:src"]:not([content=""])',
          attr: 'content',
          type: 'image'
        },
        {
          selector: 'meta[property="og:image"]:not([content=""])',
          attr: 'content',
          type: 'image'
        }
      ]
    }
  })

const username = 'kikobeats'
const { response, data } = await github(username)

console.log(
  `GitHub avatar for @${username}: ${data.avatar.url} (${data.avatar.size_pretty})`
)

Using mulitple selectors makes the data rule more generic.

The position into the collection matters: The first data rule that returns a truthy value after applying type will be used, discarding the rest of the selectors.