Merge pull request #997 from dandi/785-history-mode

Use history mode instead of hash mode (remove hash from GUI URL)
dandi · Apr 8, 2022 · b47f730 · b47f730
2 parents 3b2f0bb + 4876516
commit b47f730
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/web/netlify.toml b/web/netlify.toml
@@ -9,3 +9,8 @@ command = "yarn run build"
   VUE_APP_DANDI_API_ROOT = "https://api-staging.dandiarchive.org/api/"
   VUE_APP_SENTRY_DSN = "https://425b9a012300493d867e97785fae7b88@o308436.ingest.sentry.io/5196549"
   VUE_APP_SENTRY_ENVIRONMENT = "staging"
+
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 200
diff --git a/web/src/router.ts b/web/src/router.ts
@@ -51,4 +51,4 @@ const routes: RouteConfig[] = [
   },
 ];
 
-export default new Router({ routes });
+export default new Router({ mode: 'history', routes });
diff --git a/web/src/views/HomeView/HomeView.vue b/web/src/views/HomeView/HomeView.vue
@@ -50,11 +50,30 @@
 <script lang="ts">
 import StatsBar from '@/views/HomeView/StatsBar.vue';
 import DandisetSearchField from '@/components/DandisetSearchField.vue';
-import { defineComponent } from '@vue/composition-api';
+import { computed, defineComponent, watchEffect } from '@vue/composition-api';
 
 export default defineComponent({
   name: 'HomeView',
   components: { StatsBar, DandisetSearchField },
+  setup(props, ctx) {
+    /**
+    * Redirect old hash URLS to the correct one. This is only done on
+    * the home page, since any URL with a hash will default to here.
+    */
+    const currentRoute = computed(() => ctx.root.$route);
+    watchEffect(() => {
+      const router = ctx.root.$router;
+      if (currentRoute.value.hash) {
+        const trimmed = router.currentRoute.hash.replace('#', '');
+        router.replace(trimmed);
+      }
+    });
+
+    return {
+      // Hack to satisfy template type checker
+      $vuetify: (ctx.root as any).$vuetify,
+    };
+  },
 });
 </script>
 

diff --git a/web/src/views/HomeView/StatsBar.vue b/web/src/views/HomeView/StatsBar.vue
@@ -51,7 +51,7 @@ export default defineComponent({
         name: 'dandisets',
         value: dandisets.value,
         description: 'A DANDI dataset including files and dataset-level metadata',
-        href: '/#/dandiset',
+        href: '/dandiset',
       },
       { name: 'users', value: users.value },
       { name: 'total data size', value: filesize(size.value, { round: 0, base: 10, standard: 'iec' }) },
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,4 +51,4 @@ const routes: RouteConfig[] = [ @@
       },
     ];
-    export default new Router({ routes });
+    export default new Router({ mode: 'history', routes });