feat(plugin): add codesponsor plugin

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>

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))
+}
+

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)

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 = '') {

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;
   }