devdocs/assets/javascripts/templates/pages/help_tmpl.coffee

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="#abbreviations">Abbreviations</a>
    </ul>
  </nav>

  <h1 class="_lined-heading" id="search">Help</h2>

  <h2 class="_block-heading" id="search">Search</h2>
  <p>
    The search is case-insensitive and supports fuzzy matching (for queries longer than two characters).
    For example, searching <code class="_label">bgcp</code> brings up <code class="_label">background-clip</code>.<br>
    Abbreviations are also supported (<a href="#abbreviations">full list</a> below).
    For example, <code class="_label">$</code> is an alias for <code class="_label">jQuery</code>.
  <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 string.<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, meaning 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 select <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">&darr;</code>
      <code class="_shortcut-code">&uarr;</code>
    <dd class="_shortcuts-dd">Move selection
    <dt class="_shortcuts-dt">
      <code class="_shortcut-code">&rarr;</code>
      <code class="_shortcut-code">&larr;</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} + &larr;</code>
      <code class="_shortcut-code">#{navKey} + &rarr;</code>
    <dd class="_shortcuts-dd">Go back/forward
    <dt class="_shortcuts-dt">
      <code class="_shortcut-code">alt + &darr;</code>
      <code class="_shortcut-code">alt + &uarr;</code>
      <br>
      <code class="_shortcut-code">shift + &darr;</code>
      <code class="_shortcut-code">shift + &uarr;</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} + &uarr;</code>
      <code class="_shortcut-code">#{ctrlKey} + &darr;</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">
    <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="abbreviations">Abbreviations</h2>
  <p>Feel free to suggest new abbreviations on <a href="https://github.com/Thibaut/devdocs/issues/new">GitHub</a>.
  <table class="_abbreviations">
    <tr>
      <th>Word
      <th>Alias
    #{("<tr><td>#{key}<td>#{value}" for key, value of app.models.Entry.ALIASES).join('')}
  </table>
"""