feat(plugin): add codesponsor plugin

QingWei-Li · QingWei-Li · commit 46ac4c3fd2db · 2017-09-20T09:00:34.000+08:00
diff --git a/docs/index.html b/docs/index.html
@@ -34,6 +34,7 @@
     mergeNavbar: true,
     maxLevel: 4,
     subMaxLevel: 2,
+    codesponsor: '7c9Ms7xRs-j_y_8abU03DA',
     ga: 'UA-106147152-1',
     name: 'docsify',
     search: {
@@ -68,6 +69,7 @@
 </script>
 <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/plugins/search.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/plugins/codesponsor.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/plugins/ga.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
diff --git a/src/core/util/dom.js b/src/core/util/dom.js
@@ -81,3 +81,8 @@ export function off (el, type, handler) {
 export function toggleClass (el, type, val) {
   el && el.classList[val ? type : 'toggle'](val || type)
 }
+
+export function style (content) {
+  appendTo(head, create('style', content))
+}
+
diff --git a/src/plugins/codesponsor.js b/src/plugins/codesponsor.js
@@ -0,0 +1,86 @@
+const DEFAULT_OPTIONS = {
+  theme: 'light',
+  image: 'show'
+}
+
+function tpl (id, options) {
+  const qs = []
+
+  for (let key in options) {
+    qs.push(`${key}=${options[key]}`)
+  }
+
+  const div = Docsify.dom.create('div')
+
+  Docsify.dom.toggleClass(div, 'codesponsor')
+  div.innerHTML = `<iframe
+      scrolling=0
+      frameborder=0
+      width=250
+      height=250
+      id="code-sponsor-embed-iframe" 
+      src="https://app.codesponsor.io/widgets/${id}?${qs.join('&')}">
+    </iframe>`
+
+  return div
+}
+
+function appIframe (id, opts) {
+  const html = tpl(id, opts)
+
+  Docsify.dom.before(Docsify.dom.find('section.content'), html)
+}
+
+function appendStyle () {
+  Docsify.dom.style(`
+    .codesponsor {
+      position: relative;
+      float: right;
+      right: 10px;
+      top: 10px;
+    }
+
+    @media screen and (min-width: 1300px) {
+      body.sticky .codesponsor {
+        position: fixed;
+      }
+
+      .codesponsor {
+        position: absolute;
+        bottom: 10px;
+        top: auto;
+        float: none;
+      }
+    }
+  `)
+}
+
+const install = function (hook, vm) {
+  let config = vm.config.codesponsor
+  let id
+
+  if (typeof config === 'string') {
+    id = config
+    config = {}
+  } else {
+    id = config.id
+  }
+
+  const opts = Docsify.util.merge(DEFAULT_OPTIONS, config)
+
+  if (!id) {
+    throw Error('codesponsor plugin need id')
+  }
+
+  if (Docsify.util.isMobile) {
+    return
+  }
+
+  // Append style
+  hook.ready(() => {
+    appendStyle()
+    appIframe(id, opts)
+  })
+}
+
+window.$docsify.plugins = [].concat(install, window.$docsify.plugins)
diff --git a/src/plugins/search/component.js b/src/plugins/search/component.js
@@ -64,8 +64,8 @@ function style () {
 .search p.empty {
   text-align: center;
 }`
-  const style = Docsify.dom.create('style', code)
-  Docsify.dom.appendTo(Docsify.dom.head, style)
+
+  Docsify.dom.style(code)
 }
 
 function tpl (opts, defaultValue = '') {
diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css
@@ -325,7 +325,7 @@ body.sticky {
 
 /* main content */
 .content {
-  padding-top: 20px;
+  padding-top: 60px;
   position: absolute 0 0 0 $sidebar-width;
   transition: left 250ms ease;
 }
@@ -471,6 +471,7 @@ body.close {
     left: 0;
     max-width: 100vw;
     position: static;
+    padding-top: 20px;
     transition: transform 250ms ease;
   }
 

Original file line number	Diff line number	Diff line change
`@@ -81,3 +81,8 @@ export function off (el, type, handler) {`
`81`	`81`	`export function toggleClass (el, type, val) {`
`82`	`82`	`el && el.classList[val ? type : 'toggle'](val \|\| type)`
`83`	`83`	`}`
	`84`	`+`
	`85`	`+export function style (content) {`
	`86`	`+ appendTo(head, create('style', content))`
	`87`	`+}`
	`88`	`+`
Original file line number	Diff line number	Diff line change
`@@ -325,7 +325,7 @@ body.sticky {`
`325`	`325`
`326`	`326`	`/* main content */`
`327`	`327`	`.content {`
`328`		`- padding-top: 20px;`
	`328`	`+ padding-top: 60px;`
`329`	`329`	`position: absolute 0 0 0 $sidebar-width;`
`330`	`330`	`transition: left 250ms ease;`
`331`	`331`	`}`
`@@ -471,6 +471,7 @@ body.close {`
`471`	`471`	`left: 0;`
`472`	`472`	`max-width: 100vw;`
`473`	`473`	`position: static;`
	`474`	`+ padding-top: 20px;`
`474`	`475`	`transition: transform 250ms ease;`
`475`	`476`	`}`
`476`	`477`