Merge pull request #58 from raimis/router

Implement routing

404.html

@@ -0,0 +1 @@
+index.html

home.vue

@@ -9,7 +9,7 @@
       </v-card>
     </v-container>
     <v-container class="d-flex flex-wrap justify-center" fluid>
-      <v-card v-on:click="app.tab=2" class="ma-4" width="200" hover>
+      <v-card v-on:click="$router.push('/benchmarks')" class="ma-4" width="200" hover>
         <v-card-title>Highly Optimized</v-card-title>
         <v-card-text>
           Optimized for the latest generation of compute hardware, including NVIDIA, AMD, and Intel GPUs. We also heavily optimize for CPUs.

index.html

@@ -12,7 +12,7 @@
       gtag('config', 'G-HW60Z9TDXB');
     </script>
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.4.9/dist/vuetify.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.6/dist/vuetify.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/gh-fork-ribbon.min.css" rel="stylesheet">
@@ -25,45 +25,17 @@
       <v-app>
         <v-card class="grey lighten-3">
           <top></top>
-          <v-tabs v-model="tab" background-color="grey lighten-3" grow show-arrows>
-            <v-tab>
-              <v-icon left>mdi-home-outline</v-icon>
-              Home
-            </v-tab>
-            <v-tab>
-              <v-icon left>mdi-newspaper-variant-outline</v-icon>
-              News
-            </v-tab>
-            <v-tab>
-              <v-icon left>mdi-speedometer</v-icon>
-              Benchmarks</v-tab>
-            <v-tab>
-              <v-icon left>mdi-book-open-page-variant-outline</v-icon>
-              Documentation
-            </v-tab>
-            <v-tab>
-              <v-icon left>mdi-school-outline</v-icon>
-              Tutorials
-            </v-tab>
-            <v-tab>
-              <v-icon left>mdi-vector-combine</v-icon>
-              Ecosystem
-            </v-tab>
-            <v-tab>
-              <v-icon left>mdi-account-group-outline</v-icon>
-              Development
+          <v-tabs v-model="currentTab" background-color="grey lighten-3" grow show-arrows>
+            <v-tab v-for="tab in tabs" :to="tab.path">
+              <v-icon left>{{ tab.icon }}</v-icon>{{ tab.name }}
             </v-tab>
           </v-tabs>
         </v-card>
         <v-main class="pb-6">
-          <v-tabs-items v-model="tab">
-            <v-tab-item><tab-home/></v-tab-item>
-            <v-tab-item><tab-news/></v-tab-item>
-            <v-tab-item><tab-benchmarks/></v-tab-item>
-            <v-tab-item><tab-documenation/></v-tab-item>
-            <v-tab-item><tab-tutorials/></v-tab-item>
-            <v-tab-item><tab-ecosystem/></v-tab-item>
-            <v-tab-item><tab-development/></v-tab-item>
+          <v-tabs-items v-model="currentTab">
+            <v-tab-item v-for= "tab in tabs" :value="tab.path">
+              <router-view/>
+            </v-tab-item>
           </v-tabs-items>
         </v-main>
         <v-footer class="grey lighten-3" padless>
@@ -77,31 +49,45 @@
         </v-footer>
       </v-app>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/httpVueLoader.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/marked@2.0.1/lib/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked@2.1.3/lib/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/python.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/postscribe.min.js"></script>
     <script src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
       Vue.use(hljs.vuePlugin);
       marked.setOptions({ highlight: (code, lang) => hljs.highlight(lang, code).value });
-      var app = new Vue({
+      const tabs = [
+        { name: 'Home', path: '/', icon: 'mdi-home-outline' },
+        { name: 'News', path: '/news', icon: 'mdi-newspaper-variant-outline' },
+        { name: 'Benchmarks', path: '/benchmarks', icon: 'mdi-speedometer' },
+        { name: 'Documentation', path: '/documentation', icon: 'mdi-book-open-page-variant-outline' },
+        { name: 'Tutorials', path: '/tutorials', icon: 'mdi-school-outline' },
+        { name: 'Ecosystem', path: '/ecosystem', icon: 'mdi-vector-combine' },
+        { name: 'Development', path: '/development', icon: 'mdi-account-group-outline' },
+      ]
+      const routes = tabs.map(tab => {
+        const component = httpVueLoader(`${tab.name.toLowerCase()}.vue`)
+        return { path: tab.path, component }
+      }).concat([
+        { path: '/documentation.html', redirect: '/documentation'},
+        { path: '*', redirect: '/'},
+      ])
+      const router = new VueRouter({
+        base: document.URL.includes('/openmm-org') ? '/openmm-org/' : '/',
+        mode: 'history',
+        routes
+      })
+      const app = new Vue({
         el: '#app',
+        router,
         vuetify: new Vuetify(),
-        components: {
-          'top': httpVueLoader('top.vue'),
-          'tab-home': httpVueLoader('home.vue'),
-          'tab-news': httpVueLoader('news.vue'),
-          'tab-benchmarks': httpVueLoader('benchmarks.vue'),
-          'tab-documenation': httpVueLoader('documentation.vue'),
-          'tab-tutorials': httpVueLoader('tutorials.vue'),
-          'tab-ecosystem': httpVueLoader('ecosystem.vue'),
-          'tab-development': httpVueLoader('development.vue'),
-        },
-        data: { tab: 0 }
+        components: { 'top': httpVueLoader('top.vue') },
+        data: { tabs, currentTab: '/' }
       });
     </script>
   </body>