From 66a675806ef10f11a7cbdc251e7aa75bebf31474 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Tue, 25 Sep 2018 12:34:13 -0400
Subject: [PATCH] decouple markdown and page content, simplify css

---
 .../ecosystem/submodule-chainquery.js         |  23 +-
 .../ecosystem/submodule-lighthouse.js         |  22 +-
 .../ecosystem/submodule-reflector.js          |  22 +-
 app/components/ecosystem/submodule-wallet.js  |  24 +-
 app/sass/bundle.scss                          |   1 +
 app/sass/init/_markdown.scss                  | 298 +++++++++++++++++
 app/sass/pages/_page.scss                     | 306 +-----------------
 app/sass/partials/_ecosystem.scss             |   4 +
 app/views/redirect.js                         |  10 +-
 9 files changed, 360 insertions(+), 350 deletions(-)
 create mode 100644 app/sass/init/_markdown.scss

diff --git a/app/components/ecosystem/submodule-chainquery.js b/app/components/ecosystem/submodule-chainquery.js
index b9d8644..8f97559 100644
--- a/app/components/ecosystem/submodule-chainquery.js
+++ b/app/components/ecosystem/submodule-chainquery.js
@@ -9,17 +9,18 @@ module.exports = exports = () => `
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="chainquery">chainquery</h3>
 
     <div class="ecosystem__submodule__description">
-      <h4 class="ecosystem__submodule__description__title">Overview</h4>
-      <p>The model of Chainquery at its foundation consists of the fundamental data types found in the blockchain. This information is then expounded on with additional columns and tables that make querying the data much easier.</p>
-
-      <h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
-      <p class="__connection-details"></p>
-
-      <h4 class="ecosystem__submodule__description__title">Source</h4>
-      <ul>
-        <li><a href="https://github.com/lbryio/chainquery" title="chainquery source code">https://github.com/lbryio/chainquery</a></li>
-      </ul>
-
+      <div class="ecosystem__submodule__markdown">
+        <h4 class="ecosystem__submodule__description__title">Overview</h4>
+        <p>The model of Chainquery at its foundation consists of the fundamental data types found in the blockchain. This information is then expounded on with additional columns and tables that make querying the data much easier.</p>
+  
+        <h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
+        <p class="__connection-details"></p>
+  
+        <h4 class="ecosystem__submodule__description__title">Source</h4>
+        <ul>
+          <li><a href="https://github.com/lbryio/chainquery" title="chainquery source code">https://github.com/lbryio/chainquery</a></li>
+        </ul>
+      </div>
       <ul class="__parents">
         <li class="__parent green" data-action="open" data-target="applications">Applications</li>
         <li class="__parent red" data-action="open" data-target="lbrycrd">Blockchain</li>
diff --git a/app/components/ecosystem/submodule-lighthouse.js b/app/components/ecosystem/submodule-lighthouse.js
index 29f7838..221702c 100644
--- a/app/components/ecosystem/submodule-lighthouse.js
+++ b/app/components/ecosystem/submodule-lighthouse.js
@@ -9,16 +9,18 @@ module.exports = exports = () => `
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="lighthouse">lighthouse</h3>
 
     <div class="ecosystem__submodule__description">
-      <h4 class="ecosystem__submodule__description__title">Overview</h4>
-      <p>Lighthouse is a lightning-fast advanced search engine API for publications on the lbrycrd with autocomplete capabilities.</p>
-
-      <h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
-      <p class="__connection-details"></p>
-
-      <h4 class="ecosystem__submodule__description__title">Source</h4>
-      <ul>
-        <li><a href="https://github.com/lbryio/lighthouse" title="lighthouse source code">https://github.com/lbryio/lighthouse</a></li>
-      </ul>
+      <div class="ecosystem__submodule__markdown">
+        <h4 class="ecosystem__submodule__description__title">Overview</h4>
+        <p>Lighthouse is a lightning-fast advanced search engine API for publications on the lbrycrd with autocomplete capabilities.</p>
+  
+        <h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
+        <p class="__connection-details"></p>
+  
+        <h4 class="ecosystem__submodule__description__title">Source</h4>
+        <ul>
+          <li><a href="https://github.com/lbryio/lighthouse" title="lighthouse source code">https://github.com/lbryio/lighthouse</a></li>
+        </ul>
+      </div>
 
       <ul class="__parents">
         <li class="__parent green" data-action="open" data-target="applications">Applications</li>
