Merge pull request #1316 from styfle/docs-nav

Add navigation sidebar to the docs
This commit is contained in:
Steven 2018-08-05 12:09:15 -07:00 committed by GitHub
commit ba7e06d9ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 117 additions and 57 deletions

View File

@ -90,6 +90,3 @@ To build your own minified version of Marked:
npm run build 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).

View File

@ -1,17 +1,3 @@
<ul>
<li><a href="#marked">About</a></li>
<li><a href="#demo">Demo</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>
<li><a href="#contributing">Contributing</a></li>
<li><a href="#authors">Authors</a></li>
<li><a href="#license">License</a></li>
</ul>
<h2 id="marked">Marked</h2>
Marked is Marked is
1. built for speed.<sup>*</sup> 1. built for speed.<sup>*</sup>
@ -97,18 +83,3 @@ The only completely secure system is the one that doesn't exist in the first pla
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.
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).
<h2 id="license">License</h2>
Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
See [license](https://github.com/markedjs/marked/blob/master/LICENSE.md) for more details.

View File

@ -2,12 +2,6 @@
To champion the single-reponsibility and open/closed prinicples, we have tried to make it relatively painless to extend marked. If you are looking to add custom functionality, this is the place to start. To champion the single-reponsibility and open/closed prinicples, we have tried to make it relatively painless to extend marked. If you are looking to add custom functionality, this is the place to start.
<ul>
<li><a href="#renderer">The renderer</a></li>
<li><a href="#lexer">The lexer</a></li>
<li><a href="#parser">The parser</a></li>
</ul>
<h2 id="renderer">The renderer</h2> <h2 id="renderer">The renderer</h2>
The renderer is... The renderer is...

View File

@ -9,18 +9,67 @@
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
word-wrap: break-word; word-wrap: break-word;
background: #F9F9F9;
} }
#container { #container {
position: relative; max-width: 900px;
max-width: 800px;
margin: auto; margin: auto;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
} }
header { display: flex; } #content {
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 3px;
background: white;
}
#content h1:first-child {
margin-top: 0px;
}
nav {
border: 1px solid #ddd;
border-radius: 3px;
background: white;
margin-right: 10px;
}
nav > ul {
position: sticky;
top: 5px;
margin: 10px 0px;
padding: 0;
list-style-type: none;
font-size: 14px;
}
nav > ul > li {
min-width: 125px;
padding: 0px 15px;
}
nav > ul > li > ul {
padding-left: 25px;
}
nav > ul > li > ul > li {
font-size: 0.8em;
}
nav .selected {
color: #111;
font-weight: bold;
}
nav .selected:hover {
text-decoration: none;
}
header {
display: flex;
height: 50px;
}
header h1 { margin: 0; } header h1 { margin: 0; }
@ -62,15 +111,18 @@
border-radius: 3px; border-radius: 3px;
} }
.github-ribbon { .github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
position: absolute;
top: 0;
right: 0;
border: 0;
}
</style> </style>
</head> </head>
<body> <body>
<a href="https://github.com/markedjs/marked" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#202020; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<div id="container"> <div id="container">
<header> <header>
<a href="#/README.md"> <a href="#/README.md">
@ -78,12 +130,50 @@
</a> </a>
<h1>Marked.js Documentation</h1> <h1>Marked.js Documentation</h1>
</header> </header>
<div style="display: flex">
<a href="https://github.com/markedjs/marked"> <nav>
<img class="github-ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"> <ul>
</a> <li>
<a href="#/README.md">Getting Started</a>
<div id="content"></div> <ul>
<li><a href="#/README.md#demo">Demo</a></li>
<li><a href="#/README.md#installation">Installation</a></li>
<li><a href="#/README.md#usage">Usage</a></li>
<li><a href="#/README.md#specifications">Specs</a></li>
<li><a href="#/README.md#security">Security</a></li>
</ul>
</li>
<li>
<a href="#/USING_ADVANCED.md">Advanced Usage</a>
<ul>
<li><a href="#/USING_ADVANCED.md#options">Options</a></li>
<li><a href="#/USING_ADVANCED.md#highlight">Highlighting</a></li>
</ul>
</li>
<li>
<a href="#/USING_PRO.md">Extensibility</a>
<ul>
<li><a href="#/USING_PRO.md#renderer">Renderer</a></li>
<li><a href="#/USING_PRO.md#lexer">Lexer</a></li>
<li><a href="#/USING_PRO.md#parser">Parser</a></li>
</ul>
</li>
<li>
<a href="#/CONTRIBUTING.md">Contributing</a>
<ul>
<li><a href="#/CONTRIBUTING.md#design-principles">Design Principles</a></li>
<li><a href="#/CONTRIBUTING.md#priorities">Priorities</a></li>
<li><a href="#/CONTRIBUTING.md#test-early-often-and-everything">Testing</a></li>
</ul>
</li>
<li><a href="#/CODE_OF_CONDUCT.md">Code of Conduct</a></li>
<li><a href="#/AUTHORS.md">Authors</a></li>
<li><a href="#/PUBLISHING.md">Publishing</a></li>
<li><a href="#/LICENSE.md">License</a></li>
</ul>
</nav>
<div id="content"></div>
</div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <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/es6-promise/dist/es6-promise.js"></script>
@ -98,6 +188,7 @@
var content = document.querySelector('#content'); var content = document.querySelector('#content');
var body = document.querySelector('html'); var body = document.querySelector('html');
var navLinks = document.querySelectorAll('nav a');
var currentPage = 'README.md'; var currentPage = 'README.md';
var currentHash = ''; var currentHash = '';
var renderedPage = ''; var renderedPage = '';
@ -125,7 +216,14 @@
fetchAnchor(currentHash) fetchAnchor(currentHash)
}); });
history.replaceState('', document.title, '#/' + currentPage + (currentHash ? '#' + currentHash : '')); var url = '#/' + currentPage + (currentHash ? '#' + currentHash : '');
var fullUrl = window.location.origin + '/' + url;
navLinks.forEach(function(link) {
link.className = link.href === fullUrl ? 'selected' : '';
});
history.replaceState('', document.title, url);
} }
function fetchAnchor(anchor) { function fetchAnchor(anchor) {