diff --git a/.editorconfig b/.editorconfig index 73db316c..03c17bf8 100644 --- a/.editorconfig +++ b/.editorconfig @@ -6,3 +6,6 @@ indent_style = space indent_size = 2 insert_final_newline = true trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/CONTRIBUTING.md b/.github/CONTRIBUTING.md similarity index 76% rename from CONTRIBUTING.md rename to .github/CONTRIBUTING.md index bdb36d55..d2317ab5 100644 --- a/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -24,20 +24,18 @@ Want to contribute? Great. Please review the following guidelines carefully and ## Requesting new features 1. Search for similar feature requests; someone may have already requested it. -2. Make sure your feature fits DevDocs's [vision](https://github.com/freeCodeCamp/devdocs/blob/master/README.md#vision). +2. Make sure your feature fits DevDocs's [vision](../README.md#vision). 3. Provide a clear and detailed explanation of the feature and why it's important to add it. -For general feedback and ideas, please use the [mailing list](https://groups.google.com/d/forum/devdocs). - ## Requesting new documentations -Please don't open issues to request new documentations. +Please don't open issues to request new documentations. Use the [Trello board](https://trello.com/b/6BmTulfx/devdocs-documentation) where everyone can vote. ## Contributing code and features 1. Search for existing issues; someone may already be working on a similar feature. -2. Before embarking on any significant pull request, please open an issue describing the changes you intend to make. Otherwise you risk spending a lot of time working on something I may not want to merge. This also tells other contributors that you're working on the feature. +2. Before embarking on any significant pull request, please open an issue describing the changes you intend to make. Otherwise you risk spending a lot of time working on something we may not want to merge. This also tells other contributors that you're working on the feature. 3. Follow the [coding conventions](#coding-conventions). 4. If you're modifying the Ruby code, include tests and ensure they pass. 5. Try to keep your pull request small and simple. @@ -46,7 +44,7 @@ Use the [Trello board](https://trello.com/b/6BmTulfx/devdocs-documentation) wher ## Contributing new documentations -See the [wiki](https://github.com/freeCodeCamp/devdocs/wiki) to learn how to add new documentations. +See the [`docs` folder](https://github.com/freeCodeCamp/devdocs/tree/master/docs) to learn how to add new documentations. **Important:** the documentation's license must permit alteration, redistribution and commercial use, and the documented software must be released under an open source license. Feel free to get in touch if you're not sure if a documentation meets those requirements. @@ -65,13 +63,6 @@ Please don't submit a pull request updating the version number of a documentatio To ask that an existing documentation be updated, please use the [Trello board](https://trello.com/c/2B0hmW7M/52-request-updates-here). -## Other contributions - -Besides new docs and features, here are other ways you can contribute: - -* **Improve our copy.** English isn't my first language so if you notice grammatical or usage errors, feel free to submit a pull request — it'll be much appreciated. -* **Participate in the issue tracker.** Your opinion matters — feel free to add comments to existing issues. You're also welcome to participate to the [mailing list](https://groups.google.com/d/forum/devdocs). - ## Coding conventions * two spaces; no tabs @@ -80,4 +71,4 @@ Besides new docs and features, here are other ways you can contribute: ## Questions? -If you have any questions, please feel free to ask on the [mailing list](https://groups.google.com/d/forum/devdocs). +If you have any questions, please feel free to ask them on the contributor chat room on [Gitter](https://gitter.im/FreeCodeCamp/DevDocs). diff --git a/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md similarity index 73% rename from ISSUE_TEMPLATE.md rename to .github/ISSUE_TEMPLATE.md index 4b173394..807f88e0 100644 --- a/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,6 +1,6 @@ +- [ ] Added these files to the 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 119c6fe1..630142d4 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,24 @@ -# [DevDocs](https://devdocs.io) [![Build Status](https://travis-ci.org/freeCodeCamp/devdocs.svg?branch=master)](https://travis-ci.org/freeCodeCamp/devdocs) +# [DevDocs](https://devdocs.io) — API Documentation Browser [![Build Status](https://travis-ci.org/freeCodeCamp/devdocs.svg?branch=master)](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,18 +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: -1. On the desktop: - * Recent version of Chrome, Firefox, or Opera - * Safari 8+ - * IE / Edge 10+ -2. On mobile: - * iOS 8+ - * Android 4.1+ - * Windows Phone 8+ +* Recent versions of Firefox, Chrome, or Opera +* 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! @@ -88,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 @@ -133,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', 'dd'] }` to have a `:Devdocs` command and a `dd` mapping. +* [Visual Studio Code plugin](https://marketplace.visualstudio.com/items?itemName=akfish.vscode-devdocs ) (1) +* [Visual Studio Code plugin](https://marketplace.visualstudio.com/items?itemName=deibit.devdocs) (2) +* [Desktop application](https://github.com/egoist/devdocs-desktop) +* [Doc Browser](https://github.com/qwfy/doc-browser) is a native Linux app that supports DevDocs docsets +* [GNOME Application](https://github.com/hardpixel/devdocs-desktop) GTK3 application with search integrated in headerbar +* [macOS Application](https://github.com/dteoh/devdocs-macos) +* [Android Application](https://github.com/Merith-TK/devdocs_webapp_kotlin) is a fully working, advanced WebView ## Copyright / License -Copyright 2013-2018 Thibaut Courouble and [other contributors](https://github.com/freeCodeCamp/devdocs/graphs/contributors) +Copyright 2013-2019 Thibaut Courouble and [other contributors](https://github.com/freeCodeCamp/devdocs/graphs/contributors) -This software is licensed under the terms of the Mozilla Public License v2.0. See the [COPYRIGHT](https://github.com/freeCodeCamp/devdocs/blob/master/COPYRIGHT) and [LICENSE](https://github.com/freeCodeCamp/devdocs/blob/master/LICENSE) files. +This software is licensed under the terms of the Mozilla Public License v2.0. See the [COPYRIGHT](./COPYRIGHT) and [LICENSE](./LICENSE) files. -Please do not use the name DevDocs to endorse or promote products derived from this software without my permission, except as may be necessary to comply with the notice/attribution requirements. +Please do not use the name DevDocs to endorse or promote products derived from this software without the maintainers' permission, except as may be necessary to comply with the notice/attribution requirements. -I also wish that any documentation file generated using this software be attributed to DevDocs. Let's be fair to all contributors by giving credit where credit's due. Thanks! +We also wish that any documentation file generated using this software be attributed to DevDocs. Let's be fair to all contributors by giving credit where credit's due. Thanks! ## Questions? -If you have any questions, please feel free to ask them on the [mailing list](https://groups.google.com/d/forum/devdocs). +If you have any questions, please feel free to ask them on the contributor chat room on [Gitter](https://gitter.im/FreeCodeCamp/DevDocs). diff --git a/Rakefile b/Rakefile index 3904cbd7..705c6ec1 100644 --- a/Rakefile +++ b/Rakefile @@ -3,6 +3,7 @@ require 'bundler/setup' require 'thor' +Bundler.require :default $LOAD_PATH.unshift 'lib' task :default do @@ -13,6 +14,9 @@ end namespace :assets do desc 'Compile all assets' task :precompile do + load 'tasks/docs.thor' + DocsCLI.new.prepare_deploy + load 'tasks/assets.thor' AssetsCLI.new.compile end diff --git a/assets/images/docs-2.png b/assets/images/docs-2.png index 2af0f5b9..bd9d44a8 100644 Binary files a/assets/images/docs-2.png and b/assets/images/docs-2.png differ diff --git a/assets/images/docs-2@2x.png b/assets/images/docs-2@2x.png index c781b248..512ea7a5 100644 Binary files a/assets/images/docs-2@2x.png and b/assets/images/docs-2@2x.png differ diff --git a/assets/javascripts/app/app.coffee b/assets/javascripts/app/app.coffee index eb92b595..1e230368 100644 --- a/assets/javascripts/app/app.coffee +++ b/assets/javascripts/app/app.coffee @@ -13,10 +13,12 @@ @el = $('._app') @localStorage = new LocalStorageStore - @appCache = new app.AppCache if app.AppCache.isEnabled() + @serviceWorker = new app.ServiceWorker if app.ServiceWorker.isEnabled() @settings = new app.Settings @db = new app.DB() + @settings.initLayout() + @docs = new app.collections.Docs @disabledDocs = new app.collections.Docs @entries = new app.collections.Entries @@ -150,7 +152,7 @@ saveDocs: -> @settings.setDocs(doc.slug for doc in @docs.all()) @db.migrate() - @appCache?.updateInBackground() + @serviceWorker?.updateInBackground() welcomeBack: -> visitCount = @settings.get('count') @@ -160,17 +162,24 @@ new app.views.Updates() @updateChecker = new app.UpdateChecker() + reboot: -> + if location.pathname isnt '/' and location.pathname isnt '/settings' + window.location = "/##{location.pathname}" + else + window.location = '/' + return + reload: -> @docs.clearCache() @disabledDocs.clearCache() - if @appCache then @appCache.reload() else window.location = '/' + if @serviceWorker then @serviceWorker.reload() else @reboot() return reset: -> @localStorage.reset() @settings.reset() @db?.reset() - @appCache?.update() + @serviceWorker?.update() window.location = '/' return @@ -189,9 +198,9 @@ return indexHost: -> - # Can't load the index files from the host/CDN when applicationCache is + # Can't load the index files from the host/CDN when service worker is # enabled because it doesn't support caching URLs that use CORS. - @config[if @appCache and @settings.hasDocs() then 'index_path' else 'docs_origin'] + @config[if @serviceWorker and @settings.hasDocs() then 'index_path' else 'docs_origin'] onBootError: (args...) -> @trigger 'bootError' @@ -248,7 +257,7 @@ matchMedia: !!window.matchMedia insertAdjacentHTML: !!document.body.insertAdjacentHTML defaultPrevented: document.createEvent('CustomEvent').defaultPrevented is false - cssGradients: supportsCssGradients() + cssVariables: !!CSS?.supports?('(--t: 0)') for key, value of features when not value Raven.captureMessage "unsupported/#{key}", level: 'info' @@ -271,9 +280,4 @@ isInvalidLocation: -> @config.env is 'production' and location.host.indexOf(app.config.production_host) isnt 0 -supportsCssGradients = -> - el = document.createElement('div') - el.style.cssText = "background-image: -webkit-linear-gradient(top, #000, #fff); background-image: linear-gradient(to top, #000, #fff);" - el.style.backgroundImage.indexOf('gradient') >= 0 - $.extend app, Events diff --git a/assets/javascripts/app/appcache.coffee b/assets/javascripts/app/appcache.coffee deleted file mode 100644 index d2606ab1..00000000 --- a/assets/javascripts/app/appcache.coffee +++ /dev/null @@ -1,42 +0,0 @@ -class app.AppCache - $.extend @prototype, Events - - @isEnabled: -> - try - applicationCache and applicationCache.status isnt applicationCache.UNCACHED - catch - - constructor: -> - @cache = applicationCache - @notifyUpdate = true - @onUpdateReady() if @cache.status is @cache.UPDATEREADY - - $.on @cache, 'progress', @onProgress - $.on @cache, 'updateready', @onUpdateReady - - update: -> - @notifyUpdate = true - @notifyProgress = true - try @cache.update() catch - return - - updateInBackground: -> - @notifyUpdate = false - @notifyProgress = false - try @cache.update() catch - return - - reload: -> - $.on @cache, 'updateready noupdate error', -> window.location = '/' - @notifyUpdate = false - @notifyProgress = true - try @cache.update() catch - return - - onProgress: (event) => - @trigger 'progress', event if @notifyProgress - return - - onUpdateReady: => - @trigger 'updateready' if @notifyUpdate - return diff --git a/assets/javascripts/app/config.coffee.erb b/assets/javascripts/app/config.coffee.erb index ec26b697..dba368e0 100644 --- a/assets/javascripts/app/config.coffee.erb +++ b/assets/javascripts/app/config.coffee.erb @@ -13,3 +13,5 @@ app.config = version: <%= Time.now.to_i %> release: <%= Time.now.utc.httpdate.to_json %> mathml_stylesheet: '<%= App.cdn_origin %>/mathml.css' + service_worker_path: '/service-worker.js' + service_worker_enabled: <%= App.environment == :production || ENV['ENABLE_SERVICE_WORKER'] == 'true' %> diff --git a/assets/javascripts/app/serviceworker.coffee b/assets/javascripts/app/serviceworker.coffee new file mode 100644 index 00000000..40235566 --- /dev/null +++ b/assets/javascripts/app/serviceworker.coffee @@ -0,0 +1,49 @@ +class app.ServiceWorker + $.extend @prototype, Events + + @isEnabled: -> + !!navigator.serviceWorker and app.config.service_worker_enabled + + constructor: -> + @registration = null + @notifyUpdate = true + + navigator.serviceWorker.register(app.config.service_worker_path, {scope: '/'}) + .then( + (registration) => @updateRegistration(registration), + (error) -> console.error('Could not register service worker:', error) + ) + + update: -> + return unless @registration + @notifyUpdate = true + return @registration.update().catch(->) + + updateInBackground: -> + return unless @registration + @notifyUpdate = false + return @registration.update().catch(->) + + reload: -> + return @updateInBackground().then(() -> app.reboot()) + + updateRegistration: (registration) -> + @registration = registration + $.on @registration, 'updatefound', @onUpdateFound + return + + onUpdateFound: => + $.off @installingRegistration, 'statechange', @onStateChange() if @installingRegistration + @installingRegistration = @registration.installing + $.on @installingRegistration, 'statechange', @onStateChange + return + + onStateChange: => + if @installingRegistration and @installingRegistration.state == 'installed' and navigator.serviceWorker.controller + @installingRegistration = null + @onUpdateReady() + return + + onUpdateReady: -> + @trigger 'updateready' if @notifyUpdate + return diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee index ab5d128c..b2734dfe 100644 --- a/assets/javascripts/app/settings.coffee +++ b/assets/javascripts/app/settings.coffee @@ -5,6 +5,7 @@ class app.Settings 'manualUpdate' 'fastScroll' 'arrowScroll' + 'analyticsConsent' 'docs' 'dark' 'layout' @@ -20,6 +21,8 @@ class app.Settings 'news' ] + LAYOUTS: ['_max-width', '_sidebar-hidden', '_native-scrollbars'] + @defaults: count: 0 hideDisabled: false @@ -27,6 +30,7 @@ class app.Settings news: 0 manualUpdate: false schema: 1 + analyticsConsent: false constructor: -> @store = new CookieStore @@ -39,6 +43,7 @@ class app.Settings set: (key, value) -> @store.set(key, value) delete @cache[key] + @toggleDark(value) if key == 'dark' return del: (key) -> @@ -64,6 +69,8 @@ class app.Settings return setLayout: (name, enable) -> + @toggleLayout(name, enable) + layout = (@store.get('layout') || '').split(' ') $.arrayDelete(layout, '') @@ -105,3 +112,28 @@ class app.Settings @store.reset() @cache = {} return + + initLayout: -> + @toggleDark(@get('dark') is 1) + @toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS + @initSidebarWidth() + return + + toggleDark: (enable) -> + classList = document.documentElement.classList + classList.toggle('_theme-default', !enable) + classList.toggle('_theme-dark', enable) + color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim() + $('meta[name=theme-color]').setAttribute('content', color) + return + + toggleLayout: (layout, enable) -> + classList = document.body.classList + classList.toggle(layout, enable) unless layout is '_sidebar-hidden' + classList.toggle('_overlay-scrollbars', $.overlayScrollbarsEnabled()) + return + + initSidebarWidth: -> + size = @get('size') + document.documentElement.style.setProperty('--sidebarWidth', size + 'px') if size + return diff --git a/assets/javascripts/app/update_checker.coffee b/assets/javascripts/app/update_checker.coffee index 5630b488..3558d6bc 100644 --- a/assets/javascripts/app/update_checker.coffee +++ b/assets/javascripts/app/update_checker.coffee @@ -3,13 +3,13 @@ class app.UpdateChecker @lastCheck = Date.now() $.on window, 'focus', @onFocus - app.appCache.on 'updateready', @onUpdateReady if app.appCache + app.serviceWorker?.on 'updateready', @onUpdateReady setTimeout @checkDocs, 0 check: -> - if app.appCache - app.appCache.update() + if app.serviceWorker + app.serviceWorker.update() else ajax url: $('script[src*="application"]').getAttribute('src') diff --git a/assets/javascripts/lib/license.coffee b/assets/javascripts/lib/license.coffee index 8ff7c6e2..7f7ca938 100644 --- a/assets/javascripts/lib/license.coffee +++ b/assets/javascripts/lib/license.coffee @@ -1,5 +1,5 @@ ### - * 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: diff --git a/assets/javascripts/lib/page.coffee b/assets/javascripts/lib/page.coffee index 8df7422e..ba2f2647 100644 --- a/assets/javascripts/lib/page.coffee +++ b/assets/javascripts/lib/page.coffee @@ -190,7 +190,7 @@ isSameOrigin = (url) -> updateCanonicalLink = -> @canonicalLink ||= document.head.querySelector('link[rel="canonical"]') - @canonicalLink.setAttribute('href', "http://#{location.host}#{location.pathname}") + @canonicalLink.setAttribute('href', "https://#{location.host}#{location.pathname}") trackers = [] @@ -199,5 +199,21 @@ page.track = (fn) -> return track = -> - tracker.call() for tracker in trackers + consentGiven = Cookies.get('analyticsConsent') + consentAsked = Cookies.get('analyticsConsentAsked') + + if consentGiven == '1' + tracker.call() for tracker in trackers + else if consentGiven == undefined and consentAsked == undefined + # Only ask for consent once per browser session + Cookies.set('analyticsConsentAsked', '1') + + new app.views.Notif 'AnalyticsConsent', autoHide: null + return + +@resetAnalytics = -> + for cookie in document.cookie.split(/;\s?/) + name = cookie.split('=')[0] + if name[0] == '_' + Cookies.expire(name) return diff --git a/assets/javascripts/lib/util.coffee b/assets/javascripts/lib/util.coffee index 058106fd..001b13de 100644 --- a/assets/javascripts/lib/util.coffee +++ b/assets/javascripts/lib/util.coffee @@ -352,6 +352,10 @@ isIE = null $.isIE = -> isIE ?= navigator.userAgent?.indexOf('MSIE') >= 0 || navigator.userAgent?.indexOf('rv:11.0') >= 0 +isChromeForAndroid = null +$.isChromeForAndroid = -> + isChromeForAndroid ?= navigator.userAgent?.indexOf('Android') >= 0 && /Chrome\/([.0-9])+ Mobile/.test(navigator.userAgent) + isAndroid = null $.isAndroid = -> isAndroid ?= navigator.userAgent?.indexOf('Android') >= 0 diff --git a/assets/javascripts/news.json b/assets/javascripts/news.json index aff770f4..a2d18a47 100644 --- a/assets/javascripts/news.json +++ b/assets/javascripts/news.json @@ -1,5 +1,12 @@ [ [ + "2019-07-19", + "Replaced the AppCache with a Service Worker (which makes DevDocs an installable PWA) and fixed layout preferences on Firefox." + ], + [ + "2018-09-23", + "New documentations: Puppeteer and Handlebars.js" + ], [ "2018-08-12", "New documentations: Dart and Qt" ], [ diff --git a/assets/javascripts/templates/error_tmpl.coffee b/assets/javascripts/templates/error_tmpl.coffee index 9c19c0a6..9cca1f9d 100644 --- a/assets/javascripts/templates/error_tmpl.coffee +++ b/assets/javascripts/templates/error_tmpl.coffee @@ -12,8 +12,8 @@ app.templates.notFoundPage = -> app.templates.pageLoadError = -> error """ The page failed to load. """, - """ It may be missing from the server (try reloading the app) or you could be offline.
- If you keep seeing this, you're likely behind a proxy or firewall that blocks cross-domain requests. """, + """ It may be missing from the server (try reloading the app) or you could be offline (try installing the documentation for offline usage when online again).
+ If you're online and you keep seeing this, you're likely behind a proxy or firewall that blocks cross-domain requests. """, """ #{back} · Reload · Retry """ @@ -56,21 +56,18 @@ app.templates.unsupportedBrowser = """

