docs(jsdoc): introduce a jsdoc template and build on publish (#3910)

Use the TUI JSDoc Template to generate the jsdoc files. Also, build this out on publish.

.jsdoc.json

@@ -1,4 +1,38 @@
 {
+  "source": {
+    "include": [ "src/js/" ],
+    "includePattern": ".js$"
+  },
+  "opts": {
+    "destination": "docs/api",
+    "readme": "docs/index.md",
+    "template": "node_modules/tui-jsdoc-template",
+    "package": "package.json",
+    "recurse": true,
+    "tutorials": "docs/guides",
+    "encoding": "utf8"
+  },
+  "templates": {
+    "default": {
+      "staticFiles": {
+        "include": ["build/docs/"]
+      }
+    },
+    "logo": {
+      "url": "http://videojs.com/img/logo.png",
+      "height": "30px",
+      "width": "214px"
+    },
+    "name": "Video.js Documentation",
+    "tabNames": {
+      "tutorials": "Guides"
+    },
+    "footerText": "<span class='copyright'><a href='http://videojs.com'>Video.js</a> is a free and open source HTML5 video player. © <a href='https://brightcove.com' target='_blank'>Brightcove, Inc</a>. <a href='https://github.com/videojs/video.js/blob/master/LICENSE' class='button blue' target='_blank'>View license</a></span> <ul class='other-links'><li><a href='http://videojs.com' class='button white'><i class='fa fa-external-link'></i> Video.js</a></li> <li><a href='https://twitter.com/videojs' class='button white' target='_blank'><i class='fa fa-twitter'></i> @videojs</a></li> <li><a href='http://github.com/videojs/video.js' class='button white' target='_blank'><i class='fa fa-github-alt'></i> Source</a></li> </ul>",
+    "css": [
+      "styles/videojs.css",
+      "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
+    ]
+  },
   "plugins": ["plugins/markdown"],
   "markdown": {
     "tags": ["example"]

build/docs/styles/videojs.css

@@ -0,0 +1,29 @@
+#resizer,
+footer {
+  background-color: #ECEEF1;
+  color: #868688;
+  padding: 3px 10px;
+}
+
+.footer-text {
+  padding: 3px;
+  display: block; 
+}
+
+footer .copyright {
+  float: left;
+}
+
+footer .other-links {
+  margin: 0;
+  padding: 0;
+  float: right;
+}
+
+footer .other-links li {
+  display: inline;
+}
+
+footer .logo {
+  display: none;
+}

docs/faq.md → docs/guides/faq.md

@@ -269,17 +269,17 @@ Yes! Please [submit an issue or open a pull request][pr-issue-question] if this
 
 Yes! Please [submit an issue or open a pull request][pr-issue-question] if this does not work.
 
-[plugin-guide]: ./guides/plugins.md
+[plugin-guide]: plugins.md
 
 [install-guide]: http://videojs.com/getting-started/
 
-[troubleshooting]: ./guides/troubleshooting.md
+[troubleshooting]: troubleshooting.md
 
-[video-tracks]: ./guides/video-tracks.md
+[video-tracks]: video-tracks.md
 
-[audio-tracks]: ./guides/audio-tracks.md
+[audio-tracks]: audio-tracks.md
 
-[text-tracks]: ./guides/text-tracks.md
+[text-tracks]: text-tracks.md
 
 [pr-issue-question]: #q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do
 

package.json

@@ -25,10 +25,12 @@
     "start": "grunt dev",
     "test": "grunt test",
     "docs": "npm run docs:lint && npm run docs:api",
-    "docs:api": "jsdoc -r src/js -d docs/api -c .jsdoc.json",
+    "jsdoc": "jsdoc",
+    "docs:api": "jsdoc -c .jsdoc.json",
     "docs:lint": "remark -- './**/*.md'",
     "docs:fix": "remark --output -- './**/*.md'",
-    "babel": "babel src/js -d es5"
+    "babel": "babel src/js -d es5",
+    "prepublish": "not-in-install && npm run docs:api || in-install"
   },
   "repository": {
     "type": "git",
@@ -87,6 +89,7 @@
     "grunt-version": "~1.1.1",
     "grunt-videojs-languages": "0.0.4",
     "grunt-zip": "0.17.1",
+    "in-publish": "^2.0.0",
     "istanbul": "^0.4.5",
     "jsdoc": "^3.4.2",
     "karma": "^1.2.0",
@@ -114,6 +117,7 @@
     "shelljs": "^0.7.5",
     "sinon": "^1.16.1",
     "time-grunt": "^1.1.1",
+    "tui-jsdoc-template": "^1.1.0",
     "uglify-js": "~2.7.3",
     "videojs-doc-generator": "0.0.1",
     "videojs-standard": "^6.0.1",