diff --git a/app/components/ecosystem/submodule-reflector.js b/app/components/ecosystem/submodule-reflector.js
index cde860a..4cd1fcf 100644
--- a/app/components/ecosystem/submodule-reflector.js
+++ b/app/components/ecosystem/submodule-reflector.js
@@ -9,16 +9,18 @@ module.exports = exports = () => `
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="reflector">reflector</h3>
 
     <div class="ecosystem__submodule__description">
-      <h4 class="ecosystem__submodule__description__title">Overview</h4>
-      <p>A reflector cluster to accept LBRY content for hosting en masse, rehost the content, and make money on data fees (TODO). This code includes Go implementations of the LBRY peer protocol, reflector protocol, and DHT.</p>
-
-      <h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
-      <p class="__connection-details"></p>
-
-      <h4 class="ecosystem__submodule__description__title">Source</h4>
-      <ul>
-        <li><a href="https://github.com/lbryio/reflector.go" title="reflector source code">https://github.com/lbryio/reflector.go</a></li>
-      </ul>
+      <div class="ecosystem__submodule__markdown">
+        <h4 class="ecosystem__submodule__description__title">Overview</h4>
+        <p>A reflector cluster to accept LBRY content for hosting en masse, rehost the content, and make money on data fees (TODO). This code includes Go implementations of the LBRY peer protocol, reflector protocol, and DHT.</p>
+  
+        <h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
+        <p class="__connection-details"></p>
+  
+        <h4 class="ecosystem__submodule__description__title">Source</h4>
+        <ul>
+          <li><a href="https://github.com/lbryio/reflector.go" title="reflector source code">https://github.com/lbryio/reflector.go</a></li>
+        </ul>
+      </div>
 
       <ul class="__parents">
         <li class="__parent green" data-action="open" data-target="applications">Applications</li>
diff --git a/app/components/ecosystem/submodule-wallet.js b/app/components/ecosystem/submodule-wallet.js
index 942ed60..feace50 100644
--- a/app/components/ecosystem/submodule-wallet.js
+++ b/app/components/ecosystem/submodule-wallet.js
@@ -9,17 +9,19 @@ module.exports = exports = () => `
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="wallet">wallet server</h3>
 
     <div class="ecosystem__submodule__description">
-      <h4 class="ecosystem__submodule__description__title">Overview</h4>
-      <p>The LBRY app is a graphical browser for the decentralized content marketplace provided by the <a href="https://lbry.io" title="">LBRY</a> protocol. It is essentially the <a href="https://github.com/lbryio/lbry" title="">lbry daemon</a> bundled with an UI using <a href="http://electron.atom.io" title="">Electron</a>.</p>
-
-      <h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
-      <p class="__connection-details"></p>
-
-      <h4 class="ecosystem__submodule__description__title">Source</h4>
-      <ul>
-        <li><a href="https://github.com/lbryio/lbry-desktop" title="lbry-desktop source code">https://github.com/lbryio/lbry-desktop</a></li>
-      </ul>
-
+      <div class="ecosystem__submodule__markdown">
+        <h4 class="ecosystem__submodule__description__title">Overview</h4>
+        <p>The LBRY app is a graphical browser for the decentralized content marketplace provided by the <a href="https://lbry.io" title="">LBRY</a> protocol. It is essentially the <a href="https://github.com/lbryio/lbry" title="">lbry daemon</a> bundled with an UI using <a href="http://electron.atom.io" title="">Electron</a>.</p>
+  
+        <h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
+        <p class="__connection-details"></p>
+  
+        <h4 class="ecosystem__submodule__description__title">Source</h4>
+        <ul>
+          <li><a href="https://github.com/lbryio/lbry-desktop" title="lbry-desktop source code">https://github.com/lbryio/lbry-desktop</a></li>
+        </ul>
+      </div>
+      
       <ul class="__parents">
         <li class="__parent green" data-action="open" data-target="applications">Applications</li>
         <li class="__parent red" data-action="open" data-target="lbrycrd">Blockchain</li>
