Allow video short links

btcpayserver · Aug 8, 2020 · d266446 · d266446
1 parent f652b6a
commit d266446
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/docs/.vuepress/__snapshots__/preprocessMarkdown.spec.js.snap b/docs/.vuepress/__snapshots__/preprocessMarkdown.spec.js.snap
@@ -6,15 +6,27 @@ Take a look at how BTCPay works in a video below.
 
 <a href=\\"https://www.youtube.com/watch?v=nr0UNbz3AoQ\\" class=\\"ytEmbed\\" data-id=\\"nr0UNbz3AoQ\\" style=\\"background-image:url(https://img.youtube.com/vi/nr0UNbz3AoQ/hqdefault.jpg);\\">
   <iframe
-    title=\\"YouTube: nr0UNbz3AoQ\\"
+    title=\\"YouTube\\"
     data-src=\\"https://www.youtube-nocookie.com/embed/nr0UNbz3AoQ?&autoplay=1&autohide=1&modestbranding=1&color=white&rel=0\\"
     frameborder=\\"0\\"
     allow=\\"autoplay;encrypted-media;picture-in-picture\\"
     allowfullscreen
   ></iframe>
 </a>
 
-Here is a presentation of the global architecture at Advancing Bitcoin conference."
+Here is a presentation of the global architecture at Advancing Bitcoin conference.
+
+Short link:
+
+<a href=\\"https://youtu.be/-e8lPd9NtPs\\" class=\\"ytEmbed\\" data-id=\\"-e8lPd9NtPs\\" style=\\"background-image:url(https://img.youtube.com/vi/-e8lPd9NtPs/hqdefault.jpg);\\">
+  <iframe
+    title=\\"YouTube\\"
+    data-src=\\"https://www.youtube-nocookie.com/embed/-e8lPd9NtPs?&autoplay=1&autohide=1&modestbranding=1&color=white&rel=0\\"
+    frameborder=\\"0\\"
+    allow=\\"autoplay;encrypted-media;picture-in-picture\\"
+    allowfullscreen
+  ></iframe>
+</a>"
 `;
 
 exports[`preprocessMarkdown replaces external links to docs with internal VuePress links 1`] = `

diff --git a/docs/.vuepress/preprocessMarkdown.js b/docs/.vuepress/preprocessMarkdown.js
@@ -30,10 +30,14 @@ const replaceExternalRepoLinks = (source, resourcePath) => {
 }
 
 const replaceYouTubeLinks = source =>
-  source.replace(/\[(!.*)\]\((.*youtube\.com.*?)(?:\s"(.*?)")?\)/gi, (all, preview, url, text) => {
-    const [, query] = url.match(/\?(.*)/)
+  source.replace(/\[(!.*)\]\((.*(youtube\.com\/watch|youtu\.be).*?)(?:\s"(.*?)")?\)/gi, (all, preview, url, text) => {
+    const [, query] = url.match(/\?(.*)/) || url.match(/.*youtu\.be\/(.*)/)
     const params = query.split('&').reduce((res, param) => {
-      const [key, val] = param.split('=')
+      let [key, val] = param.split('=')
+      if (param === key) {
+        key = 'v'
+        val = param
+      }
       return Object.assign(res, { [key]: val })
     }, {})
     const { v, t } = params
@@ -42,7 +46,7 @@ const replaceYouTubeLinks = source =>
     return `
 <a href="${url}" class="ytEmbed" data-id="${v}" style="background-image:url(https://img.youtube.com/vi/${v}/hqdefault.jpg);">
   <iframe
-    title="YouTube: ${text || v}"
+    title="YouTube"
     data-src="https://www.youtube-nocookie.com/embed/${path}&autoplay=1&autohide=1&modestbranding=1&color=white&rel=0"
     frameborder="0"
     allow="autoplay;encrypted-media;picture-in-picture"

diff --git a/docs/.vuepress/preprocessMarkdown.spec.js b/docs/.vuepress/preprocessMarkdown.spec.js
@@ -13,7 +13,10 @@ describe('preprocessMarkdown', () => {
 Take a look at how BTCPay works in a video below.
 [![](https://raw.githubusercontent.com/btcpayserver/btcpayserver-doc/master/img/thumbnails/HowBTCPayServerWorks.png)](https://www.youtube.com/watch?v=nr0UNbz3AoQ)
 
-Here is a presentation of the global architecture at Advancing Bitcoin conference.`
+Here is a presentation of the global architecture at Advancing Bitcoin conference.
+
+Short link:
+[![What is a pull payment](https://img.youtube.com/vi/-e8lPd9NtPs/mqdefault.jpg)](https://youtu.be/-e8lPd9NtPs "What is a pull payment")`
 
     expect(pp(md)).toMatchSnapshot()
   })