Separate gulp script for docs (#6409)

src/Umbraco.Web.UI.Docs/README.md

@@ -0,0 +1,14 @@
+# Umbraco Backoffice UI API Documentation
+
+This project builds the documentation for the UI of the Umbraco backoffice, it is published on Our Umbraco in the "Reference" section of the documentation.
+
+In order to build the documentation, please follow the following two steps:
+
+```
+npm install
+npx gulp docs
+```
+
+After this, you should have an `api` directory which contains index.html. 
+
+In order to check if the documentation works properly, you would need to run the `api` directory in a webserver. On Windows, this can be accomplished by opening the `api` directory in [Visual Studio Code](https://code.visualstudio.com/) and running it with the [IIS Express plugin](https://marketplace.visualstudio.com/items?itemName=warren-buckley.iis-express).

src/Umbraco.Web.UI.Docs/gulpfile.js

@@ -0,0 +1,56 @@
+'use strict';
+
+
+var config = require('../Umbraco.Web.UI.Client/gulp/config');
+var gulp = require('gulp');
+
+var connect = require('gulp-connect');
+var open = require('gulp-open');
+var gulpDocs = require('gulp-ngdocs');
+
+/**************************
+ * Build Backoffice UI API documentation
+ **************************/
+gulp.task('docs', [], function (cb) {
+
+    var options = {
+        html5Mode: false,
+        startPage: '/api',
+        title: "Umbraco Backoffice UI API Documentation",
+        dest: './api',
+        styles: ['./umb-docs.css'],
+        image: "https://our.umbraco.com/assets/images/logo.svg"
+    }
+
+    return gulpDocs.sections({
+        api: {
+            glob: ['../Umbraco.Web.UI.Client/src/common/**/*.js', './src/api/**/*.ngdoc'],
+            api: true,
+            title: 'UI API Documentation'
+        }
+    })
+    .pipe(gulpDocs.process(options))
+    .pipe(gulp.dest('./api'));
+    cb();
+});
+
+gulp.task('connect:docs', function (cb) {
+    connect.server({
+        root: './api',
+        livereload: true,
+        fallback: './api/index.html',
+        port: 8880
+    });
+    cb();
+});
+
+gulp.task('open:docs', function (cb) {
+
+    var options = {
+        uri: 'http://localhost:8880/index.html'
+    };
+
+    gulp.src(__filename)
+    .pipe(open(options));
+    cb();
+});

src/Umbraco.Web.UI.Docs/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "scripts": {
+    "docs": "gulp docs",
+    "start": "gulp docs",
+    "default": "gulp docs"
+  },
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-connect": "5.6.1",
+    "gulp-ngdocs": "0.3.0",
+    "gulp-open": "3.0.1"
+  }
+}

src/Umbraco.Web.UI.Docs/umb-docs.css

@@ -0,0 +1,78 @@
+
+html {
+    font-family: 'Segoe UI', Tahoma, Helvetica, sans-serif;
+}
+body {
+    font-family: 'Segoe UI', Tahoma, Helvetica, sans-serif;
+    
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+    font-family: inherit;
+    font-weight: 400;
+    line-height: 1.1;
+    color: inherit;
+}
+
+.content code {
+    font-family: inherit;
+}
+
+.navbar .brand {
+    display: block;
+    float: left;
+    padding: 10px 20px 10px;
+    margin-left: -20px;
+    font-size: 20px;
+    font-weight: 200;
+    color: rgba(0,0,0,.8);
+    text-shadow: none;
+}
+
+.navbar-fixed-top .navbar-inner {
+    min-height: 50px;
+    background: #a3db78;
+}
+
+.form-search .well {
+    background-color: #f5fbf1;
+}
+
+.form-search > ul.nav > li.module {
+    background-color: #daf0c9;
+}
+
+.breadcrumb {    
+    background-color: #f5fbf1;
+}
+
+a {
+    color: #f36f21;
+}
+a:hover {
+    text-decoration: none;
+    color: rgba(0,0,0,.8);
+}
+.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus,
+.form-search > .nav-list > .active > a, .form-search > .nav-list > .active > a:hover, .form-search > .nav-list > .active > a:focus {
+    color: #f36f21;
+    text-shadow: none;
+    background-color: inherit;
+}
+
+.form-search > ul.nav > li > a {
+    color: rgba(0,0,0,.8);
+    text-shadow: none;
+}
+
+.form-search > ul.nav > li > a:hover {
+    text-decoration: none;
+    background-color: inherit;
+    text-shadow: none;
+    color: #000;
+}
+
+.header img {
+    width: 50px;
+    margin-top: 5px;
+}