Merge pull request #156 from lbryio/markdown_refactor

decouple markdown and page content, simplify css

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>
+      <div class="ecosystem__submodule__markdown">
-      <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">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 __connection">Connection to...</h4>
-
+        <p class="__connection-details"></p>
-      <h4 class="ecosystem__submodule__description__title">Source</h4>
+  
-      <ul>
+        <h4 class="ecosystem__submodule__description__title">Source</h4>
-        <li><a href="https://github.com/lbryio/chainquery" title="chainquery source code">https://github.com/lbryio/chainquery</a></li>
+        <ul>
-      </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,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>
+      <div class="ecosystem__submodule__markdown">
-      <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">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 __connection">Connection to...</h4>
-
+        <p class="__connection-details"></p>
-      <h4 class="ecosystem__submodule__description__title">Source</h4>
+  
-      <ul>
+        <h4 class="ecosystem__submodule__description__title">Source</h4>
-        <li><a href="https://github.com/lbryio/lighthouse" title="lighthouse source code">https://github.com/lbryio/lighthouse</a></li>
+        <ul>
-      </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,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>
+      <div class="ecosystem__submodule__markdown">
-      <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">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 __connection">Connection to...</h4>
-
+        <p class="__connection-details"></p>
-      <h4 class="ecosystem__submodule__description__title">Source</h4>
+  
-      <ul>
+        <h4 class="ecosystem__submodule__description__title">Source</h4>
-        <li><a href="https://github.com/lbryio/reflector.go" title="reflector source code">https://github.com/lbryio/reflector.go</a></li>
+        <ul>
-      </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,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>
+      <div class="ecosystem__submodule__markdown">
-      <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">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 __connection">Connection to...</h4>
-
+        <p class="__connection-details"></p>
-      <h4 class="ecosystem__submodule__description__title">Source</h4>
+  
-      <ul>
+        <h4 class="ecosystem__submodule__description__title">Source</h4>
-        <li><a href="https://github.com/lbryio/lbry-desktop" title="lbry-desktop source code">https://github.com/lbryio/lbry-desktop</a></li>
+        <ul>
-      </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>

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