Your browser is unsupported, sorry.

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 629682fb..e7b4cc80 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: API Documentation Browser

-

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 and License

- 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 = -> """

Where can I suggest new docs and features?
You can suggest and vote for new docs on the Trello board.
If you have a specific feature request, add it to the issue tracker.
- Otherwise use the mailing list. + Otherwise, come talk to us in the Gitter chat room.
Where can I report bugs?
In the issue tracker. Thanks! -

For anything else, feel free to email me at thibaut@devdocs.io.

Credits

@@ -76,12 +71,13 @@ app.templates.aboutPage = -> """

Privacy Policy

    -
  • devdocs.io ("App") is operated by Thibaut Courouble ("We"). -
  • We do not collect personal information. -
  • We use Google Analytics, Gauges and Sentry to collect anonymous traffic information and improve the app. +
  • devdocs.io ("App") is operated by freeCodeCamp ("We"). +
  • We do not collect personal information through the app. +
  • We use Google Analytics and Gauges to collect anonymous traffic information if you have given consent to this. You can change your decision in the settings. +
  • We use Sentry to collect crash data and improve the app.
  • The app uses cookies to store user preferences.
  • By using the app, you signify your acceptance of this policy. If you do not agree to this policy, please do not use the app. -
  • If you have any questions regarding privacy, please email thibaut@devdocs.io. +
  • If you have any questions regarding privacy, please email privacy@freecodecamp.org.
""" @@ -102,7 +98,7 @@ credits = [ 'https://www.apache.org/licenses/LICENSE-2.0' ], [ 'Async', - '2010-2017 Caolan McMahon', + '2010-2018 Caolan McMahon', 'MIT', 'https://raw.githubusercontent.com/caolan/async/master/LICENSE' ], [ @@ -192,7 +188,7 @@ credits = [ 'https://raw.githubusercontent.com/jashkenas/coffeescript/master/LICENSE' ], [ 'Cordova', - '2012-2017 The Apache Software Foundation', + '2012-2018 The Apache Software Foundation', 'Apache', 'https://raw.githubusercontent.com/apache/cordova-docs/master/LICENSE' ], [ @@ -310,6 +306,11 @@ credits = [ 'GruntJS Team', 'MIT', 'https://github.com/gruntjs/grunt-docs/blob/master/package.json#L10' + ], [ + 'Handlebars', + '2011-2017 Yehuda Katz', + 'MIT', + 'https://raw.githubusercontent.com/wycats/handlebars.js/master/LICENSE' ], [ 'Haskell', 'The University of Glasgow', @@ -367,7 +368,7 @@ credits = [ 'https://raw.githubusercontent.com/jquery/api.jqueryui.com/master/LICENSE.txt' ], [ 'Julia', - '2009-2016 Jeff Bezanson, Stefan Karpinski, Viral B. Shah, and other contributors', + '2009-2018 Jeff Bezanson, Stefan Karpinski, Viral B. Shah, and other contributors', 'MIT', 'https://raw.githubusercontent.com/JuliaLang/julia/master/LICENSE.md' ], [ @@ -437,7 +438,7 @@ credits = [ 'https://daringfireball.net/projects/markdown/license' ], [ 'Matplotlib', - '2012-2017 Matplotlib Development Team. All rights reserved.', + '2012-2018 Matplotlib Development Team. All rights reserved.', 'Custom', 'https://raw.githubusercontent.com/matplotlib/matplotlib/master/LICENSE/LICENSE' ], [ @@ -560,6 +561,11 @@ credits = [ '1996-2018 The PostgreSQL Global Development Group
© 1994 The Regents of the University of California', 'PostgreSQL', 'https://www.postgresql.org/about/licence/' + ], [ + 'Puppeteer', + '2017 Google Inc', + 'Apache', + 'https://raw.githubusercontent.com/GoogleChrome/puppeteer/master/LICENSE' ], [ 'Pygame', 'Pygame Developpers', @@ -637,7 +643,7 @@ credits = [ 'http://scikit-image.org/docs/dev/license.html' ], [ 'scikit-learn', - '2007-2017 The scikit-learn developers', + '2007-2018 The scikit-learn developers', 'BSD', 'https://raw.githubusercontent.com/scikit-learn/scikit-learn/master/COPYING' ], [ @@ -682,9 +688,9 @@ credits = [ 'https://raw.githubusercontent.com/hashicorp/terraform-website/master/LICENSE.md' ], [ 'Twig', - '2009-2017 The Twig Team', + '2009-2018 The Twig Team', 'BSD', - 'https://twig.sensiolabs.org/license' + 'https://twig.symfony.com/license' ], [ 'TypeScript', 'Microsoft and other contributors', @@ -692,7 +698,7 @@ credits = [ 'https://raw.githubusercontent.com/Microsoft/TypeScript-Handbook/master/LICENSE' ], [ 'Underscore.js', - '2009-2017 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors', + '2009-2018 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors', 'MIT', 'https://raw.githubusercontent.com/jashkenas/underscore/master/LICENSE' ], [ diff --git a/assets/javascripts/templates/pages/offline_tmpl.coffee b/assets/javascripts/templates/pages/offline_tmpl.coffee index a9a3c21c..bb9e06e8 100644 --- a/assets/javascripts/templates/pages/offline_tmpl.coffee +++ b/assets/javascripts/templates/pages/offline_tmpl.coffee @@ -25,8 +25,8 @@ app.templates.offlinePage = (docs) -> """

