microlinkhq / sdk Goto Github PK

Currently we are using image and logo as fallback from the API payload.

The point is that sometimes is better use logo image. In addition, the API can use screenshot as well.

We need to define a way to make possible select what image in order of priority use, for example:

<MicrolinkCard url='https://reactjs.org' cardImage=['logo', 'screenshot', 'image'] />

As discussed here #80 (review)

https://www.styled-components.com/docs/advanced#theming

Add a way to use microlink cards with any website:

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
      // replace all links and insert a card instead
      microlink('a');
    });
  </script>

Some props are leaking through to the DOM (unnecessarily) ☝️ (autoplay, controls, etc)

Inspiration:

• instagram.
• twitter.

Page: https://github.com/microlinkhq/microlinkjs

The API link in "See API for know what option you can pass. is dead.

The given inline example also doesn't work, tried:

<script type="text/javascript" src="https://unpkg.com/[email protected]/src/index.js"></script>
<a class="link" data-round="true" href="http://microlink.js.org">microlink.js.org</a>

Works like normal href link and only microlink.js.org is displayed.

A complete example would be great to the lesser-coders ;-) I mean the next step after the json return.

Would love to get compact links as on https://microlink-storybook.netlify.com

Overview

Officially, iframe has landed into Microlink API 🎉.

Now is the turn to leverage the functionality into SDK.

In order to enable it, just need to pass iframe: true as query parameter

 const { status, data, response } = await mql(
    'https://www.youtube.com/watch?v=9P6rdqiybaw', {
      iframe: true
  })

Additionally, iframe options can be passed as an object:

 const { status, data, response } = await mql(
    'https://www.youtube.com/watch?v=9P6rdqiybaw', {
      iframe: { width: 480, height: 270 }
  })

This can be used by some provider in order to customize the output

After that, the payload returns a new data field called iframe with the embeddable code to be inserted as markup, e.g.:

{
  "iframe": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/9P6rdqiybaw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
}

Requeriments

Implement iframe in a way that, when is present, the card output will be native iframe provided by the service instead of the common Microlink card visualization.

<Microlink 
  url='https://www.youtube.com/watch?v=9P6rdqiybaw' 
  media='iframe' 
/>

Consideraations

iframe is not widely supported by internet

Most of the URLs don't return an iframe and it isn't possible to determinate before performing the API call.

That means iframe support needs to support the common card visualization as a fallback.

I suggest keep using media prop for that:

// fallback into image card visualization
// if iframe doesn't present.
<Microlink 
  url='https://example.com' 
  media={['iframe', 'image']}
/>

Although a new prop can be added:

// fallback into image card visualization
// if iframe doesn't present.
<Microlink 
  url='https://example.com' 
  preferMode={['iframe', 'card']}
/>

In fact, need to find a way to be possible pass iframe settings

// fallback into image card visualization
// if iframe doesn't present.
<Microlink 
  url='https://example.com' 
  preferMode={['iframe', 'card']}
  iframe={{ width 480, height: 270 }}
/>

If we need to choose, I prefer to don't extend the current API surface and find a way to accommodate the functionality with the things we have.

iframe is not actually an iframe

You can't believe iframe is going to be the root HTML element node all the time.

e.g., consider the following API call: https://api.microlink.io/?url=https://view.genial.ly/5dc53cfa759d2a0f4c7db5f4&iframe

The root node here is a wrapper for control the iframe responsive ¯_(ツ)_/¯

iframe skeleton loader time

As the same way we are showing a loading skeleton until the data is fetched from API properly:

We need to do the same until the iframe markup is mounted and ready for displaying the media.

This can be done adding an event listener to iframe HTML element: https://github.com/microlinkhq/www/blob/master/src/components/elements/IframeInline/IframeInline.js#L16

We can reuse the current card skeleton loader we have for the card since actually we don't know if we can mount an iframe until the API call is performed.

Use palette from API to create a high contrast color card previsualization.

Inspired in: http://jxnblk.com/hello-color/

Hey so this component causes a setState warning if the component is unmounted. Is there some kind of promise/callback available by which I can know when the data is received and loaded into the card?

