Merge pull request #83 from psychoinformatics-de/seo

SEO performance improvements
sfb1451 · Feb 5, 2024 · baf30da · baf30da
2 parents c3e535b + 3e2859e
commit baf30da
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 51 deletions.
diff --git a/docs/assets/app_component_dataset.js b/docs/assets/app_component_dataset.js
@@ -38,20 +38,19 @@ const datasetView = () =>
             citation_busy: false,
             citation_text: "",
             invalid_doi: false,
-            show_backbutton: false,
+            // show_backbutton: false,
           };
         },
         watch: {
           subdatasets_ready: function (newVal, oldVal) {
             if (newVal) {
-              console.log("subdatasets fetched!");
+              console.log("Watched property: subdatasets_ready = true")
+              console.log("Subdatasets have been fetched:");
               this.subdatasets = this.selectedDataset.subdatasets;
-              console.log("from watcher");
               console.log(this.subdatasets);
               tags = this.tag_options;
               if (this.subdatasets) {
                 this.subdatasets.forEach((subds, index) => {
-                  console.log(index + "; " + subds);
                   if (subds.available == "true" && subds.keywords) {
                     tags = tags.concat(
                       subds.keywords.filter((item) => tags.indexOf(item) < 0)
@@ -68,6 +67,8 @@ const datasetView = () =>
           dataset_ready: function (newVal, oldVal) {
             // TODO: some of these methods/steps should be moved to the generatpr tool. e.g. shortname
             if (newVal) {
+              console.log("Watched property: dataset_ready = true")
+              console.log("Active dataset:");
               dataset = this.selectedDataset;
               console.log(this.selectedDataset);
               disp_dataset = {};
@@ -298,6 +299,13 @@ const datasetView = () =>
             }
             return sorted;
           },
+          showBackButtonComp() {
+            if (this.currentIsHome()) {
+              return false
+            } else {
+              return true
+            }
+          }
         },
         methods: {
           newTabActivated(newTabIndex, prevTabIndex, bvEvent) {
@@ -311,9 +319,7 @@ const datasetView = () =>
             // https://www.sitepoint.com/clipboard-api/
             selectText = document.getElementById("clone_code").textContent;
             selectText = '\n      ' + selectText + '  \n\n  '
-            console.log(selectText)
             selectText = selectText.replace(/^\s+|\s+$/g, '');
-            console.log(selectText)
             navigator.clipboard
               .writeText(selectText)
               .then(() => {})
@@ -345,6 +351,9 @@ const datasetView = () =>
             }, 1000);
           },
           async selectDataset(event, obj, objId, objVersion, objPath) {
+            console.log("Inside selectDataset")
+            console.log(event)
+            event.preventDefault()
             var newBrowserTab = event.ctrlKey || event.metaKey || (event.button == 1)
             if (obj != null) {
               objId = obj.dataset_id;
@@ -604,6 +613,7 @@ const datasetView = () =>
           },
         },
         async beforeRouteUpdate(to, from, next) {
+          console.log("Executing navigation guard: beforeRouteUpdate")
           this.subdatasets_ready = false;
           this.dataset_ready = false;
 
@@ -747,15 +757,10 @@ const datasetView = () =>
             available_tabs_lower,
             this.$root.selectedDataset.config?.dataset_options?.default_tab
           )
-          // if navigated to using vue router (i.e. internal to the app), show the back button
-          if (this.currentIsHome()) {
-            this.$root.selectedDataset.show_backbutton = false
-          } else {
-            this.$root.selectedDataset.show_backbutton = true
-          }
           next();
         },
         async created() {
+          console.log("Executing lifecycle hook: created")
           // fetch superfile in order to set id and version on $root
           homefile = metadata_dir + "/super.json";
           homeresponse = await fetch(homefile);
@@ -886,6 +891,7 @@ const datasetView = () =>
           )
         },
         mounted() {
+          console.log("Executing lifecycle hook: mounted")
           this.tag_options_filtered = this.tag_options;
           this.tag_options_available = this.tag_options;
         }

diff --git a/docs/assets/app_globals.js b/docs/assets/app_globals.js
@@ -2,17 +2,17 @@
 // Data //
 /********/
 
-const config_file = "./config.json";
-const metadata_dir = "./metadata";
-const superdatasets_file = metadata_dir + "./super.json";
-const json_file = metadata_dir + "./datasets.json";
+const template_dir = "/templates";
+const config_file = "/config.json";
+const metadata_dir = "/metadata";
+const superdatasets_file = metadata_dir + "/super.json";
 const SPLIT_INDEX = 3;
 const SHORT_NAME_LENGTH = 0; // number of characters in name to display, zero if all
 const default_config = {
   catalog_name: "DataCat",
   link_color: "#fba304",
   link_hover_color: "#af7714",
-  logo_path: "artwork/catalog_logo.svg",
+  logo_path: "/artwork/catalog_logo.svg",
   social_links: {
     about: null,
     documentation: null,
@@ -24,7 +24,6 @@ const default_config = {
     include_metadata_export: true,
   }
 };
-const template_dir = "./templates";
 
 /*************/
 // Functions //
@@ -48,7 +47,6 @@ async function grabSubDatasets(app) {
           console.error(er);
           subds_json[index] = "unavailable";
         }
-        console.log(subds_json[index]);
       }
     })
   );

diff --git a/docs/assets/app_router.js b/docs/assets/app_router.js
@@ -41,11 +41,17 @@ const routes = [
     name: "dataset",
   },
   { path: "/about", component: aboutPage, name: "about" },
-  { path: "*", component: notFound, name: "404" },
+  { 
+    path: '/:catchAll(.*)', 
+    component: notFound,
+    name: '404'
+  }
 ];
 
 // Create router
 const router = new VueRouter({
+  mode: 'history',
+  base: '/',
   routes: routes,
   scrollBehavior(to, from, savedPosition) {
     return { x: 0, y: 0, behavior: "auto" };

diff --git a/docs/display_schema.html b/docs/display_schema.html
@@ -7,16 +7,16 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
     <!-- Required Stylesheets -->
-    <link rel="stylesheet" type="text/css" href="assets/style.css"/>
-    <link rel="stylesheet" type="text/css" href="assets/fontawesome.min.css"/>
-    <link rel="stylesheet" type="text/css" href="assets/brands.min.css"/>
-    <link type="text/css" rel="stylesheet" href="assets/bootstrap.5.1.3.min.css"/>
-    <link type="text/css" rel="stylesheet" href="assets/bootstrap-vue.2.21.2.min.css"/>
+    <link rel="stylesheet" type="text/css" href="/assets/style.css"/>
+    <link rel="stylesheet" type="text/css" href="/assets/fontawesome.min.css"/>
+    <link rel="stylesheet" type="text/css" href="/assets/brands.min.css"/>
+    <link type="text/css" rel="stylesheet" href="/assets/bootstrap.5.1.3.min.css"/>
+    <link type="text/css" rel="stylesheet" href="/assets/bootstrap-vue.2.21.2.min.css"/>
 
     <!-- Required scripts -->
-    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
-    <!-- <script src="assets/vue.2.6.14.min.js"></script> -->
-    <script src="assets/bootstrap-vue.2.21.2.min.js"></script>
+    <!-- <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> -->
+    <script src="/assets/vue.2.6.14.min.js"></script>
+    <script src="/assets/bootstrap-vue.2.21.2.min.js"></script>
 
     <!-- Vue component templates -->
 
@@ -327,6 +327,6 @@
     </b-container>
     <br><br><br><br>
     <!-- Start running your app -->
-    <script src="assets/display_schema.js"></script>
+    <script src="/assets/display_schema.js"></script>
   </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -7,26 +7,26 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <meta name="google-site-verification" content="UPoHJ9wKm1deK7-fTT1pHwcx4AScx9gz00zhom-lc_I" />
 
-    <link rel="icon" href="assets/favicon/sfb1451_fav.ico" type="image/x-icon">
+    <link rel="icon" href="/assets/favicon/sfb1451_fav.ico" type="image/x-icon">
     <!-- <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png"> -->
 
     <title>SFB1451 Catalog</title>
 
     <!-- Required Stylesheets -->
-    <link rel="stylesheet" type="text/css" href="assets/style.css"/>
-    <link rel="stylesheet" type="text/css" href="assets/fontawesome.min.css"/>
-    <link rel="stylesheet" type="text/css" href="assets/brands.min.css"/>
-    <link type="text/css" rel="stylesheet" href="assets/bootstrap.5.1.3.min.css"/>
-    <link type="text/css" rel="stylesheet" href="assets/bootstrap-vue.2.21.2.min.css"/>
+    <link rel="stylesheet" type="text/css" href="/assets/style.css"/>
+    <link rel="stylesheet" type="text/css" href="/assets/fontawesome.min.css"/>
+    <link rel="stylesheet" type="text/css" href="/assets/brands.min.css"/>
+    <link type="text/css" rel="stylesheet" href="/assets/bootstrap.5.1.3.min.css"/>
+    <link type="text/css" rel="stylesheet" href="/assets/bootstrap-vue.2.21.2.min.css"/>
 
     <!-- Required scripts -->
     <!-- <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> -->
-    <script src="assets/vue.2.6.14.min.js"></script>
-    <script src="assets/bootstrap-vue.2.21.2.min.js"></script>
-    <script src="assets/vue-router.3.5.3.min.js"></script>
-    <script src="assets/md5-2.3.0.js"></script>
-    <script src="assets/marked.4.0.17.min.js"></script>
+    <script src="/assets/vue.2.6.14.min.js"></script>
+    <script src="/assets/bootstrap-vue.2.21.2.min.js"></script>
+    <script src="/assets/vue-router.3.5.3.min.js"></script>
+    <script src="/assets/md5-2.3.0.js"></script>
+    <script src="/assets/marked.4.0.17.min.js"></script>
 
   </head>
 
@@ -71,12 +71,12 @@
       <br>
     </b-container>
     <!-- Run the Vue app scripts - DO NOT CHANGE ORDER -->
-    <script src="assets/app_globals.js"></script>
-    <script src="assets/app_component_item.js"></script>
-    <script src="assets/app_component_dataset.js"></script>
-    <script src="assets/app_component_about.js"></script>
-    <script src="assets/app_component_notfound.js"></script>
-    <script src="assets/app_router.js"></script>
-    <script src="assets/app.js"></script>
+    <script src="/assets/app_globals.js"></script>
+    <script src="/assets/app_component_item.js"></script>
+    <script src="/assets/app_component_dataset.js"></script>
+    <script src="/assets/app_component_about.js"></script>
+    <script src="/assets/app_component_notfound.js"></script>
+    <script src="/assets/app_router.js"></script>
+    <script src="/assets/app.js"></script>
   </body>
 </html>
diff --git a/docs/netlify.toml b/docs/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/dataset/*"
+  to = "/index.html"
+  status = 200
diff --git a/docs/templates/dataset-template.html b/docs/templates/dataset-template.html
@@ -8,7 +8,7 @@
             <span>
               <a @click="gotoHome" class="newlink"><small><i class="fas fa-home"></i></small></a>
             </span>
-            <span class="dataset-nav-item" v-if="selectedDataset.show_backbutton">
+            <span class="dataset-nav-item" v-if="showBackButtonComp">
               <a @click="history.back()" class="newlink"><small><i class="fas fa-backward"></i></small></a>
             </span>
           </span>
@@ -38,7 +38,7 @@
               alt="datalad_d" height="14em" class="mb-1"/>
               Download with DataLad</b-button>&nbsp;</span>
             <span v-show="displayData.is_github"><b-button variant="outline-dark" size="sm" @click="gotoURL(displayData.url)"><i class="fab fa-github"></i> View on GitHub</b-button>&nbsp;</span>
-            <span v-show="displayData.is_gin"><b-button variant="outline-dark" size="sm" @click="gotoURL(displayData.url)"><img src="artwork/ginfavicon.png" style="height: 1em;"></img> View on GIN</b-button>&nbsp;</span>
+            <span v-show="displayData.is_gin"><b-button variant="outline-dark" size="sm" @click="gotoURL(displayData.url)"><img src="/artwork/ginfavicon.png" style="height: 1em;"></img> View on GIN</b-button>&nbsp;</span>
             <span v-show="selectedDataset.doi"><b-button variant="outline-dark" size="sm" v-b-modal.modal-2 @click="getCitationText(selectedDataset.doi)"><i class="fas fa-quote-right"></i> Cite</b-button>&nbsp;</span>
             <span v-if="displayData.show_export"><b-button variant="outline-dark" size="sm" :href="displayData.file_path" :download="displayData.download_filename"><i class="fas fa-share"></i> Export metadata</b-button>&nbsp;</span>
             <span><b-button variant="outline-dark" size="sm" @click="openWithBinder(displayData.url)"><img src="data:image/png;base64,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"
@@ -57,7 +57,7 @@
           ok-only>
             <template #modal-header="{ close }">
               <div class="d-block text-center">
-                <h3>Download with <img src="artwork/datalad_logo_wide.svg" width="100em"></h3>
+                <h3>Download with <img src="/artwork/datalad_logo_wide.svg" width="100em"></h3>
               </div>
             </template>
             <h5>Step 1: Install DataLad</h5>
@@ -265,7 +265,7 @@ <h3>Dataset not found</h3>
                         <span class="xxlfont"><i class="fas fa-database"></i></span>
                       </b-col>
                       <b-col class="text-muted" md="7">
-                        <h5><a @click="selectDataset($event, ds)" class="newlink">{{ds.dirs_from_path.at(-1)}}</a></h5>
+                        <h5><a :href="'/dataset/'+ds.dataset_id+'/'+ds.dataset_version" @click.prevent="selectDataset($event, ds)" class="newlink">{{ds.dirs_from_path.at(-1)}}</a></h5>
                         <span v-for="(author, index) in ds.authors">
                           <small>
                             <span v-if="author.givenName">{{author.givenName}} {{author.familyName}}</span><span v-else>{{author.name}}</span><span v-if="index != ds.authors.length - 1">, </span>