Questions & Answers

How does this work? -
Each page is cached as a key-value pair in IndexedDB (downloaded from a single file).
- The app also uses AppCache and localStorage to cache the assets and index files. +
Each page is cached as a key-value pair in IndexedDB (downloaded from a single file).
+ The app also uses Service Workers and localStorage to cache the assets and index files.
Can I close the tab/browser?
#{canICloseTheTab()}
What if I don't update a documentation? @@ -41,10 +41,15 @@ app.templates.offlinePage = (docs) -> """ """ canICloseTheTab = -> - if app.AppCache.isEnabled() + if app.ServiceWorker.isEnabled() """ Yes! Even offline, you can open a new tab, go to devdocs.io, and everything will work as if you were online (provided you installed all the documentations you want to use beforehand). """ else - """ No. AppCache isn't available in your browser (or is disabled), so loading devdocs.io offline won't work.
+ reason = "aren't available in your browser (or are disabled)" + + if app.config.env != 'production' + reason = "are disabled in your development instance of DevDocs (enable them by setting the ENABLE_SERVICE_WORKER environment variable to true)" + + """ No. Service Workers #{reason}, so loading devdocs.io offline won't work.
The current tab will continue to function even when you go offline (provided you installed all the documentations beforehand). """ app.templates.offlineDoc = (doc, status) -> diff --git a/assets/javascripts/templates/pages/root_tmpl.coffee.erb b/assets/javascripts/templates/pages/root_tmpl.coffee.erb index ef5ee8e6..714e0e20 100644 --- a/assets/javascripts/templates/pages/root_tmpl.coffee.erb +++ b/assets/javascripts/templates/pages/root_tmpl.coffee.erb @@ -8,13 +8,13 @@ app.templates.intro = """

Thanks for downloading DevDocs. Here are a few things you should know:

  1. Your local version of DevDocs won't self-update. Unless you're modifying the code, - I recommend using the hosted version at devdocs.io. + we recommend using the hosted version at devdocs.io.
  2. Run thor docs:list to see all available documentations.
  3. Run thor docs:download <name> to download documentations.
  4. Run thor docs:download --installed to update all downloaded documentations.
  5. To be notified about new versions, don't forget to watch the repository on GitHub.
  6. The issue tracker is the preferred channel for bug reports and - feature requests. For everything else, use the mailing list. + feature requests. For everything else, use Gitter.
  7. Contributions are welcome. See the guidelines.
  8. DevDocs is licensed under the terms of the Mozilla Public License v2.0. For more information, see the COPYRIGHT and @@ -39,7 +39,7 @@ app.templates.intro = """
  9. DevDocs works offline, on mobile, and can be installed on Chrome.
  10. For the latest news, follow @DevDocs.
  11. DevDocs is free and open source. - +
  12. And if you're new to coding, check out freeCodeCamp's open source curriculum.

