Documentation about extending (#10)

* Documentation about extending

* add github syntax highlighting

* open a javascript prompt, when clicking on example links, to make copy/paste easier

_data/docs.yml

@@ -20,3 +20,19 @@
     - title: AWS EC2 User data example
       include: docs/install/aws-user-data.md
       id: docs-install-post-installation
+- title: Extending
+  id: extending
+  include: docs/extending/index.md
+  subs:
+    - title: Finding extensions
+      id: extending-finding-extensions
+      include: docs/extending/finding-extensions.md
+    - title: Downloading
+      id: extending-downloading
+      include: docs/extending/downloading.md
+    - title: Installing
+      id: extending-installing
+      include: docs/extending/installing.md
+    - title: Configuring
+      id: extending-configuring
+      include: docs/extending/configuring.md

_includes/docs/extending/configuring.md

@@ -0,0 +1,14 @@
+Configuration options for modules can be in many places.
+The most common places to look for are the `Extend` and the `Configuration` page.
+Both can be accessed via the menu at the top.  
+Also, the documentation of the module on [http://drupal.org]() should point to the correct place.
+Note that not all modules have configuration pages.
+
+### Extend page
+Go to the `Extend` page and search for your module.
+If the module is configurable and the maintainer included the correct route in his module,
+you can find a `Configure` link in the module details, which you can open by clicking on the module description.
+
+### Configuration page
+Go to the `Configuration` page and search for your module.
+If the module is configurable, you might see a link to its configuration page here.

_includes/docs/extending/downloading.md

@@ -0,0 +1,51 @@
+Depending on whether you have a composer, command-line, drush-make or UI based workflow, the method of downloading themes and modules differs.
+
+### Composer
+Composer is a package manager for PHP and is the future standard for managing the dependencies of your Drupal 8 site and extensions. Go to the [Drupal documentation](https://www.drupal.org/docs/develop/using-composer/using-composer-with-drupal) for more information.
+
+If you have composer installed, go to the root of your site (there should be a `composer.json` file) and install modules by typing
+```terminal
+$ composer require drupal/[shortname of module]
+```
+into the command line.
+
+For example:
+
+```terminal
+$ composer require drupal/entity_browser
+```
+
+You can also specify a version constraint here. Again refer to the [Drupal documentation about that topic](https://www.drupal.org/node/2718229#adding-modules) to learn more.
+
+### Command line
+To install extensions via the command line, without using composer, you need to have [drush](http://www.drush.org/en/master/) installed. With this tool, you can manage your site in different ways, e.g. importing/exporting database dumps, updating translations, clearing the cache and also downloading and enabling modules or themes.
+
+The command to download an extension is
+```terminal
+$ drush dl [extension]
+```
+which will download the latest recommended release for your Drupal version.
+
+For example:
+```terminal
+$ drush dl entity_browser
+```
+
+Execute
+```terminal
+$ drush help dl
+```
+for all available options.
+
+### Drush make
+The drush-make workflow was the most used one, which involved not checking in all your dependencies into your repository,
+but downloading them in the deployment process. It is now replaced by composer and is regarded deprecated.
+
+### UI
+You can also download modules and themes via the UI, but we _strongly_ advise against that.
+If you are still insisting, here is how to do that:
+
+First you have to enable the `Update Manager` module by going to the `Extend` page, selecting the checkbox near it and clicking on `Install` at the bottom of the page. Then go to
+[https://example.org/admin/modules/install]().  
+Here you can either paste a URL to an archival file on drupal.org, or browse your computer to select one.
+After clicking on install, the module will be downloaded and installed.

_includes/docs/extending/finding-extensions.md

@@ -0,0 +1,5 @@
+You can find many extensions on [Drupal.org](https://www.drupal.org/download).
+Scroll down on the `Download & Extend` page. Here you can either click on `Modules` or `Themes`, to search through all extensions,
+or view the _Most installed_ and newest ones.
+
+If you know what module you want, it is often fastest to just google it, adding `drupal` to the search.

_includes/docs/extending/index.md

@@ -0,0 +1,4 @@
+Drupal is a modular CMS and can be extended by modules, which provide functionality,
+or themes, which modify the appearance of your site.
+
+For information on how to extend Drupal 8 in general, [refer to the Drupal 8 documentation](https://www.drupal.org/docs/8/extending-drupal-8)

_includes/docs/extending/installing.md

@@ -0,0 +1,18 @@
+You can install extensions via the UI or the command line.
+
+### UI
+Modules can be installed by going to [https://example.org/admin/modules](), or by clicking on `Extend` in the menu at the top.  
+Here you can search for them, by entering the name in the filter box at the top.  
+To actually install a module, select the checkbox next to it, scroll to the bottom and click `Install`. You might be warned that another module needs to be enabled, because it is required for the module of your interest. By clicking on `continue`, Drupal will take care of that.
+
+Themes can be installed by going to [https://example.org/admin/appearance](), or by clicking on `Appearance` in the menu at the top.  
+Here you can scroll to the theme, you would like to install and click on `Install` to install it, or click on `Install and set as default` to use the theme for your site, after installing it.  
+At the bottom of this page, you can also decide which installed theme you would like to use as admin theme.
+
+### Command line
+To install a theme or module at the command line, you need to have [drush](http://www.drush.org/en/master/) installed.  
+The command to install a module or theme is:
+```terminal
+$ drush en [extension]
+```  
+To use a theme, you still have to either set it as default or use it as admin theme.

_sass/rouge-github.scss

@@ -0,0 +1,209 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight .cm {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cp {
+  color: #999999;
+  font-weight: bold;
+}
+.highlight .c1 {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cs {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .c, .highlight .cd {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .err {
+  color: #a61717;
+  background-color: #e3d2d2;
+}
+.highlight .gd {
+  color: #000000;
+  background-color: #ffdddd;
+}
+.highlight .ge {
+  color: #000000;
+  font-style: italic;
+}
+.highlight .gr {
+  color: #aa0000;
+}
+.highlight .gh {
+  color: #999999;
+}
+.highlight .gi {
+  color: #000000;
+  background-color: #ddffdd;
+}
+.highlight .go {
+  color: #888888;
+}
+.highlight .gp {
+  color: #555555;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #aaaaaa;
+}
+.highlight .gt {
+  color: #aa0000;
+}
+.highlight .kc {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kd {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kn {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kp {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kr {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kt {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kv {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .mf {
+  color: #009999;
+}
+.highlight .mh {
+  color: #009999;
+}
+.highlight .il {
+  color: #009999;
+}
+.highlight .mi {
+  color: #009999;
+}
+.highlight .mo {
+  color: #009999;
+}
+.highlight .m, .highlight .mb, .highlight .mx {
+  color: #009999;
+}
+.highlight .sb {
+  color: #d14;
+}
+.highlight .sc {
+  color: #d14;
+}
+.highlight .sd {
+  color: #d14;
+}
+.highlight .s2 {
+  color: #d14;
+}
+.highlight .se {
+  color: #d14;
+}
+.highlight .sh {
+  color: #d14;
+}
+.highlight .si {
+  color: #d14;
+}
+.highlight .sx {
+  color: #d14;
+}
+.highlight .sr {
+  color: #009926;
+}
+.highlight .s1 {
+  color: #d14;
+}
+.highlight .ss {
+  color: #990073;
+}
+.highlight .s {
+  color: #d14;
+}
+.highlight .na {
+  color: #008080;
+}
+.highlight .bp {
+  color: #999999;
+}
+.highlight .nb {
+  color: #0086B3;
+}
+.highlight .nc {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .no {
+  color: #008080;
+}
+.highlight .nd {
+  color: #3c5d5d;
+  font-weight: bold;
+}
+.highlight .ni {
+  color: #800080;
+}
+.highlight .ne {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nf {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nl {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nn {
+  color: #555555;
+}
+.highlight .nt {
+  color: #000080;
+}
+.highlight .vc {
+  color: #008080;
+}
+.highlight .vg {
+  color: #008080;
+}
+.highlight .vi {
+  color: #008080;
+}
+.highlight .nv {
+  color: #008080;
+}
+.highlight .ow {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .o {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .w {
+  color: #bbbbbb;
+}
+.highlight {
+  background-color: #f8f8f8;
+}

assets/css/style.scss

@@ -2,6 +2,7 @@
 ---
 
 // @import "normalize";
+@import "rouge-github";
 @import "variables";
 @import "layout";
 @import "youtube";

assets/js/docs.js

@@ -9,5 +9,15 @@
       links[i].target = '_blank';
       links[i].className += ' externalLink';
     }
+    if (links[i].innerText.match(/^https?:\/\/example\.org/)) {
+      links[i].className += ' exampleLink'
+      links[i].onclick = function(e) {
+        e.preventDefault()
+        window.prompt("Copy to clipboard: Ctrl+C (Cmd+C), Enter", e.target.innerText)
+      }
+    }
+
   }
+
+
 })();