Add initial docs with logo

markedjs · Mar 11, 2018 · 35214c5 · 35214c5
1 parent 3e681a6
commit 35214c5
Show file tree

Hide file tree

Showing 3 changed files with 272 additions and 0 deletions.
diff --git a/docs/img/logo-black-and-white.svg b/docs/img/logo-black-and-white.svg
diff --git a/docs/img/logo-black.svg b/docs/img/logo-black.svg
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Marked.js Documentation</title>
+    <style>
+        body {
+            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+            font-size: 16px;
+            line-height: 1.5;
+            word-wrap: break-word;
+        }
+
+        #container {
+            max-width: 800px;
+            margin: auto;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+        }
+
+        header { display: flex; }
+
+        header h1 { margin: 0; }
+
+        table {
+            border-spacing: 0;
+            border-collapse: collapse;
+            border: 1px solid #ddd;
+        }
+
+        td, th {
+            border: 1px solid #ddd;
+            padding: 5px;
+        }
+
+        a {
+            color: #0366d6;
+            text-decoration: none;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        pre {
+            font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
+            padding: 16px;
+            overflow: auto;
+            font-size: 85%;
+            line-height: 1.45;
+            background-color: #f6f8fa;
+            border-radius: 3px;
+        }
+
+        code:not([class]) {
+            padding: 0.2em 0.4em;
+            margin: 0;
+            font-size: 85%;
+            background-color: rgba(27,31,35,0.05);
+            border-radius: 3px;
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <header>
+            <img src="img/logo-black.svg" height="64px" width="64px" />
+            <h1>Marked.js Documentation</h1>
+        </header>
+
+        <div id="content"></div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/unfetch/dist/unfetch.umd.js"></script>
+    <script>
+        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) {
+                var page = a.href.slice(location.origin.length + location.pathname.length);
+                if (page.slice(-3) === '.md') {
+                    e.preventDefault();
+                    fetchPage(page);
+                }
+            }
+        }, false);
+
+        function fetchPage(page) {
+            fetch(page)
+                .then(res => res.text())
+                .then(text => {
+                    content.innerHTML = marked(text);
+                    body.scrollTop = 0;
+                }).catch(e => {
+                    content.innerHTML = '<p>Oops! There was a problem rendering the page.</p>'
+                        + '<p>' + e.message + '</p>';
+                });
+        }
+
+        fetchPage('README.md');
+    </script>
+</body>
+</html>