Background

Currently, Wikipedia Previews can be enabled on specific words or HTML elements by adding custom HTML attributes. This can be tedious for editors.

Target User

An editor who is creating an article or content on a partner's website

Solution

A more intuitive way to enable it can be to simply link to Wikipedia and let Wikipedia Preview detect those links.

For example, an editor of a 3rd party content site would add this link to an article

The <a href="https://en.wikipedia.org/wiki/Sun">sun</a> is the star...

In this case, Wikipedia Preview would detect that this links to the "Sun" article on English Wikipedia and hook an event to the <a> element to show the preview on hover or tap (mobile).

The Wikipedia Previews' init() function should be updated to allow enabling this behavior.

wikipediaPreviews.init({
	selector: '.wiki', // See note #1
        detectLinks: true, // See note #2
});

Notes

1. The selector config option will be made optional. When it is specified, the component will look for elements with the given seletor and enable previews on those.
2. The detectLinksconfig option will be added as optional. Valid values are anything truthy or falsy. When truthy, the component will looks for links (<a>) that have an href to Wikipedia. This is only for Wikipedia but keep the implementation flexible so we can include Wikibooks or other projects in the future. The language and title need to be parsed from the URL in order to make the call to the summary API.