diff --git a/assets/js/linkExpander.js b/assets/js/linkExpander.js new file mode 100644 index 0000000..87d8c62 --- /dev/null +++ b/assets/js/linkExpander.js @@ -0,0 +1,62 @@ +let cache = {}; + +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 completed = 0; + let completedAPICall = () => { + completed++; + + if(completed === links.length) { + cb(parsed.innerHTML); + } + }; + + let replaceLink = (html, link) => { + if(html.length) { + let div = document.createElement('div'); + div.innerHTML = html; + + link.parentNode.replaceChild( + div.children[0], + link + ); + } + + completedAPICall(); + }; + + let parsed = document.createElement('div'); + parsed.innerHTML = HTML; + + 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 + ) + }); + + links.forEach(link => { + let cached = cache[link.href]; + + if(cached) { + replaceLink(cached, link); + } else { + Vue.axios + .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/link_preview?url=' + link.href) + .then(res => { + cache[link.href] = res.data; + replaceLink(res.data, link); + }) + .catch(completedAPICall); + } + }) + } + } +} diff --git a/package.json b/package.json index cb349c8..cb993aa 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", - "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'" + "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales 'src/locales/**/*.json'" }, "dependencies": { "@vue/cli": "^4.5.10", diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 526f039..de5556a 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -68,6 +68,75 @@ + +
+ +
+