Merge pull request #3806 from curbengh/https-iframe

refactor(iframe_tags): utilize htmlTag function

Author: curbengh

lib/plugins/tag/iframe.js

@@ -1,18 +1,29 @@
 'use strict';
 
+const { htmlTag } = require('hexo-util');
+
 /**
 * Iframe tag
 *
 * Syntax:
 *   {% iframe url [width] [height] %}
 */
 
-function iframeTag(args, content) {
-  const url = args[0];
+function iframeTag(args) {
+  const src = args[0];
   const width = args[1] && args[1] !== 'default' ? args[1] : '100%';
   const height = args[2] && args[2] !== 'default' ? args[2] : '300';
 
-  return `<iframe src="${url}" width="${width}" height="${height}" frameborder="0" loading="lazy" allowfullscreen></iframe>`;
+  const attrs = {
+    src,
+    width,
+    height,
+    frameborder: '0',
+    loading: 'lazy',
+    allowfullscreen: true
+  };
+
+  return htmlTag('iframe', attrs, '');
 }
 
 module.exports = iframeTag;

lib/plugins/tag/jsfiddle.js

@@ -1,20 +1,33 @@
 'use strict';
 
+const { htmlTag } = require('hexo-util');
+
 /**
 * jsFiddle tag
 *
 * Syntax:
 *   {% jsfiddle shorttag [tabs] [skin] [height] [width] %}
 */
 
-function jsfiddleTag(args, content) {
+function jsfiddleTag(args) {
   const id = args[0];
   const tabs = args[1] && args[1] !== 'default' ? args[1] : 'js,resources,html,css,result';
   const skin = args[2] && args[2] !== 'default' ? args[2] : 'light';
   const width = args[3] && args[3] !== 'default' ? args[3] : '100%';
   const height = args[4] && args[4] !== 'default' ? args[4] : '300';
+  const src = `https://jsfiddle.net/${id}/embedded/${tabs}/${skin}`;
+
+  const attrs = {
+    scrolling: 'no',
+    width,
+    height,
+    src,
+    frameborder: '0',
+    loading: 'lazy',
+    allowfullscreen: true
+  };
 
-  return `<iframe scrolling="no" width="${width}" height="${height}" src="//jsfiddle.net/${id}/embedded/${tabs}/${skin}" frameborder="0" loading="lazy" allowfullscreen></iframe>`;
+  return htmlTag('iframe', attrs, '');
 }
 
 module.exports = jsfiddleTag;

lib/plugins/tag/vimeo.js

@@ -1,16 +1,25 @@
 'use strict';
 
+const { htmlTag } = require('hexo-util');
+
 /**
 * Vimeo tag
 *
 * Syntax:
 *   {% vimeo video_id %}
 */
 
-function vimeoTag(args, content) {
-  const id = args[0];
+function vimeoTag(id) {
+  const src = 'https://player.vimeo.com/video/' + id;
+
+  const iframeTag = htmlTag('iframe', {
+    src,
+    frameborder: '0',
+    loading: 'lazy',
+    allowfullscreen: true
+  }, '');
 
-  return `<div class="video-container"><iframe src="//player.vimeo.com/video/${id}" frameborder="0" loading="lazy" allowfullscreen></iframe></div>`;
+  return htmlTag('div', { class: 'video-container' }, iframeTag, false);
 }
 
 module.exports = vimeoTag;

lib/plugins/tag/youtube.js

@@ -1,16 +1,25 @@
 'use strict';
 
+const { htmlTag } = require('hexo-util');
+
 /**
 * Youtube tag
 *
 * Syntax:
 *   {% youtube video_id %}
 */
 
-function youtubeTag(args, content) {
-  const id = args[0];
+function youtubeTag(id) {
+  const src = 'https://www.youtube.com/embed/' + id;
+
+  const iframeTag = htmlTag('iframe', {
+    src,
+    frameborder: '0',
+    loading: 'lazy',
+    allowfullscreen: true
+  }, '');
 
-  return `<div class="video-container"><iframe src="//www.youtube.com/embed/${id}" frameborder="0" loading="lazy" allowfullscreen></iframe></div>`;
+  return htmlTag('div', { class: 'video-container' }, iframeTag, false);
 }
 
 module.exports = youtubeTag;

test/scripts/tags/iframe.js

@@ -8,7 +8,7 @@ describe('iframe', () => {
   it('url', () => {
     const $ = cheerio.load(iframe(['https://zespia.tw']));
 
-    $('iframe').attr('src').should.eql('https://zespia.tw');
+    $('iframe').attr('src').should.eql('https://zespia.tw/');
     $('iframe').attr('width').should.eql('100%');
     $('iframe').attr('height').should.eql('300');
     $('iframe').attr('frameborder').should.eql('0');
@@ -19,7 +19,7 @@ describe('iframe', () => {
   it('width', () => {
     const $ = cheerio.load(iframe(['https://zespia.tw', '500']));
 
-    $('iframe').attr('src').should.eql('https://zespia.tw');
+    $('iframe').attr('src').should.eql('https://zespia.tw/');
     $('iframe').attr('width').should.eql('500');
     $('iframe').attr('height').should.eql('300');
     $('iframe').attr('frameborder').should.eql('0');
@@ -30,7 +30,7 @@ describe('iframe', () => {
   it('height', () => {
     const $ = cheerio.load(iframe(['https://zespia.tw', '500', '600']));
 
-    $('iframe').attr('src').should.eql('https://zespia.tw');
+    $('iframe').attr('src').should.eql('https://zespia.tw/');
     $('iframe').attr('width').should.eql('500');
     $('iframe').attr('height').should.eql('600');
     $('iframe').attr('frameborder').should.eql('0');

test/scripts/tags/jsfiddle.js

@@ -8,27 +8,27 @@ describe('jsfiddle', () => {
   it('id', () => {
     const $ = cheerio.load(jsfiddle(['foo']));
 
-    $('iframe').attr('src').should.eql('//jsfiddle.net/foo/embedded/js,resources,html,css,result/light');
+    $('iframe').attr('src').should.eql('https://jsfiddle.net/foo/embedded/js,resources,html,css,result/light');
   });
 
   it('tabs', () => {
     let $ = cheerio.load(jsfiddle(['foo', 'default']));
 
-    $('iframe').attr('src').should.eql('//jsfiddle.net/foo/embedded/js,resources,html,css,result/light');
+    $('iframe').attr('src').should.eql('https://jsfiddle.net/foo/embedded/js,resources,html,css,result/light');
 
     $ = cheerio.load(jsfiddle(['foo', 'html,css']));
 
-    $('iframe').attr('src').should.eql('//jsfiddle.net/foo/embedded/html,css/light');
+    $('iframe').attr('src').should.eql('https://jsfiddle.net/foo/embedded/html,css/light');
   });
 
   it('skin', () => {
     let $ = cheerio.load(jsfiddle(['foo', 'default', 'default']));
 
-    $('iframe').attr('src').should.eql('//jsfiddle.net/foo/embedded/js,resources,html,css,result/light');
+    $('iframe').attr('src').should.eql('https://jsfiddle.net/foo/embedded/js,resources,html,css,result/light');
 
     $ = cheerio.load(jsfiddle(['foo', 'default', 'dark']));
 
-    $('iframe').attr('src').should.eql('//jsfiddle.net/foo/embedded/js,resources,html,css,result/dark');
+    $('iframe').attr('src').should.eql('https://jsfiddle.net/foo/embedded/js,resources,html,css,result/dark');
   });
 
   it('width', () => {

test/scripts/tags/vimeo.js

@@ -9,7 +9,7 @@ describe('vimeo', () => {
     const $ = cheerio.load(vimeo(['foo']));
 
     $('.video-container').html().should.be.ok;
-    $('iframe').attr('src').should.eql('//player.vimeo.com/video/foo');
+    $('iframe').attr('src').should.eql('https://player.vimeo.com/video/foo');
     $('iframe').attr('frameborder').should.eql('0');
     $('iframe').attr('allowfullscreen').should.eql('');
     $('iframe').attr('loading').should.eql('lazy');

test/scripts/tags/youtube.js

@@ -9,7 +9,7 @@ describe('youtube', () => {
     const $ = cheerio.load(youtube(['foo']));
 
     $('.video-container').html().should.be.ok;
-    $('iframe').attr('src').should.eql('//www.youtube.com/embed/foo');
+    $('iframe').attr('src').should.eql('https://www.youtube.com/embed/foo');
     $('iframe').attr('frameborder').should.eql('0');
     $('iframe').attr('allowfullscreen').should.eql('');
     $('iframe').attr('loading').should.eql('lazy');