Merge pull request #1168 from UziTech/hash-change-docs

Hash change docs
markedjs · Mar 27, 2018 · 8489411 · 8489411
2 parents 2fee1a1 + a17feb1
commit 8489411
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 47 deletions.
diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team by submitting a PR with changes to the [AUTHORS](AUTHORS.md) page (or emailing josh@8fold.com). All
+reported by contacting the project team by submitting a PR with changes to the [AUTHORS](#/AUTHORS.md) page (or emailing josh@8fold.com). All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
@@ -25,15 +25,15 @@ The following table lists the ticket type labels we use when there is work to be
 |Ticket type label                  |Description                                                                                                                                                                         |
 |:----------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 |L0 - security                      |A security vulnerability within the Marked library is discovered.                                                                                                                   |
-|L1 - broken                        |Valid usage results in incorrect output compared to [supported specifications](README.md#specifications) OR causes marked to crash AND there is no known workaround for the issue. |
+|L1 - broken                        |Valid usage results in incorrect output compared to [supported specifications](#/README.md#specifications) OR causes marked to crash AND there is no known workaround for the issue. |
 |L2 - annoying                      |Similar to L1 - broken only there is a known workaround avaialable for the issue.                                                                                                   |
 |RR - refactor and re-engineer      |Results in an improvement to developers using Marked (improved readability) or end-users (faster performance) or both.                                                              |
-|NFS - new feature (spec related)   |A capability Marked does not currently provide but is in one of the [supported specifications](README.md#specifications)                                                           |
+|NFS - new feature (spec related)   |A capability Marked does not currently provide but is in one of the [supported specifications](#/README.md#specifications)                                                           |
 |NFU - new feature (user requested) |A capability Marked does not currently provide but has been requested by users of Marked.                                                                                           |
 
 ## Test early, often, and everything
 
-We try to write test cases to validate output (writing tests based on the [supported specifications](README.md#specifications)) and minimize regression (writing tests for issues fixed). Therefore, if you would like to contribute, some things you should know regarding the test harness.
+We try to write test cases to validate output (writing tests based on the [supported specifications](#/README.md#specifications)) and minimize regression (writing tests for issues fixed). Therefore, if you would like to contribute, some things you should know regarding the test harness.
 
 |Location      |Description                                         |
 |:-------------|:---------------------------------------------------|
@@ -92,4 +92,4 @@ npm run build
 
 ## Publishing
 
-Creating GitHub releases and publishing to NPM is limited to conributors and owners. If you would like more information, please see our [publishing documentation](PUBLISHING.md).
+Creating GitHub releases and publishing to NPM is limited to conributors and owners. If you would like more information, please see our [publishing documentation](#/PUBLISHING.md).
diff --git a/docs/PUBLISHING.md b/docs/PUBLISHING.md
@@ -1,6 +1,6 @@
 # Releasing Marked
 
-- [ ] See [contributing](CONTRIBUTING.md)
+- [ ] See [contributing](#/CONTRIBUTING.md)
 - [ ] Create release branch from `master` (`release-x.y.z`)
 - [ ] Submit PR with minimal name: Release x.y.z
 - [ ] Complete PR checklists
@@ -13,12 +13,12 @@
 
 We follow [semantic versioning](https://semver.org) where the following sequence is true `[major].[minor].[patch]`; therefore, consider the following implications of the release you are preparing:
 
-1. **Major:** There is at least one change not deemed backward compatible. 
-2. **Minor:** There is at least one new feature added to the release. 
+1. **Major:** There is at least one change not deemed backward compatible.
+2. **Minor:** There is at least one new feature added to the release.
 3. **Patch:** No breaking changes, no new features.
 
 What to expect while Marked is a zero-major (0.x.y):
 
 1. The major will remain at zero; thereby, alerting consumers to the potentially volatile nature of the package.
 2. The minor will tend to be more analagous to a `major` release. For example, we plan to release `0.4.0` once we have fixed most, if not all, known issues related to the CommonMark and GFM specifications because the architecture changes planned during `0.4.0` will most likely introduce breaking changes.
-3. The patch will tend to be more analagous to a `minor` release.
+3. The patch will tend to be more analagous to a `minor` release.
diff --git a/docs/README.md b/docs/README.md
@@ -70,7 +70,7 @@ $ cat hello.html
 ```
 
 
-Marked offers [advanced configurations](USING_ADVANCED.md) and [extensibility](USING_PRO.md) as well.
+Marked offers [advanced configurations](#/USING_ADVANCED.md) and [extensibility](#/USING_PRO.md) as well.
 
 <h2 id="specifications">Supported Markdown specifications</h2>
 
@@ -88,17 +88,17 @@ By supporting the above Markdown flavors, it's possible that Marked can help you
 
 The only completely secure system is the one that doesn't exist in the first place. Having said that, we take the security of Marked very seriously.
 
-Therefore, please disclose potential security issues by email to the project [committers](AUTHORS.md) as well as the [listed owners within NPM](https://docs.npmjs.com/cli/owner). We will provide an initial assessment of security reports within 48 hours and should apply patches within 2 weeks (also, feel free to contribute a fix for the issue).
+Therefore, please disclose potential security issues by email to the project [committers](#/AUTHORS.md) as well as the [listed owners within NPM](https://docs.npmjs.com/cli/owner). We will provide an initial assessment of security reports within 48 hours and should apply patches within 2 weeks (also, feel free to contribute a fix for the issue).
 
 <h2 id="contributing">Contributing</h2>
 
-The marked community enjoys a spirit of collaboration and contribution from all comers. Whether you're just getting started with Markdown, JavaScript, and Marked or you're a veteran with it all figured out, we're here to help each other improve as professionals while helping Marked improve technically. Please see our [contributing documentation](CONTRIBUTING.md) for more details.
+The marked community enjoys a spirit of collaboration and contribution from all comers. Whether you're just getting started with Markdown, JavaScript, and Marked or you're a veteran with it all figured out, we're here to help each other improve as professionals while helping Marked improve technically. Please see our [contributing documentation](#/CONTRIBUTING.md) for more details.
 
 For our Contribution License Agreement, see our [license](https://github.com/markedjs/marked/blob/master/LICENSE.md).
 
 <h2 id="authors">Authors</h2>
 
-For list of credited authors and contributors, please see our [authors page](AUTHORS.md).
+For list of credited authors and contributors, please see our [authors page](#/AUTHORS.md).
 
 <h2 id="license">License</h2>
 

diff --git a/docs/index.html b/docs/index.html
@@ -73,7 +73,7 @@
 <body>
     <div id="container">
         <header>
-            <a href="README.md">
+            <a href="#/README.md">
                 <img src="img/logo-black.svg" height="64px" width="64px" />
             </a>
             <h1>Marked.js Documentation</h1>
@@ -96,49 +96,62 @@ <h1>Marked.js Documentation</h1>
           window.fetch = unfetch;
         }
 
-        if (!Element.prototype.closest) {
+        var content = document.querySelector('#content');
+        var body = document.querySelector('html');
+        var currentPage = 'README.md';
+        var currentHash = '';
+        var renderedPage = '';
+
+        function hashChange() {
+            var hash = location.hash.slice(1);
+            if (!hash) {
+                hash = 'README.md';
+            }
+
+            var uri = hash.split('#');
 
-            if (!Element.prototype.matches) {
-                Element.prototype.matches = Element.prototype.msMatchesSelector ||
-                                            Element.prototype.webkitMatchesSelector;
+            if (uri[0].match(/^\//)) {
+                currentPage = uri[0].slice(1);
+                if (uri.length > 1) {
+                    currentHash = uri[1];
+                } else {
+                    currentHash = '';
+                }
+            } else {
+                currentHash = uri[0];
             }
 
-            Element.prototype.closest = function(s) {
-                var el = this;
-                if (!document.documentElement.contains(el)) return null;
-                do {
-                    if (el.matches(s)) return el;
-                    el = el.parentElement || el.parentNode;
-                } while (el !== null && el.nodeType === 1);
-                return null;
-            };
+            fetchPage(currentPage).then(function () {
+                fetchAnchor(currentHash)
+            });
+
+            history.replaceState('', document.title, '#/' + currentPage + (currentHash ? '#' + currentHash : ''));
         }
 
-        var content = document.querySelector('#content');
-        var body = document.querySelector('html');
+        function fetchAnchor(anchor) {
+            if (!anchor) {
+                return;
+            }
 
-        body.addEventListener('click', function (e) {
-            var a = e.target.closest('a');
-            if (a && a.href.indexOf(location.origin) === 0) {
-                var uri = a.href.slice(location.origin.length + location.pathname.length).split('#');
-
-                if (uri[0].match('.md$')) {
-                    e.preventDefault();
-                    fetchPage(uri[0])
-                        .then(function () {
-                            if (uri.length > 1) {
-                                location.hash = uri[1];
-                            }
-                        });
-                }
-                history.replaceState("", document.title, "/");
+            var hashElement = document.getElementById(anchor);
+            if (hashElement) {
+                hashElement.scrollIntoView();
             }
-        }, false);
+        }
 
         function fetchPage(page) {
+            if (page === renderedPage) {
+                return Promise.resolve();
+            }
             return fetch(page)
-                .then(function (res) { return res.text(); })
+                .then(function (res) {
+                    if (!res.ok) {
+                        throw new Error('Error ' + res.status + ': ' + res.statusText);
+                    }
+                    return res.text();
+                })
                 .then(function (text) {
+                    renderedPage = page;
                     content.innerHTML = marked(text);
                     body.scrollTop = 0;
                 }).catch(function (e) {
@@ -147,7 +160,12 @@ <h1>Marked.js Documentation</h1>
                 });
         }
 
-        fetchPage('README.md');
+        window.addEventListener('hashchange', function (e) {
+            e.preventDefault();
+            hashChange();
+        });
+
+        hashChange();
     </script>
 </body>
 </html>