public/icons/*your_scraper_name*/ directory:
+ - [ ] `16.png`: a 16×16 pixel icon for the doc
+ - [ ] `16@2x.png`: a 32×32 pixel icon for the doc
+ - [ ] `SOURCE`: A text file containing the URL to the page the image can be found on or the URL of the original image itself
+
+
diff --git a/README.md b/README.md
index eec50904..630142d4 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,24 @@
-# [DevDocs](https://devdocs.io) [](https://travis-ci.org/freeCodeCamp/devdocs)
+# [DevDocs](https://devdocs.io) — API Documentation Browser [](https://travis-ci.org/freeCodeCamp/devdocs)
-DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
+DevDocs combines multiple developer documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more.
-* Created by [Thibaut Courouble](https://thibaut.me)
+DevDocs was created by [Thibaut Courouble](https://thibaut.me) and is operated by [freeCodeCamp](https://www.freecodecamp.org).
Keep track of development news:
* Join the contributor chat room on [Gitter](https://gitter.im/FreeCodeCamp/DevDocs)
* Watch the repository on [GitHub](https://github.com/freeCodeCamp/devdocs/subscription)
* Follow [@DevDocs](https://twitter.com/DevDocs) on Twitter
-* Join the [mailing list](https://groups.google.com/d/forum/devdocs)
-**Table of Contents:** [Quick Start](#quick-start) · [Vision](#vision) · [App](#app) · [Scraper](#scraper) · [Commands](#available-commands) · [Contributing](#contributing) · [License](#copyright--license) · [Questions?](#questions)
+**Table of Contents:** [Quick Start](#quick-start) · [Vision](#vision) · [App](#app) · [Scraper](#scraper) · [Commands](#available-commands) · [Contributing](#contributing) · [Documentation](#documentation) · [Plugins and Extensions](#plugins-and-extensions) · [License](#copyright--license) · [Questions?](#questions)
## Quick Start
-Unless you wish to contribute to the project, I recommend using the hosted version at [devdocs.io](https://devdocs.io). It's up-to-date and works offline out-of-the-box.
+Unless you wish to contribute to the project, we recommend using the hosted version at [devdocs.io](https://devdocs.io). It's up-to-date and works offline out-of-the-box.
DevDocs is made of two pieces: a Ruby scraper that generates the documentation and metadata, and a JavaScript app powered by a small Sinatra app.
-DevDocs requires Ruby 2.5.1, libcurl, and a JavaScript runtime supported by [ExecJS](https://github.com/rails/execjs#readme) (included in OS X and Windows; [Node.js](https://nodejs.org/en/) on Linux). Once you have these installed, run the following commands:
+DevDocs requires Ruby 2.6.0, libcurl, and a JavaScript runtime supported by [ExecJS](https://github.com/rails/execjs#readme) (included in OS X and Windows; [Node.js](https://nodejs.org/en/) on Linux). Once you have these installed, run the following commands:
```
git clone https://github.com/freeCodeCamp/devdocs.git && cd devdocs
@@ -60,14 +59,14 @@ The web app is all client-side JavaScript, written in [CoffeeScript](http://coff
Many of the code's design decisions were driven by the fact that the app uses XHR to load content directly into the main frame. This includes stripping the original documents of most of their HTML markup (e.g. scripts and stylesheets) to avoid polluting the main frame, and prefixing all CSS class names with an underscore to prevent conflicts.
-Another driving factor is performance and the fact that everything happens in the browser. `applicationCache` (which comes with its own set of constraints) and `localStorage` are used to speed up the boot time, while memory consumption is kept in check by allowing the user to pick his/her own set of documentations. The search algorithm is kept simple because it needs to be fast even searching through 100,000 strings.
+Another driving factor is performance and the fact that everything happens in the browser. A service worker (which comes with its own set of constraints) and `localStorage` are used to speed up the boot time, while memory consumption is kept in check by allowing the user to pick his/her own set of documentations. The search algorithm is kept simple because it needs to be fast even searching through 100,000 strings.
DevDocs being a developer tool, the browser requirements are high:
* Recent versions of Firefox, Chrome, or Opera
-* Safari 9.1+
-* Edge 16+
-* iOS 10+
+* Safari 11.1+
+* Edge 17+
+* iOS 11.3+
This allows the code to take advantage of the latest DOM and HTML5 APIs and make developing DevDocs a lot more fun!
@@ -84,12 +83,13 @@ Modifications made to each document include:
* replacing all external (not scraped) URLs with their fully qualified counterpart
* replacing all internal (scraped) URLs with their unqualified and relative counterpart
* adding content, such as a title and link to the original document
+* ensuring correct syntax highlighting using [Prism](http://prismjs.com/)
These modifications are applied via a set of filters using the [HTML::Pipeline](https://github.com/jch/html-pipeline) library. Each scraper includes filters specific to itself, one of which is tasked with figuring out the pages' metadata.
The end result is a set of normalized HTML partials and two JSON files (index + offline data). Because the index files are loaded separately by the [app](#app) following the user's preferences, the scraper also creates a JSON manifest file containing information about the documentations currently available on the system (such as their name, version, update date, etc.).
-More information about scrapers and filters is available on the [wiki](https://github.com/freeCodeCamp/devdocs/wiki).
+More information about [scrapers](./docs/scraper-reference.md) and [filters](./docs/filter-reference.md) is available in the `docs` folder.
## Available Commands
@@ -129,20 +129,45 @@ If multiple versions of Ruby are installed on your system, commands must be run
## Contributing
-Contributions are welcome. Please read the [contributing guidelines](https://github.com/freeCodeCamp/devdocs/blob/master/CONTRIBUTING.md).
-
-DevDocs's own documentation is available on the [wiki](https://github.com/freeCodeCamp/devdocs/wiki).
+Contributions are welcome. Please read the [contributing guidelines](./.github/CONTRIBUTING.md).
+
+## Documentation
+
+* [Adding documentations to DevDocs](./docs/adding-docs.md)
+* [Scraper Reference](./docs/scraper-reference.md)
+* [Filter Reference](./docs/filter-reference.md)
+* [Maintainers’ Guide](./docs/maintainers.md)
+
+## Plugins and Extensions
+
+* [Chrome web app](https://chrome.google.com/webstore/detail/devdocs/mnfehgbmkapmjnhcnbodoamcioleeooe)
+* [Ubuntu Touch app](https://uappexplorer.com/app/devdocsunofficial.berkes)
+* [Sublime Text plugin](https://sublime.wbond.net/packages/DevDocs)
+* [Atom plugin](https://atom.io/packages/devdocs)
+* [Brackets extension](https://github.com/gruehle/dev-docs-viewer)
+* [Fluid](http://fluidapp.com) for turning DevDocs into a real OS X app
+* [GTK shell / Vim integration](https://github.com/naquad/devdocs-shell)
+* [Emacs lookup](https://github.com/skeeto/devdocs-lookup)
+* [Alfred Workflow](https://github.com/yannickglt/alfred-devdocs)
+* [Vim search plugin with Devdocs in its defaults](https://github.com/waiting-for-dev/vim-www) Just set `let g:www_shortcut_engines = { 'devdocs': ['Devdocs', 'DevDocs is an API documentation browser which supports the following browsers:
- If you're unable to upgrade, I apologize. - I decided to prioritize speed and new features over support for older browsers. + If you're unable to upgrade, we apologize. + We decided to prioritize speed and new features over support for older browsers.
Note: if you're already using one of the browsers above, check your settings and add-ons. The app uses feature detection, not user agent sniffing.
- — Thibaut @DevDocs
+ — @DevDocs
"""
diff --git a/assets/javascripts/templates/notif_tmpl.coffee b/assets/javascripts/templates/notif_tmpl.coffee
index 93611a5c..0821036e 100644
--- a/assets/javascripts/templates/notif_tmpl.coffee
+++ b/assets/javascripts/templates/notif_tmpl.coffee
@@ -68,3 +68,9 @@ app.templates.notifShare = ->
app.templates.notifUpdateDocs = ->
textNotif """ Documentation updates available. """,
""" Install them as soon as possible to avoid broken pages. """
+
+app.templates.notifAnalyticsConsent = ->
+ textNotif """ Tracking cookies """,
+ """ We would like to gather usage data about how DevDocs is used through Google Analytics and Gauges. We only collect anonymous traffic information.
+ Please confirm if you accept our tracking cookies. You can always change your decision in the settings.
+
Accept or Decline """
diff --git a/assets/javascripts/templates/pages/about_tmpl.coffee b/assets/javascripts/templates/pages/about_tmpl.coffee
index e0ef245f..b09dcda9 100644
--- a/assets/javascripts/templates/pages/about_tmpl.coffee
+++ b/assets/javascripts/templates/pages/about_tmpl.coffee
@@ -11,22 +11,18 @@ app.templates.aboutPage = -> """
DevDocs combines multiple API documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more. -
DevDocs combines multiple developer documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more. +
DevDocs is free and open source. It was created by Thibaut Courouble and is operated by freeCodeCamp.
To keep up-to-date with the latest news:
- Copyright 2013–2018 Thibaut Courouble and other contributors
+ Copyright 2013–2019 Thibaut Courouble and other contributors
This software is licensed under the terms of the Mozilla Public License v2.0.
You may obtain a copy of the source code at github.com/freeCodeCamp/devdocs.
For more information, see the COPYRIGHT
@@ -48,11 +44,10 @@ app.templates.aboutPage = -> """
For anything else, feel free to email me at thibaut@devdocs.io.
ENABLE_SERVICE_WORKER environment variable to true)"
+
+ """ No. Service Workers #{reason}, so loading devdocs.io offline won't work.Thanks for downloading DevDocs. Here are a few things you should know:
thor docs:list to see all available documentations.
thor docs:download <name> to download documentations.
thor docs:download --installed to update all downloaded documentations.
Happy coding! diff --git a/assets/javascripts/templates/pages/settings_tmpl.coffee b/assets/javascripts/templates/pages/settings_tmpl.coffee index 1d439edb..94afe3df 100644 --- a/assets/javascripts/templates/pages/settings_tmpl.coffee +++ b/assets/javascripts/templates/pages/settings_tmpl.coffee @@ -15,6 +15,14 @@ app.templates.settingsPage = (settings) -> """ Automatically hide and show the sidebar Tip: drag the edge of the sidebar to resize it. + + diff --git a/assets/javascripts/tracking.js b/assets/javascripts/tracking.js index ca05b218..a68ca493 100644 --- a/assets/javascripts/tracking.js +++ b/assets/javascripts/tracking.js @@ -1,28 +1,32 @@ try { - if (app.config.env == 'production') { - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - ga('create', 'UA-5544833-12', 'devdocs.io'); - page.track(function() { - ga('send', 'pageview', { - page: location.pathname + location.search + location.hash, - dimension1: app.router.context && app.router.context.doc && app.router.context.doc.slug_without_version + if (app.config.env === 'production') { + if (Cookies.get('analyticsConsent') === '1') { + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-5544833-12', 'devdocs.io'); + page.track(function() { + ga('send', 'pageview', { + page: location.pathname + location.search + location.hash, + dimension1: app.router.context && app.router.context.doc && app.router.context.doc.slug_without_version + }); }); - }); - page.track(function() { - if (window._gauges) - _gauges.push(['track']); - else - (function() { - var _gauges=_gauges||[];!function(){var a=document.createElement("script"); - a.type="text/javascript",a.async=!0,a.id="gauges-tracker", - a.setAttribute("data-site-id","51c15f82613f5d7819000067"), - a.src="https://secure.gaug.es/track.js";var b=document.getElementsByTagName("script")[0]; - b.parentNode.insertBefore(a,b)}(); - })(); - }); + page.track(function() { + if (window._gauges) + _gauges.push(['track']); + else + (function() { + var _gauges=_gauges||[];!function(){var a=document.createElement("script"); + a.type="text/javascript",a.async=!0,a.id="gauges-tracker", + a.setAttribute("data-site-id","51c15f82613f5d7819000067"), + a.src="https://secure.gaug.es/track.js";var b=document.getElementsByTagName("script")[0]; + b.parentNode.insertBefore(a,b)}(); + })(); + }); + } else { + resetAnalytics(); + } } } catch(e) { } diff --git a/assets/javascripts/vendor/fastclick.js b/assets/javascripts/vendor/fastclick.js index 3af4f9d6..b6f7b40c 100755 --- a/assets/javascripts/vendor/fastclick.js +++ b/assets/javascripts/vendor/fastclick.js @@ -413,7 +413,7 @@ // when the user next taps anywhere else on the page, new touchstart and touchend events are dispatched // with the same identifier as the touch event that previously triggered the click that triggered the alert. // Sadly, there is an issue on iOS 4 that causes some normal touch events to have the same identifier as an - // immediately preceeding touch event (issue #52), so this fix is unavailable on that platform. + // immediately preceding touch event (issue #52), so this fix is unavailable on that platform. // Issue 120: touch.identifier is 0 when Chrome dev tools 'Emulate touch events' is set with an iOS device UA string, // which causes all touch events to be ignored. As this block only applies to iOS, and iOS identifiers are always long, // random integers, it's safe to to continue if the identifier is 0 here. @@ -805,7 +805,7 @@ } } - // IE11: prefixed -ms-touch-action is no longer supported and it's recomended to use non-prefixed version + // IE11: prefixed -ms-touch-action is no longer supported and it's recommended to use non-prefixed version // http://msdn.microsoft.com/en-us/library/windows/apps/Hh767313.aspx if (layer.style.touchAction === 'none' || layer.style.touchAction === 'manipulation') { return true; diff --git a/assets/javascripts/vendor/raven.js b/assets/javascripts/vendor/raven.js index f36c41b2..176ea361 100644 --- a/assets/javascripts/vendor/raven.js +++ b/assets/javascripts/vendor/raven.js @@ -856,7 +856,7 @@ Raven.prototype = { }, _triggerEvent: function(eventType, options) { - // NOTE: `event` is a native browser thing, so let's avoid conflicting wiht it + // NOTE: `event` is a native browser thing, so let's avoid conflicting with it var evt, key; if (!this._hasDocument) return; diff --git a/assets/javascripts/views/content/content.coffee b/assets/javascripts/views/content/content.coffee index 8c5ba874..4e01733e 100644 --- a/assets/javascripts/views/content/content.coffee +++ b/assets/javascripts/views/content/content.coffee @@ -153,6 +153,9 @@ class app.views.Content extends app.View return afterRoute: (route, context) => + if route != 'entry' and route != 'type' + resetFavicon() + switch route when 'root' @show @rootPage diff --git a/assets/javascripts/views/content/entry_page.coffee b/assets/javascripts/views/content/entry_page.coffee index beae4d77..f6f06511 100644 --- a/assets/javascripts/views/content/entry_page.coffee +++ b/assets/javascripts/views/content/entry_page.coffee @@ -40,6 +40,7 @@ class app.views.EntryPage extends app.View if app.disabledDocs.findBy 'slug', @entry.doc.slug @hiddenView = new app.views.HiddenPage @el, @entry + setFaviconForDoc(@entry.doc) @delay @polyfillMathML @trigger 'loaded' return @@ -123,7 +124,7 @@ class app.views.EntryPage extends app.View @render @tmpl('pageLoadError') @resetClass() @addClass @constructor.errorClass - app.appCache?.update() + app.serviceWorker?.update() return cache: -> diff --git a/assets/javascripts/views/content/settings_page.coffee b/assets/javascripts/views/content/settings_page.coffee index e39b17df..9ca606c6 100644 --- a/assets/javascripts/views/content/settings_page.coffee +++ b/assets/javascripts/views/content/settings_page.coffee @@ -1,7 +1,4 @@ class app.views.SettingsPage extends app.View - LAYOUTS = ['_max-width', '_sidebar-hidden', '_native-scrollbars'] - SIDEBAR_HIDDEN_LAYOUT = '_sidebar-hidden' - @className: '_static' @events: @@ -17,31 +14,31 @@ class app.views.SettingsPage extends app.View settings.dark = app.settings.get('dark') settings.smoothScroll = !app.settings.get('fastScroll') settings.arrowScroll = app.settings.get('arrowScroll') - settings[layout] = app.settings.hasLayout(layout) for layout in LAYOUTS + settings.autoInstall = app.settings.get('autoInstall') + settings.analyticsConsent = app.settings.get('analyticsConsent') + settings[layout] = app.settings.hasLayout(layout) for layout in app.settings.LAYOUTS settings getTitle: -> 'Preferences' toggleDark: (enable) -> - html = document.documentElement - html.classList.toggle('_theme-default') - html.classList.toggle('_theme-dark') app.settings.set('dark', !!enable) - app.appCache?.updateInBackground() return toggleLayout: (layout, enable) -> - document.body.classList[if enable then 'add' else 'remove'](layout) unless layout is SIDEBAR_HIDDEN_LAYOUT - document.body.classList[if $.overlayScrollbarsEnabled() then 'add' else 'remove']('_overlay-scrollbars') app.settings.setLayout(layout, enable) - app.appCache?.updateInBackground() return toggleSmoothScroll: (enable) -> app.settings.set('fastScroll', !enable) return + toggleAnalyticsConsent: (enable) -> + app.settings.set('analyticsConsent', if enable then '1' else '0') + resetAnalytics() unless enable + return + toggle: (name, enable) -> app.settings.set(name, enable) return @@ -85,6 +82,8 @@ class app.views.SettingsPage extends app.View @toggleSmoothScroll input.checked when 'import' @import input.files[0], input + when 'analyticsConsent' + @toggleAnalyticsConsent input.checked else @toggle input.name, input.checked return diff --git a/assets/javascripts/views/content/type_page.coffee b/assets/javascripts/views/content/type_page.coffee index 147fa7ed..ef360c14 100644 --- a/assets/javascripts/views/content/type_page.coffee +++ b/assets/javascripts/views/content/type_page.coffee @@ -9,6 +9,7 @@ class app.views.TypePage extends app.View render: (@type) -> @html @tmpl('typePage', @type) + setFaviconForDoc(@type.doc) return getTitle: -> diff --git a/assets/javascripts/views/layout/document.coffee b/assets/javascripts/views/layout/document.coffee index 02b98c7a..a10d0b3c 100644 --- a/assets/javascripts/views/layout/document.coffee +++ b/assets/javascripts/views/layout/document.coffee @@ -75,9 +75,11 @@ class app.views.Document extends app.View return unless target.hasAttribute('data-behavior') $.stopEvent(event) switch target.getAttribute('data-behavior') - when 'back' then history.back() - when 'reload' then window.location.reload() - when 'reboot' then app.reboot() - when 'hard-reload' then app.reload() - when 'reset' then app.reset() if confirm('Are you sure you want to reset DevDocs?') + when 'back' then history.back() + when 'reload' then window.location.reload() + when 'reboot' then app.reboot() + when 'hard-reload' then app.reload() + when 'reset' then app.reset() if confirm('Are you sure you want to reset DevDocs?') + when 'accept-analytics' then Cookies.set('analyticsConsent', '1', expires: 1e8) && app.reboot() + when 'decline-analytics' then Cookies.set('analyticsConsent', '0', expires: 1e8) && app.reboot() return diff --git a/assets/javascripts/views/layout/resizer.coffee b/assets/javascripts/views/layout/resizer.coffee index 86bb46f5..5584bfbe 100644 --- a/assets/javascripts/views/layout/resizer.coffee +++ b/assets/javascripts/views/layout/resizer.coffee @@ -11,9 +11,6 @@ class app.views.Resizer extends app.View init: -> @el.setAttribute('draggable', 'true') @appendTo $('._app') - - @style = $('style[data-resizer]') - @size = @style.getAttribute('data-size') return MIN = 260 @@ -24,15 +21,11 @@ class app.views.Resizer extends app.View return unless value > 0 value = Math.min(Math.max(Math.round(value), MIN), MAX) newSize = "#{value}px" - @style.innerHTML = @style.innerHTML.replace(new RegExp(@size, 'g'), newSize) - @size = newSize - if save - app.settings.setSize(value) - app.appCache?.updateInBackground() + document.documentElement.style.setProperty('--sidebarWidth', newSize) + app.settings.setSize(value) if save return onDragStart: (event) => - @style.removeAttribute('disabled') event.dataTransfer.effectAllowed = 'link' event.dataTransfer.setData('Text', '') $.on(window, 'dragover', @onDrag) diff --git a/assets/javascripts/views/layout/settings.coffee b/assets/javascripts/views/layout/settings.coffee index 7888118a..6941b9cd 100644 --- a/assets/javascripts/views/layout/settings.coffee +++ b/assets/javascripts/views/layout/settings.coffee @@ -25,7 +25,6 @@ class app.views.Settings extends app.View if super @render() document.body.classList.remove(SIDEBAR_HIDDEN_LAYOUT) - app.appCache?.on 'progress', @onAppCacheProgress return deactivate: -> @@ -33,7 +32,6 @@ class app.views.Settings extends app.View @resetClass() @docPicker.detach() document.body.classList.add(SIDEBAR_HIDDEN_LAYOUT) if app.settings.hasLayout(SIDEBAR_HIDDEN_LAYOUT) - app.appCache?.off 'progress', @onAppCacheProgress return render: -> @@ -52,7 +50,7 @@ class app.views.Settings extends app.View docs = @docPicker.getSelectedDocs() app.settings.setDocs(docs) - @saveBtn.textContent = if app.appCache then 'Downloading\u2026' else 'Saving\u2026' + @saveBtn.textContent = 'Saving\u2026' disabledDocs = new app.collections.Docs(doc for doc in app.docs.all() when docs.indexOf(doc.slug) is -1) disabledDocs.uninstall -> app.db.migrate() @@ -83,9 +81,3 @@ class app.views.Settings extends app.View $.stopEvent(event) app.router.show '/' return - - onAppCacheProgress: (event) => - if event.lengthComputable - percentage = Math.round event.loaded * 100 / event.total - @saveBtn.textContent = "Downloading\u2026 (#{percentage}%)" - return diff --git a/assets/javascripts/views/search/search.coffee b/assets/javascripts/views/search/search.coffee index 8fab885c..7d05f0a0 100644 --- a/assets/javascripts/views/search/search.coffee +++ b/assets/javascripts/views/search/search.coffee @@ -30,6 +30,9 @@ class app.views.Search extends app.View .on 'results', @onResults .on 'end', @onEnd + @scope + .on 'change', @onScopeChange + app.on 'ready', @onReady $.on window, 'hashchange', @searchUrl $.on window, 'focus', @onWindowFocus @@ -138,6 +141,11 @@ class app.views.Search extends app.View $.stopEvent(event) return + onScopeChange: => + @value = '' + @onInput() + return + afterRoute: (name, context) => return if app.shortcuts.eventInProgress?.name is 'escape' @reset(true) if not context.init and app.router.isIndex() diff --git a/assets/javascripts/views/search/search_scope.coffee b/assets/javascripts/views/search/search_scope.coffee index 24de57ce..52ff753a 100644 --- a/assets/javascripts/views/search/search_scope.coffee +++ b/assets/javascripts/views/search/search_scope.coffee @@ -6,7 +6,9 @@ class app.views.SearchScope extends app.View tag: '._search-tag' @events: + click: 'onClick' keydown: 'onKeydown' + textInput: 'onTextInput' @routes: after: 'afterRoute' @@ -87,17 +89,33 @@ class app.views.SearchScope extends app.View @trigger 'change', null, previousDoc return + doScopeSearch: (event) => + @search @input.value[0...@input.selectionStart] + $.stopEvent(event) if @doc + return + + onClick: (event) => + if event.target is @tag + @reset() + $.stopEvent(event) + return + onKeydown: (event) => if event.which is 8 # backspace - if @doc and not @input.value - $.stopEvent(event) + if @doc and @input.selectionEnd is 0 @reset() - else if not @doc and @input.value + $.stopEvent(event) + else if not @doc and @input.value and not $.isChromeForAndroid() return if event.ctrlKey or event.metaKey or event.altKey or event.shiftKey if event.which is 9 or # tab (event.which is 32 and app.isMobile()) # space - @search @input.value[0...@input.selectionStart] - $.stopEvent(event) if @doc + @doScopeSearch(event) + return + + onTextInput: (event) => + return unless $.isChromeForAndroid() + if not @doc and @input.value and event.data == ' ' + @doScopeSearch(event) return extractHashValue: -> diff --git a/assets/javascripts/views/sidebar/sidebar.coffee b/assets/javascripts/views/sidebar/sidebar.coffee index c8dc52a6..f3ae3bd4 100644 --- a/assets/javascripts/views/sidebar/sidebar.coffee +++ b/assets/javascripts/views/sidebar/sidebar.coffee @@ -28,7 +28,7 @@ class app.views.Sidebar extends app.View app.on 'ready', @onReady - $.on document.documentElement, 'mouseleave', (event) => @display() if event.clientX < 10 + $.on document.documentElement, 'mouseleave', (event) => @display() unless event.clientX <= 0 $.on document.documentElement, 'mouseenter', => @resetDisplay(forceNoHover: false) return diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss index fd6ffffd..4374e60c 100644 --- a/assets/stylesheets/application.css.scss +++ b/assets/stylesheets/application.css.scss @@ -1,10 +1,9 @@ -//= depend_on docs-1.png -//= depend_on docs-1@2x.png -//= depend_on docs-2.png -//= depend_on docs-2@2x.png +//= depend_on sprites/docs.png +//= depend_on sprites/docs@2x.png +//= depend_on sprites/docs.json /*! - * Copyright 2013-2018 Thibaut Courouble and other contributors + * Copyright 2013-2019 Thibaut Courouble and other contributors * * This source code is licensed under the terms of the Mozilla * Public License, v. 2.0, a copy of which may be obtained at: @@ -46,6 +45,7 @@ 'pages/coffeescript', 'pages/cordova', 'pages/crystal', + 'pages/cypress', 'pages/d', 'pages/d3', 'pages/dart', @@ -94,6 +94,7 @@ 'pages/rfc', 'pages/rubydoc', 'pages/rust', + 'pages/scala', 'pages/sinon', 'pages/socketio', 'pages/sphinx', @@ -106,5 +107,6 @@ 'pages/underscore', 'pages/vue', 'pages/webpack', + 'pages/wordpress', 'pages/yard', 'pages/yii'; diff --git a/assets/stylesheets/components/_fail.scss b/assets/stylesheets/components/_fail.scss index 535100ac..c520977e 100644 --- a/assets/stylesheets/components/_fail.scss +++ b/assets/stylesheets/components/_fail.scss @@ -32,5 +32,3 @@ } ._fail-text:last-child { margin: 0; } - -._fail-link { float: right; } diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss index 5bae8901..e74830aa 100644 --- a/assets/stylesheets/components/_header.scss +++ b/assets/stylesheets/components/_header.scss @@ -215,5 +215,6 @@ color: var(--textColorLight); background: var(--searchTagBackground); border-radius: 2px; + cursor: pointer; @extend %truncate-text; } diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss index dd23c43a..f0880fdd 100644 --- a/assets/stylesheets/components/_notif.scss +++ b/assets/stylesheets/components/_notif.scss @@ -134,3 +134,7 @@ ._notif-info { color: var(--textColorLight); } } + +._notif-right { + float: right; +} diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss deleted file mode 100644 index e7a805f4..00000000 --- a/assets/stylesheets/global/_icons.scss +++ /dev/null @@ -1,182 +0,0 @@ -%svg-icon { - display: inline-block; - vertical-align: top; - width: 1rem; - height: 1rem; - pointer-events: none; - fill: currentColor; -} - -%doc-icon { - content: ''; - display: block; - width: 1rem; - height: 1rem; - background-image: image-url('docs-1.png'); - background-size: 10rem 10rem; -} - -%doc-icon-2 { background-image: image-url('docs-2.png') !important; } - -@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { - %doc-icon { background-image: image-url('docs-1@2x.png'); } - %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; } -} - -html._theme-dark { - %darkIconFix { - filter: invert(100%) grayscale(100%); - -webkit-filter: invert(100%) grayscale(100%); - } -} - -._icon-jest:before { background-position: 0 0; } -._icon-liquid:before { background-position: -1rem 0; } -._icon-openjdk:before { background-position: -2rem 0; } -._icon-codeceptjs:before { background-position: -3rem 0; } -._icon-codeception:before { background-position: -4rem 0; } -._icon-sqlite:before { background-position: -5rem 0; @extend %darkIconFix !optional; } -._icon-async:before { background-position: -6rem 0; @extend %darkIconFix !optional; } -._icon-http:before { background-position: -7rem 0; @extend %darkIconFix !optional; } -._icon-jquery:before { background-position: -8rem 0; @extend %darkIconFix !optional; } -._icon-underscore:before { background-position: -9rem 0; @extend %darkIconFix !optional; } -._icon-html:before { background-position: 0 -1rem; } -._icon-css:before { background-position: -1rem -1rem; } -._icon-dom:before { background-position: -2rem -1rem; } -._icon-dom_events:before { background-position: -3rem -1rem; } -._icon-javascript:before { background-position: -4rem -1rem; } -._icon-backbone:before { background-position: -5rem -1rem; @extend %darkIconFix !optional; } -._icon-node:before, -._icon-node_lts:before { background-position: -6rem -1rem; } -._icon-sass:before { background-position: -7rem -1rem; } -._icon-less:before { background-position: -8rem -1rem; } -._icon-angularjs:before { background-position: -9rem -1rem; } -._icon-coffeescript:before { background-position: 0 -2rem; @extend %darkIconFix !optional; } -._icon-ember:before { background-position: -1rem -2rem; } -._icon-yarn:before { background-position: -2rem -2rem; } -._icon-immutable:before { background-position: -3rem -2rem; @extend %darkIconFix !optional; } -._icon-jqueryui:before { background-position: -4rem -2rem; } -._icon-jquerymobile:before { background-position: -5rem -2rem; } -._icon-lodash:before { background-position: -6rem -2rem; } -._icon-php:before { background-position: -7rem -2rem; } -._icon-ruby:before, -._icon-minitest:before { background-position: -8rem -2rem; } -._icon-rails:before { background-position: -9rem -2rem; } -._icon-python:before, -._icon-python2:before { background-position: 0 -3rem; } -._icon-git:before { background-position: -1rem -3rem; } -._icon-redis:before { background-position: -2rem -3rem; } -._icon-postgresql:before { background-position: -3rem -3rem; } -._icon-d3:before { background-position: -4rem -3rem; } -._icon-knockout:before { background-position: -5rem -3rem; } -._icon-moment:before { background-position: -6rem -3rem; @extend %darkIconFix !optional; } -._icon-c:before { background-position: -7rem -3rem; } -._icon-statsmodels:before { background-position: -8rem -3rem; } -._icon-yii:before, -._icon-yii1:before { background-position: -9rem -3rem; } -._icon-cpp:before { background-position: 0 -4rem; } -._icon-go:before { background-position: -1rem -4rem; } -._icon-express:before { background-position: -2rem -4rem; } -._icon-grunt:before { background-position: -3rem -4rem; } -._icon-rust:before { background-position: -4rem -4rem; @extend %darkIconFix !optional; } -._icon-laravel:before { background-position: -5rem -4rem; } -._icon-haskell:before { background-position: -6rem -4rem; } -._icon-requirejs:before { background-position: -7rem -4rem; } -._icon-chai:before { background-position: -8rem -4rem; } -._icon-sinon:before { background-position: -9rem -4rem; } -._icon-cordova:before { background-position: 0 -5rem; } -._icon-markdown:before { background-position: -1rem -5rem; @extend %darkIconFix !optional; } -._icon-django:before { background-position: -2rem -5rem; } -._icon-xslt_xpath:before { background-position: -3rem -5rem; } -._icon-nginx:before, -._icon-nginx_lua_module:before { background-position: -4rem -5rem; } -._icon-svg:before { background-position: -5rem -5rem; } -._icon-marionette:before { background-position: -6rem -5rem; } -._icon-jsdoc:before, -._icon-koa:before, -._icon-graphite:before, -._icon-mongoose:before { background-position: -7rem -5rem; } -._icon-phpunit:before { background-position: -8rem -5rem; } -._icon-nokogiri:before { background-position: -9rem -5rem; @extend %darkIconFix !optional; } -._icon-rethinkdb:before { background-position: 0 -6rem; } -._icon-react:before { background-position: -1rem -6rem; } -._icon-socketio:before { background-position: -2rem -6rem; } -._icon-modernizr:before { background-position: -3rem -6rem; } -._icon-bower:before { background-position: -4rem -6rem; } -._icon-fish:before { background-position: -5rem -6rem; @extend %darkIconFix !optional; } -._icon-scikit_image:before { background-position: -6rem -6rem; } -._icon-twig:before { background-position: -7rem -6rem; } -._icon-pandas:before { background-position: -8rem -6rem; } -._icon-scikit_learn:before { background-position: -9rem -6rem; } -._icon-bottle:before { background-position: 0 -7rem; } -._icon-docker:before { background-position: -1rem -7rem; } -._icon-cakephp:before { background-position: -2rem -7rem; } -._icon-lua:before { background-position: -3rem -7rem; @extend %darkIconFix !optional; } -._icon-clojure:before { background-position: -4rem -7rem; } -._icon-symfony:before { background-position: -5rem -7rem; } -._icon-mocha:before { background-position: -6rem -7rem; } -._icon-meteor:before { background-position: -7rem -7rem; @extend %darkIconFix !optional; } -._icon-npm:before { background-position: -8rem -7rem; } -._icon-apache_http_server:before { background-position: -9rem -7rem; } -._icon-drupal:before { background-position: 0 -8rem; } -._icon-webpack:before { background-position: -1rem -8rem; } -._icon-phaser:before { background-position: -2rem -8rem; } -._icon-vue:before { background-position: -3rem -8rem; } -._icon-opentsdb:before { background-position: -4rem -8rem; } -._icon-q:before { background-position: -5rem -8rem; } -._icon-crystal:before { background-position: -6rem -8rem; @extend %darkIconFix !optional; } -._icon-julia:before { background-position: -7rem -8rem; @extend %darkIconFix !optional; } -._icon-redux:before { background-position: -8rem -8rem; @extend %darkIconFix !optional; } -._icon-bootstrap:before { background-position: -9rem -8rem; } -._icon-react_native:before { background-position: 0 -9rem; } -._icon-phalcon:before { background-position: -1rem -9rem; } -._icon-matplotlib:before { background-position: -2rem -9rem; } -._icon-cmake:before { background-position: -3rem -9rem; } -._icon-elixir:before { background-position: -4rem -9rem; @extend %darkIconFix !optional; } -._icon-vagrant:before { background-position: -5rem -9rem; } -._icon-dojo:before { background-position: -6rem -9rem; } -._icon-flow:before { background-position: -7rem -9rem; } -._icon-relay:before { background-position: -8rem -9rem; } -._icon-phoenix:before { background-position: -9rem -9rem; } - -._icon-tcl_tk:before { background-position: 0 0; @extend %doc-icon-2; } -._icon-erlang:before { background-position: -1rem 0; @extend %doc-icon-2; } -._icon-chef:before { background-position: -2rem 0; @extend %doc-icon-2; } -._icon-ramda:before { background-position: -3rem 0; @extend %doc-icon-2; @extend %darkIconFix !optional; } -._icon-codeigniter:before { background-position: -4rem 0; @extend %doc-icon-2; @extend %darkIconFix !optional; } -._icon-influxdata:before { background-position: -5rem 0; @extend %doc-icon-2; @extend %darkIconFix !optional; } -._icon-tensorflow:before { background-position: -6rem 0; @extend %doc-icon-2; } -._icon-haxe:before { background-position: -7rem 0; @extend %doc-icon-2; } -._icon-ansible:before { background-position: -8rem 0; @extend %doc-icon-2; @extend %darkIconFix !optional; } -._icon-typescript:before { background-position: -9rem 0; @extend %doc-icon-2; } -._icon-browser_support_tables:before { background-position: 0rem -1rem; @extend %doc-icon-2; } -._icon-gnu_fortran:before { background-position: -1rem -1rem; @extend %doc-icon-2; } -._icon-gcc:before { background-position: -2rem -1rem; @extend %doc-icon-2; } -._icon-perl:before { background-position: -3rem -1rem; @extend %doc-icon-2; } -._icon-apache_pig:before { background-position: -4rem -1rem; @extend %doc-icon-2; } -._icon-numpy:before { background-position: -5rem -1rem; @extend %doc-icon-2; } -._icon-kotlin:before { background-position: -6rem -1rem; @extend %doc-icon-2; } -._icon-padrino:before { background-position: -7rem -1rem; @extend %doc-icon-2; } -._icon-angular:before { background-position: -8rem -1rem; @extend %doc-icon-2; } -._icon-love:before { background-position: -9rem -1rem; @extend %doc-icon-2; } -._icon-jasmine:before { background-position: 0 -2rem; @extend %doc-icon-2; } -._icon-pug:before { background-position: -1rem -2rem; @extend %doc-icon-2; } -._icon-electron:before { background-position: -2rem -2rem; @extend %doc-icon-2; } -._icon-falcon:before { background-position: -3rem -2rem; @extend %doc-icon-2; } -._icon-godot:before { background-position: -4rem -2rem; @extend %doc-icon-2; } -._icon-nim:before { background-position: -5rem -2rem; @extend %doc-icon-2; @extend %darkIconFix !optional; } -._icon-vulkan:before { background-position: -6rem -2rem; @extend %doc-icon-2; @extend %darkIconFix !optional; } -._icon-d:before { background-position: -7rem -2rem; @extend %doc-icon-2; } -._icon-bluebird:before { background-position: -8rem -2rem; @extend %doc-icon-2; } -._icon-eslint:before { background-position: -9rem -2rem; @extend %doc-icon-2; } -._icon-homebrew:before { background-position: 0 -3rem; @extend %doc-icon-2; } -._icon-jekyll:before { background-position: -1rem -3rem; @extend %doc-icon-2; } -._icon-babel:before { background-position: -2rem -3rem; @extend %doc-icon-2; } -._icon-leaflet:before { background-position: -3rem -3rem; @extend %doc-icon-2; } -._icon-terraform:before { background-position: -4rem -3rem; @extend %doc-icon-2; } -._icon-pygame:before { background-position: -5rem -3rem; @extend %doc-icon-2; } -._icon-bash:before { background-position: -6rem -3rem; @extend %doc-icon-2; } -._icon-dart:before { background-position: -7rem -3rem; @extend %doc-icon-2; } -._icon-qt:before { background-position: -8rem -3rem; @extend %doc-icon-2; } -._icon-puppeteer:before { background-position: -9rem -3rem; @extend %doc-icon-2; } -._icon-handlebars:before { background-position: 0 -4rem; @extend %doc-icon-2; @extend %darkIconFix !optional; } diff --git a/assets/stylesheets/global/_icons.scss.erb b/assets/stylesheets/global/_icons.scss.erb new file mode 100644 index 00000000..b2b22c22 --- /dev/null +++ b/assets/stylesheets/global/_icons.scss.erb @@ -0,0 +1,43 @@ +<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %> + +%svg-icon { + display: inline-block; + vertical-align: top; + width: 1rem; + height: 1rem; + pointer-events: none; + fill: currentColor; +} + +%doc-icon { + content: ''; + display: block; + width: 1rem; + height: 1rem; + background-image: image-url('sprites/docs.png'); + background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem; +} + +@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { + %doc-icon { background-image: image-url('sprites/docs@2x.png'); } +} + +html._theme-dark { + %darkIconFix { + filter: invert(100%) grayscale(100%); + -webkit-filter: invert(100%) grayscale(100%); + } +} + +<%= + items = [] + + manifest['items'].each do |item| + rules = [] + rules << "background-position: -#{item['col']}rem -#{item['row']}rem;" + rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix'] + items << "._icon-#{item['type']}:before { #{rules.join(' ')} }" + end + + items.join('') + %> diff --git a/assets/stylesheets/pages/_cypress.scss b/assets/stylesheets/pages/_cypress.scss new file mode 100644 index 00000000..aa1108d2 --- /dev/null +++ b/assets/stylesheets/pages/_cypress.scss @@ -0,0 +1,21 @@ +._cypress { + @extend %simple; + + .note { + h1 { + margin-left: inherit + } + + &.danger { + @extend %note-red + } + + &.info { + @extend %note-blue + } + + &.success { + @extend %note-green + } + } +} diff --git a/assets/stylesheets/pages/_mdn.scss b/assets/stylesheets/pages/_mdn.scss index d2b9b643..fb2cce38 100644 --- a/assets/stylesheets/pages/_mdn.scss +++ b/assets/stylesheets/pages/_mdn.scss @@ -30,6 +30,7 @@ .notice, .warning, .overheadIndicator, + .blockIndicator, .syntaxbox, // CSS, JavaScript .twopartsyntaxbox, // CSS .inheritsbox, // JavaScript @@ -104,4 +105,28 @@ .cleared { clear: both; } // CSS/box-shadow code > strong { font-weight: normal; } + + // Compatibility tablees + + .bc-github-link { + float: right; + font-size: .75rem; + } + + .bc-supports-yes, .bc-supports-yes + dd, .bc-supports-yes + dd + dd { background: var(--noteGreenBackground); } + .bc-supports-partial, .bc-supports-partial + dd, .bc-supports-partial + dd + dd { background: var(--noteOrangeBackground); } + .bc-supports-no, .bc-supports-no + dd, .bc-supports-no + dd + dd { background: var(--noteRedBackground); } + + .bc-table { + min-width: 100%; + + dl { + margin: .25rem 0 0; + padding: .25rem 0 0; + font-size: .75rem; + border-top: 1px solid var(--boxBorder); + } + + dd { margin: 0; } + } } diff --git a/assets/stylesheets/pages/_rdoc.scss b/assets/stylesheets/pages/_rdoc.scss index 7873900a..6622e68e 100644 --- a/assets/stylesheets/pages/_rdoc.scss +++ b/assets/stylesheets/pages/_rdoc.scss @@ -33,19 +33,8 @@ } } - .method-description { position: relative; } - .method-source-code { display: none; - position: absolute; - z-index: 1; - top: 0; - left: -1em; - right: 0; - background: var(--contentBackground); - box-shadow: 0 1em 1em 1em var(--contentBackground); - - > pre { margin: 0; } } // Rails guides diff --git a/assets/stylesheets/pages/_scala.scss b/assets/stylesheets/pages/_scala.scss new file mode 100644 index 00000000..b2beb118 --- /dev/null +++ b/assets/stylesheets/pages/_scala.scss @@ -0,0 +1,4 @@ +._scala { + @extend %simple; + .deprecated { @extend %label-red; } +} diff --git a/assets/stylesheets/pages/_wordpress.scss b/assets/stylesheets/pages/_wordpress.scss new file mode 100644 index 00000000..1da15abd --- /dev/null +++ b/assets/stylesheets/pages/_wordpress.scss @@ -0,0 +1,15 @@ +._wordpress { + @extend %simple; + + .breadcrumbs { + display: none; + } + + .callout-warning { + @extend %note, %note-red; + } + + .callout-alert { + @extend %note, %note-orange; + } +} \ No newline at end of file diff --git a/docs/adding-docs.md b/docs/adding-docs.md new file mode 100644 index 00000000..9984a15c --- /dev/null +++ b/docs/adding-docs.md @@ -0,0 +1,24 @@ +Adding a documentation may look like a daunting task but once you get the hang of it, it's actually quite simple. Don't hesitate to ask for help [in Gitter](https://gitter.im/FreeCodeCamp/DevDocs) if you ever get stuck. + +**Note:** please read the [contributing guidelines](../.github/CONTRIBUTING.md) before submitting a new documentation. + +1. Create a subclass of `Docs::UrlScraper` or `Docs::FileScraper` in the `lib/docs/scrapers/` directory. Its name should be the [PascalCase](http://api.rubyonrails.org/classes/String.html#method-i-camelize) equivalent of the filename (e.g. `my_doc` → `MyDoc`) +2. Add the appropriate class attributes and filter options (see the [Scraper Reference](./scraper-reference.md) page). +3. Check that the scraper is listed in `thor docs:list`. +4. Create filters specific to the scraper in the `lib/docs/filters/[my_doc]/` directory and add them to the class's [filter stacks](./scraper-reference.md#filter-stacks). You may create any number of filters but will need at least the following two: + * A [`CleanHtml`](./filter-reference.md#cleanhtmlfilter) filter whose task is to clean the HTML markup (e.g. adding `id` attributes to headings) and remove everything superfluous and/or nonessential. + * An [`Entries`](./filter-reference.md#entriesfilter) filter whose task is to determine the pages' metadata (the list of entries, each with a name, type and path). + The [Filter Reference](./filter-reference.md) page has all the details about filters. +5. Using the `thor docs:page [my_doc] [path]` command, check that the scraper works properly. Files will appear in the `public/docs/[my_doc]/` directory (but not inside the app as the command doesn't touch the index). `path` in this case refers to either the remote path (if using `UrlScraper`) or the local path (if using `FileScraper`). +6. Generate the full documentation using the `thor docs:generate [my_doc] --force` command. Additionally, you can use the `--verbose` option to see which files are being created/updated/deleted (useful to see what changed since the last run), and the `--debug` option to see which URLs are being requested and added to the queue (useful to pin down which page adds unwanted URLs to the queue). +7. Start the server, open the app, enable the documentation, and see how everything plays out. +8. Tweak the scraper/filters and repeat 5) and 6) until the pages and metadata are ok. +9. To customize the pages' styling, create an SCSS file in the `assets/stylesheets/pages/` directory and import it in both `application.css.scss` AND `application-dark.css.scss`. Both the file and CSS class should be named `_[type]` where [type] is equal to the scraper's `type` attribute (documentations with the same type share the same custom CSS and JS). Setting the type to `simple` will apply the general styling rules in `assets/stylesheets/pages/_simple.scss`, which can be used for documentations where little to no CSS changes are needed. +10. To add syntax highlighting or execute custom JavaScript on the pages, create a file in the `assets/javascripts/views/pages/` directory (take a look at the other files to see how it works). +11. Add the documentation's icon in the `public/icons/docs/[my_doc]/` directory, in both 16x16 and 32x32-pixels formats. The icon spritesheet is automatically generated when you (re)start your local DevDocs instance. +12. Add the documentation's copyright details to the list in `assets/javascripts/templates/pages/about_tmpl.coffee`. This is the data shown in the table on the [about](https://devdocs.io/about) page, and is ordered alphabetically. Simply copying an existing item, placing it in the right slot and updating the values to match the new scraper will do the job. +13. Ensure `thor updates:check [my_doc]` shows the correct latest version. + +If the documentation includes more than a few hundreds pages and is available for download, try to scrape it locally (e.g. using `FileScraper`). It'll make the development process much faster and avoids putting too much load on the source site. (It's not a problem if your scraper is coupled to your local setup, just explain how it works in your pull request.) + +Finally, try to document your scraper and filters' behavior as much as possible using comments (e.g. why some URLs are ignored, HTML markup removed, metadata that way, etc.). It'll make updating the documentation much easier. diff --git a/docs/filter-reference.md b/docs/filter-reference.md new file mode 100644 index 00000000..f5c74c66 --- /dev/null +++ b/docs/filter-reference.md @@ -0,0 +1,224 @@ +**Table of contents:** + +* [Overview](#overview) +* [Instance methods](#instance-methods) +* [Core filters](#core-filters) +* [Custom filters](#custom-filters) + - [CleanHtmlFilter](#cleanhtmlfilter) + - [EntriesFilter](#entriesfilter) + +## Overview + +Filters use the [HTML::Pipeline](https://github.com/jch/html-pipeline) library. They take an HTML string or [Nokogiri](http://nokogiri.org/) node as input, optionally perform modifications and/or extract information from it, and then outputs the result. Together they form a pipeline where each filter hands its output to the next filter's input. Every documentation page passes through this pipeline before being copied on the local filesystem. + +Filters are subclasses of the [`Docs::Filter`](https://github.com/Thibaut/devdocs/blob/master/lib/docs/core/filter.rb) class and require a `call` method. A basic implementation looks like this: + +```ruby +module Docs + class CustomFilter < Filter + def call + doc + end + end +end +``` + +Filters which manipulate the Nokogiri node object (`doc` and related methods) are _HTML filters_ and must not manipulate the HTML string (`html`). Vice-versa, filters which manipulate the string representation of the document are _text filters_ and must not manipulate the Nokogiri node object. The two types are divided into two stacks within the scrapers. These stacks are then combined into a pipeline that calls the HTML filters before the text filters (more details [here](./scraper-reference.md#filter-stacks)). This is to avoid parsing the document multiple times. + +The `call` method must return either `doc` or `html`, depending on the type of filter. + +## Instance methods + +* `doc` [Nokogiri::XML::Node] + The Nokogiri representation of the container element. + See [Nokogiri's API docs](http://www.rubydoc.info/github/sparklemotion/nokogiri/Nokogiri/XML/Node) for the list of available methods. + +* `html` [String] + The string representation of the container element. + +* `context` [Hash] **(frozen)** + The scraper's `options` along with a few additional keys: `:base_url`, `:root_url`, `:root_page` and `:url`. + +* `result` [Hash] + Used to store the page's metadata and pass back information to the scraper. + Possible keys: + + - `:path` — the page's normalized path + - `:store_path` — the path where the page will be stored (equal to `:path` with `.html` at the end) + - `:internal_urls` — the list of distinct internal URLs found within the page + - `:entries` — the [`Entry`](https://github.com/Thibaut/devdocs/blob/master/lib/docs/core/models/entry.rb) objects to add to the index + +* `css`, `at_css`, `xpath`, `at_xpath` + Shortcuts for `doc.css`, `doc.xpath`, etc. + +* `base_url`, `current_url`, `root_url` [Docs::URL] + Shortcuts for `context[:base_url]`, `context[:url]`, and `context[:root_url]` respectively. + +* `root_path` [String] + Shortcut for `context[:root_path]`. + +* `subpath` [String] + The sub-path from the base URL of the current URL. + _Example: if `base_url` equals `example.com/docs` and `current_url` equals `example.com/docs/file?raw`, the returned value is `/file`._ + +* `slug` [String] + The `subpath` removed of any leading slash or `.html` extension. + _Example: if `subpath` equals `/dir/file.html`, the returned value is `dir/file`._ + +* `root_page?` [Boolean] + Returns `true` if the current page is the root page. + +* `initial_page?` [Boolean] + Returns `true` if the current page is the root page or its subpath is one of the scraper's `initial_paths`. + +## Core filters + +* [`ContainerFilter`](https://github.com/Thibaut/devdocs/blob/master/lib/docs/filters/core/container.rb) — changes the root node of the document (remove everything outside) +* [`CleanHtmlFilter`](https://github.com/Thibaut/devdocs/blob/master/lib/docs/filters/core/clean_html.rb) — removes HTML comments, `