From cbfc73951bdea53eb834f01aa5ad1a79a0847109 Mon Sep 17 00:00:00 2001 From: Thibaut Courouble Date: Sun, 24 Sep 2017 12:33:20 -0400 Subject: [PATCH] Improve Help page Closes #676. --- .../templates/pages/help_tmpl.coffee | 71 +++++++++++++------ .../views/content/static_page.coffee | 2 +- assets/stylesheets/components/_content.scss | 14 ++++ views/app.erb | 2 +- 4 files changed, 66 insertions(+), 23 deletions(-) diff --git a/assets/javascripts/templates/pages/help_tmpl.coffee b/assets/javascripts/templates/pages/help_tmpl.coffee index ec18d134..3f09a9ce 100644 --- a/assets/javascripts/templates/pages/help_tmpl.coffee +++ b/assets/javascripts/templates/pages/help_tmpl.coffee @@ -1,47 +1,68 @@ -ctrlKey = if $.isMac() then 'cmd' else 'ctrl' -navKey = if $.isMac() then 'cmd' else 'alt' +app.templates.helpPage = -> + ctrlKey = if $.isMac() then 'cmd' else 'ctrl' + navKey = if $.isMac() then 'cmd' else 'alt' -app.templates.helpPage = """ + aliases_one = {} + aliases_two = {} + keys = Object.keys(app.models.Entry.ALIASES) + middle = Math.ceil(keys.length / 2) - 1 + for key, i in keys + (if i > middle then aliases_two else aliases_one)[key] = app.models.Entry.ALIASES[key] + + """ -

Help

+

User Guide

+ +

Managing Documentations

+

+ Documentations can be enabled and disabled in the Preferences. + 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. +

+ 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 Offline area.

Search

- The search is case-insensitive. It supports fuzzy matching + The search is case-insensitive and ignores whitespace. It supports fuzzy matching (e.g. bgcp matches background-clip) - and aliases (full list below). + as well as aliases (full list below).

- You can scope the search to a single documentation by typing its name (or an abbreviation) - and pressing Tab (Space on mobile devices). + The search can be scoped to a single documentation by typing its name (or an abbreviation) + and pressing tab (space on mobile). For example, to search the JavaScript documentation, enter javascript - or js, then Tab.
- To clear the current scope, empty the search field and hit Backspace. + or js, then tab.
+ To clear the current scope, empty the search field and hit backspace or + esc.
- The search field can be prefilled from the URL by visiting devdocs.io/#q=keyword. + The search can be prefilled from the URL by visiting devdocs.io/#q=keyword. Characters after #q= will be used as search query.
- To search a single documentation, add its name and a space before the keyword: + To search a single documentation, add its name (or an abbreviation) and a space before the keyword: devdocs.io/#q=js date.
DevDocs supports OpenSearch. It can easily be installed as a search engine on most web browsers:
    -
  • On Chrome, the setup is done automatically. Simply press Tab when devdocs.io is autocompleted +
  • On Chrome, the setup is done automatically. Simply press tab when devdocs.io is autocompleted in the omnibox (to set a custom keyword, click Manage search engines\u2026 in Chrome's settings).
  • On Firefox, open the search engine list (icon in the search bar) and click Add "DevDocs Search". DevDocs is now available in the search bar. You can also search from the location bar by following these instructions.
+

+ Note: the above search features only work for documentations that are enabled.

Keyboard Shortcuts

Sidebar

@@ -95,8 +116,8 @@ app.templates.helpPage = """ ctrl + ,
Open preferences
- escape -
Reset UI + esc +
Clear search field / reset UI
?
Show this page @@ -118,11 +139,19 @@ app.templates.helpPage = """ continue to type and it will refocus the search field and start showing new results.

Search Aliases

- - -
Word - Alias - #{("
#{key}#{value}" for key, value of app.models.Entry.ALIASES).join('')} -
+
+ + +
Word + Alias + #{("
#{key}#{value}" for key, value of aliases_one).join('')} +
+ + +
Word + Alias + #{("
#{key}#{value}" for key, value of aliases_two).join('')} +
+

Feel free to suggest new aliases on GitHub. """ diff --git a/assets/javascripts/views/content/static_page.coffee b/assets/javascripts/views/content/static_page.coffee index 70489bc3..d7bee725 100644 --- a/assets/javascripts/views/content/static_page.coffee +++ b/assets/javascripts/views/content/static_page.coffee @@ -4,7 +4,7 @@ class app.views.StaticPage extends app.View @titles: about: 'About' news: 'News' - help: 'Help' + help: 'User Guide' notFound: '404' deactivate: -> diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index bb86cc2f..9b8e299a 100644 --- a/assets/stylesheets/components/_content.scss +++ b/assets/stylesheets/components/_content.scss @@ -354,6 +354,20 @@ @extend %label; } +// +// Search aliases +// + +._aliases { + display: flex; + justify-content: space-between; + + > table { + margin-top: 0; + width: calc(50% - 0.5rem); + } +} + // // Utilities // diff --git a/views/app.erb b/views/app.erb index b5803b6f..7cffabd0 100644 --- a/views/app.erb +++ b/views/app.erb @@ -23,7 +23,7 @@ Preferences Offline Data Changelog - Help + Guide About