Merge pull request #156 from lbryio/markdown_refactor

decouple markdown and page content, simplify css

app/components/ecosystem/submodule-chainquery.js

@@ -9,6 +9,7 @@ module.exports = exports = () => `
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="chainquery">chainquery</h3>
 
     <div class="ecosystem__submodule__description">
+      <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>
   
@@ -19,7 +20,7 @@ module.exports = exports = () => `
         <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>

app/components/ecosystem/submodule-lighthouse.js

@@ -9,6 +9,7 @@ module.exports = exports = () => `
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="lighthouse">lighthouse</h3>
 
     <div class="ecosystem__submodule__description">
+      <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>
   
@@ -19,6 +20,7 @@ module.exports = exports = () => `
         <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>

app/components/ecosystem/submodule-reflector.js

@@ -9,6 +9,7 @@ module.exports = exports = () => `
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="reflector">reflector</h3>
 
     <div class="ecosystem__submodule__description">
+      <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>
   
@@ -19,6 +20,7 @@ module.exports = exports = () => `
         <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>

app/components/ecosystem/submodule-wallet.js

@@ -9,6 +9,7 @@ module.exports = exports = () => `
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="wallet">wallet server</h3>
 
     <div class="ecosystem__submodule__description">
+      <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>
   
@@ -19,6 +20,7 @@ module.exports = exports = () => `
         <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>

app/sass/bundle.scss

@@ -4,6 +4,7 @@
   "init/colors",
   "init/base",
   "init/mixins",
+  "init/markdown",
   "init/extends",
 
   "type/karla",

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

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

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

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`));
-      
+      const markdownHtml = filename === "glossary-toc" ? partialFunction : partialFunction.default(); //kill special case
-      if (filename === "glossary-toc") markdownBody = markdownBody.replace(partial, partialFunction);
+      markdownBody = markdownBody.replace(partial, '</div>' +  markdownHtml + '<div class="page__markup">');
-
-      else markdownBody = markdownBody.replace(partial, partialFunction.default());
     }
   }