Basic styling and structure for API documentation

content/.vuepress/components/Slate.vue

@@ -1,194 +1,251 @@
 <template>
-
   <div class="slate">
+    <!--/
     <a href="#" id="nav-button">
       <span>
         NAV
         <img src="slate-navbar.png">
       </span>
     </a>
-    <div class="tocify-wrapper">
+    /-->
-      <img src="slate-logo.png">
-      <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-      </div>
-      <ul class="search-results"></ul>
-      <div id="toc">
-      </div>
-        <ul class="toc-footer">
-          <li>Some footer content here</li>
-        </ul>
-    </div>
-    <div class="page-wrapper">
-      <div class="content" v-html="htmlContent"></div>
-      <div class="dark-box">
-      </div>
-    </div>
-  </div>
 
+    <aside class="api__toc">
+      <!--/ <img src="slate-logo.png"/> /-->
+
+      <div class="api__toc__search">
+        <input type="search" class="search" id="input-search" placeholder="Search"/>
+        <ul class="api__toc__search__results"></ul>
+      </div>
+
+      <div id="toc" class="api__toc__items" role="navigation"></div>
+
+      <!--/
+      <ul class="toc-footer">
+        <li>Some footer content here</li>
+      </ul>
+      /-->
+    </aside>
+
+    <section class="api__content" v-html="htmlContent"></section>
+  </div>
 </template>
 
 <script>
+  window.$ = window.jQuery = require("jquery");
 
-window.$ = window.jQuery = require('jquery');
+  require("jquery-ui");
+  require("jquery.tocify");
+  require("../js/jquery.highlight");
 
-require('jquery-ui');
+  const lunr = require("lunr");
 
-require('jquery.tocify');
+  const md = require("markdown-it")()
+    .use(require("markdown-it-anchor"), {
+      level: 1
+    })
+    .use(require("markdown-it-container"), "api__content__body")
+    .use(require("markdown-it-container"), "api__content__example");
 
