@@ -5,7 +5,7 @@ function HeaderLink(props) {
   const { link, title } = props;
   return (
     <li>
-      <Link href={link}>
+      <Link href={`/${link}`}>
         <a>{title}</a>
       </Link>
     </li>
@@ -17,18 +17,30 @@ HeaderLink.propTypes = {
   link: PropTypes.string.isRequired,
 };
 
-function Header() {
+function Header(props) {
+  const { paths } = props;
+  let pathElement = null;
+  if (paths && Array.isArray(paths)) {
+    pathElement = paths.map(path => <HeaderLink title={path} link={path} />);
+  } else {
+    pathElement = String(paths);
+  }
+
   return (
     <div>
       <h1>Title</h1>
       <nav>
         <ul>
-          <HeaderLink title="home" link="/" />
+          {pathElement}
           <HeaderLink title="about" link="/about.md" />
         </ul>
       </nav>
     </div>
   );
 }
 
+Header.propTypes = {
+  paths: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
 export default Header;
@@ -5,7 +5,7 @@ import Footer from './Footer';
 import SiteStyle from './Style';
 
 function Layout(props) {
-  const { children } = props;
+  const { children, paths } = props;
   return (
     <div className="page">
       <div className="row page-inner">
@@ -15,7 +15,7 @@ function Layout(props) {
         </Head>
         <header className="col-sm-12 col-lg-2 outer">
           <div className="inner">
-            <Header />
+            <Header paths={paths} />
           </div>
         </header>
         <main className="col-sm-12 col-lg-10 outer">
@@ -36,6 +36,7 @@ function Layout(props) {
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
+  paths: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default Layout;
@@ -5,10 +5,10 @@ import Layout from '../components/Layout';
 import Content from '../components/Content';
 
 function Index(props) {
-  const { content } = props;
+  const { content, paths } = props;
   return (
     <div>
-      <Layout>
+      <Layout paths={paths}>
         <Content content={content} />
       </Layout>
     </div>
@@ -17,23 +17,68 @@ function Index(props) {
 
 Index.propTypes = {
   content: PropTypes.string.isRequired,
+  paths: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
+async function getPage(path) {
+  const uri = `https://api.github.com/repos/codebru/markdown-test-repo/contents/${path}`;
+  const res = await Fetch(uri);
+  const data = await res.json();
+  if (!Object.prototype.hasOwnProperty.call(data, 'content')) {
+    if (Object.prototype.hasOwnProperty.call(data, 'message')) {
+      // Error possibly
+      return data.message;
+    }
+    return false;
+  }
+  const contentMd = Buffer.from(data.content, data.encoding).toString();
+  const contentHTML = Marked(contentMd);
+  return contentHTML;
+}
+
+async function getDirectory(path) {
+  try {
+    const uri = `https://api.github.com/repos/codebru/markdown-test-repo/contents/${path}`;
+    const res = await Fetch(uri);
+    const data = await res.json();
+    if (!data || !Array.isArray(data) || !Object.prototype.hasOwnProperty.call(data[0], 'path')) {
+      throw new Error('Failed to fetch tree.');
+    }
+    const pathArray = data.map(entry => entry.path);
+    return pathArray;
+  } catch (e) {
+    return `Unable to get data: ${e}`;
+  }
+}
+
 Index.getInitialProps = async ({ query }) => {
+  let pathArray = [];
+  let contentHTML = null;
   let uri = null;
+  let uri2 = null;
+
   if (query.pathName && query.pathName !== '/') {
     uri = query.pathName;
   } else {
     uri = 'README.md';
   }
 
-  uri = `https://raw.githubusercontent.com/codebru/full-web-dev/master/${uri}`;
-  const res = await Fetch(uri);
-  const data = await res.text();
-  const contentMd = data;
-  const contentHTML = Marked(contentMd);
+  contentHTML = await getPage(uri);
+
+  if (!contentHTML) {
+    // This means that the content is a DIR
+    contentHTML = 'This is a directory';
+    // Now get directory info from the same URI
+    pathArray = await getDirectory(uri);
+  } else {
+    // Remove the file from the path so we can get the DIR
+    uri2 = uri.lastIndexOf('/') + 1;
+    uri2 = uri.substring(0, uri2);
+
+    pathArray = await getDirectory(uri2);
+  }
 
-  return { content: contentHTML };
+  return { content: contentHTML, paths: pathArray };
 };
 
 export default Index;