Apply changes from catalog upstream

Changes introduced in catalog upstream were introduced by running
`datalad catalog-create -c docs --force` and using Git to stage or
discard specific changes.

The only file which needed staging in chunks was index.html, and one
property had to be added to the config file by hand (catalog_url).

This uses:
datalad/datalad-catalog/commit/821b12f51302b9a830dee00ac5f4f247aed0532e

Closes #93, fixes #92, fixes #88

docs/README.md

@@ -20,16 +20,16 @@ The `artwork` and `assets` directories contain images and web assets (such as Ja
 
 ## Serving the content
 
-Since this site is self-contained and static, no further build processes, server-side implementations, or access to content delivery networks (CDNs) are necessary in order to serve the content. All that is needed is a simple HTTP server.
+Since this site is self-contained and static, no further build processes or access to content delivery networks (CDNs) are necessary in order to serve the content. All that is needed is a simple HTTP server with one specific addition - a custom redirect. This is required because the application makes use of [Vue Router's history mode](https://v3.router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode), which requires a server-side redirect configuration to deal with the fact that a VueJS application is actually a single-page app.
 
-This can be achieved locally, for example using Python:
+For serving the content locally, this is already taken care of in `datalad-catalog`, and you can simply run the following:
 
 ```bash
 cd path/to/catalog/directory
-python3 -m http.server
+datalad catalog-serve -c .
 ```
 
-The content can also be hosted and served online. A straightforward and free way to achieve this is via GitHub and [GitHub Pages](https://pages.github.com/). After publishing this content as a GitHub repository, you can activate GitHub Pages in the repository's settings. See detailed instructions [here](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site).
+The content can also be hosted and served online. A straightforward way to achieve this, and one which has a free tier, is via [Netlify](https://www.netlify.com/) (the common alternative, [GitHub Pages](https://pages.github.com/), does not currently support server-side redirects). After publishing this content, e.g. as a GitHub repository, you can link that repository to a site on Netlify. [See here](https://docs.netlify.com/routing/redirects/) how to set up redirects with Netlify. Of course, the site can also be served from your preferred server setup, as long as page redirects can be supported.
 
 ## Maintaining content
 

docs/assets/app.js

@@ -11,6 +11,7 @@ var datacat = new Vue({
     links: {},
     dataset_options: {},
     config_ready: false,
+    catalog_config: {},
   },
   methods: {
     gotoHome() {
@@ -22,25 +23,9 @@ var datacat = new Vue({
     gotoExternal(dest) {
       window.open(dest);
     },
-    async load() {
-      // Load templates
-      await Promise.all(
-        Object.keys(template_paths).map(async (key, index) => {
-          url = template_dir + "/" + template_paths[key]
-          fetch(url).
-          then(response => {
-              return response.text();
-          }).
-          then(text => {
-              console.log('template loaded: '+key)
-              console.log(text)
-              document.getElementById(key).innerHTML = text;
-          });
-        })
-      )
-    }
   },
   beforeCreate() {
+    console.debug("Executing lifecycle hook: beforeCreate")
     fetch(config_file)
       .then((response) => {
         if (response.ok) {
@@ -54,6 +39,14 @@ var datacat = new Vue({
       })
       .then((responseJson) => {
         obj = responseJson;
+        // first ensure that the config has all required fields;
+        // if some are missing, fill them in from default_config
+        for (const [key, value] of Object.entries(default_config)) {
+          if (!obj.hasOwnProperty(key) ) {
+            obj[key] = value;
+          }
+        }
+        this.catalog_config = obj
         // set social links
         this.social_links = obj.social_links
         // set dataset options

docs/assets/app_component_contexttab.js

@@ -0,0 +1,33 @@
+// Component definition: an "additional tab" with context
+Vue.component('context-tab-body', function (resolve, reject) {
+  url = template_dir + "/context-tab-template.html"
+  fetch(url).
+    then(response => {
+        return response.text();
+    }).
+    then(text => {
+        resolve(
+          {
+            template: text,
+            props: {
+              tabby: Object,
+            },
+            data: function () {
+              return {
+                context_tab_ready: false,
+              };
+            },
+            computed: {},
+            methods: {
+              toUpperString(str_in) {
+                return str_in.charAt(0).toUpperCase() + str_in.slice(1)
+              }
+            },
+            async created() {
+              this.context_tab_ready = true;
+              // console.log(new_tab)
+            }
+          }
+        )
+    });
+});