Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add navigation sidebar to the docs #1316

Merged
merged 8 commits into from
Aug 5, 2018
Merged

Add navigation sidebar to the docs #1316

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ed512a1
Add navigation to docs
styfle Aug 3, 2018
6c2b90f
Improve navbar
styfle Aug 3, 2018
ab89d59
Add bold for selected nav
styfle Aug 3, 2018
feeeee5
Revert script links so they still use CDN
styfle Aug 3, 2018
9169143
Change selected color & remove underline
styfle Aug 3, 2018
c4a2514
Remove whitespace
styfle Aug 3, 2018
7a3e405
Move license to docs
styfle Aug 4, 2018
bc6b408
Add license to navbar
styfle Aug 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions docs/CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,3 @@ To build your own minified version of Marked:
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).
29 changes: 0 additions & 29 deletions docs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need navigation in each individual file since we have a global navigation menu now.


<h2 id="marked">Marked</h2>

Marked is

1. built for speed.<sup>*</sup>
Expand Down Expand Up @@ -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).

<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.
6 changes: 0 additions & 6 deletions docs/USING_PRO.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<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>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need navigation in each individual file since we have a global navigation menu now.


<h2 id="renderer">The renderer</h2>

The renderer is...
Expand Down
130 changes: 111 additions & 19 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,63 @@
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
background: #F9F9F9;
}

#container {
position: relative;
max-width: 800px;
max-width: 900px;
margin: auto;
padding: 10px;
}

#content {
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 3px;
background: white;
}

#content h1:first-child {
margin-top: 0px;
}

header { display: flex; }
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: #21283E;
font-weight: bold;
}

header {
display: flex;
height: 50px;
}

header h1 { margin: 0; }

Expand Down Expand Up @@ -62,32 +107,71 @@
border-radius: 3px;
}

.github-ribbon {
position: absolute;
top: 0;
right: 0;
border: 0;
}
.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}}

Copy link
Member Author

@styfle styfle Aug 3, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed the old-school ribbon to a more modern corner that wiggles :octocat:

</style>
</head>
<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">
<header>
<a href="#/README.md">
<img src="img/logo-black.svg" height="64px" width="64px" />
</a>
<h1>Marked.js Documentation</h1>
</header>
<div style="display: flex">
<nav>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We begin the new <nav> here.
It's a sidebar on the left of the content.

<ul>
<li>
<a href="#/README.md">Getting Started</a>
<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>

<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>
</ul>
</nav>
<div id="content"></div>
</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 src="../lib/marked.js"></script>
<script>
if (!window.Promise) {
window.Promise = ES6Promise;
Expand All @@ -98,6 +182,7 @@ <h1>Marked.js Documentation</h1>

var content = document.querySelector('#content');
var body = document.querySelector('html');
var navLinks = document.querySelectorAll('nav a');
var currentPage = 'README.md';
var currentHash = '';
var renderedPage = '';
Expand Down Expand Up @@ -125,7 +210,14 @@ <h1>Marked.js Documentation</h1>
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) {
Expand Down