Happy coding! @@ -72,14 +72,3 @@ app.templates.androidWarning = """

To install DevDocs on your phone, visit devdocs.io in Chrome and select "Add to home screen" in the menu. """ - -app.templates.httpWarning = """ -

-

Hi there!

-

DevDocs is migrating to HTTPS. -

Please update your bookmarks to point to https://devdocs.io. -

When using the HTTPS version, your preferences will carry over automatically, but your offline data will be reset. Simply re-download documentation in the Offline area, and you'll be all set to use DevDocs securely offline. -

Sorry for the inconvenience. This migration is needed because browsers are removing support for certain DOM APIs that power DevDocs's offline mode over non-secure origins. -

Thanks for using DevDocs, and happy coding! -

-""" diff --git a/assets/javascripts/templates/pages/settings_tmpl.coffee b/assets/javascripts/templates/pages/settings_tmpl.coffee index d4108749..94afe3df 100644 --- a/assets/javascripts/templates/pages/settings_tmpl.coffee +++ b/assets/javascripts/templates/pages/settings_tmpl.coffee @@ -19,6 +19,10 @@ app.templates.settingsPage = (settings) -> """ Automatically download documentation for offline use Only enable this when bandwidth isn't a concern to you. + 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/views/content/entry_page.coffee b/assets/javascripts/views/content/entry_page.coffee index beae4d77..d11291a3 100644 --- a/assets/javascripts/views/content/entry_page.coffee +++ b/assets/javascripts/views/content/entry_page.coffee @@ -123,7 +123,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/offline_page.coffee b/assets/javascripts/views/content/offline_page.coffee index f37bbf8f..9f7f4cf2 100644 --- a/assets/javascripts/views/content/offline_page.coffee +++ b/assets/javascripts/views/content/offline_page.coffee @@ -57,6 +57,7 @@ class app.views.OfflinePage extends app.View doc[action](@onInstallSuccess.bind(@, doc), @onInstallError.bind(@, doc), @onInstallProgress.bind(@, doc)) el.parentNode.innerHTML = "#{el.textContent.replace(/e$/, '')}ing…" else if action = el.getAttribute('data-action-all') + return unless action isnt 'uninstall' or window.confirm('Uninstall all docs?') app.db.migrate() $.click(el) for el in @findAll("[data-action='#{action}']") return diff --git a/assets/javascripts/views/content/root_page.coffee b/assets/javascripts/views/content/root_page.coffee index e442887a..b48a1df3 100644 --- a/assets/javascripts/views/content/root_page.coffee +++ b/assets/javascripts/views/content/root_page.coffee @@ -19,10 +19,6 @@ class app.views.RootPage extends app.View else 'intro' - # temporary - if location.host is 'devdocs.io' and location.protocol is 'http:' - tmpl = 'httpWarning' - @append @tmpl(tmpl) return diff --git a/assets/javascripts/views/content/settings_page.coffee b/assets/javascripts/views/content/settings_page.coffee index c0fc59d1..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: @@ -18,32 +15,30 @@ class app.views.SettingsPage extends app.View settings.smoothScroll = !app.settings.get('fastScroll') settings.arrowScroll = app.settings.get('arrowScroll') settings.autoInstall = app.settings.get('autoInstall') - settings[layout] = app.settings.hasLayout(layout) for layout in LAYOUTS + settings.analyticsConsent = app.settings.get('analyticsConsent') + settings[layout] = app.settings.hasLayout(layout) for layout in app.settings.LAYOUTS settings getTitle: -> 'Preferences' toggleDark: (enable) -> - css = $('link[rel="stylesheet"][data-alt]') - alt = css.getAttribute('data-alt') - css.setAttribute('data-alt', css.getAttribute('href')) - css.setAttribute('href', alt) 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 @@ -87,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/layout/document.coffee b/assets/javascripts/views/layout/document.coffee index 10feefd5..597dfe37 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 window.location = '/' - 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') && app.reboot() + when 'decline-analytics' then Cookies.set('analyticsConsent', '0') && 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-dark.css.scss b/assets/stylesheets/application-dark.css.scss deleted file mode 100644 index 821ebc36..00000000 --- a/assets/stylesheets/application-dark.css.scss +++ /dev/null @@ -1,108 +0,0 @@ -//= depend_on docs-1.png -//= depend_on docs-1@2x.png -//= depend_on docs-2.png -//= depend_on docs-2@2x.png - -/*! - * Copyright 2013-2018 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: - * http://mozilla.org/MPL/2.0/ - */ - -@import 'global/variables-dark', - 'global/mixins', - 'global/icons', - 'global/classes', - 'global/base'; - -@import 'components/app', - 'components/header', - 'components/notif', - 'components/sidebar', - 'components/settings', - 'components/content', - 'components/page', - 'components/fail', - 'components/path', - 'components/notice', - 'components/prism', - 'components/mobile'; - -@import 'pages/simple', - 'pages/angular', - 'pages/angularjs', - 'pages/apache', - 'pages/async', - 'pages/bash', - 'pages/bootstrap', - 'pages/c', - 'pages/cakephp', - 'pages/clojure', - 'pages/codeception', - 'pages/coffeescript', - 'pages/cordova', - 'pages/crystal', - 'pages/d', - 'pages/d3', - 'pages/dart', - 'pages/dojo', - 'pages/drupal', - 'pages/elixir', - 'pages/ember', - 'pages/erlang', - 'pages/express', - 'pages/git', - 'pages/github', - 'pages/go', - 'pages/graphite', - 'pages/haskell', - 'pages/jekyll', - 'pages/jquery', - 'pages/julia', - 'pages/knockout', - 'pages/kotlin', - 'pages/laravel', - 'pages/liquid', - 'pages/love', - 'pages/lua', - 'pages/mdn', - 'pages/meteor', - 'pages/modernizr', - 'pages/moment', - 'pages/nginx', - 'pages/node', - 'pages/npm', - 'pages/openjdk', - 'pages/perl', - 'pages/phalcon', - 'pages/phaser', - 'pages/php', - 'pages/phpunit', - 'pages/postgres', - 'pages/pug', - 'pages/python', - 'pages/qt', - 'pages/ramda', - 'pages/rdoc', - 'pages/react_native', - 'pages/redis', - 'pages/rethinkdb', - 'pages/rfc', - 'pages/rubydoc', - 'pages/rust', - 'pages/sinon', - 'pages/socketio', - 'pages/sphinx', - 'pages/sphinx_simple', - 'pages/sqlite', - 'pages/support_tables', - 'pages/tcl_tk', - 'pages/tensorflow', - 'pages/terraform', - 'pages/underscore', - 'pages/vue', - 'pages/webpack', - 'pages/yard', - 'pages/yii'; diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss index 245a8012..2a64e5c9 100644 --- a/assets/stylesheets/application.css.scss +++ b/assets/stylesheets/application.css.scss @@ -4,14 +4,16 @@ //= depend_on docs-2@2x.png /*! - * 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: * http://mozilla.org/MPL/2.0/ */ -@import 'global/variables', +@import 'global/variables-light', + 'global/variables-dark', + 'global/variables', 'global/mixins', 'global/icons', 'global/classes', diff --git a/assets/stylesheets/components/_app.scss b/assets/stylesheets/components/_app.scss index ee76fe2f..96e09938 100644 --- a/assets/stylesheets/components/_app.scss +++ b/assets/stylesheets/components/_app.scss @@ -1,6 +1,6 @@ -html._booting { background: $contentBackground; } +html._booting { background: var(--contentBackground); } body._max-width { background: none; } -html._booting body._max-width { background: $documentBackground; } +html._booting body._max-width { background: var(--documentBackground); } ._app { position: relative; @@ -15,8 +15,8 @@ html._booting body._max-width { background: $documentBackground; } ._max-width & { margin: 0 auto; - max-width: $maxWidth; - background: $contentBackground; - box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder; + max-width: var(--maxWidth); + background: var(--contentBackground); + box-shadow: 1px 0 var(--headerBorder), -1px 0 var(--headerBorder); } } diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index 18f2e51d..c8b1863c 100644 --- a/assets/stylesheets/components/_content.scss +++ b/assets/stylesheets/components/_content.scss @@ -4,13 +4,13 @@ ._container { position: relative; - z-index: $contentZ; + z-index: var(--contentZ); height: 100%; - margin-left: $sidebarWidth; + margin-left: var(--sidebarWidth); pointer-events: none; @extend %border-box; - @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; } + @include mobile { margin-left: var(--sidebarMediumWidth); } ._sidebar-hidden & { margin-left: 0; } body:not(._native-scrollbars) & { -webkit-margin-end: -1px; } @@ -30,7 +30,7 @@ ._sidebar-hidden &:before { content: ''; display: block; - margin-top: $headerHeight; + margin-top: var(--headerHeight); } ._overlay-scrollbars & { padding-left: .625rem; } @@ -54,7 +54,7 @@ font-size: 4rem; font-weight: 300; letter-spacing: -.125rem; - color: $loadingText; + color: var(--loadingText); text-align: center; cursor: default; } @@ -68,7 +68,7 @@ // ._splash-title { - color: $splashText; + color: var(--splashText); @extend %loading, %user-select-none; } @@ -88,7 +88,7 @@ min-height: calc(100vh - 2.375rem); ._sidebar-hidden & { - min-height: calc(100vh - 2.375rem - #{$headerHeight}); + min-height: calc(100vh - 2.375rem - var(--headerHeight)); } } @@ -140,12 +140,12 @@ ._error-text { margin: 0 0 1rem; - color: $textColorLight; + color: var(--textColorLight); } ._error-links { font-size: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } ._error-link { padding: 0 .5rem; } @@ -167,7 +167,7 @@ height: 1px; margin-top: .25rem; margin-left: 1rem; - background: $boxBorderLight; + background: var(--boxBorderLight); } } @@ -197,7 +197,7 @@ ._toc-title { margin: 0 0 .5rem; font-size: inherit; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } ._toc-list { @@ -252,7 +252,7 @@ ._docs-size { text-align: right; - > small { color: $textColorLight; } + > small { color: var(--textColorLight); } } ._docs-tools { @@ -285,7 +285,7 @@ padding: 0 .75rem; } ._btn-link:not(._show) { display: none; } - ._btn-link._show ~ ._btn-link._show { border-left: 1px solid $boxBorder; } + ._btn-link._show ~ ._btn-link._show { border-left: 1px solid var(--boxBorder); } } // @@ -297,7 +297,7 @@ position: relative; padding-left: 10em; font-size: .8125rem; - color: $textColorLight; + color: var(--textColorLight); + ._news-row { margin-top: 1em; } } @@ -305,7 +305,7 @@ ._news-title { display: block; font-size: .875rem; - color: $textColor; + color: var(--textColor); } ._news-date { @@ -372,12 +372,12 @@ // Utilities // -._bold { font-weight: $boldFontWeight; } +._bold { font-weight: var(--boldFontWeight); } ._note { @extend %note; } ._note-green { @extend %note-green; } ._label { @extend %label; } ._code { @extend %code; } -._highlight { background: $highlightBackground !important; } +._highlight { background: var(--highlightBackground) !important; } ._table { width: 100%; } ._mobile ._table { overflow-x: auto; } @@ -396,12 +396,9 @@ pre:hover > & { display: block; } &:hover { opacity: 1; } - > svg { @extend %svg-icon; } - - @if $style == 'dark' { - > svg { fill: white; } - } @else { - > svg { fill: black; } + > svg { + @extend %svg-icon; + fill: var(--absolute); } &._pre-clip-success > svg, @@ -419,15 +416,13 @@ line-height: normal; white-space: nowrap; padding: .375rem .675rem; - background-image: linear-gradient(lighten($boxBackground, 4%), darken($boxBackground, 2%)); - border: 1px solid $boxBorder; + background-color: var(--boxBackground); + border: 1px solid var(--boxBorder); border-radius: 3px; - box-shadow: 0 1px rgba($boxBorder, .08); cursor: pointer; &:active { - background-color: $boxBackground; - box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px $boxBorder; + box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder); } } @@ -447,22 +442,23 @@ ._btn-link { line-height: inherit; - color: $linkColor; - text-decoration: $linkTextDecoration; + color: var(--linkColor); + text-decoration: var(--linkTextDecoration); &:hover { - color: $linkColorHover; + color: var(--linkColorHover); text-decoration: underline; } } ._reset-btn, ._reset-btn:hover { - color: $textColorRed; + color: var(--textColorRed); } ._github-btn { display: inline-block; vertical-align: text-top; margin-left: .25rem; + background: inherit; } diff --git a/assets/stylesheets/components/_fail.scss b/assets/stylesheets/components/_fail.scss index c1cf4653..c520977e 100644 --- a/assets/stylesheets/components/_fail.scss +++ b/assets/stylesheets/components/_fail.scss @@ -1,4 +1,4 @@ -._fail { +._fail { // Don't use CSS variables, in case the browser doesn't support them. display: block; position: relative; top: 1.5rem; @@ -23,7 +23,7 @@ ._fail-title { margin: 0 0 1rem; font-size: 1rem; - font-weight: $boldFontWeight; + font-weight: bold; } ._fail-text, ._fail-list { @@ -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 37f9268d..e74830aa 100644 --- a/assets/stylesheets/components/_header.scss +++ b/assets/stylesheets/components/_header.scss @@ -4,20 +4,20 @@ ._header { position: absolute; - z-index: $headerZ; + z-index: var(--headerZ); top: 0; left: 0; display: -ms-flexbox; display: flex; - width: $sidebarWidth; - height: $headerHeight; - background: $headerBackground; - border-bottom: 1px solid $headerBorder; - border-right: 1px solid $headerBorder; + width: var(--sidebarWidth); + height: var(--headerHeight); + background: var(--headerBackground); + border-bottom: 1px solid var(--headerBorder); + border-right: 1px solid var(--headerBorder); @extend %border-box; @extend %user-select-none; - @media #{$mediumScreen} { width: $sidebarMediumWidth; } + @include mobile { width: var(--sidebarMediumWidth); } } ._header-left { @@ -35,7 +35,7 @@ flex: 0 0 auto; width: 2.25rem; height: 100%; - color: $textColorLight; + color: var(--textColorLight); text-align: center; &[hidden] { display: none; } @@ -67,8 +67,8 @@ word-wrap: normal; overflow-wrap: normal; font-size: .875rem; - background: $contentBackground; - border: 1px solid $headerBorder; + background: var(--contentBackground); + border: 1px solid var(--headerBorder); border-radius: 3px; box-shadow: -1px 1px 1px rgba(black, .05); transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 1ms; @@ -98,10 +98,10 @@ margin: 0; line-height: 1.5rem; font-size: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); letter-spacing: -.5px; - background: $sidebarBackground; - border-bottom: 1px solid $sidebarBorder; + background: var(--sidebarBackground); + border-bottom: 1px solid var(--sidebarBorder); border-radius: 2px 2px 0 0; } @@ -109,7 +109,7 @@ ._menu-title-link:hover { display: block; padding: .5rem 1rem; - color: $focusText; + color: var(--focusText); text-decoration: none; } @@ -121,9 +121,9 @@ text-decoration: none; &:hover { - color: $focusText; + color: var(--focusText); text-decoration: none; - background: $sidebarBackground; + background: var(--sidebarBackground); } &:last-child { border-radius: 0 0 2px 2px; } @@ -151,11 +151,7 @@ opacity: .42; @extend %svg-icon; - @if $style == 'dark' { - fill: white; - } @else { - fill: black; - } + fill: var(--absolute); } } @@ -166,21 +162,19 @@ height: 100%; padding: 0 .75rem 1px 1.75rem; font-size: .875rem; - background: $contentBackground; + background: var(--contentBackground); border: 1px solid; - border-color: darken($headerBorder, 2%); + border-color: var(--searchBorder); border-radius: 3px; &:focus { outline: 0; - @if $inputFocusBorder { - border-color: $inputFocusBorder; - box-shadow: 0 0 1px $inputFocusBorder; - } + border-color: var(--inputFocusBorder); + box-shadow: 0 0 1px var(--inputFocusBorder); } &[disabled] { - background: $sidebarBackground; + background: var(--sidebarBackground); cursor: not-allowed; } } @@ -202,13 +196,9 @@ top: .5rem; left: .375rem; @extend %svg-icon; + fill: var(--absolute); } - @if $style == 'dark' { - > svg { fill: white; } - } @else { - > svg { fill: black; } - } ._search-active > & { display: block; } } @@ -222,8 +212,9 @@ line-height: 1.25rem; max-width: 50%; font-size: .8125rem; - color: $textColorLight; - background: darken($headerBackground, 5%); + color: var(--textColorLight); + background: var(--searchTagBackground); border-radius: 2px; + cursor: pointer; @extend %truncate-text; } diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss index 34ad7dbe..bdfe01fd 100644 --- a/assets/stylesheets/components/_mobile.scss +++ b/assets/stylesheets/components/_mobile.scss @@ -4,7 +4,7 @@ ._mobile { font-size: 100%; - background: $contentBackground; + background: var(--contentBackground); ._hide-on-mobile { display: none; } @@ -18,7 +18,7 @@ ._container { margin: 0; - padding-top: $headerHeight; + padding-top: var(--headerHeight); } ._content { diff --git a/assets/stylesheets/components/_notice.scss b/assets/stylesheets/components/_notice.scss index 0dba80ae..1e8cd381 100644 --- a/assets/stylesheets/components/_notice.scss +++ b/assets/stylesheets/components/_notice.scss @@ -1,15 +1,15 @@ ._notice { position: absolute; - z-index: $noticeZ; + z-index: var(--noticeZ); bottom: 0; - left: $sidebarWidth; + left: var(--sidebarWidth); right: 0; height: 2.5rem; padding: 0 1.25rem; - background: $noticeBackground; - box-shadow: inset 0 1px $noticeBorder; + background: var(--noticeBackground); + box-shadow: inset 0 1px var(--noticeBorder); - @media #{$mediumScreen} { left: $sidebarMediumWidth; } + @include mobile { left: var(--sidebarMediumWidth); } ._sidebar-hidden & { left: 0; } diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss index a47d396d..f0880fdd 100644 --- a/assets/stylesheets/components/_notif.scss +++ b/assets/stylesheets/components/_notif.scss @@ -7,9 +7,9 @@ max-width: 90%; padding: .625rem 1rem; font-size: .75rem; - color: $notifColor; - background: $notifBackground; - border: $notifBorder; + color: var(--notifColor); + background: var(--notifBackground); + border: var(--notifBorder); border-radius: .25rem; transition: opacity .2s; opacity: 0; @@ -30,7 +30,7 @@ ._notif-info { float: right; - color: $notifColorLight; + color: var(--notifColorLight); } ._notif-link, @@ -69,13 +69,13 @@ &::-webkit-scrollbar { width: 10px !important; } &::-webkit-scrollbar-track { - background: $notifBackground !important; + background: var(--notifBackground) !important; border: 0 !important; border-radius: 5px !important; } &::-webkit-scrollbar-thumb { - border: 3px solid $notifBackground !important; + border: 3px solid var(--notifBackground) !important; &:hover, &:active { border-width: 2px !important; } } @@ -90,7 +90,7 @@ > ._news-row { line-height: 1.125rem; font-size: .6875rem; - color: $notifColorLight; + color: var(--notifColorLight); margin-bottom: .25rem; + ._news-row { margin-top: .625rem; } @@ -107,7 +107,7 @@ ._news-date { float: right; margin-left: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } code { @@ -128,9 +128,13 @@ } ._notif-tip { - color: $textColor; - background: $tipBackground; - border: $tipBorder; + color: var(--textColor); + background: var(--tipBackground); + border: var(--tipBorder); - ._notif-info { color: $textColorLight; } + ._notif-info { color: var(--textColorLight); } +} + +._notif-right { + float: right; } diff --git a/assets/stylesheets/components/_page.scss b/assets/stylesheets/components/_page.scss index 99771443..60a970b9 100644 --- a/assets/stylesheets/components/_page.scss +++ b/assets/stylesheets/components/_page.scss @@ -23,7 +23,7 @@ max-width: 100%; margin-bottom: 1em; padding: 1px; - border: 1px dotted $boxBorder; + border: 1px dotted var(--boxBorder); border-radius: 3px; @extend %border-box; } @@ -50,7 +50,7 @@ display: inline-block; vertical-align: top; padding: 0 .5rem; - background: $contentBackground; + background: var(--contentBackground); @extend %internal-link; & + & { margin-left: .75rem; } @@ -66,7 +66,7 @@ clear: both; margin: 2rem 0 1.5rem; font-size: .75rem; - color: $textColorLight; + color: var(--textColorLight); text-align: center; -webkit-font-smoothing: subpixel-antialiased; @@ -78,7 +78,7 @@ display: inline-block; margin: 0; padding: .25rem .75rem; - background: $labelBackground; + background: var(--labelBackground); border-radius: 3px; } diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss index 1d68936f..5853fa04 100644 --- a/assets/stylesheets/components/_path.scss +++ b/assets/stylesheets/components/_path.scss @@ -1,17 +1,17 @@ ._path { position: absolute; - z-index: $noticeZ - 1; + z-index: var(--headerZ); bottom: 0; - left: $sidebarWidth; + left: var(--sidebarWidth); right: 0; height: 2rem; line-height: 2rem; padding: 0 .375rem; font-size: .875rem; - background: $pathBackground; - box-shadow: inset 0 1px $pathBorder; + background: var(--pathBackground); + box-shadow: inset 0 1px var(--pathBorder); - @media #{$mediumScreen} { left: $sidebarMediumWidth; } + @include mobile { left: var(--sidebarMediumWidth); } ._sidebar-hidden & { left: 0; } @@ -24,7 +24,7 @@ display: inline-block; vertical-align: top; padding: 0 .375rem; - color: $textColor; + color: var(--textColor); text-decoration: none; &:first-child:before { diff --git a/assets/stylesheets/components/_prism.scss b/assets/stylesheets/components/_prism.scss index 405fd436..4d01f8cb 100644 --- a/assets/stylesheets/components/_prism.scss +++ b/assets/stylesheets/components/_prism.scss @@ -1,9 +1,26 @@ +html { + --prismValue: #905; + --prismText: #5e8e01; + --prismOperator: #a67f59; + --prismKeyword: #0070a3; + --prismFunction: #dd4a68; + --prismVariable: #e90; +} +html._theme-dark { + --prismValue: #eb8160; + --prismText: #ddcf88; + --prismOperator: #b1c676; + --prismKeyword: #91b3ed; + --prismFunction: #c79e6b; + --prismVariable: #e9c062; +} + .token.comment, .token.prolog, .token.doctype, .token.cdata, .token.punctuation { - color: $textColorLight; + color: var(--textColorLight); } .namespace { @@ -17,11 +34,7 @@ .token.constant, .token.symbol, .token.deleted { - @if $style == 'dark' { - color: #eb8160; - } @else { - color: #905; - } + color: var(--prismValue); } .token.selector, @@ -30,11 +43,7 @@ .token.char, .token.builtin, .token.inserted { - @if $style == 'dark' { - color: #ddcf88; - } @else { - color: #5e8e01; - } + color: var(--prismText); } .token.operator, @@ -42,44 +51,28 @@ .token.url, .language-css .token.string, .style .token.string { - @if $style == 'dark' { - color: #b1c676; - } @else { - color: #a67f59; - } + color: var(--prismOperator); } .token.atrule, .token.attr-value, .token.keyword { - @if $style == 'dark' { - color: #91b3ed; - } @else { - color: #0070a3; - } + color: var(--prismKeyword); } .token.function { - @if $style == 'dark' { - color: #c79e6b; - } @else { - color: #dd4a68; - } + color: var(--prismFunction); } .token.regex, .token.important, .token.variable { - @if $style == 'dark' { - color: #e9c062; - } @else { - color: #e90; - } + color: var(--prismVariable); } .token.important, .token.bold { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } .token.italic { diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss index c1134041..86bbf005 100644 --- a/assets/stylesheets/components/_settings.scss +++ b/assets/stylesheets/components/_settings.scss @@ -7,15 +7,15 @@ position: absolute; top: 0; bottom: 0; - z-index: $headerZ; + z-index: var(--headerZ); &._in { display: block; } > ._header { justify-content: space-between; } &._dirty > ._header { - background: $noteGreenBackground; - border-color: $noteGreenBorder; + background: var(--noteGreenBackground); + border-color: var(--noteGreenBorder); } } @@ -37,7 +37,7 @@ padding-right: .5rem; line-height: inherit; font-size: inherit; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); text-align: right; @extend %border-box; } @@ -52,7 +52,7 @@ > small { display: block; - color: $textColorLight; + color: var(--textColorLight); margin-left: 1.75rem; } @@ -62,7 +62,7 @@ } } -@media (max-width: $maxWidth) { +@media (max-width: 80rem) { ._setting-max-width { display: none; } } @@ -80,7 +80,7 @@ line-height: 1.5rem; padding: 0 .75rem; font-size: .875rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); color: inherit; text-align: left; cursor: pointer; @@ -119,12 +119,12 @@ position: relative; vertical-align: top; padding: 0 .75rem; - line-height: $headerHeight; - color: $textColorLight; + line-height: var(--headerHeight); + color: var(--textColorLight); &.active { - color: $textColor; - font-weight: $boldFontWeight; - box-shadow: inset 0 -2px $linkColor; + color: var(--textColor); + font-weight: var(--boldFontWeight); + box-shadow: inset 0 -2px var(--linkColor); } } diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss index e38ed4d2..8813f92d 100644 --- a/assets/stylesheets/components/_sidebar.scss +++ b/assets/stylesheets/components/_sidebar.scss @@ -4,14 +4,14 @@ ._sidebar { position: absolute; - z-index: $sidebarZ; + z-index: var(--sidebarZ); top: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: scroll; - padding-top: $headerHeight; - background: $sidebarBackground; + padding-top: var(--headerHeight); + background: var(--sidebarBackground); background-clip: content-box; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; // IE 10 doesn't support pointer-events @@ -22,13 +22,13 @@ ._overlay-scrollbars & { padding-top: 0; - top: $headerHeight; + top: var(--headerHeight); } body:not(._native-scrollbars) & { &::-webkit-scrollbar { width: 10px; } &::-webkit-scrollbar-track { - background: $contentBackground; + background: var(--contentBackground); border: 0; } &::-webkit-scrollbar-thumb { @@ -52,10 +52,10 @@ ._resizer { position: absolute; - z-index: $sidebarZ + 1; - top: $headerHeight; - bottom: $headerHeight; - left: $sidebarWidth; + z-index: var(--headerZ); + top: var(--headerHeight); + bottom: var(--headerHeight); + left: var(--sidebarWidth); margin-left: -2px; width: 3px; cursor: col-resize; @@ -72,11 +72,11 @@ margin: 0; padding: 0; list-style: none; - width: $sidebarWidth; - box-shadow: inset -1px 0 $sidebarBorder; + width: var(--sidebarWidth); + box-shadow: inset -1px 0 var(--sidebarBorder); @extend %border-box; - @media #{$mediumScreen} { width: $sidebarMediumWidth; } + @include mobile { width: var(--sidebarMediumWidth); } ._sidebar > & { min-height: 100%; } @@ -89,7 +89,7 @@ padding: 0 .75rem 0 2.125rem; line-height: 2rem; font-size: .75rem; - color: $textColorLight; + color: var(--textColorLight); text-transform: uppercase; cursor: default; } @@ -110,8 +110,8 @@ line-height: 1.5rem; font-size: .875rem; cursor: default; - background: $sidebarBackground; - box-shadow: inset -1px 0 $sidebarBorder; + background: var(--sidebarBackground); + box-shadow: inset -1px 0 var(--sidebarBorder); @extend %truncate-text; &, &:hover { @@ -123,16 +123,16 @@ &.focus:hover, &.active, &.active:hover { - color: $focusText; - background: $focusBackground; - box-shadow: inset -1px 0 $focusBorder; + color: var(--focusText); + background: var(--focusBackground); + box-shadow: inset -1px 0 var(--focusBorder); } &.active, &.active:hover { - color: $selectionText; - background: $selectionBackground; - box-shadow: inset -1px 0 $selectionBorder; + color: var(--selectionText); + background: var(--selectionBackground); + box-shadow: inset -1px 0 var(--selectionBorder); } &:before { @@ -160,7 +160,7 @@ } ._list-count { - color: $textColorLighter; + color: var(--textColorLighter); pointer-events: none; ._list-disabled:hover > & { display: none; } @@ -168,7 +168,7 @@ ._list-enable { display: none; - color: $linkColor; + color: var(--linkColor); cursor: pointer; &:hover { text-decoration: underline; } @@ -188,7 +188,7 @@ ._list-disabled { @extend %_list-dir; - &, &:hover { color: $textColorLight; } + &, &:hover { color: var(--textColorLight); } &:before { opacity: .7; } } @@ -200,11 +200,9 @@ width: 1rem; height: 1rem; cursor: pointer; - fill: black; + fill: var(--absolute); opacity: .4; - @if $style == 'dark' { fill: white; } - &:hover { opacity: .65; } ._list-rdir > & { @@ -239,11 +237,11 @@ // ._list-pagelink { - color: $linkColor; + color: var(--linkColor); cursor: pointer; &:hover { - color: $linkColorHover; + color: var(--linkColorHover); text-decoration: underline; } } @@ -275,9 +273,9 @@ left: .75rem; width: .75rem; height: 1px; - background: rgba($selectionText, .9); - box-shadow: 0 -3px rgba($selectionText, .9), // top line - 0 3px rgba($selectionText, .9); // bottom line + background: var(--transparentSelectionText); + box-shadow: 0 -3px var(--transparentSelectionText), // top line + 0 3px var(--transparentSelectionText); // bottom line } } @@ -289,7 +287,7 @@ padding: .5rem .75rem; line-height: 1.25rem; font-size: .8125rem; - color: $textColorLight; + color: var(--textColorLight); & + & { padding-top: 0; } } @@ -303,9 +301,9 @@ ._list-hover.clone { position: fixed; overflow: visible; - z-index: $hoverZ; + z-index: var(--hoverZ); left: 0; - min-width: $sidebarWidth; + min-width: var(--sidebarWidth); padding: .25rem .75rem; pointer-events: none; -webkit-font-smoothing: subpixel-antialiased; @@ -313,7 +311,7 @@ transform: translate3d(0, 0, 0); @extend %border-box; - @media #{$mediumScreen} { min-width: $sidebarMediumWidth; } + @include mobile { min-width: var(--sidebarMediumWidth); } > ._list-text { display: inline; } @@ -346,10 +344,10 @@ padding: .5rem .75rem .25rem .75rem; line-height: 1.5rem; font-size: .75rem; - font-weight: $bolderFontWeight; - color: $textColorLight; + font-weight: var(--bolderFontWeight); + color: var(--textColorLight); text-transform: uppercase; - background: linear-gradient(to bottom, $sidebarBackground, $sidebarBackground 75%, rgba($sidebarBackground, 0)); + background: linear-gradient(to bottom, var(--sidebarBackground), var(--sidebarBackground) 75%, var(--transparentSidebarBackground)); cursor: default; } diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss index 33c77a5e..b81d5a93 100644 --- a/assets/stylesheets/global/_base.scss +++ b/assets/stylesheets/global/_base.scss @@ -1,9 +1,10 @@ html { height: 100%; font-size: 100%; - background: $documentBackground; + background: #fff; // fallback to show the error message to browsers that don't support CSS variables. + background: var(--documentBackground); - @media #{$mediumScreen} { font-size: 93.75%; } + @include mobile { font-size: 93.75%; } @include print { background: none; } @import 'global/print'; @@ -17,10 +18,11 @@ body { font-weight: normal; font-family: $baseFont; line-height: 1.7; - color: $textColor; + color: $textColor; // fallback to show the error message to browsers that don't support CSS variables. + color: var(--textColor); word-wrap: break-word; overflow-wrap: break-word; - background: $contentBackground; + background: var(--contentBackground); touch-action: manipulation; -webkit-tap-highlight-color: rgba(black, 0); -webkit-touch-callout: none; @@ -29,11 +31,11 @@ body { } a { - color: $linkColor; - text-decoration: $linkTextDecoration; + color: var(--linkColor); + text-decoration: var(--linkTextDecoration); &:hover { - color: $linkColorHover; + color: var(--linkColorHover); text-decoration: underline; } } @@ -47,7 +49,7 @@ img { h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 1em; line-height: 1.3; - font-weight: $bolderFontWeight; + font-weight: var(--bolderFontWeight); } h1 { font-size: 1.5em; } @@ -59,7 +61,7 @@ h5, h6 { font-size: 1em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } -b, strong { font-weight: $boldFontWeight; } +b, strong { font-weight: var(--boldFontWeight); } small { font-size: .9em; } @@ -79,7 +81,7 @@ li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; } li > p { margin-bottom: .25em; } dl { margin: 1.5em 0; } -dt { font-weight: $boldFontWeight; } +dt { font-weight: var(--boldFontWeight); } dd { margin: .375em; padding-left: 1em; @@ -91,15 +93,15 @@ dfn, var { font-style: normal; } abbr, acronym, dfn { cursor: help; - border-bottom: 1px dotted $textColor; + border-bottom: 1px dotted var(--textColor); } pre, code, samp, %pre, %code { - font-family: $monoFont; + font-family: var(--monoFont); font-weight: normal; font-style: normal; font-size: .9em; - color: $textColor; + color: var(--textColor); white-space: pre-wrap; direction: ltr; -moz-tab-size: 2; @@ -121,14 +123,14 @@ a > code { color: inherit; } table { margin: 1.5em 0; background: none; - border: 1px solid $boxBorder; + border: 1px solid var(--boxBorder); border-collapse: separate; border-spacing: 0; border-radius: 3px; } caption { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); padding: 0 .7em .3em; } @@ -142,15 +144,15 @@ th, td { } th { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); border: 0; - border-bottom: 1px solid $boxBorder; + border-bottom: 1px solid var(--boxBorder); border-radius: 0; @extend %heading-box; &:empty { background: none; } - + th, + td { border-left: 1px solid $boxBorder; } + + th, + td { border-left: 1px solid var(--boxBorder); } tr:first-child > &:first-child { border-top-left-radius: 3px; } tr:first-child > &:last-child { border-top-right-radius: 3px; } @@ -161,10 +163,10 @@ th { } td { - background: $contentBackground; - border-bottom: 1px solid $boxBorderLight; + background: var(--contentBackground); + border-bottom: 1px solid var(--boxBorderLight); - + td { border-left: 1px solid $boxBorderLight; } + + td { border-left: 1px solid var(--boxBorderLight); } tr:last-child > & { border-bottom: 0; } > pre:only-child, > p:only-child, > ul:only-child, > ol:only-child { @@ -190,7 +192,7 @@ input, button { margin: 0; font-family: inherit; font-size: 100%; - color: $textColor; + color: var(--textColor); line-height: normal; @extend %border-box; } @@ -218,6 +220,10 @@ button:focus { outline: -webkit-focus-ring-color auto 5px; } +img, iframe { + background: var(--externalsBackground); +} + input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; @@ -230,9 +236,9 @@ input[type="search"]::-webkit-search-decoration { border: 0 !important; } -::-webkit-input-placeholder { color: $textColorLighter; } -::-moz-placeholder { color: $textColorLighter; opacity: 1; } -:-ms-input-placeholder { color: $textColorLighter; } +::-webkit-input-placeholder { color: var(--textColorLighter); } +::-moz-placeholder { color: var(--textColorLighter); opacity: 1; } +:-ms-input-placeholder { color: var(--textColorLighter); } body:not(._native-scrollbars) { *::-webkit-scrollbar { -webkit-appearance: none; } @@ -243,12 +249,12 @@ body:not(._native-scrollbars) { *::-webkit-scrollbar-corner { display: none; } *::-webkit-scrollbar-track { - background: $contentBackground; - border: 1px solid $contentBackground; + background: var(--contentBackground); + border: 1px solid var(--contentBackground); &:hover { - background: $sidebarBackground; - border-color: $sidebarBorder; + background: var(--sidebarBackground); + border-color: var(--sidebarBorder); } &:vertical { border-width: 0 0 0 1px; } @@ -266,14 +272,14 @@ body:not(._native-scrollbars) { *::-webkit-scrollbar-thumb { min-height: 2rem; - background: $scrollbarColor; + background: var(--scrollbarColor); background-clip: padding-box; border: 5px solid rgba(black, 0); border-radius: 10px; &:hover, &:active { - background-color: $scrollbarColorHover; + background-color: var(--scrollbarColorHover); border-width: 4px; } } diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss index f96f617b..9e6b9332 100644 --- a/assets/stylesheets/global/_classes.scss +++ b/assets/stylesheets/global/_classes.scss @@ -36,15 +36,15 @@ // %box { - background: $boxBackground; - border: 1px solid $boxBorder; + background: var(--boxBackground); + border: 1px solid var(--boxBorder); border-radius: 3px; } %heading-box { - color: $boxHeaderColor; - background: $boxHeaderBackground; - border: 1px solid $boxBorder; + color: var(--boxHeaderColor); + background: var(--boxHeaderBackground); + border: 1px solid var(--boxBorder); border-radius: 3px; } @@ -82,15 +82,15 @@ %note { margin: 1.5rem 0; padding: .5rem .875rem; - background: $noteBackground; - border: 1px solid $noteBorder; + background: var(--noteBackground); + border: 1px solid var(--noteBorder); border-radius: 3px; } %label { margin: 0 1px; padding: 1px 4px 2px; - background: $labelBackground; + background: var(--labelBackground); border-radius: 3px; } @@ -102,35 +102,35 @@ padding-right: .5em; overflow: hidden; font-size: inherit; - color: $boxHeaderColor; - border: 1px solid $boxBorder; + color: var(--boxHeaderColor); + border: 1px solid var(--boxBorder); border-radius: 2px; @extend %label; } %label-yellow { - background: $noteBackground; - border-color: $noteBorder; + background: var(--noteBackground); + border-color: var(--noteBorder); } %note-green, %label-green { - background: $noteGreenBackground; - border-color: $noteGreenBorder; + background: var(--noteGreenBackground); + border-color: var(--noteGreenBorder); } %note-blue, %label-blue { - background: $noteBlueBackground; - border-color: $noteBlueBorder; + background: var(--noteBlueBackground); + border-color: var(--noteBlueBorder); } %note-orange, %label-orange { - background: $noteOrangeBackground; - border-color: $noteOrangeBorder; + background: var(--noteOrangeBackground); + border-color: var(--noteOrangeBorder); } %note-red, %label-red { - background: $noteRedBackground; - border-color: $noteRedBorder; + background: var(--noteRedBackground); + border-color: var(--noteRedBorder); } // @@ -149,12 +149,11 @@ pointer-events: none; // - @if $style == 'dark' { - background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+); - } @else { - background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+); - } + background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+); } } +html._theme-dark %external-link:after { + background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+); +} %internal-link:after { content: none !important; } diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss index 42e5be23..e7a805f4 100644 --- a/assets/stylesheets/global/_icons.scss +++ b/assets/stylesheets/global/_icons.scss @@ -23,8 +23,8 @@ %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; } } -%darkIconFix { - @if $style == 'dark' { +html._theme-dark { + %darkIconFix { filter: invert(100%) grayscale(100%); -webkit-filter: invert(100%) grayscale(100%); } @@ -178,3 +178,5 @@ ._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/_mixins.scss b/assets/stylesheets/global/_mixins.scss index 604b9ac7..8fbb04fa 100644 --- a/assets/stylesheets/global/_mixins.scss +++ b/assets/stylesheets/global/_mixins.scss @@ -7,3 +7,9 @@ @content; } } + +@mixin mobile { + @media (max-width: 800px) { + @content; + } +} diff --git a/assets/stylesheets/global/_print.scss b/assets/stylesheets/global/_print.scss index 5044631e..08c14fd1 100644 --- a/assets/stylesheets/global/_print.scss +++ b/assets/stylesheets/global/_print.scss @@ -25,14 +25,14 @@ ._attribution-p { background: none; - border: 2px solid $boxBorder; + border: 2px solid var(--boxBorder); } ._attribution:last-child:after { content: 'Exported from DevDocs \2014 https://devdocs.io'; display: block; margin-top: 1rem; - font-weight: $bolderFontWeight; + font-weight: var(--bolderFontWeight); } ._attribution { diff --git a/assets/stylesheets/global/_variables-dark.scss b/assets/stylesheets/global/_variables-dark.scss index 17129d9f..b9c88491 100644 --- a/assets/stylesheets/global/_variables-dark.scss +++ b/assets/stylesheets/global/_variables-dark.scss @@ -1,92 +1,76 @@ -$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; -$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; -$boldFontWeight: 500; -$bolderFontWeight: 600; +html._theme-dark { + --absolute: white; -$style: 'dark'; + --documentBackground: #222; + --contentBackground: #33373a; -$maxWidth: 80rem; -$headerHeight: 3rem; -$sidebarWidth: 20rem; -$sidebarMediumWidth: 16rem; + --textColor: #cbd0d0; + --textColorLight: #9da5ad; + --textColorLighter: #77787a; -$documentBackground: #222; -$contentBackground: #33373a; + --externalsBackground: #fff; -$textColor: #cbd0d0; -$textColorLight: #9da5ad; -$textColorLighter: #77787a; -$textColorRed: #f44336; + --inputFocusBorder: transparent; -$inputFocusBorder: false; + --focusBackground: #3f4042; + --focusBorder: #000; + --focusText: #f7f2f2; -$focusBackground: #3f4042; -$focusBorder: #000; -$focusText: #f7f2f2; + --loadingText: #5d6164; -$loadingText: #5d6164; -$splashText: $loadingText; + --selectionBackground: #007acc; + --selectionBorder: #000; -$selectionBackground: #007acc; -$selectionBorder: #000; -$selectionText: #fff; + --highlightBackground: #64675f; -$highlightBackground: #64675f; + --linkColor: var(--textColor); + --linkColorHover: white; + --linkTextDecoration: underline; -$linkColor: $textColor; -$linkColorHover: white; -$linkTextDecoration: underline; + --headerBackground: #1c1c1c; + --headerBorder: #000; + --searchTagBackground: #{darken(#1c1c1c, 5%)}; + --searchBorder: #{darken(#000, 2%)}; -$headerBackground: #1c1c1c; -$headerBorder: #000; + --sidebarBackground: #24282a; + --transparentSidebarBackground: #{rgba(#24282a, 0)}; + --sidebarBorder: #000; -$sidebarBackground: #24282a; -$sidebarBorder: #000; + --scrollbarColor: #6c6c6f; + --scrollbarColorHover: #949697; -$scrollbarColor: #6c6c6f; -$scrollbarColorHover: #949697; + --pathBackground: var(--headerBackground); + --pathBorder: var(--headerBorder); -$pathBackground: $headerBackground; -$pathBorder: $headerBorder; + --noticeBackground: var(--sidebarBackground); + --noticeBorder: var(--sidebarBorder); -$noticeBackground: $sidebarBackground; -$noticeBorder: $sidebarBorder; + --boxBackground: var(--sidebarBackground); + --boxBorder: var(--headerBorder); + --boxBorderLight: var(--headerBorder); + --boxHeaderColor: #dbe4e4; + --boxHeaderBackground: var(--sidebarBackground); -$boxBackground: $sidebarBackground; -$boxBorder: $headerBorder; -$boxBorderLight: $headerBorder; -$boxHeaderColor: #dbe4e4; -$boxHeaderBackground: $sidebarBackground; + --noteBackground: #45474b; + --noteBorder: #000; -$noteBackground: #45474b; -$noteBorder: #000; + --noteGreenBackground: #284a2a; + --noteGreenBorder: #000; -$noteGreenBackground: #284a2a; -$noteGreenBorder: #000; + --noteBlueBackground: #2a4151; + --noteBlueBorder: #000; -$noteBlueBackground: #2a4151; -$noteBlueBorder: #000; + --noteOrangeBackground: #563322; + --noteOrangeBorder: #000; -$noteOrangeBackground: #563322; -$noteOrangeBorder: #000; + --noteRedBackground: #603033; + --noteRedBorder: #000; -$noteRedBackground: #603033; -$noteRedBorder: #000; + --labelBackground: var(--boxBackground); -$labelBackground: $boxBackground; + --notifBackground: #{rgba(#555, .95)}; + --notifBorder: 1px solid #000; -$notifBackground: rgba(#555, .95); -$notifBorder: 1px solid #000; -$notifColor: #fff; -$notifColorLight: #ccc; - -$tipBackground: $notifBackground; -$tipBorder: $notifBorder; - -$mediumScreen: '(max-width: 800px)'; - -$contentZ: 1; -$sidebarZ: 2; -$headerZ: 3; -$noticeZ: 4; -$hoverZ: 5; + --tipBackground: var(--notifBackground); + --tipBorder: var(--notifBorder); +} diff --git a/assets/stylesheets/global/_variables-light.scss b/assets/stylesheets/global/_variables-light.scss new file mode 100644 index 00000000..f2dcb807 --- /dev/null +++ b/assets/stylesheets/global/_variables-light.scss @@ -0,0 +1,76 @@ +html._theme-default { + --absolute: black; + + --documentBackground: #f3f3f3; + --contentBackground: #fff; + + --textColor: #333; + --textColorLight: #666; + --textColorLighter: #888; + + --externalsBackground: #fff; + + --inputFocusBorder: #35b5f4; + + --focusBackground: #e5e5e5; + --focusBorder: #d4d4d4; + --focusText: #000; + + --loadingText: #ccc; + + --selectionBackground: #398df0; + --selectionBorder: #196fc2; + + --highlightBackground: #fffdcd; + + --linkColor: #3377c0; + --linkColorHover: #2f6cb6; + --linkTextDecoration: none; + + --headerBackground: #eee; + --headerBorder: #d7d7d7; + --searchTagBackground: #{darken(#eee, 5%)}; + --searchBorder: #{darken(#d7d7d7, 2%)}; + + --sidebarBackground: #f9f9f9; + --transparentSidebarBackground: #{rgba(#f9f9f9, 0)}; + --sidebarBorder: #e1e1e1; + + --scrollbarColor: #ccc; + --scrollbarColorHover: #999; + + --pathBackground: var(--sidebarBackground); + --pathBorder: var(--sidebarBorder); + + --noticeBackground: #faf9e2; + --noticeBorder: #e2e2c1; + + --boxBackground: #fafafa; + --boxBorder: #d8d8d8; + --boxBorderLight: #e5e5e5; + --boxHeaderColor: var(--textColor); + --boxHeaderBackground: #f5f5f5; + + --noteBackground: #f8f8dd; + --noteBorder: #d3d952; + + --noteGreenBackground: #e7f8e1; + --noteGreenBorder: #89da70; + + --noteBlueBackground: #d4f3fd; + --noteBlueBorder: #94bbeb; + + --noteOrangeBackground: #fbe6d1; + --noteOrangeBorder: #ec8b01; + + --noteRedBackground: #fed5d3; + --noteRedBorder: #dc7874; + + --labelBackground: #f4f4f4; + + --notifBackground: #{rgba(#333, .85)}; + --notifBorder: none; + + --tipBackground: #{rgba(#fffdcd, .95)}; + --tipBorder: 1px solid #e7dca9; +} diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss index bbdedf9f..c4d8235d 100644 --- a/assets/stylesheets/global/_variables.scss +++ b/assets/stylesheets/global/_variables.scss @@ -1,92 +1,35 @@ +// Variables needed to style the error message for browsers that don't support CSS variables. $baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; -$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; -$boldFontWeight: 500; -$bolderFontWeight: 600; - -$style: 'light'; - -$maxWidth: 80rem; -$headerHeight: 3rem; -$sidebarWidth: 20rem; -$sidebarMediumWidth: 16rem; - -$documentBackground: #f3f3f3; -$contentBackground: #fff; - $textColor: #333; -$textColorLight: #666; -$textColorLighter: #888; -$textColorRed: #f44336; - -$inputFocusBorder: #35b5f4; - -$focusBackground: #e5e5e5; -$focusBorder: #d4d4d4; -$focusText: #000; - -$loadingText: #ccc; -$splashText: #ccc; - -$selectionBackground: #398df0; -$selectionBorder: #196fc2; -$selectionText: #fff; - -$highlightBackground: #fffdcd; - -$linkColor: #3377c0; -$linkColorHover: #2f6cb6; -$linkTextDecoration: none; - -$headerBackground: #eee; -$headerBorder: #d7d7d7; - -$sidebarBackground: #f9f9f9; -$sidebarBorder: #e1e1e1; - -$scrollbarColor: #ccc; -$scrollbarColorHover: #999; - -$pathBackground: $sidebarBackground; -$pathBorder: $sidebarBorder; - -$noticeBackground: #faf9e2; -$noticeBorder: #e2e2c1; - -$boxBackground: #fafafa; -$boxBorder: #d8d8d8; -$boxBorderLight: #e5e5e5; -$boxHeaderColor: $textColor; -$boxHeaderBackground: #f5f5f5; - -$noteBackground: #f8f8dd; -$noteBorder: #d3d952; - -$noteGreenBackground: #e7f8e1; -$noteGreenBorder: #89da70; -$noteBlueBackground: #d4f3fd; -$noteBlueBorder: #94bbeb; +html { + --baseFont: #{$baseFont}; + --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; + --boldFontWeight: 500; + --bolderFontWeight: 600; -$noteOrangeBackground: #fbe6d1; -$noteOrangeBorder: #ec8b01; + --textColorRed: #f44336; -$noteRedBackground: #fed5d3; -$noteRedBorder: #dc7874; + --splashText: var(--loadingText); -$labelBackground: #f4f4f4; + --selectionText: #fff; + --transparentSelectionText: rgba(255, 255, 255, 0.9); -$notifBackground: rgba(#333, .85); -$notifBorder: none; -$notifColor: #fff; -$notifColorLight: #ccc; + --notifColor: #fff; + --notifColorLight: #ccc; -$tipBackground: rgba(#fffdcd, .95); -$tipBorder: 1px solid #e7dca9; + --maxWidth: 80rem; + --headerHeight: 3rem; + --sidebarWidth: 20rem; + --sidebarMediumWidth: 16rem; -$mediumScreen: '(max-width: 800px)'; + --focusBackground: #e5e5e5; + --focusBorder: #d4d4d4; + --focusText: #000; -$contentZ: 1; -$sidebarZ: 2; -$headerZ: 3; -$noticeZ: 4; -$hoverZ: 5; + --contentZ: 1; + --sidebarZ: 2; + --headerZ: 3; + --noticeZ: 4; + --hoverZ: 5; +} diff --git a/assets/stylesheets/pages/_angularjs.scss b/assets/stylesheets/pages/_angularjs.scss index 5b6df0bc..13f85796 100644 --- a/assets/stylesheets/pages/_angularjs.scss +++ b/assets/stylesheets/pages/_angularjs.scss @@ -8,7 +8,7 @@ .nav-index-section { margin: 1.5em 0 1em -2em; list-style: none; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); text-transform: capitalize; } diff --git a/assets/stylesheets/pages/_async.scss b/assets/stylesheets/pages/_async.scss index 09d018f5..c8961dfd 100644 --- a/assets/stylesheets/pages/_async.scss +++ b/assets/stylesheets/pages/_async.scss @@ -3,13 +3,13 @@ h3 > .type-signature { float: right; - color: $textColorLight; + color: var(--textColorLight); } h3 > .signature-attributes { font-size: .75rem; font-weight: normal; font-style: italic; - color: $textColorLighter; + color: var(--textColorLighter); } } diff --git a/assets/stylesheets/pages/_bash.scss b/assets/stylesheets/pages/_bash.scss index b6ca1808..8d3f6dd7 100644 --- a/assets/stylesheets/pages/_bash.scss +++ b/assets/stylesheets/pages/_bash.scss @@ -5,7 +5,7 @@ } th[align=left] { - border-left: 1px solid $boxBorder; + border-left: 1px solid var(--boxBorder); } code { @extend %label; } diff --git a/assets/stylesheets/pages/_bootstrap.scss b/assets/stylesheets/pages/_bootstrap.scss index 0deb79b7..fbd885ea 100644 --- a/assets/stylesheets/pages/_bootstrap.scss +++ b/assets/stylesheets/pages/_bootstrap.scss @@ -4,7 +4,7 @@ h4 > code, h5 > code, strong > code { @extend %label; } h2 > small { - color: $textColorLight; + color: var(--textColorLight); float: right; } diff --git a/assets/stylesheets/pages/_c.scss b/assets/stylesheets/pages/_c.scss index b9c4c25f..9aeafdcb 100644 --- a/assets/stylesheets/pages/_c.scss +++ b/assets/stylesheets/pages/_c.scss @@ -23,7 +23,7 @@ .t-spar { // language/switch, language/for, etc. font-style: italic; - color: $textColorLight; + color: var(--textColorLight); } .t-sdsc-nopad dl, .t-sdsc-nopad dd { margin: 0; } @@ -57,7 +57,7 @@ margin: 1rem 0; padding: .375rem; font-size: .75rem; - border: 1px solid $boxBorder; + border: 1px solid var(--boxBorder); border-radius: 2px; } diff --git a/assets/stylesheets/pages/_clojure.scss b/assets/stylesheets/pages/_clojure.scss index 9f5e5db4..c1b2647c 100644 --- a/assets/stylesheets/pages/_clojure.scss +++ b/assets/stylesheets/pages/_clojure.scss @@ -5,6 +5,6 @@ .type { float: right; font-size: .9em; - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_d.scss b/assets/stylesheets/pages/_d.scss index a32e84b0..7e672145 100644 --- a/assets/stylesheets/pages/_d.scss +++ b/assets/stylesheets/pages/_d.scss @@ -2,10 +2,10 @@ h2 { @extend %block-heading; } h3, .d_decl { @extend %block-label, %label-blue; } .d_decl { @extend %code; } - .d_decl > small { color: $textColorLight; } - .d_decl > strong { font-weight: $bolderFontWeight; } + .d_decl > small { color: var(--textColorLight); } + .d_decl > strong { font-weight: var(--bolderFontWeight); } p > code, li > code, td > code, dd > code { @extend %label; } - span.red { color: $textColorRed; } + span.red { color: var(--textColorRed); } } diff --git a/assets/stylesheets/pages/_dart.scss b/assets/stylesheets/pages/_dart.scss index 3c011db7..fedd9883 100644 --- a/assets/stylesheets/pages/_dart.scss +++ b/assets/stylesheets/pages/_dart.scss @@ -6,7 +6,7 @@ .features { float: right; - color: $textColorLight; + color: var(--textColorLight); } } } diff --git a/assets/stylesheets/pages/_dojo.scss b/assets/stylesheets/pages/_dojo.scss index bb24b223..d22b1f81 100644 --- a/assets/stylesheets/pages/_dojo.scss +++ b/assets/stylesheets/pages/_dojo.scss @@ -1,5 +1,5 @@ ._dojo { @extend %simple; - .jsdoc-inheritance { color: $textColorLight; } + .jsdoc-inheritance { color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_ember.scss b/assets/stylesheets/pages/_ember.scss index 636b56b6..9b3f4689 100644 --- a/assets/stylesheets/pages/_ember.scss +++ b/assets/stylesheets/pages/_ember.scss @@ -5,7 +5,7 @@ h3 > .access { float: right; - color: $textColorLight; + color: var(--textColorLight); font-weight: normal; } @@ -15,6 +15,6 @@ } p.github-link { - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_erlang.scss b/assets/stylesheets/pages/_erlang.scss index ba221ec7..1b76cf6d 100644 --- a/assets/stylesheets/pages/_erlang.scss +++ b/assets/stylesheets/pages/_erlang.scss @@ -5,5 +5,5 @@ code.code { @extend %label; } .note { @extend %note; } .warning { @extend %note, %note-red; } - .note .label, .warning .label { font-weight: $boldFontWeight; } + .note .label, .warning .label { font-weight: var(--boldFontWeight); } } diff --git a/assets/stylesheets/pages/_jquery.scss b/assets/stylesheets/pages/_jquery.scss index 4858f4ef..d1a62a1c 100644 --- a/assets/stylesheets/pages/_jquery.scss +++ b/assets/stylesheets/pages/_jquery.scss @@ -32,7 +32,7 @@ .toc-list { margin-top: 0; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); > li + li { margin-top: 1em; } > li > ul { font-weight: normal; } @@ -48,7 +48,7 @@ .returns, .option-type { float: right; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); margin-left: 1em; } diff --git a/assets/stylesheets/pages/_love.scss b/assets/stylesheets/pages/_love.scss index a1908523..b037527f 100644 --- a/assets/stylesheets/pages/_love.scss +++ b/assets/stylesheets/pages/_love.scss @@ -12,6 +12,6 @@ .smwtable { width: 100%; } .smwtable td:nth-last-child(2), .smwtable td:last-child { width: 2.5em; } - .cell-green { background: $noteGreenBackground; } - .cell-red { background: $noteRedBackground; } + .cell-green { background: var(--noteGreenBackground); } + .cell-red { background: var(--noteRedBackground); } } diff --git a/assets/stylesheets/pages/_mdn.scss b/assets/stylesheets/pages/_mdn.scss index b1f89f4f..fb2cce38 100644 --- a/assets/stylesheets/pages/_mdn.scss +++ b/assets/stylesheets/pages/_mdn.scss @@ -7,7 +7,7 @@ > span { display: block; font-size: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } ul, ol { @@ -30,6 +30,7 @@ .notice, .warning, .overheadIndicator, + .blockIndicator, .syntaxbox, // CSS, JavaScript .twopartsyntaxbox, // CSS .inheritsbox, // JavaScript @@ -42,7 +43,7 @@ > .note { em { font-style: normal; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } > ul { margin: 1em 0; } @@ -93,7 +94,7 @@ dt > strong > code, // HTML element attribute dl > dt > code { // CSS property value, Javascript function argument font-family: inherit; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); font-size: inherit; } @@ -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/_meteor.scss b/assets/stylesheets/pages/_meteor.scss index adb0121e..5497239f 100644 --- a/assets/stylesheets/pages/_meteor.scss +++ b/assets/stylesheets/pages/_meteor.scss @@ -9,10 +9,10 @@ dt > code { @extend %label; } .api-heading { overflow: hidden; } - .api-heading > code { font-weight: $boldFontWeight; } + .api-heading > code { font-weight: var(--boldFontWeight); } .locus, .src-code { float: right; } .locus, .type, .src-code { margin-left: .5em; } h2 .subtext-api { margin-top: .25rem; } .locus, .subtext-api, .subtext-api > code { font-size: .75rem; } - .locus, .type { color: $textColorLight; } + .locus, .type { color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_node.scss b/assets/stylesheets/pages/_node.scss index 23560151..5d0de4bb 100644 --- a/assets/stylesheets/pages/_node.scss +++ b/assets/stylesheets/pages/_node.scss @@ -20,5 +20,8 @@ margin: 0 0 1em 1em; @extend %label; } + + .srclink { float: right; } + details > table { margin: 0; } } diff --git a/assets/stylesheets/pages/_npm.scss b/assets/stylesheets/pages/_npm.scss index 9bbcc74c..bdb4482d 100644 --- a/assets/stylesheets/pages/_npm.scss +++ b/assets/stylesheets/pages/_npm.scss @@ -8,7 +8,7 @@ .faint.heading { font-size: .9em; - color: $textColorLight; + color: var(--textColorLight); } .youtube-video iframe { width: 420px; height: 315px; } diff --git a/assets/stylesheets/pages/_phalcon.scss b/assets/stylesheets/pages/_phalcon.scss index 646cf07c..60a32758 100644 --- a/assets/stylesheets/pages/_phalcon.scss +++ b/assets/stylesheets/pages/_phalcon.scss @@ -3,6 +3,6 @@ h3 > small { float: right; - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_php.scss b/assets/stylesheets/pages/_php.scss index 319ac647..c6fd4d6b 100644 --- a/assets/stylesheets/pages/_php.scss +++ b/assets/stylesheets/pages/_php.scss @@ -13,7 +13,7 @@ .verinfo { float: right; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } .classsynopsis, @@ -21,7 +21,7 @@ .description > .methodsynopsis, .description > .fieldsynopsis { @extend %note, %note-blue; } - .classsynopsisinfo_comment { color: $textColorLight; } + .classsynopsisinfo_comment { color: var(--textColorLight); } .classsynopsisinfo_comment, .classsynopsis > .constructorsynopsis, diff --git a/assets/stylesheets/pages/_postgres.scss b/assets/stylesheets/pages/_postgres.scss index 69e202c1..7c42a001 100644 --- a/assets/stylesheets/pages/_postgres.scss +++ b/assets/stylesheets/pages/_postgres.scss @@ -16,7 +16,7 @@ } p > code { @extend %label; } - p.c2 { font-weight: $boldFontWeight; } + p.c2 { font-weight: var(--boldFontWeight); } .navfooter > table { width: 100%; } td[align=center] { text-align: center; } diff --git a/assets/stylesheets/pages/_qt.scss b/assets/stylesheets/pages/_qt.scss index db2554ce..360776c0 100644 --- a/assets/stylesheets/pages/_qt.scss +++ b/assets/stylesheets/pages/_qt.scss @@ -4,6 +4,6 @@ // Function headers h3.fn > code { float: right; - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_rdoc.scss b/assets/stylesheets/pages/_rdoc.scss index f1c8b2cb..6622e68e 100644 --- a/assets/stylesheets/pages/_rdoc.scss +++ b/assets/stylesheets/pages/_rdoc.scss @@ -6,7 +6,7 @@ .method-description > h2, h3, h4, h5, h6 { font-size: 1em; } .method-heading { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); @extend %block-label, %label-blue; + .method-heading { margin-top: -.5em; } @@ -22,7 +22,7 @@ a.method-click-advice { float: right; font-size: .75rem; - color: $linkColor; + color: var(--linkColor); cursor: pointer; @extend %user-select-none; @@ -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: rgba($contentBackground, .95); - box-shadow: 0 1em 1em 1em $contentBackground; - - > pre { margin: 0; } } // Rails guides diff --git a/assets/stylesheets/pages/_react_native.scss b/assets/stylesheets/pages/_react_native.scss index ee4d1c67..1345a35f 100644 --- a/assets/stylesheets/pages/_react_native.scss +++ b/assets/stylesheets/pages/_react_native.scss @@ -2,7 +2,7 @@ @extend %simple; .deprecated { @extend %note, %note-orange; } - .deprecatedTitle { font-weight: $boldFontWeight; } + .deprecatedTitle { font-weight: var(--boldFontWeight); } span.platform { float: right; } span.propType, span.platform { font-weight: normal; } diff --git a/assets/stylesheets/pages/_redis.scss b/assets/stylesheets/pages/_redis.scss index 3ed1837c..e4541f8b 100644 --- a/assets/stylesheets/pages/_redis.scss +++ b/assets/stylesheets/pages/_redis.scss @@ -14,7 +14,7 @@ .args { font-size: .75rem; - color: $textColorLight; + color: var(--textColorLight); } // Others @@ -35,7 +35,7 @@ > .prompt { float: left; margin-right: .5em; - color: $textColorLight; + color: var(--textColorLight); } > code { diff --git a/assets/stylesheets/pages/_rfc.scss b/assets/stylesheets/pages/_rfc.scss index b522b308..eab55beb 100644 --- a/assets/stylesheets/pages/_rfc.scss +++ b/assets/stylesheets/pages/_rfc.scss @@ -10,6 +10,6 @@ > h1, > h2, > h3, > h4, > h5 { margin: 0; - font-family: $baseFont; + font-family: var(--baseFont); } } diff --git a/assets/stylesheets/pages/_rust.scss b/assets/stylesheets/pages/_rust.scss index f7f3c90c..fdf80bb1 100644 --- a/assets/stylesheets/pages/_rust.scss +++ b/assets/stylesheets/pages/_rust.scss @@ -3,9 +3,18 @@ h4 { @extend %block-label; } .docblock { margin-left: 1em; } + div.information, div.important-traits { + @extend %note; + + > pre { margin: .5rem 0; } + } div.stability { margin-bottom: 1em; } em.stab, span.stab { @extend %label; } em.stab.unstable, span.stab.unstable { @extend %label-orange; } - .since, .out-of-band { float: right; } + .out-of-band { float: right; } + .since, .srclink { + float: right; + margin-left: .5rem; + } } diff --git a/assets/stylesheets/pages/_simple.scss b/assets/stylesheets/pages/_simple.scss index fe36579d..64157a86 100644 --- a/assets/stylesheets/pages/_simple.scss +++ b/assets/stylesheets/pages/_simple.scss @@ -17,34 +17,4 @@ blockquote > h4, blockquote > h5 { margin-top: .25rem; } } -._apache_pig, -._bower, -._chai, -._codeceptjs, -._docker, -._electron, -._fish, -._flow, -._gnu, -._grunt, -._haxe, -._immutable, -._influxdata, -._jasmine, -._jest, -._less, -._lodash, -._marionette, -._markdown, -._mocha, -._mongoose, -._nim, -._redux, -._requirejs, -._simple, -._typescript, -._vagrant, -._vulkan, -._yarn { - @extend %simple; -} +._simple { @extend %simple; } diff --git a/assets/stylesheets/pages/_sphinx.scss b/assets/stylesheets/pages/_sphinx.scss index 86744e33..ffd71415 100644 --- a/assets/stylesheets/pages/_sphinx.scss +++ b/assets/stylesheets/pages/_sphinx.scss @@ -14,7 +14,7 @@ .versionmodified, span.title, .topic-title { display: block; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } p > code, li > code, dd > code, .docutils > dt > code { @extend %label; } @@ -26,7 +26,7 @@ .admonition-title { float: left; margin: 0 .5em 0 0; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); &:after { content: ':'; } } diff --git a/assets/stylesheets/pages/_sphinx_simple.scss b/assets/stylesheets/pages/_sphinx_simple.scss index 7cb7e0dc..cbee1ea1 100644 --- a/assets/stylesheets/pages/_sphinx_simple.scss +++ b/assets/stylesheets/pages/_sphinx_simple.scss @@ -6,7 +6,7 @@ .admonition.tip { @extend %note-green; } .admonition-title { margin: 0 0 .25rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } code { @extend %label; } diff --git a/assets/stylesheets/pages/_support_tables.scss b/assets/stylesheets/pages/_support_tables.scss index 0ef0b3d3..1fc45b75 100644 --- a/assets/stylesheets/pages/_support_tables.scss +++ b/assets/stylesheets/pages/_support_tables.scss @@ -24,7 +24,7 @@ } tr.current { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); font-size: 1rem; } diff --git a/assets/stylesheets/pages/_yard.scss b/assets/stylesheets/pages/_yard.scss index 227dd234..bb2fbc47 100644 --- a/assets/stylesheets/pages/_yard.scss +++ b/assets/stylesheets/pages/_yard.scss @@ -1,5 +1,5 @@ ._yard { @extend %simple; - .tag_title { font-weight: $boldFontWeight; } + .tag_title { font-weight: var(--boldFontWeight); } } diff --git a/assets/stylesheets/pages/_yii.scss b/assets/stylesheets/pages/_yii.scss index d8e4bed9..6cb99978 100644 --- a/assets/stylesheets/pages/_yii.scss +++ b/assets/stylesheets/pages/_yii.scss @@ -3,6 +3,6 @@ .detail-header-tag, .detailHeaderTag { float: right; - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/docs/adding-docs.md b/docs/adding-docs.md new file mode 100644 index 00000000..dfc96cb1 --- /dev/null +++ b/docs/adding-docs.md @@ -0,0 +1,23 @@ +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. It'll be added to the icon spritesheet after your pull request is merged. +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. + +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, `