Add custom cover background

src/render.js

@@ -131,19 +131,31 @@ export function renderSubSidebar (target) {
 export function renderCover (content) {
   renderCover.dom = renderCover.dom || document.querySelector('section.cover')
   if (!content) {
-    renderCover.dom.classList.add('hidden')
-  } else {
-    renderCover.dom.classList.remove('hidden')
-    if (!renderCover.rendered) {
-      const html = marked(content)
-      const div = document.createElement('div')
-      div.innerHTML = html
-      const a = div.querySelector('p:last-child')
-      console.log(a)
-      renderTo('.cover-main', marked(content))
-    }
-    renderCover.rendered = true
+    renderCover.dom.classList.remove('show')
+    return
   }
+  renderCover.dom.classList.add('show')
+  if (renderCover.rendered) return
+
+  // render cover
+  let html = marked(content)
+  const match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)"></p>$')
+
+  // render background
+  if (match) {
+    const coverEl = document.querySelector('section.cover')
+
+    if (match[2] === 'color') {
+      coverEl.style.background = match[1]
+    } else {
+      coverEl.classList.add('has-mask')
+      coverEl.style.backgroundImage = `url(${match[1]})`
+    }
+    html = html.replace(match[0], '')
+  }
+
+  renderTo('.cover-main', html)
+  renderCover.rendered = true
 
   sticky()
 }

src/themes/basic/_coverpage.css

@@ -1,16 +1,27 @@
 section.cover {
-  height: 100vh;
-  display: flex;
   align-items: center;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100vh;
+  display: none;
 
-  &.hidden {
-    display: none;
+  &.show {
+    display: flex;
+  }
+
+  &.has-mask .mask {
+    position: absolute;
+    size: 100%;
+    background-color: $color-bg;
+    opacity: .8;
   }
 
   .cover-main {
     flex: 1;
     text-align: center;
     margin: 0 16px;
+    z-index: 1;
   }
 
   a {

src/themes/basic/_layout.css

@@ -95,7 +95,7 @@ nav {
     display: inline-block;
 
     ul {
-      background-color: rgba(#fff, .6);
+      background-color: rgba($color-bg, .6);
       border: 1px solid $color-primary;
       opacity: 0;
       overflow: hidden;
@@ -150,7 +150,7 @@ nav {
   }
 
   svg {
-    color: #fff;
+    color: $color-bg;
     height: 80px;
     width: 80px;
     fill: $color-primary;

src/themes/buble.css

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold');
 
 $color-primary: #0074D9;
+$color-bg: #fff;
 $sidebar-width: 16em;
 
 @import "basic/layout";
@@ -12,7 +13,7 @@ body {
 /* sidebar */
 .sidebar {
   color: #364149;
-  background-color: #fff;
+  background-color: $color-bg;
 
   a {
     color: #666;

src/themes/pure.css

@@ -1,3 +1,4 @@
 $color-primary: #000;
+$color-bg: #fff;
 $sidebar-width: 300px;
 @import "basic/layout";

src/themes/vue.css

@@ -1,20 +1,21 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
 
 $color-primary: #42b983;
+$color-bg: #fff;
 $sidebar-width: 300px;
 
 @import "basic/layout";
 @import "basic/coverpage";
 
 body {
-  background-color: #fff;
+  background-color: $color-bg;
   color: #34495e;
 }
 
 /* sidebar */
 .sidebar {
   color: #364149;
-  background-color: #fff;
+  background-color: $color-bg;
 
   li {
     margin: 6px 15px;

src/tpl.js

@@ -41,6 +41,7 @@ export function cover () {
 
   return `<section class="cover" style="background: ${bgc}">
     <div class="cover-main"></div>
+    <div class="mask"></div>
   </section>`
 }
 

src/util.js

@@ -105,4 +105,3 @@ export function getRoute () {
 export function isMobile () {
   return document.body.clientWidth <= 600
 }
-