diff --git a/app/sass/bundle.scss b/app/sass/bundle.scss
index c5804cf..cb36abf 100755
--- a/app/sass/bundle.scss
+++ b/app/sass/bundle.scss
@@ -4,6 +4,7 @@
   "init/colors",
   "init/base",
   "init/mixins",
+  "init/markdown",
   "init/extends",
 
   "type/karla",
diff --git a/app/sass/init/_markdown.scss b/app/sass/init/_markdown.scss
new file mode 100644
index 0000000..9d8b174
--- /dev/null
+++ b/app/sass/init/_markdown.scss
@@ -0,0 +1,298 @@
+%markdown {
+  h1 {
+    margin-bottom: 0.25rem;
+
+    @media (min-width: 901px) {
+      font-size: 3rem;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 2rem;
+    }
+
+    + h2 {
+      margin-top: 2rem;
+    }
+  }
+
+  h2 {
+    @media (min-width: 901px) {
+      font-size: 2rem;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 1.5rem;
+    }
+
+    + h3 {
+      margin-top: 1rem;
+    }
+  }
+
+  h3 {
+    @media (min-width: 901px) {
+      font-size: 1.5rem;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 1.25rem;
+    }
+  }
+
+  h4 {
+    letter-spacing: 0.05rem;
+    text-transform: uppercase;
+
+    @media (min-width: 901px) {
+      font-size: 1.25rem;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 1.15rem;
+    }
+  }
+
+  h5 {
+    font-size: 1rem;
+  }
+
+  sup {
+    @include font-mono;
+  }
+
+  blockquote {
+    left: 2px;
+    line-height: 1.5;
+    margin-bottom: 0.5rem;
+    position: relative;
+
+    @media (min-width: 601px) {
+      margin-left: 15%; padding: 0.5rem 0 0.05rem 2rem;
+
+      font-size: 1.5rem;
+      width: 70%;
+    }
+
+    @media (max-width: 600px) {
+      font-size: 1.25rem;
+      padding: 0.5rem 0 0.05rem 0;
+    }
+
+    @media (min-width: 376px) and (max-width: 600px) {
+      margin-left: 5%;
+      width: 90%;
+    }
+
+    p {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    &::before {
+      @include font-serif;
+      width: 150px; height: 100px;
+      top: 3rem; left: -2rem;
+
+      color: rgba($teal, 0.2);
+      content: "\201C";
+      font-size: 20rem;
+      line-height: 0.5;
+      position: absolute;
+    }
+  }
+
+  p,
+  ol,
+  ul,
+  table {
+    code {
+      background-color: $black;
+      border-radius: 3px;
+      color: $white;
+      font-size: 60%;
+      letter-spacing: 0.05rem;
+      padding: 0.3rem 0.5rem;
+      vertical-align: middle;
+
+      @media (max-width: 900px) {
+        position: relative;
+        top: -1px;
+      }
+    }
+  }
+
+  p,
+  ol,
+  ul {
+    margin-bottom: 1rem;
+    position: relative;
+
+    @media (min-width: 901px) {
+      font-size: 1.25rem;
+      line-height: 1.6;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 1.05rem;
+      line-height: 1.55;
+    }
+  }
+
+  ol,
+  ul {
+    padding-top: 0.5rem;
+
+    li {
+      &:not(:last-of-type) {
+        margin-bottom: 0.25rem;
+      }
+    }
+
+    + h2, + h3, + h4, + h5 {
+      padding-top: 2rem;
+    }
+  }
+
+  ol {
+    list-style-type: lower-roman;
+    padding-left: 1.6rem;
+  }
+
+  ul {
+    padding-left: 1.25rem;
+  }
+
+  p {
+    img {
+      float: right;
+    }
+  }
+
+  a:not(.__button-black):not(.button):not(.header-anchor):not(.newsletter-standalone__submit):not(.__plain) {
+    @include underline($teal, $white);
+    color: $teal;
+
+    code {
+      background-color: $teal;
+      text-shadow: none;
+    }
+  }
+
+  pre {
+    margin-bottom: 2rem; padding: 2rem;
+
+    border-radius: 3px;
+    font-size: 1rem;
+    line-height: 1.33;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    &:not([class]),
+    &.language-text {
+      background-color: #27283e;
+      color: $white;
+    }
+
+    &.language-yaml {
+      background-color: #27273f;
+      color: #ffe066;
+
+      .atrule {
+        color: #f083ac;
+      }
+
+      .important {
+        color: #ffa94d;
+      }
+
+      .punctuation {
+        color: $white;
+      }
+    }
+  }
+
+  h2, h3, h4, h5 {
+    + table {
+      margin-top: 0.5em;
+    }
+  }
+
+  table {
+    background-color: $white;
+    border: 1px solid rgba($gray, 0.3);
+    border-spacing: 0;
+    margin-bottom: 2rem;
+    position: relative;
+    width: 100%;
+
+    @media (max-width: 1030px) {
+      display: inline-grid;
+
+      thead {
+        display: none;
+      }
+
+      tbody, tr, td {
+        display: block;
+      }
+
+      tbody tr:last-of-type td:not(:last-of-type) {
+        border-bottom: 1px solid rgba($gray, 0.3);
+      }
+    }
+
+    thead {
+      background-color: $black;
+      color: $white;
+      cursor: default;
+      position: relative;
+
+      tr {
+        position: relative;
+        z-index: 1;
+      }
+
+      &:not(*:root) {
+        &::after {
+          z-index: -1;
+        }
+      }
+
+      &::after {
+        width: calc(100% + 2px); height: calc(100% + 2px);
+        top: -1px; left: -1px;
+
+        background-color: $black;
+        content: "";
+        position: absolute;
+        z-index: 0;
+      }
+    }
+
+    tbody {
+      line-height: 1.55;
+    }
+
+    tr:nth-of-type(even) {
+      background-color: rgba($black, 0.025);
+    }
+
+    th, td {
+      padding: 0.5rem 1rem;
+    }
+
+    th {
+      font-size: 0.8rem;
+      letter-spacing: 0.1rem;
+      text-transform: uppercase;
+    }
+
+    tbody tr:not(:last-of-type) td {
+      border-bottom: 1px solid rgba($gray, 0.3);
+    }
+
+    td {
+      font-size: 1rem;
+    }
+  }
+}
diff --git a/app/sass/pages/_page.scss b/app/sass/pages/_page.scss
index 0fbf591..4d01db3 100644
--- a/app/sass/pages/_page.scss
+++ b/app/sass/pages/_page.scss
@@ -40,9 +40,8 @@
   }
 }
 
