Merge pull request #1156 from UziTech/docs-navigation

styfle · web-flow · commit ad6c7f91254c · 2018-03-25T18:33:49.000-04:00
Docs navigation
diff --git a/docs/README.md b/docs/README.md
@@ -1,6 +1,6 @@
 <ul>
   <li><a href="#marked">About</a></li>
-  <li><a href="#install">Installation</a></li>
+  <li><a href="#installation">Installation</a></li>
   <li><a href="#usage">Usage</a></li>
   <li><a href="#specifications">Supported Markdown specifications</a></li>
   <li><a href="#security">Security</a></li>
@@ -11,7 +11,7 @@
 
 <h2 id="marked">Marked</h2>
 
-Marked is 
+Marked is
 
 1. built for speed.<sup>*</sup>
 2. a low-level markdown compiler that allows frequent parsing of large chunks of markdown without caching or blocking for long periods of time.<sup>**</sup>
@@ -96,4 +96,3 @@ For list of credited authors and contributors, please see our [authors page](AUT
 Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
 
 See [license](https://github.com/markedjs/marked/blob/master/LICENSE.md) for more details.
-
diff --git a/docs/index.html b/docs/index.html
@@ -12,6 +12,7 @@
         }
 
         #container {
+            position: relative;
             max-width: 800px;
             margin: auto;
             padding: 10px;
@@ -60,15 +61,28 @@
             background-color: rgba(27,31,35,0.05);
             border-radius: 3px;
         }
+
+        .github-ribbon {
+            position: absolute;
+            top: 0;
+            right: 0;
+            border: 0;
+        }
     </style>
 </head>
 <body>
     <div id="container">
         <header>
-            <img src="img/logo-black.svg" height="64px" width="64px" />
+            <a href="README.md">
+                <img src="img/logo-black.svg" height="64px" width="64px" />
+            </a>
             <h1>Marked.js Documentation</h1>
         </header>
-        
+
+        <a href="https://github.com/markedjs/marked">
+            <img class="github-ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
+        </a>
+
         <div id="content"></div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@@ -78,14 +92,15 @@ <h1>Marked.js Documentation</h1>
         var content = document.querySelector('#content');
         var body = document.querySelector('html');
 
-        content.addEventListener('click', function (e) {
-            var a = e.target;
-            if (a.tagName.toLowerCase() === 'a' && a.href.indexOf(location.origin) === 0) {
+        body.addEventListener('click', function (e) {
+            var a = e.target.closest('a');
+            if (a && a.href.indexOf(location.origin) === 0) {
                 var page = a.href.slice(location.origin.length + location.pathname.length);
                 if (page.slice(-3) === '.md') {
                     e.preventDefault();
                     fetchPage(page);
                 }
+                history.replaceState("", document.title, "/");
             }
         }, false);
 
@@ -100,8 +115,8 @@ <h1>Marked.js Documentation</h1>
                         + '<p>' + e.message + '</p>';
                 });
         }
-        
+
         fetchPage('README.md');
     </script>
 </body>
-</html>
+</html>
