mirror of https://github.com/freeCodeCamp/devdocs
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
6.0 KiB
129 lines
6.0 KiB
ctrlKey = if $.isMac() then 'cmd' else 'ctrl'
|
|
navKey = if $.isMac() then 'cmd' else 'alt'
|
|
|
|
app.templates.helpPage = """
|
|
<nav class="_toc" role="directory">
|
|
<h3 class="_toc-title">Table of Contents</h3>
|
|
<ul class="_toc-list">
|
|
<li><a href="#search">Search</a>
|
|
<li><a href="#shortcuts">Keyboard Shortcuts</a>
|
|
<li><a href="#aliases">Search Aliases</a>
|
|
</ul>
|
|
</nav>
|
|
|
|
<h1 class="_lined-heading">Help</h2>
|
|
|
|
<h2 class="_block-heading" id="search">Search</h2>
|
|
<p>
|
|
The search is case-insensitive. It supports fuzzy matching
|
|
(e.g. <code class="_label">bgcp</code> matches <code class="_label">background-clip</code>)
|
|
and aliases (<a href="#aliases">full list</a> below).
|
|
<dl>
|
|
<dt id="doc_search">Searching a single documentation
|
|
<dd>
|
|
You can scope the search to a single documentation by typing its name (or an abbreviation)
|
|
and pressing <code class="_label">Tab</code> (<code class="_label">Space</code> on mobile devices).
|
|
For example, to search the JavaScript documentation, enter <code class="_label">javascript</code>
|
|
or <code class="_label">js</code>, then <code class="_label">Tab</code>.<br>
|
|
To clear the current scope, empty the search field and hit <code class="_label">Backspace</code>.
|
|
<dt id="url_search">Prefilling the search field
|
|
<dd>
|
|
The search field can be prefilled from the URL by visiting <a href="/#q=keyword" target="_top">devdocs.io/#q=keyword</a>.
|
|
Characters after <code class="_label">#q=</code> will be used as search query.<br>
|
|
To search a single documentation, add its name and a space before the keyword:
|
|
<a href="/#q=js%20date" target="_top">devdocs.io/#q=js date</a>.
|
|
<dt id="browser_search">Searching using the address bar
|
|
<dd>
|
|
DevDocs supports OpenSearch. It can easily be installed as a search engine on most web browsers:
|
|
<ul>
|
|
<li>On Chrome, the setup is done automatically. Simply press <code class="_label">Tab</code> when devdocs.io is autocompleted
|
|
in the omnibox (to set a custom keyword, click <em>Manage search engines\u2026</em> in Chrome's settings).
|
|
<li>On Firefox, open the search engine list (icon in the search bar) and click <em>Add "DevDocs Search"</em>.
|
|
DevDocs is now available in the search bar. You can also search from the location bar by following
|
|
<a href="https://support.mozilla.org/en-US/kb/how-search-from-address-bar">these instructions</a>.
|
|
</dl>
|
|
|
|
<h2 class="_block-heading" id="shortcuts">Keyboard Shortcuts</h2>
|
|
<h3 class="_shortcuts-title">Sidebar</h3>
|
|
<dl class="_shortcuts-dl">
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">↓</code>
|
|
<code class="_shortcut-code">↑</code>
|
|
<dd class="_shortcuts-dd">Move selection
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">→</code>
|
|
<code class="_shortcut-code">←</code>
|
|
<dd class="_shortcuts-dd">Show/hide sub-list
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">enter</code>
|
|
<dd class="_shortcuts-dd">Open selection
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">#{ctrlKey} + enter</code>
|
|
<dd class="_shortcuts-dd">Open selection in a new tab
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">alt + r</code>
|
|
<dd class="_shortcuts-dd">Reveal current page in sidebar
|
|
</dl>
|
|
<h3 class="_shortcuts-title">Browsing</h3>
|
|
<dl class="_shortcuts-dl">
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">#{navKey} + ←</code>
|
|
<code class="_shortcut-code">#{navKey} + →</code>
|
|
<dd class="_shortcuts-dd">Go back/forward
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">alt + ↓</code>
|
|
<code class="_shortcut-code">alt + ↑</code>
|
|
<br>
|
|
<code class="_shortcut-code">shift + ↓</code>
|
|
<code class="_shortcut-code">shift + ↑</code>
|
|
<dd class="_shortcuts-dd">Scroll step by step<br><br>
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">space</code>
|
|
<code class="_shortcut-code">shift + space</code>
|
|
<dd class="_shortcuts-dd">Scroll screen by screen
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">#{ctrlKey} + ↑</code>
|
|
<code class="_shortcut-code">#{ctrlKey} + ↓</code>
|
|
<dd class="_shortcuts-dd">Scroll to the top/bottom
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">alt + f</code>
|
|
<dd class="_shortcuts-dd">Focus first link in the content area<br>(press tab to focus the other links)
|
|
</dl>
|
|
<h3 class="_shortcuts-title">App</h3>
|
|
<dl class="_shortcuts-dl">
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">ctrl + ,</code>
|
|
<dd class="_shortcuts-dd">Open preferences
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">escape</code>
|
|
<dd class="_shortcuts-dd">Reset UI
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">?</code>
|
|
<dd class="_shortcuts-dd">Show this page
|
|
</dl>
|
|
<h3 class="_shortcuts-title">Miscellaneous</h3>
|
|
<dl class="_shortcuts-dl">
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">alt + o</code>
|
|
<dd class="_shortcuts-dd">Open original page
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">alt + g</code>
|
|
<dd class="_shortcuts-dd">Search on Google
|
|
<dt class="_shortcuts-dt">
|
|
<code class="_shortcut-code">alt + s</code>
|
|
<dd class="_shortcuts-dd">Search on Stack Overflow
|
|
</dl>
|
|
<p class="_note _note-green">
|
|
<strong>Tip:</strong> If the cursor is no longer in the search field, press <code class="_label">/</code> or
|
|
continue to type and it will refocus the search field and start showing new results.
|
|
|
|
<h2 class="_block-heading" id="aliases">Search Aliases</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Word
|
|
<th>Alias
|
|
#{("<tr><td class=\"_code\">#{key}<td class=\"_code\">#{value}" for key, value of app.models.Entry.ALIASES).join('')}
|
|
</table>
|
|
<p>Feel free to suggest new aliases on <a href="https://github.com/Thibaut/devdocs/issues/new">GitHub</a>.
|
|
"""
|