Merge pull request #341 from Esri/chore/baseUrl

docs(bug): ensure sticky links are flagged as active in production

.travis.yml

@@ -18,7 +18,7 @@ deploy:
   github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
   on:
     branch: master
-  local-dir: docs/build
+  local-dir: docs/build/arcgis-rest-js
   target_branch: gh-pages
 before_deploy:
  - npm run docs:build

docs/acetate.config.js

@@ -2,31 +2,22 @@ const path = require("path");
 const fs = require("fs");
 const { inspect } = require("util");
 const _ = require("lodash");
-const slug = require("slug");
 
 const IS_DEV = process.env.ENV !== "prod";
-const BASE_URL = process.env.ENV === "prod" ? "/arcgis-rest-js" : "";
 
 module.exports = function(acetate) {
   /**
    * Load all .html and markdown pages in the `src` folder, assigning them a
    * default layout.
    */
   acetate.load("**/*.+(html|md)", {
+    basePath: "arcgis-rest-js",
     metadata: {
       layout: "_layout:main"
     }
   });
 
-  acetate.load("js/*", {
-    metadata: {
-      layout: false,
-      prettyUrl: false
-    }
-  });
-
   acetate.metadata("**/*", {
-    baseUrl: BASE_URL,
     isDev: IS_DEV
   });
 
@@ -110,6 +101,7 @@ module.exports = function(acetate) {
    * start looking for changes and we can listen for the events later.
    */
   acetate.load("typedoc.json", {
+    basePath: "arcgis-rest-js",
     metadata: {
       layout: false,
       prettyUrl: false
@@ -118,7 +110,7 @@ module.exports = function(acetate) {
 
   /**
    * Use Acetates generate helper to generate a page for each `declaration`
-   * and `package` in the typedoc.json.
+   * and `package` in the typedoc.json and generate the search index file
    */
   acetate.generate((createPage, callback) => {
     fs.readFile(
@@ -146,9 +138,18 @@ module.exports = function(acetate) {
           );
         });
 
+        const searchIndex = createPage.fromTemplateString(
+          "arcgis-rest-js/js/index.js",
+          `const ESRI_REST_API_REF_INDEX = ${JSON.stringify(
+            typedoc.quickSearchIndex
+          )}`,
+          path.join(acetate.sourceDir, "js", "index.js"),
+          { layout: false, prettyUrl: false }
+        );
+
         // once all the pages have been generated provide them to Acetate.
         Promise.all(declarationPages.concat(packagePages)).then(pages => {
-          callback(null, pages);
+          callback(null, pages.concat(searchIndex));
         });
       }
     );
@@ -206,7 +207,9 @@ module.exports = function(acetate) {
   // <code> friendly script tag string
   // future entry point for adding SRI hash
   acetate.helper("scriptTag", function(context, package) {
-     return `&lt;script src="https://unpkg.com/${package.name}@${package.version}/dist/umd/${package.name.replace("@esri/arcgis-rest-", "")}.umd.min.js"&gt;&lt;/script&gt;`;
+    return `&lt;script src="https://unpkg.com/${
+      package.name
+    }@${package.version}/dist/umd/${package.name.replace("@esri/arcgis-rest-", "")}.umd.min.js"&gt;&lt;/script&gt;`;
   });
 
   acetate.helper("npmInstallCmd", function(context, package) {

docs/build-typedoc.js

@@ -138,7 +138,7 @@ const md = new MarkdownIt();
        */
       return declarations.map(declaration => {
         const abbreviatedPackageName = declaration.package.replace("arcgis-rest-", "")
-        const src = `api/${abbreviatedPackageName}/${declaration.name}.html`;
+        const src = `arcgis-rest-js/api/${abbreviatedPackageName}/${declaration.name}.html`;
         let children;
 
         if (declaration.children) {
@@ -207,7 +207,7 @@ const md = new MarkdownIt();
           .uniq()
           .reduce((packages, package) => {
             const abbreviatedPackageName = package.replace("arcgis-rest-", "")
-            const src = `api/${abbreviatedPackageName}.html`;
+            const src = `arcgis-rest-js/api/${abbreviatedPackageName}.html`;
             const pkg = require(`${process.cwd()}/packages/${package}/package.json`);
 
             packages.push({

docs/src/_layout.html

@@ -9,7 +9,7 @@
     <meta name="description" content="A modular, high quality toolkit for working with the ArcGIS REST API.">
     {% endif %}
     <link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.0.0-rc.7/css/calcite-web.min.css">
-    <link rel="stylesheet" href="{{baseUrl}}/css/style.css">
+    <link rel="stylesheet" href="/arcgis-rest-js/css/style.css">
     {% block css %}{% endblock %}
   </head>
   <body>
@@ -18,8 +18,8 @@
       <nav class="drawer-nav" role="navigation">
         <aside class="side-nav">
           <h2 class="side-nav-title">ArcGIS REST JS</h2>
-          {% link baseUrl + "/guides/", "Guides", class="side-nav-link" %}
-          {% link baseUrl + "/api/", "API Reference", class="side-nav-link"%}
+          {% link "/arcgis-rest-js/guides/", "Guides", class="side-nav-link" %}
+          {% link "/arcgis-rest-js/api/", "API Reference", class="side-nav-link"%}
         </aside>
       </nav>
     </div>
@@ -32,23 +32,23 @@ <h2 class="side-nav-title">ArcGIS REST JS</h2>
             <!-- desktop sized navigation -->
             <div class="tablet-hide">
               <!-- logo / home -->
-              <a href="{{baseUrl}}/" class="top-nav-title">ArcGIS REST JS</a>
+              <a href="/arcgis-rest-js/" class="top-nav-title">ArcGIS REST JS</a>
               <!-- primary navigation sections -->
               <nav class="top-nav-list" role="navigation" aria-labelledby="topnav">
-                {% link baseUrl + "/guides/", "Guides", class="top-nav-link" %}
-                {% link baseUrl + "/api/", "API Reference", class="top-nav-link"%}
+                {% link "/arcgis-rest-js/guides/", "Guides", class="top-nav-link" %}
+                {% link "/arcgis-rest-js/api/", "API Reference", class="top-nav-link"%}
               </nav>
             </div>
 
             <!-- tablet and mobile sized navigation -->
             <div class="tablet-show top-nav-flex">
               <!-- open primary navigation drawer -->
               <nav class="top-nav-flex-list" role="navigation" aria-labelledby="topnav">
-                <a href="{{baseUrl}}/" class="icon-ui-menu top-nav-link js-drawer-toggle" data-drawer="top-nav"><span class="phone-hide">Menu</span></a>
+                <a href="/arcgis-rest-js/" class="icon-ui-menu top-nav-link js-drawer-toggle" data-drawer="top-nav"><span class="phone-hide">Menu</span></a>
               </nav>
               <!-- logo / home -->
               <header class="top-nav-flex-title">
-                <a href="{{baseUrl}}/" class="top-nav-link">ArcGIS REST API JavaScript Client</a>
+                <a href="/arcgis-rest-js/" class="top-nav-link">ArcGIS REST API JavaScript Client</a>
               </header>
             </div>
           </div>

docs/src/api/_declaration.html

@@ -16,9 +16,9 @@
   {%- endif -%}
 
   {%- if type.type === 'reference' and type.id and API_TOOLS.findById(data.typedoc, type.id) -%}
-    <i><a href="{{ baseUrl + API_TOOLS.findById(data.typedoc, type.id).pageUrl }}">{{type.name}}</a></i>
+    <i><a href="{{ API_TOOLS.findById(data.typedoc, type.id).pageUrl }}">{{type.name}}</a></i>
   {%- elif API_TOOLS.findByName(data.typedoc, type.name) -%}
-    <i><a href="{{ baseUrl + API_TOOLS.findByName(data.typedoc, type.name).pageUrl }}">{{type.name}}</a></i>
+    <i><a href="{{ API_TOOLS.findByName(data.typedoc, type.name).pageUrl }}">{{type.name}}</a></i>
   {%- elif type.type === 'reference' -%}
     <i>{{type.name}}</i>
   {%- endif -%}
@@ -27,7 +27,7 @@
     <span class="code-face"><span class="text-light-gray">function</span><span class="text-light-gray">(</span>{{ @signatureParams(type.declaration.signatures[0].parameters) }}<span class="text-light-gray">) : </span>{{@type(type.declaration.signatures[0].type)}}</span>
   {%- elif type.type === 'reflection' and type.declaration.id and API_TOOLS.findById(data.typedoc, type.declaration.id)  -%}
     {% set declaration = API_TOOLS.findById(data.typedoc, type.declaration.id) %}
-    <i><a href="{{ baseUrl + declaration.pageUrl }}">{{declaration.name}}</a></i>
+    <i><a href="{{ declaration.pageUrl }}">{{declaration.name}}</a></i>
   {%- elif type.type === 'reflection' and type.declaration and type.declaration.indexSignature -%}
     {% for signature in type.declaration.indexSignature %}
       <i class="no-wrap">{% for param in signature.parameters%}[key: {{@type(param.type)}}]: {% endfor %}{{@type(signature.type)}}</i>
@@ -394,11 +394,11 @@ <h2>Implements</h2>
   {% for implementedType in implementedTypes %}
     {% if implementedType.id %}
       {% set base = API_TOOLS.findById(data.typedoc, implementedType.id) %}
-      <li class="code-face {{base.icon}}"><a href="{{ baseUrl + base.pageUrl }}" class="tsd-kind-icon">{{base.name}}</a></li>
+      <li class="code-face {{base.icon}}"><a href="{{ base.pageUrl }}" class="tsd-kind-icon">{{base.name}}</a></li>
     {% elif implementedType.name %}
       {% set base = API_TOOLS.findByName(data.typedoc, implementedType.name) %}
       {% if base %}
-        <li class="code-face {{base.icon}}"><a href="{{ baseUrl + base.pageUrl }}" class="tsd-kind-icon">{{base.name}}</a></li>
+        <li class="code-face {{base.icon}}"><a href="{{ base.pageUrl }}" class="tsd-kind-icon">{{base.name}}</a></li>
       {% elif implementedType.name %}
         <li class="code-face">{{base.name}}</li>
       {% endif %}
@@ -413,11 +413,11 @@ <h2>Extends</h2>
   {% for extendedType in extendedTypes %}
     {% if extendedType.id %}
       {% set base = API_TOOLS.findById(data.typedoc, extendedType.id) %}
-      <li class="code-face {{base.icon}}"><a href="{{ baseUrl + base.pageUrl }}" class="tsd-kind-icon">{{base.name}}</a></li>
+      <li class="code-face {{base.icon}}"><a href="{{ base.pageUrl }}" class="tsd-kind-icon">{{base.name}}</a></li>
     {% elif extendedType.name %}
       {% set base = API_TOOLS.findByName(data.typedoc, extendedType.name) %}
       {% if base %}
-        <li class="code-face {{base.icon}}"><a href="{{ baseUrl + base.pageUrl }}" class="tsd-kind-icon">{{base.name}}</a></li>
+        <li class="code-face {{base.icon}}"><a href="{{ base.pageUrl }}" class="tsd-kind-icon">{{base.name}}</a></li>
       {% elif extendedType.name %}
         <li class="code-face">{{base.name}}</li>
       {% endif %}

docs/src/api/_layout.html

@@ -3,32 +3,32 @@
 {% block scripts %}
   <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
   <script src="https://unpkg.com/fuse.js@3.0.5/dist/fuse.min.js"></script>
-  <script src="{{baseUrl}}/js/index.js"></script>
-  <script src="{{baseUrl}}/js/api-search.js"></script>
-  <script src="{{baseUrl}}/js/nav-toggle.js"></script>
+  <script src="/arcgis-rest-js/js/index.js"></script>
+  <script src="/arcgis-rest-js/js/api-search.js"></script>
+  <script src="/arcgis-rest-js/js/nav-toggle.js"></script>
   <script>
     new Vue({
       el: "#page"
     });
   </script>
-  
+
 {% endblock %}
 
 {% block main %}
   <div class="grid-container trailer-1 leader-1">
     <div class="column-6">
-      <api-search base-url="{{baseUrl}}">
+      <api-search base-url="/arcgis-rest-js/">
         <ul class="list-plain">
           {% for package in data.typedoc.packages %}
           <li class="{{ package.icon }} api-list-item">
             <nav-toggle index="{{loop.index}}" package-name="{{package.pkg.name}}"></nav-toggle>
             <button id="trigger{{loop.index}}" class="btn btn-transparent api-toggle-button">
               <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="svg-icon"><path d="M7 4h5l12 12-12 12H7l12-12L7 4z"/></svg>
-            </button> 
-            {% link baseUrl + package.pageUrl, package.pkg.name, class="tsd-kind-icon" %}
+            </button>
+            {% link package.pageUrl, package.pkg.name, class="tsd-kind-icon" %}
             <ul id="list{{loop.index}}" class="api-package-content-list">
             {% for declaration in package.declarations %}
-              <li class="{{ declaration.icon }} padding-left-1 padding-right-1 visually-hidden">{% link baseUrl + declaration.pageUrl, declaration.name, class="tsd-kind-icon padding-right-1" %}</li>
+              <li class="{{ declaration.icon }} padding-left-1 padding-right-1 visually-hidden">{% link declaration.pageUrl, declaration.name, class="tsd-kind-icon padding-right-1" %}</li>
             {% endfor %}
             </ul>
           </li>

docs/src/api/_package.html

@@ -1,5 +1,5 @@
 <small class="label right">Version {{pkg.version}}</small>
-<h1 class="{{icon}} font-size-3 trailer-half"> {% link baseUrl + url, pkg.name, class="tsd-kind-icon" %}</h1>
+<h1 class="{{icon}} font-size-3 trailer-half"> {% link url, pkg.name, class="tsd-kind-icon" %}</h1>
 <p class="trailer-half">{{pkg.description}}</p>
 <h2 class="font-size--1 trailer-half">npm install:</h2>
 <pre><code>{% npmInstallCmd pkg %}</code></pre>
@@ -8,6 +8,6 @@ <h2 class="font-size--1 trailer-half">CDN:</h2>
 <hr class="leader-half trailer-half">
 <ul class="list-plain package-contents">
 {% for declaration in declarations %}
-  <li class="{{ declaration.icon }}">{% link baseUrl + declaration.pageUrl, declaration.name, class="tsd-kind-icon" %}</li>
+  <li class="{{ declaration.icon }}">{% link declaration.pageUrl, declaration.name, class="tsd-kind-icon" %}</li>
 {% endfor %}
 </ul>

docs/src/api/index.html

@@ -6,7 +6,7 @@ <h1 class="font-size-4">Packages</h1>
 {% for package in data.typedoc.packages %}
 <section class="panel panel-white leader-1">
   <small class="label right">Version {{package.pkg.version}}</small>
-  <h2 class="{{package.icon}} font-size-3 trailer-half"> {% link baseUrl + package.pageUrl, package.pkg.name, class="tsd-kind-icon" %}</h2>
+  <h2 class="{{package.icon}} font-size-3 trailer-half"> {% link package.pageUrl, package.pkg.name, class="tsd-kind-icon" %}</h2>
   <p>{{package.pkg.description}}</p>
   <h3 class="font-size--1 trailer-half">npm install:</h3>
   <pre><code>{% npmInstallCmd package.pkg %}</code></pre>
@@ -15,7 +15,7 @@ <h3 class="font-size--1 trailer-half">CDN:</h3>
   <hr class="leader-half trailer-half">
   <ul class="list-plain package-contents">
   {% for declaration in package.declarations %}
-    <li class="{{declaration.icon}}">{% link baseUrl + declaration.pageUrl, declaration.name, class="tsd-kind-icon" %}</li>
+    <li class="{{declaration.icon}}">{% link declaration.pageUrl, declaration.name, class="tsd-kind-icon" %}</li>
   {% endfor %}
   </ul>
 </section>

docs/src/guides/_layout.html

@@ -8,7 +8,7 @@
           <li>{{section.name}}</li>
           <ul class="list-plain margin-left-1">
             {% for item in section.items %}
-              <li>{% link baseUrl + item.url, item.title %}</li>
+              <li>{% link item.url, item.title %}</li>
             {% endfor %}
           </ul>
         {% endfor %}

docs/src/index.html

@@ -4,8 +4,8 @@
     <div class="column-24 text-center leader-4 trailer-5">
       <h1 class="font-size-7 text-white">ArcGIS REST JS</h1>
       <p class="text-white font-size-2">Compact, modular JavaScript wrappers for the ArcGIS REST API</a>.</p>
-      {% link baseUrl + "/guides/", "Get Started", class="btn btn-large btn-clear-white" %}
-      {% link baseUrl + "/api/", "API Reference", class="btn btn-large btn-clear-white" %}
+      {% link "./guides/", "Get Started", class="btn btn-large btn-clear-white" %}
+      {% link "./api/", "API Reference", class="btn btn-large btn-clear-white" %}
     </div>
   </div>
 </header>

docs/src/js/api-search.js

@@ -31,7 +31,6 @@ Vue.component("api-search", {
       searchTerm: ""
     };
   },
-  props: ['baseUrl'],
   methods: {
     highlightText: function(text, matches) {
       return matches
@@ -64,7 +63,7 @@ Vue.component("api-search", {
         return {
           title: this.highlightText(result.item.title, result.matches),
           icon: result.item.icon,
-          url: this.baseUrl + result.item.url
+          url: result.item.url
         };
       });
     },

package.json

@@ -84,20 +84,21 @@
     "test:node:debug": "inspect jasmine --config=jasmine.json",
     "test:ci": "npm run lint && npm run test:node && npm run test:chrome:ci && npm run test:firefox",
     "test:all": "npm run test:node && npm run test:firefox && npm run test:chrome",
-    "docs:build": "rimraf docs/build && npm run docs:typedoc && npm run docs:build:acetate && npm run docs:build:sass && npm run docs:build:images",
+    "docs:build": "rimraf docs/build && npm run docs:typedoc && npm run docs:build:acetate && npm run docs:build:sass && npm run docs:build:images && npm run docs:build:js",
     "docs:build:acetate": "ENV=prod acetate build --config docs/acetate.config.js",
-    "docs:build:sass": "node-sass --output docs/build/css --source-map true --source-map-contents docs/src/sass",
-    "docs:build:images": "cpx \"docs/src/**/*.{png,jpg,jpeg,gif,svg,webm,ogg}\" docs/build",
+    "docs:build:sass": "node-sass --output docs/build/arcgis-rest-js/css --source-map true --source-map-contents docs/src/sass",
+    "docs:build:images": "cpx \"docs/src/**/*.{png,jpg,jpeg,gif,svg,webm,ogg}\" docs/build/arcgis-rest-js",
+    "docs:build:js": "cpx \"docs/src/**/{api-search,nav-toggle}.js\" docs/build/arcgis-rest-js",
     "docs:deploy": "npm run docs:build && node support/deploy-doc-site.js",
     "docs:typedoc": "node docs/build-typedoc.js",
     "docs:dev:typedoc": "onchange -v 'packages/*/src/**/*.ts' -- npm run docs:typedoc",
     "predocs:serve": "npm run docs:typedoc",
     "docs:serve": "rimraf docs/build && concurrently \"npm run docs:dev:js\" \"npm run docs:dev:images\" \"npm run docs:dev:acetate\" \"npm run docs:dev:sass\" \"npm run docs:dev:typedoc\"",
-    "docs:dev:images": "cpx \"docs/src/**/*.{png,jpg,jpeg,gif,svg,webm,ogg}\" docs/build -w",
+    "docs:dev:images": "cpx \"docs/src/**/*.{png,jpg,jpeg,gif,svg,webm,ogg}\" docs/build/arcgis-rest-js -w",
     "docs:dev:acetate": "acetate server --log=debug --config docs/acetate.config.js",
     "predocs:dev:sass": "npm run docs:build:sass",
-    "docs:dev:sass": "node-sass --watch --recursive --output docs/build/css --source-map true --source-map-contents docs/src/sass",
-    "docs:dev:js": "cpx \"docs/src/**/{api-search,nav-toggle}.js\" docs/build -w",
+    "docs:dev:sass": "node-sass --watch --recursive --output docs/build/arcgis-rest-js/css --source-map true --source-map-contents docs/src/sass",
+    "docs:dev:js": "cpx \"docs/src/**/{api-search,nav-toggle}.js\" docs/build/arcgis-rest-js -w",
     "lint": "tslint --project tsconfig.json",
     "lint:fix": "tslint --project tsconfig.json --fix",
     "precommit": "lint-staged",