-
-
 .page__content {
+  background-image: url("/assets/media/images/grid.png");
   background-repeat: repeat;
   background-size: 32px;
   flex: 1;
@@ -50,310 +49,13 @@
   padding-bottom: 2rem;
   padding-right: env(safe-area-inset-right);
   padding-left: env(safe-area-inset-left);
-
-  h1 {
-    margin-bottom: 0.25rem;
-
-    @media (min-width: 901px) {
-      font-size: 3rem;
-    }
-
-    @media (max-width: 900px) {
-      font-size: 2rem;
-    }
-
-    + h2 {
-      margin-top: 2rem;
-    }
-  }
-
-  h2:not(.__title) {
-    @media (min-width: 901px) {
-      font-size: 2rem;
-    }
-
-    @media (max-width: 900px) {
-      font-size: 1.5rem;
-    }
-
-    + h3 {
-      margin-top: 1rem;
-    }
-  }
-
-  h3:not(.ecosystem__submodule__title) {
-    @media (min-width: 901px) {
-      font-size: 1.5rem;
-    }
-
-    @media (max-width: 900px) {
-      font-size: 1.25rem;
-    }
-
-    + table {
-      top: 0.25rem;
-    }
-  }
-
-  h4:not(.ecosystem__submodule__description__title) {
-    letter-spacing: 0.05rem;
-    text-transform: uppercase;
-
-    @media (min-width: 901px) {
-      font-size: 1.25rem;
-    }
-
-    @media (max-width: 900px) {
-      font-size: 1.15rem;
-    }
-  }
-
-  h5 {
-    font-size: 1rem;
-  }
-
-  sup {
-    @include font-mono;
-  }
-
-  blockquote {
-    left: 2px;
-    line-height: 1.5;
-    margin-bottom: 0.5rem;
-    position: relative;
-
-    @media (min-width: 601px) {
-      margin-left: 15%; padding: 0.5rem 0 0.05rem 2rem;
-
-      font-size: 1.5rem;
-      width: 70%;
-    }
-
-    @media (max-width: 600px) {
-      font-size: 1.25rem;
-      padding: 0.5rem 0 0.05rem 0;
-    }
-
-    @media (min-width: 376px) and (max-width: 600px) {
-      margin-left: 5%;
-      width: 90%;
-    }
-
-    p {
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    &::before {
-      @include font-serif;
-      width: 150px; height: 100px;
-      top: 3rem; left: -2rem;
-
-      color: rgba($teal, 0.2);
-      content: "\201C";
-      font-size: 20rem;
-      line-height: 0.5;
-      position: absolute;
-    }
-  }
-
-  p,
-  ol,
-  ul:not(.overview__ecosystem__module),
-  table {
-    code {
-      background-color: $black;
-      border-radius: 3px;
-      color: $white;
-      font-size: 60%;
-      letter-spacing: 0.05rem;
-      padding: 0.3rem 0.5rem;
-      vertical-align: middle;
-
-      @media (max-width: 900px) {
-        position: relative;
-        top: -1px;
-      }
-    }
-  }
-
-  p,
-  ol,
-  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
-    margin-bottom: 1rem;
-    position: relative;
-
-    @media (min-width: 901px) {
-      font-size: 1.25rem;
-      line-height: 1.6;
-    }
-
-    @media (max-width: 900px) {
-      font-size: 1.05rem;
-      line-height: 1.55;
-    }
-  }
-
-  ol,
-  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents):not(.tour__sidebar) {
-    padding-top: 0.5rem;
-
-    li {
-      &:not(:last-of-type) {
-        margin-bottom: 0.25rem;
-      }
-    }
-
-    + h2, + h3, + h4, + h5 {
-      padding-top: 2rem;
-    }
-  }
-
-  ol {
-    list-style-type: lower-roman;
-    padding-left: 1.6rem;
-  }
-
-  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents):not(.tour__sidebar) {
-    padding-left: 1.25rem;
-  }
-
-  p {
-    img {
-      float: right;
-    }
-  }
-
-  a:not(.__button-black):not(.button):not(.feature-link__title):not(.header-anchor):not(.newsletter-standalone__submit):not(.__plain) {
-    @include underline($teal, $white);
-    color: $teal;
-
-    code {
-      background-color: $teal;
-      text-shadow: none;
-    }
-  }
-
-  pre {
-    margin-bottom: 2rem; padding: 2rem;
-
-    border-radius: 3px;
-    font-size: 1rem;
-    line-height: 1.33;
-    overflow-x: auto;
-    overflow-y: hidden;
-
-    &:not([class]),
-    &.language-text {
-      background-color: #27283e;
-      color: $white;
-    }
-
-    &.language-yaml {
-      background-color: #27273f;
-      color: #ffe066;
-
-      .atrule {
-        color: #f083ac;
-      }
-
-      .important {
-        color: #ffa94d;
-      }
-
-      .punctuation {
-        color: $white;
-      }
-    }
-  }
-
-  table {
-    background-color: $white;
-    border: 1px solid rgba($gray, 0.3);
-    border-spacing: 0;
-    margin-bottom: 2rem;
-    position: relative;
-    width: 100%;
-
-    @media (max-width: 1030px) {
-      display: inline-grid;
-
-      thead {
-        display: none;
-      }
-
-      tbody, tr, td {
-        display: block;
-      }
-
-      tbody tr:last-of-type td:not(:last-of-type) {
-        border-bottom: 1px solid rgba($gray, 0.3);
-      }
-    }
-
-    thead {
-      background-color: $black;
-      color: $white;
-      cursor: default;
-      position: relative;
-
-      tr {
-        position: relative;
-        z-index: 1;
-      }
-
-      &:not(*:root) {
-        &::after {
-          z-index: -1;
-        }
-      }
-
-      &::after {
-        width: calc(100% + 2px); height: calc(100% + 2px);
-        top: -1px; left: -1px;
-
-        background-color: $black;
-        content: "";
-        position: absolute;
-        z-index: 0;
-      }
-    }
-
-    tbody {
-      line-height: 1.55;
-    }
-
-    tr:nth-of-type(even) {
-      background-color: rgba($black, 0.025);
-    }
-
-    th, td {
-      padding: 0.5rem 1rem;
-    }
-
-    th {
-      font-size: 0.8rem;
-      letter-spacing: 0.1rem;
-      text-transform: uppercase;
-    }
-
-    tbody tr:not(:last-of-type) td {
-      border-bottom: 1px solid rgba($gray, 0.3);
-    }
-
-    td {
-      font-size: 1rem;
-    }
-  }
 }
 
