Merge remote-tracking branch 'radiant/dev' into master-radiant

README.md

@@ -1,14 +1,16 @@
 # STAC Browser
 
-This is a [Spatio-Temporal Asset Catalog
-(STAC)](https://github.com/radiantearth/stac-spec) browser for static catalogs.
+This is a [Spatio-Temporal Asset Catalog (STAC)](https://github.com/radiantearth/stac-spec) browser for static catalogs.
+Minimal support for APIs is implemented, but it not the focus of the Browser and may lead to issues.
 It attempts to surface all included data in a user-centric way (an approach
 which can inform how data is represented in the evolving spec). It is
 implemented as a single page application (SPA) for ease of development and to
 limit the overall number of catalog reads necessary when browsing (as catalogs
 may be nested and do not necessarily contain references to their parents).
 
-Version: 2.0.0-rc.2 (supports all STAC versions between 0.6.0 and 1.0.0-rc.4)
+Version: **2.0.0-rc.3** (supports all STAC versions between 0.6.0 and 1.0.0-rc.4)
+
+This package has also been published to npm as [`@radiantearth/stac-browser`](https://www.npmjs.com/package/@radiantearth/stac-browser).
 
 ## Examples
 
@@ -19,34 +21,55 @@ For a longer list of examples, checkout out [STAC Index](https://stac-index.org)
 
 ## Running
 
-By default, stac-browser will browse the [testbed Planet
-catalog](https://raw.githubusercontent.com/cholmes/sample-stac/master/stac/catalog.json)
-([GitHub](https://github.com/cholmes/sample-stac/)). To browse your own, set
-`CATALOG_URL` when building.
-
+First, you need to install all dependencies:
 ```bash
 npm install
-CATALOG_URL=http://path/to/catalog.json npm start -- --open
 ```
 
-STAC Browser defaults to using [HTML5 History
-Mode](https://router.vuejs.org/guide/essentials/history-mode.html), which can
-cause problems on certain web hosts. To use _hash mode_, set
-`HISTORY_MODE=hash` when running or building. This will be compatible with
-S3, stock Apache, etc.
+By default, stac-browser will browse the
+[testbed Planet catalog](https://raw.githubusercontent.com/cholmes/sample-stac/master/stac/catalog.json).
 
-This package has also been published to npm as [`@radiantearth/stac-browser`](https://www.npmjs.com/package/@radiantearth/stac-browser).
+To browse your own, set the `CATALOG_URL` CLI parameter when running the dev server:
+```bash
+npm start -- --open --CATALOG_URL="http://path/to/catalog.json"
+```
+
+**Deprecated:** You can also set the environment variable `CATALOG_URL` instead of using the CLI parameter:
+
+* Linux/Unix/MacOS: `CATALOG_URL=http://path/to/catalog.json`
+* Windows PowerShell: `$env:CATALOG_URL = "http://path/to/catalog.json"`
+* Windows CMD: `SET CATALOG_URL="http://path/to/catalog.json"`
 
 ## Other options
 
+All the following options can be used as explained in the chapter "Running", either as CLI Parameter or as environment variable (deprecated).
+
+### HISTORY_MODE
+
+STAC Browser defaults to using [HTML5 History Mode](https://router.vuejs.org/guide/essentials/history-mode.html),
+which can cause problems on certain web hosts. To use _hash mode_, set `--HISTORY_MODE=hash` when running or building.
+This will be compatible with S3, stock Apache, etc.
+
+### PATH_PREFIX
+
+If you don't deploy the STAC Browser instance at the root path of your (sub) domain, then you need to set the path prefix
+when building (or running) STAC Browser.
+
+```bash
+npm run build -- --PATH_PREFIX="/browser/"
+```
+
+This will build STAC Browser in a way that it can be hosted at `https://example.com/browser` for example.
+Using this parameter for the dev server will make STAC Browser available at `http://localhost:8080/browser`.
+
 ### STAC_PROXY_URL
 
 Setting the `STAC_PROXY_URL` allows users to modify the URLs contained in the catalog to point to another location.
 For instance, if you are serving a catalog on the local file system at `/home/user/catalog.json`, but want to serve
 the data out from a server located at `http://localhost:8888/`, you can use:
 
-```
-CATALOG_URL=http://localhost:8888/catalog.json STAC_PROXY_URL="/home/user|http://localhost:8888" npm start -- --open
+```bash
+npm start -- --open --STAC_PROXY_URL="/home/user|http://localhost:8888"
 ```
 
 Notice the format of the value: it is the original location and the proxy location separated by the `|` character, i.e. `{original}|{proxy}`.
@@ -59,18 +82,14 @@ and be able to browse that catalog.
 ### TILE_SOURCE_TEMPLATE
 
 The `TILE_SOURCE_TEMPLATE` environment variable controls the tile layer that is used to render COGs. If not set, the default value is:
-
-```
-https://tiles.rdnt.io/tiles/{z}/{x}/{y}@2x?url={ASSET_HREF}
-```
-
+`https://tiles.rdnt.io/tiles/{z}/{x}/{y}@2x?url={ASSET_HREF}`,
 which uses the [tiles.rdnt.io](https://github.com/radiantearth/tiles.rdnt.io) project to serve publicly accessible COGs as tile layers.
 
 The format of this value is a tile layer template with an optional `{ASSET_HREF}` that will be replaced with the COG asset href. For example,
 using a local version of [titiler](https://github.com/developmentseed/titiler) to serve local COG files would look something like:
 
-```
-TILE_SOURCE_TEMPLATE=http://localhost:8000/cog/tiles/{z}/{x}/{y}?url={ASSET_HREF} npm start -- --open
+```bash
+npm start -- --open --TILE_SOURCE_TEMPLATE="http://localhost:8000/cog/tiles/{z}/{x}/{y}?url={ASSET_HREF}"
 ```
 
 ### TILE_PROXY_URL

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radiantearth/stac-browser",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.3",
   "description": "A Vue-based STAC browser intended for static + dynamic deployment",
   "main": "src/main.js",
   "scripts": {
@@ -50,7 +50,8 @@
     "vue-meta": "^2.4.0",
     "vue-multiselect": "^2.1.6",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "yargs": "^17.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/components/common.js

@@ -30,12 +30,6 @@ const MARKDOWN_WRITER = new HtmlRenderer({
 export default {
   metaInfo() {
     return {
-      meta: [
-        {
-          name: "google-site-verification",
-          content: process.env.GOOGLE_SITE_VERIFICATION
-        }
-      ].filter(({ content }) => content != null),
       script: [
         { json: this.jsonLD, type: "application/ld+json" },
         {

src/config.js

@@ -1,13 +1,6 @@
-export const CATALOG_URL =
-  process.env.CATALOG_URL ||
-  "https://storage.googleapis.com/pdd-stac/disasters-0.9.0/catalog.json";
-
-export const TILE_SOURCE_TEMPLATE =
-  process.env.TILE_SOURCE_TEMPLATE ||
-  "https://tiles.rdnt.io/tiles/{z}/{x}/{y}@2x?url={ASSET_HREF}";
-
-export const STAC_PROXY_URL =
-  process.env.STAC_PROXY_URL;
-
-export const TILE_PROXY_URL =
-  process.env.TILE_PROXY_URL
+export const CATALOG_URL = process.env.CATALOG_URL;
+export const TILE_SOURCE_TEMPLATE = process.env.TILE_SOURCE_TEMPLATE;
+export const STAC_PROXY_URL = process.env.STAC_PROXY_URL;
+export const TILE_PROXY_URL = process.env.TILE_PROXY_URL;
+export const PATH_PREFIX = process.env.PATH_PREFIX;
+export const HISTORY_MODE = process.env.HISTORY_MODE;

src/main.js

@@ -17,7 +17,7 @@ import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
 import "leaflet/dist/leaflet.css";
 
-import { CATALOG_URL } from "./config";
+import { CATALOG_URL, PATH_PREFIX, HISTORY_MODE } from "./config";
 import { fetchUri, getProxiedUri } from "./util";
 
 const Catalog = () => import(/* webpackChunkName: "catalog" */ "./components/Catalog.vue");
@@ -234,8 +234,8 @@ const main = async () => {
   });
 
   const router = new VueRouter({
-    base: process.env.PATH_PREFIX || "/",
-    mode: process.env.HISTORY_MODE || "history",
+    base: PATH_PREFIX,
+    mode: HISTORY_MODE,
     routes
   });
 

vue.config.js

@@ -1,4 +1,33 @@
+const { argv } = require("yargs");
+
+const DEFAULT_PATH_PREFIX = '/';
+
+function getVar(name, defaultValue) {
+	let value;
+	if (typeof argv[name] === 'string') {
+		value = argv[name];
+	}
+	else if (typeof process.env[name] === 'string') {
+		value = process.env[name];
+	}
+	else {
+		value = defaultValue;
+	}
+	return `"${value}"`;
+}
+
 module.exports = {
 	runtimeCompiler: true,
-	publicPath: '/', // Set this if you'd like to deploy at a sub-path
+	publicPath: process.env.PATH_PREFIX || argv.PATH_PREFIX || DEFAULT_PATH_PREFIX, // Set this if you'd like to deploy at a sub-path,
+	chainWebpack: config => {
+	  	config.plugin('define').tap(args => {
+			args[0]["process.env"].CATALOG_URL = getVar('CATALOG_URL', 'https://raw.githubusercontent.com/cholmes/pdd-stac/beta2/disasters/collection.json');
+			args[0]["process.env"].TILE_SOURCE_TEMPLATE = getVar('TILE_SOURCE_TEMPLATE', 'https://tiles.rdnt.io/tiles/{z}/{x}/{y}@2x?url={ASSET_HREF}');
+			args[0]["process.env"].STAC_PROXY_URL = getVar('STAC_PROXY_URL');
+			args[0]["process.env"].TILE_PROXY_URL = getVar('TILE_PROXY_URL');
+			args[0]["process.env"].PATH_PREFIX = getVar('PATH_PREFIX', DEFAULT_PATH_PREFIX);
+			args[0]["process.env"].HISTORY_MODE = getVar('HISTORY_MODE', 'history');
+			return args;
+		})
+	}
 }