-require('../js/jquery.highlight');
+  export default {
-
+    data: () => {
-var lunr = require('lunr');
+      return {
-
+        content: {},
-var md = require('markdown-it')()
+        htmlContent: "",
-  .use(require('markdown-it-anchor'), {
+        searchIndex: {},
-    level: 1
+        searchResults: {},
-  });
+        toc: {}
-
-export default {
-  data: function() {
-    return {
-      toc: {},
-      searchIndex: {},
-      content: {},
-      searchResults: {},
-      htmlContent: ''
-    };
-  },
-  props: ['markdownFile'],
-  methods: {
-    makeToc: function() {
-
-      this.toc = $("#toc").tocify({
-        selectors: 'h2',
-        extendPage: false,
-        theme: 'none',
-        smoothScroll: false,
-        showEffectSpeed: 0,
-        hideEffectSpeed: 180,
-        ignoreSelector: '.toc-ignore',
-        highlightOffset: 60,
-        scrollTo: -1,
-        scrollHistory: false,
-        hashGenerator: function (text, element) {
-          return element.prop('id');
-        }
-      }).data('toc-tocify');
-
-      $("#nav-button").click(function() {
-        $(".tocify-wrapper").toggleClass('open');
-        $("#nav-button").toggleClass('open');
-        return false;
-      });
-
-      $(".page-wrapper").click(this.closeToc);
-      $(".tocify-item").click(this.closeToc);
-
-    },
-    closeToc: function() {
-
-      $(".tocify-wrapper").removeClass('open');
-      $("#nav-button").removeClass('open');
-
-    },
-    populateSearchIndex: function() {
-
-      var component = this;
-
-      $('.slate .content h2').each(function() {
-        var title = $(this);
-        var body = title.nextUntil('h2');
-        component.searchIndex.add({
-          id: title.prop('id'),
-          title: title.text(),
-          body: body.text()
-        });
-      });
-
-    },
-    bindSearchIndex: function() {
-
-      this.content = $('.slate .content');
-      this.searchResults = $('.slate .search-results');   
-
-      $('#input-search').on('keyup', this.search);
-
-    },
-    search: function(event) {
-
-      var component = this;
-
-      component.unhighlight();
-      component.searchResults.addClass('visible');
-
-      var searchElement = $("#input-search");
-
-      // ESC clears the field
-      if (event.keyCode === 27) searchElement.val('');
-
-      if (searchElement.val()) {
-        var results = component.searchIndex.search(searchElement.val()).filter(function(r) {
-          return r.score > 0.0001;
-        });
-
-        if (results.length) {
-          component.searchResults.empty();
-          $.each(results, function (index, result) {
-            var elem = document.getElementById(result.ref);
-            component.searchResults.append("<li><a href='#" + result.ref + "'>" + $(elem).text() + "</a></li>");
-          });
-          component.highlight(this);
-        } else {
-          component.searchResults.html('<li></li>');
-          $('.search-results li').text('No Results Found for "' + searchElement.val() + '"');
-        }
-      } else {
-        component.unhighlight();
-        component.searchResults.removeClass('visible');
       }
     },
-    highlight: function(element) {
-      if (element.value) this.content.highlight(element.value, { element: 'span', className: 'search-highlight' });
-    },
-    unhighlight: function() {
-      this.content.unhighlight({ element: 'span', className: 'search-highlight' });
-    }
-  },
-  mounted: function() {
 
-    this.$http.get(this.markdownFile).then(response => {
+    props: ["markdownFile"],
 
-        this.htmlContent = md.render(response.body);
+    methods: {
+      makeToc: function () {
+        this.toc = $("#toc").tocify({
+          extendPage: false,
+          hashGenerator: (text, element) => element.prop("id"),
+          hideEffectSpeed: 180,
+          highlightOffset: 60,
+          ignoreSelector: ".toc-ignore",
+          scrollHistory: false,
+          scrollTo: -1,
+          selectors: "h2",
+          showEffectSpeed: 0,
+          smoothScroll: false,
+          theme: "none"
+        }).data("toc-tocify");
 
-        this.$nextTick(function() {
+        $("#nav-button").click(() => {
-
+          $(".api__toc").toggleClass("active");
-            this.makeToc();
+          $("#nav-button").toggleClass("active");
-
-            this.searchIndex = new lunr.Index();
-
-            this.searchIndex.ref('id');
-            this.searchIndex.field('title', { boost: 10 });
-            this.searchIndex.field('body');
-            this.searchIndex.pipeline.add(lunr.trimmer, lunr.stopWordFilter);
-
-            this.populateSearchIndex();
-
-            this.bindSearchIndex();
 
+          return false;
         });
 
-    });
+        $(".api__content").click(this.closeToc);
+        $(".tocify-item").click(this.closeToc);
+      },
 
-  },
+      closeToc: () => {
-  name: 'Slate'
+        $(".api__toc").removeClass("open");
-};
+        $("#nav-button").removeClass("open");
+      },
+
+      populateSearchIndex: function () {
+        const component = this;
+
+        $(".slate .content h2").each(function () {
+          const title = $(this);
+          const body = title.nextUntil("h2");
+
+          component.searchIndex.add({
+            body: body.text(),
+            id: title.prop("id"),
+            title: title.text()
+          });
+        });
+      },
+
+      bindSearchIndex: function () {
+        this.content = $(".slate .content");
+        this.searchResults = $(".api__toc__search__results");
+
+        $("#input-search").on("keyup", this.search);
+      },
+
+      search: function (event) {
+        const component = this;
+        const searchElement = $("#input-search");
+
+        component.unhighlight();
+        component.searchResults.addClass("active");
+
+        // ESC clears the field
+        if (event.keyCode === 27) searchElement.val("");
+
+        if (searchElement.val()) {
+          const results = component.searchIndex.search(searchElement.val()).filter(r => r.score > 0.0001);
+
+          if (results.length) {
+            component.searchResults.empty();
+
+            $.each(results, function (index, result) {
+              const elem = document.getElementById(result.ref);
+              component.searchResults.append(`<li><a href="#" ${result.ref}>${$(elem).text()}</a></li>`);
+            });
+
+            component.highlight(this);
+          } else {
+            component.searchResults.html("<li></li>");
+            $(".api__toc__search__results li").text(`No Results Found for "${searchElement.val()}"`);
+          }
+        } else {
+          component.unhighlight();
+          component.searchResults.removeClass("active");
+        }
+      },
+
+      highlight: function (element) {
+        if (element.value) this.content.highlight(element.value, { element: "span", className: "search-highlight" });
+      },
+
+      unhighlight: function () {
+        this.content.unhighlight({ element: "span", className: "search-highlight" });
+      }
+    },
+
+    mounted: function () {
+      this.$http.get("/api.md").then(function (response) {
+        this.htmlContent = md.render(response.body);
+
+        this.$nextTick(function () {
+          this.makeToc();
+
+          this.searchIndex = new lunr.Index();
+
+          this.searchIndex.ref("id");
+          this.searchIndex.field("title", { boost: 10 });
+          this.searchIndex.field("body");
+          this.searchIndex.pipeline.add(lunr.trimmer, lunr.stopWordFilter);
+
+          this.populateSearchIndex();
+          this.bindSearchIndex();
+        });
+      }).catch(error => {
+        console.log("Source Markdown file, not found:", error);
+      });
+    },
+
+    name: "Slate"
+  };
 </script>
 
 <style lang="scss">
-  
   @import "../../../node_modules/highlight.js/styles/monokai-sublime";
-  @import "../scss/partials/slate_variables";
+  @import "../scss/init/colors";
-  @import "../scss/partials/slate_icons";
+  @import "../scss/init/mixins";
-  @import "../scss/partials/slate_style";
 
-</style>
+  // @import "../scss/partials/slate_variables";
+  // @import "../scss/partials/slate_icons";
+  // @import "../scss/partials/slate_style";
+
+  .slate {
+    width: 100%; height: 100%;
+    position: relative;
+
+    &::after {
+      @include clearfix;
+    }
+  }
+
+  .api__toc {
+    width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
+    top: 4rem; left: 0; bottom: 0;
+
+    background-color: $white;
+    border-right: 1px solid rgba($gray, 0.3);
+    float: left;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: fixed;
+    z-index: 3;
+
+    &:not(.active) {
+    }
+
+    &.active {
+    }
+  }
+
+  .api__toc__search__results {
+    &:not(.active) {
+    }
+
+    &.active {
+    }
+  }
+
+
+
+  .api__content {
+    display: grid;
+    float: right;
+    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
+    width: calc(100% - 200px);
+  }
+
+  .api__content__body,
+  .api__content__example {
+    padding: 2rem;
+  }
+
+  .api__content__body {
+    border-bottom: 1px solid rgba($gray, 0.3);
+  }
+
+  .api__content__example {
+    background-color: $black;
+    border-bottom: 1px solid rgba($white, 0.1);
+    color: $white;
+  }
+</style>

content/.vuepress/theme/Layout.vue

@@ -1,5 +1,10 @@
 <template>
-  <main v-bind:class="{ 'home': $page.frontmatter.home, 'documentation': $page.frontmatter.documentation, 'contributing': $page.frontmatter.contributing }">
+  <main v-bind:class="{
+    'api': $page.frontmatter.api,
+    'contributing': $page.frontmatter.contributing,
+    'documentation': $page.frontmatter.documentation,
+    'home': $page.frontmatter.home
+  }">
     <nav class="navigation">
       <div class="inner-wrap">
         <router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link>
@@ -194,11 +199,15 @@
       </div>
     </template>
 
-    <template v-else-if="$page.path == '/tour.html'">
+    <template v-else-if="$page.frontmatter.api">
       <Content></Content>
     </template>
 
-    <template v-else-if="$page.path == '/whitepaper.html'">
+    <template v-else-if="$page.path === '/tour.html'">
+      <Content></Content>
+    </template>
+
+    <template v-else-if="$page.path === '/whitepaper.html'">
       <Content></Content>
     </template>
 
@@ -233,6 +242,8 @@
           All information should be considered incomplete and possibly incorrect and things may not work as expected.
         </p>
 
+        <br/>
+
         <p>
           Please do not share or link this site publicly while this message is here. This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank" rel="noopener noreferrer">contribute to it on Github</a>.
         </p>
@@ -261,81 +272,81 @@
 </template>
 
 <script>
+  import Vue from "vue";
+  import VueResource from "vue-resource";
+  import VueMoment from "vue-moment";
 
-import Vue from 'vue'
+  Vue.use(VueResource);
-import VueResource from 'vue-resource'
+  Vue.use(VueMoment);
-import VueMoment from 'vue-moment'
 
-Vue.use(VueResource)
+  export default {
-Vue.use(VueMoment)
+    data () {
+      return {
+      }
+    },
 
-export default {
+    created () {
-  data () {
+      if (this.$ssrContext) {
-    return {
+        this.$ssrContext.title = this.$title
+        this.$ssrContext.lang = this.$lang
+        this.$ssrContext.description = this.$page.description || this.$description
+      }
+    },
+
+    mounted () {
+      // update title / meta tags
+      this.currentMetaTags = [];
+
+      const updateMeta = () => {
+        document.title = this.$title
+        document.documentElement.lang = this.$lang
+
+        const meta = [
+          {
+            name: "description",
+            content: this.$description
+          },
+          ...(this.$page.frontmatter.meta || [])
+        ];
+
+        this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags);
+      };
+
+      this.$watch("$page", updateMeta);
+      updateMeta();
+
+      if ( // Toggle beta message
+        localStorage.getItem("hide lbry alert") &&
+        localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason
+      ) document.querySelector("#alert-beta").style.display = "none";
+
+      document.querySelector("#close-alert").onclick = function () {
+        localStorage.setItem("hide lbry alert", true);
+        document.querySelector("#alert-beta").style.display = "none";
+      };
+    },
+
+    beforeDestroy () {
+      updateMetaTags(null, this.currentMetaTags)
     }
-  },
-  created () {
-    if (this.$ssrContext) {
-      this.$ssrContext.title = this.$title
-      this.$ssrContext.lang = this.$lang
-      this.$ssrContext.description = this.$page.description || this.$description
-    }
-
-  },
-  mounted () {
-    // update title / meta tags
-    this.currentMetaTags = []
-    const updateMeta = () => {
-      document.title = this.$title
-      document.documentElement.lang = this.$lang
-      const meta = [
-        {
-          name: 'description',
-          content: this.$description
-        },
-        ...(this.$page.frontmatter.meta || [])
-      ]
-      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
-    }
-    this.$watch('$page', updateMeta)
-    updateMeta()
-
-
-
-    if ( // Toggle beta message
-      localStorage.getItem("hide lbry alert") &&
-      localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason
-    ) {
-      document.querySelector("#alert-beta").style.display = "none";
-    }
-
-    document.querySelector("#close-alert").onclick = function () {
-      localStorage.setItem("hide lbry alert", true);
-      document.querySelector("#alert-beta").style.display = "none";
-    };
-  },
-  beforeDestroy () {
-    updateMetaTags(null, this.currentMetaTags)
   }
-}
 
-function updateMetaTags (meta, current) {
+  function updateMetaTags (meta, current) {
-  if (current) {
+    if (current) current.forEach(c => document.head.removeChild(c));
-    current.forEach(c => {
+
-      document.head.removeChild(c)
+    if (meta) {
-    })
+      return meta.map(m => {
-  }
+        const tag = document.createElement('meta')
-  if (meta) {
+
-    return meta.map(m => {
+        Object.keys(m).forEach(key => {
-      const tag = document.createElement('meta')
+          tag.setAttribute(key, m[key])
-      Object.keys(m).forEach(key => {
+        });
-        tag.setAttribute(key, m[key])
+
+        document.head.appendChild(tag);
+        return tag;
       })
-      document.head.appendChild(tag)
+    }
-      return tag
-    })
   }
-}
 </script>
 
 <style lang="scss">

content/api/index.md

@@ -0,0 +1,6 @@
+---
+api: true
+title: API
+---
+
+<Slate/>

package.json

@@ -27,6 +27,8 @@
     "jquery-ui": "^1.12.1",
     "jquery.tocify": "^1.9.1",
     "lunr": "0.5.7",
+    "markdown-it": "^8.4.1",
+    "markdown-it-container": "^2.0.0",
     "markdown-it-wikilinks": "^1.0.1",
     "node-sass": "^4.9.0",
     "redis": "^2.8.0",