As you can see here:
https://wap.live/0052/summary/edit/-LBW995oBs_Is3XMQi4r
Or on this screenshot:

The play button does not display properly.

import React, { Component } from 'react'

import MicrolinkCard from 'react-microlink'

class RichLinkPreview extends Component {
  state = {}

  componentWillMount() {
    this.onPropsChanged(this.props)
  }

  componentWillUpdate(nextProps) {
    this.onPropsChanged(nextProps)
  }

  onPropsChanged = props => {
    const { text } = props
    if (this.text !== text) {
      this.text = text
      const links = []
      if (text) {
        const matches = text.match(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig)
        if (matches && matches.length > 0)
          matches.forEach(link => {
            if (link && link.length > 3 && links.indexOf(link) === -1)
              links.push(link)
          })
      }
      this.setState({ links })
    }
  }

  render() {
    const { links } = this.state
    if (links != null && links.length > 0)
      return (
        <div style={styles.viewMain}>
          {links.map(link => {
            const isVideo = link.indexOf('youtube') !== -1
            return (
              <MicrolinkCard
                key={link}
                style={styles.microlinkCard}
                url={link}
                autoPlay={false}
                size={isVideo ? "large" : "normal"}
              />
            )
          })}
        </div>
      )

    return null
  }
}



const styles = {
  viewMain: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'stretch',
    alignItems: 'stretch',
  },
  microlinkCard: {
    margin: 8,
    flex: 1,
    width: 'auto',
    maxWidth: '100%',
    borderRadius: 0,
  },
}

export default RichLinkPreview

standard/standard#984

Because greenkper doesn't support monorepo, we need a way to maintain deps up to date.

maintain deps is boring; this is why devDependencies are locked as latest, but for dependencies we need a less aggresive strategy.

I'm thinking in use ncu as a pretest step

Just need to exit with a code error when deps are available.

Ideally, we can extrac this as build status using https://github.com/siddharthkp/github-build

Currently we are selectting all the items and apply the same options

microlink('a', { rounded: true })

Ideally, use this options as default options, but support custom options using custom options markup inside html elements:

<a 
 href="https://vimeo.com/188175573" 
 class="link"
 data-microlink-rounded="false"
>vimeo.com/188175573</a>

Playing with https://microlinkhq.github.io/gallery/sumacrm/

The only way to see the card centered is creating a wrapper around the target a element:

<div class="link-container">
  <a href="https://www.sumacrm.com/" target="_blank" class="link-preview" data-image="logo"></a>
</div>

This adds a bit of friction between the user and the library.

On the other side, using the library on my blog I was to add a minimal CSS to ensure card visualization is ok.

.layout-post .card-preview {
  text-decoration: none;
  display: block;
  max-width: 500px;
  margin: auto;
}

We need to explore a way to avoid user do that

Hi,

I'm getting a TypeError: Cannot read property 'attrs' of undefined when attempting to use this component.

Here's the usage:

        <div className={"entry " + (props.task.done ? "done" : "remaining")}>
            {processed}
            {urls.map(url => <span><MicrolinkCard url={url} target='_blank' /></span>)}
        </div>

My environment is create-react-app, here's my packages:

