Page MenuHomePhabricator

Show Wikipedia Previews on Wikipedia hyperlinks
Open, MediumPublic

Description

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.

Event Timeline

SBisson created this task.Apr 21 2020, 7:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 21 2020, 7:29 PM
AMuigai moved this task from Backlog to Next up on the Inuka-Team board.May 11 2020, 8:54 PM
AMuigai triaged this task as Medium priority.May 12 2020, 6:26 PM
AMuigai raised the priority of this task from Medium to Needs Triage.
AMuigai updated the task description. (Show Details)
AMuigai triaged this task as Medium priority.May 14 2020, 1:43 PM
AMuigai moved this task from Next up to Kanban on the Inuka-Team board.May 21 2020, 1:34 PM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
SBisson updated the task description. (Show Details)May 21 2020, 7:43 PM
AMuigai updated the task description. (Show Details)Tue, Jun 30, 7:32 PM
AMuigai updated the task description. (Show Details)
SBisson updated the task description. (Show Details)Tue, Jun 30, 8:17 PM
hueitan claimed this task.Mon, Jul 6, 10:06 AM
hueitan moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Tue, Jul 7, 8:34 AM
hueitan moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Wed, Jul 8, 11:50 AM

GitHub PR is here https://github.com/wikimedia/wikipedia-preview/pull/19

Note that the PR's change supports Wikipedia Hyperlinks in both desktop and mobile.