JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<script src="https://unpkg.com/[email protected]"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<div id="vue">
  <div class="sidebar">
    <h3>Grapher Docs</h3>
    <span>Ctrl+F to search</span>
    <a v-for="page in pages" :href="'#' + page.id">{{page.name}}</a>
  </div>
  <div class="main">
   <div v-for="page in pages" class="page" :id="page.id" v-html="page.content"></div>
  </div>
</div>

SCSS

body{
  margin:0px;
}
#vue{
  display:flex;
  flex-direction:row;
  font-family:'Open Sans';
  max-height:100vh;
  > div{
    overflow:auto;
  }
}
.sidebar{
  background:#333;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  h3{
    padding:10px 20px;
    color:white;
    margin:0px;
  }
  span{
    color:grey;
    padding:0px 20px 10px 20px;
  }
  a{
    color:white;
    padding:10px 20px;
    text-decoration:none;
    border-bottom:1px solid #444;
    &:hover{
      background:#444;
    }
  }
}
.main{
  flex-shrink:1;
  flex-grow:1;
}
.page{
  margin:40px auto;
  background:white;
  padding:40px;
  max-width:800px;
  box-shadow:0px 1px 5px #aaa;
  h1{
    margin-top:0px;
  }
  h2:last-child{
    display:none;
  }
}
pre{
  background:#eee;
  padding:20px;
}
code{
  background:#eee;
  padding:2px;
  margin:-2px 0px;
}

JavaScript

const baseUrl = 'https://raw.githubusercontent.com/cult-of-coders/grapher/master/docs/'
new Vue({
	el:'#vue',
  data:{
  	pages:[]
  },
  created(){
		fetch(baseUrl + 'index.md')
    .then(res => res.text())
    .then(text => {
    	const pages = text.match(/###.*/g).map(string => {
      	const name = string.match(/\[.*]/)[0].slice(1, -1)
        const link = string.match(/\(.*\)/)[0].slice(1, -1)
        const id = name.replace(' ', '-')
      	return {name, link, id}
      })
      this.pages = pages
      pages.forEach(page => {
      	fetch(baseUrl + page.link)
        .then(res => res.text())
        .then(text => this.$set(page, 'content', marked(text)))
      })
    })
  }
})