{
  "name": "makerlog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.3",
    "@fortawesome/fontawesome-free-brands": "^5.0.8",
    "@fortawesome/fontawesome-free-regular": "^5.0.6",
    "@fortawesome/fontawesome-free-solid": "^5.0.6",
    "@fortawesome/react-fontawesome": "^0.0.17",
    "axios": "^0.17.1",
    "capitalize": "^1.0.0",
    "chart.js": "^2.7.2",
    "chartjs": "^0.3.24",
    "detect-emoji-support": "^0.1.5",
    "dot-prop-immutable": "^1.4.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "fuse.js": "^3.2.0",
    "get-urls": "^7.2.0",
    "goot": "^1.0.0",
    "history": "^4.7.2",
    "immutable": "^3.8.2",
    "lodash": "^4.17.5",
    "lodash.groupby": "^4.6.0",
    "microlinkjs": "^2.0.0",
    "moment": "^2.20.1",
    "moment-timezone": "^0.5.14",
    "query-string": "^5.1.0",
    "react": "^16.2.0",
    "react-albus": "^2.0.0",
    "react-autosize-textarea": "^3.0.2",
    "react-awesome-popover": "^2.0.3",
    "react-chartjs": "^1.2.0",
    "react-chartjs-2": "^2.7.0",
    "react-cookie": "^2.1.2",
    "react-dom": "^16.2.0",
    "react-easy-emoji": "^1.1.0",
    "react-infinite-scroll-component": "^3.0.2",
    "react-infinite-scroller": "^1.1.3",
    "react-loading-overlay": "^0.2.8",
    "react-microlink": "^2.0.0",
    "react-modal": "^3.1.11",
    "react-overlay-loading": "^1.0.3",
    "react-popover": "^0.5.4",
    "react-process-string": "^1.2.0",
    "react-redux": "^5.0.6",
    "react-responsive-modal": "^2.0.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "1.1.0",
    "react-scroll-horizontal": "^1.2.1",
    "react-scrollarea": "^0.6.14",
    "react-scrollbar": "^0.5.4",
    "react-simple-infinite-scroll": "^0.0.1",
    "react-sparkline-canvas": "^0.1.0",
    "react-sparklines": "^1.7.0",
    "react-spinners": "^0.2.5",
    "react-test-renderer": "^16.2.0",
    "reactbulma": "^1.1.1",
    "redux": "^3.7.2",
    "redux-auth-wrapper": "^2.0.2",
    "redux-flash": "^1.1.3",
    "redux-persist": "^5.5.0",
    "redux-saga": "^0.16.0",
    "universal-cookie": "^2.1.2",
    "url-param-parser": "^0.0.2",
    "url-parse": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Need to add minimal and common css reset style to ensure the look and feel works fine in each web integration.

Currently we are not adding this style:

text-decoration: none;
border: 0;
text-align: left;

Currently this works:

microlink([node1, node2])

But not this:

microlink(node1)

Working on a PR. Will submit it shortly!

When the image loads, on slow connections you see it load chunk by chunk. We should wait until the image has loaded before rendering it

Hello, when I try to mount a <MicrolinkCard /> component, i get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This is how i import it:

import React from 'react'
import MicrolinkCard from 'react-microlink'

const MyTestComponent = props => {
  return (
    <MicrolinkCard url={props.url} />
  )
}

I tried as well with import * as MicrolinkCard from 'react-microlink'
No success so far

Add a tiny loader when the data is fetching.

Inspired in Facebook style:

• https://codepen.io/Tenesan/full/FAeyD
• https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
• https://codepen.io/Mestika/pen/ByNYBa

Explore how to add prefetch supports in order to improve link click timing

There is an available image property for the custom image on the react and polymer components, but it isn't in the docs.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Currently disabled because sheerun/prettier-standard#36

Make possible customize palette color of the card.

By default, provide two theme colors:

• light: <microlink theme='light' />
• dark: <microlink theme='dark' />

But also be possible specify determinate colors, for example:

<microlink theme={{color: '#ccc', backgroundColor: '#f2c'}} />

• A better way to generate multiple bundles (developit/microbundle#28)
• A more lightweight build using preact or react-lite as aliases.

Main idea: Define a small card size. The use case is use it for small devices viewports

Awesome idea: Switch from large or normal card size to small when the viewport of the devices is less than the card height defined.

Due to the stronger styling rules on the text components, styles provided by either contrast or styles props are overwritten.

I'm having trouble importing this as an ES6 module and getting the following error message:

invariant.js:46 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

I installed the package via

npm install react-microlink styled-components --save

And am importing the package via

import MicrolinkCard from "react-microlink"

I'm building the project using brunch with the following config (this is in a Elixir/Phoenix project):

  plugins: {
    babel: {
      presets: ["es2015", "stage-3", "react"],
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    copycat: {
      fonts: [
        "vendor/font-awesome/fonts"
      ]
    },
    sass: {
      // Enable SASS/SCSS support
      mode: "native",
      options: {
        includePaths: [
          "node_modules"
        ]
      }
    }
  },

I'm guessing there's a good chance that it's my setup that is broken but I haven't had any trouble installing and importing other npm ES6 compatible packages.

Any thoughts?

Create a large card previsualization:
https://twitter.com/JoseCabiedes/status/936875965061279744

I'm thinking we could rename this to just round

Currently we can't beautify punicode urls, like https://xn--vi8hl0c.ws/

This could be done adding punycode or similar dependency:
https://github.com/sindresorhus/normalize-url/blob/master/index.js#L112

but it's a little heavy (https://bundlephobia.com/[email protected]) so I want investigate and found a workaround first

• Probably it should be disabled if the card content is loading?
• On facebook, when you hover a card just change the box shadow (a bit). On the other hand, on Twitter, it changes the border color.

This issue is an open track list of frontend side libraries for make easier microlink integration.

Feel free to discuss or suggest 😄

Two points here:

• The goal is to have the same API and default styling across all the libraries. This probably means that we need to extract core logic into a separate package that we can use across the integrations, like the logic used for creating the API request. It's early to think about that but just keeps in mind.

• Would be nice assign specific contributor to maintain each specific integration. Ideally, move of the logic out of the integration to be this task simple and easier.

List of integrations

• React (@Kikobeats / @breadadams)
• Vanilla JS (@Kikobeats)
• Vue (@breadadams)
• AngularJS (@breadadams)
• WordPress Plugin (@jontorrado)
• Polymer
• React-native
• Ghost
• Gatsby Plugin
• add-your-hype-library-slash-framework-here

A note about vanilla/umd

Vanilla bundle is a little special. Currently it's a bundle of the react-microlink component. The size is a little heavy (~50kb) because it needs react-dom as dependency.

Probably, using something lightweight like vuejs we can improve the bundle.

Also I tried to switch from react to preact in the build process. Currently is not possible because we are using Fragmentfrom react API and it is not supported by preact.

Because the microlink card is inline, global css can modify the default card style.

For avoid that, a good approach could be ship reset styles with the card CSS, like:

.microlink_card__content_title,
.microlink_card__content_description {
    margin: 0;
}

Currently, when you embed a video, then you need to click on the link to see the video.

A better UX workflow can place the video embed after the first click.

I need to review this behavior in order to determine if it could be possible on the front end, also keeping in mind bundle size for the extra code for that.

A good approximation to this could be do something similar to how YouTube video preview works.

Metadata example:

• https://api.microlink.io/?url=https://twitter.com/verge/status/957383241714970624
• https://plays.tv/video/5a6f64b1bef69a7fa9/holy-shit
• https://gfycat.com/gifs/detail/timelyhealthyarmadillo

Can I add custom content to the microlink.js? more text, link,...

Currently only supported at react bundle:

https://docs.microlink.io/sdk/getting-started/api-parameters/#data

Tentative API:

<MicrolinkCard url='https://reactjs.org' contrast key='helloworld' />

Hi

Thanks for your efforts.

please provide other module types too especially commonjs.
We work on with FuseBox so we need commonjs type.

Please provide

• commonjs
• amd
• esnext

Thanks :D

So with the #98 PR, I was thinking it was time we added a mute UI control too, and with so, time to adjust the controls prop.

It should still allow a true|false boolean, which would toggle on/off all the controls, but it could also be an object of key: boolean pairs. Ie.

<MicrolinkCard
  ...
  controls={{
    expandButton: true,
    muteButton: true,
    playbackButton: true,
    progressBar: true
  }}
/>

This would allow more flexibility over controls, for example just being able to expand & mute/un-mute a cards video but not control its playback, to name one possibility.

• Define main file as a babel output file that lived at dist/index.js
• Use this file as main file at package.json
• Add bundle size check: https://github.com/siddharthkp/bundlesize

I saw you removed this recently @Kikobeats, how come?

Hi! Great service you are providing. I am currently evaluating it and it works great.

But I just found that it does not seem to work with google URLs. Example:

https://www.google.de/search?q=hello+world

Gives me:

body: '{"status":"fail","message":"Scraping from \"https://www.google.de/search?q=hello world\" failed. Make sure your URL has HTML."}' }

Can you tell me why?
Best

P.S.: you can try this URL out in the search box on https://microlink.io/