dcumcTest/frontend/src/assets/js/linkExpander.js

export default {
	install (Vue) {
		//Takes a HTML string then parses it and replaces appropriate
		//links with the relevant expansion
		//Returns a callback with the 'expanded' HTML string
		Vue.prototype.$linkExpander = function (HTML, cb) {
			let parsed = document.createElement('div');
			parsed.innerHTML = HTML;

			let expandPatterns = {
				'wikipedia': {
					hostnameRegExp: /[a-z]+\.wikipedia\.org/,
					pathnameRegExp: /\/wiki\/.+/,
					getURL (link) {
						let page = link.pathname.split('/').slice(-1)[0];
						let countryVersion = link.hostname.split('.')[0];
						
						return `https://${countryVersion}.wikipedia.org/api/rest_v1/page/summary/${page}?redirect=true`;
					},
					getContent (link, data) {
						let content = data.extract.slice(0, 500).trim();

						return {
							title: data.titles.display,
							URL: data.content_urls.desktop.page,
							content: content.length > 500 ? content + '...' : content
						}
					}
				},
				'github': {
					hostnameRegExp: /github\.com/,
					pathnameRegExp: /\/.+\/.+/,
					getURL (link) {
						return 'https://api.github.com/repos' + link.pathname;
					},
					getContent (link, data) {
						return {
							title: data.full_name,
							URL: data.html_url,
							content: data.description
						}
					}
				}
			};

			let links = Array
				.from(parsed.querySelectorAll('p a[href]'))
				.filter(a => {
					return (
						a.parentNode.parentNode === parsed &&
						a.parentNode.childNodes.length === 1 &&
						a.innerHTML === a.href
					)
				});

			let expandableLinks = {};

			links.forEach(link => {
				for(let expandName in expandPatterns) {
					let expand = expandPatterns[expandName];

					if(
						expand.hostnameRegExp.test(link.hostname) &&
						expand.pathnameRegExp.test(link.pathname)
					) {
						if(!expandableLinks[expandName]) {
							expandableLinks[expandName] = [];
						}

						expandableLinks[expandName].push(link);

						break;
					}
				}
			});

			for(let expandName in expandableLinks) {
				let expandPattern = expandPatterns[expandName];

				expandableLinks[expandName].forEach(link => {
					let URL = expandPattern.getURL(link);

					Vue.axios
						.get(URL)
						.then(res => {
							let content = expandPattern.getContent(link, res.data);
							let h = document.createElement.bind(document);
							
							let div = h('div');
							let h2 = h('h2');
							let a = h('a');
							let span = h('span');
							let textNode = document.createTextNode(content.content);

							a.textContent = content.title;
							a.href = content.URL;
							a.setAttribute('target', '_blank');
							a.setAttribute('rel', 'noopener noreferrer');
							span.textContent = 'from ' + link.hostname;

							h2.appendChild(a);
							h2.appendChild(span);
							div.appendChild(h2)
							div.appendChild(textNode)

							div.classList.add('expanded_link');
							link.parentNode.replaceChild(div, link);

							completedAPICall();
						})
						.catch(completedAPICall);
				});
			}

			let completed = 0;
			let completedAPICall = () => {
				completed++;

				if(completed === links.length) {
					cb(parsed.innerHTML);
				}
			}
		}
	}
}