-
+.page__markup {
+  @extend %markdown;
+}
 
 .page__header {
   // background-image: url("/assets/media/images/background-a.jpg");
   background-color: $black;
 }
-
-.page__content {
-  background-image: url("/assets/media/images/grid.png");
-}
diff --git a/app/sass/partials/_ecosystem.scss b/app/sass/partials/_ecosystem.scss
index 98c6bf8..ef8f83e 100644
--- a/app/sass/partials/_ecosystem.scss
+++ b/app/sass/partials/_ecosystem.scss
@@ -253,6 +253,10 @@
   }
 }
 
+.ecosystem__module__details, .ecosystem__submodule__markdown {
+  @extend %markdown;
+}
+
 .ecosystem__module__piece {
   background-color: $white;
   left: 10%;
diff --git a/app/views/redirect.js b/app/views/redirect.js
index 4244f13..15a3d94 100644
--- a/app/views/redirect.js
+++ b/app/views/redirect.js
@@ -66,7 +66,7 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
           </div>
         </header>
 
-        <section class="page__content" itemprop="articleBody">
+        <section class="page__content page__markup" itemprop="articleBody">
           <div class="inner-wrap">
             <p>The page you are looking for does not exist.</p>
           </div>
@@ -99,7 +99,7 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
 
       <section class="page__content" itemprop="articleBody">
         <div class="inner-wrap">
-          ${raw(updatedMarkdown)}
+          <div class="page__markup">${raw(updatedMarkdown)}</div>
           ${raw(pageScript)}
           ${newMetadata.length ? raw(updateMetadata(newMetadata)) : ""}
         </div>
@@ -145,10 +145,8 @@ function partialFinder(markdownBody) {
 
     if (fileExistsTest) {
       const partialFunction = require(path.join(__dirname, "..", `./components/${filename}.js`));
-      
-      if (filename === "glossary-toc") markdownBody = markdownBody.replace(partial, partialFunction);
-
-      else markdownBody = markdownBody.replace(partial, partialFunction.default());
+      const markdownHtml = filename === "glossary-toc" ? partialFunction : partialFunction.default(); //kill special case
+      markdownBody = markdownBody.replace(partial, '</div>' +  markdownHtml + '<div class="page__markup">');
     }
   }