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

app.templates.helpPage = function () {
  const ctrlKey = $.isMac() ? "cmd" : "ctrl";
  const navKey = $.isMac() ? "cmd" : "alt";
  const arrowScroll = app.settings.get("arrowScroll");

  const aliases = Object.entries(app.models.Entry.ALIASES);
  const middle = Math.ceil(aliases.length / 2);
  const aliases_one = aliases.slice(0, middle);
  const aliases_two = aliases.slice(middle);

  return `\
<nav class="_toc" role="directory">
  <h3 class="_toc-title">Table of Contents</h3>
  <ul class="_toc-list">
    <li><a href="#managing-documentations">Managing Documentations</a>
    <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">User Guide</h1>

<h2 class="_block-heading" id="managing-documentations">Managing Documentations</h2>
<p>
  Documentations can be enabled and disabled in the <a href="/settings">Preferences</a>.
  Alternatively, you can enable a documentation by searching for it in the main search
  and clicking the "Enable" link in the results.
  For faster and better search, only enable the documentations you plan on actively using.
<p>
  Once a documentation is enabled, it becomes part of the search and its content can be downloaded for offline access — and faster page loads when online — in the <a href="/offline">Offline</a> area.

<h2 class="_block-heading" id="search">Search</h2>
<p>
  The search is case-insensitive and ignores whitespace. It supports fuzzy matching
  (e.g. <code class="_label">bgcp</code> matches <code class="_label">background-clip</code>)
  as well as aliases (full list <a href="#aliases">below</a>).
<dl>
  <dt id="doc_search">Searching a single documentation
  <dd>
    The search can be scoped to a single documentation by typing its name (or an abbreviation)
    and pressing <code class="_label">tab</code> (<code class="_label">space</code>&nbsp;on mobile).
    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> or
    <code class="_label">esc</code>.
  <dt id="url_search">Prefilling the search field
  <dd>
    The search 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 (or an abbreviation) 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, <a href="https://support.mozilla.org/en-US/kb/add-or-remove-search-engine-firefox#w_add-a-search-engine-from-the-address-bar">add the search from the address bar</a>:
          Click ••• in the address bar, and select <em>Add Search Engine</em>. Then, you can add a keyword for this search engine in the preferences.
</dl>
<p>
  <i>Note: the above search features only work for documentations that are enabled.</i>

<h2 class="_block-heading" id="shortcuts">Keyboard Shortcuts</h2>
<h3 class="_shortcuts-title">Sidebar</h3>
<dl class="_shortcuts-dl">
  <dt class="_shortcuts-dt">
    ${arrowScroll ? '<code class="_shortcut-code">shift</code> + ' : ""}
    <code class="_shortcut-code">&darr;</code>
    <code class="_shortcut-code">&uarr;</code>
  <dd class="_shortcuts-dd">Move selection
  <dt class="_shortcuts-dt">
    ${arrowScroll ? '<code class="_shortcut-code">shift</code> + ' : ""}
    <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">
    ${
      arrowScroll
        ? '<code class="_shortcut-code">&darr;</code> ' +
          '<code class="_shortcut-code">&uarr;</code>'
        : '<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">esc</code>
  <dd class="_shortcuts-dd">Clear search field / 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 + c</code>
  <dd class="_shortcuts-dd">Copy URL of original page
  <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
  <dt class="_shortcuts-dt">
    <code class="_shortcut-code">alt + d</code>
  <dd class="_shortcuts-dd">Search on DuckDuckGo
</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>
<div class="_aliases">
  <table>
    <tr>
      <th>Word
      <th>Alias
    ${aliases_one
      .map(
        ([key, value]) =>
          `<tr><td class=\"_code\">${key}<td class=\"_code\">${value}`,
      )
      .join("")}
  </table>
  <table>
    <tr>
      <th>Word
      <th>Alias
      ${aliases_two
        .map(
          ([key, value]) =>
            `<tr><td class=\"_code\">${key}<td class=\"_code\">${value}`,
        )
        .join("")}
  </table>
</div>
<p>Feel free to suggest new aliases on <a href="https://github.com/freeCodeCamp/devdocs/issues/new">GitHub</a>.\
`;
};