add info and rename about

client/src/App.vue

@@ -9,8 +9,15 @@
 
                     <b-collapse id="nav-collapse" is-nav>
                         <b-navbar-nav>
-                            <b-nav-item :to="{name:'main'}">Home</b-nav-item>
-                            <b-nav-item :to="{name:'about'}">About</b-nav-item>
+                            <b-nav-item :to="{name:'main'}" :linkClasses="{active:$route.name==='main'}">
+                                Home
+                            </b-nav-item>
+                            <b-nav-item :to="{name:'detectedDevices'}" :linkClasses="{active:$route.name==='detectedDevices'}">
+                                Detected Devices
+                            </b-nav-item>
+                            <b-nav-item :to="{name:'contribute'}" :linkClasses="{active:$route.name==='contribute'}">
+                                Contribute
+                            </b-nav-item>
                         </b-navbar-nav>
 
                         <!-- Right aligned nav items -->
@@ -130,6 +137,15 @@
         justify-content: space-between;
         color: white;
         flex-shrink: 0;
+
+        a {
+            color: white;
+            text-decoration: underline;
+
+            &:hover, &:active, &:focus {
+                color: #bbb;
+            }
+        }
     }
 
     #app {

client/src/router.ts

@@ -7,16 +7,17 @@ Vue.use(Router);
 export default new Router({
     mode: "history",
     base: process.env.BASE_URL,
-    linkActiveClass: "active",
+    // linkActiveClass: "active",
     routes: [
         {
-            path: "/about",
-            name: "about",
-            props: true,
-            // route level code-splitting
-            // this generates a separate chunk (about.[hash].js) for this route
-            // which is lazy-loaded when the route is visited.
-            component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
+            path: "/detected-devices",
+            name: "detectedDevices",
+            component: () => import(/* webpackChunkName: "detectedDevices" */ "./views/DetectedDevices.vue")
+        },
+        {
+            path: "/contribute",
+            name: "contribute",
+            component: () => import(/* webpackChunkName: "about" */ "./views/Contribute.vue")
         },
         {
             path: "/:ua?",

client/src/utils.ts

@@ -1,5 +1,4 @@
-// tslint:disable-next-line
-const regex = "/(\"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\\"])*\"(\s*:)?|\b(tru./e|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g\"";
+const regex = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;
 
 export function syntaxHighlight(jsonstring: string): string {
     // from https://stackoverflow.com/a/7220510/

client/src/views/Contribute.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="about box">
+        <h1>Contributing</h1>
+        <h2>Hacking the library</h2>
+
+        <p>This is a free/libre library under license LGPL v3 or later.</p>
+
+        <p>Your pull requests and/or feedback is very welcome!</p>
+
+        <h2>Improvements</h2>
+
+        <p>You have a User Agent that is not detected or detected incorrectly? Then please <a href="https://github.com/matomo-org/device-detector">open an issue on the Device Detector repostiory.</a></p>
+
+        <p>You have seen an incorrect/missing/ugly icon? Then please report it <a href="https://github.com/matomo-org/matomo-icons">on the matomo-icons repository</a>.</p>
+
+        <h2>Listing all user agents from your logs</h2>
+
+        <p>
+            Sometimes it may be useful to generate the list of most used user agents on your website, extracting this
+            list from your access logs using the following command:
+        </p>
+
+        <pre><code><span class="keyword">zcat</span> <span class="path">~/path/to/access/logs*</span> | <span
+                class="keyword">awk</span> -F'<span class="string">"</span>' '<span class="string">{print $6}</span>' | <span
+                class="keyword">sort</span> | <span class="keyword">uniq</span> -c | <span class="keyword">sort</span> -rn | <span
+                class="keyword">head</span> -n20000 > top-user-agents.txt</code></pre>
+
+        <h2>Contributors</h2>
+
+        <p>Created by the <a href="https://matomo.org/team/">Matomo team</a>, Stefan Giehl, Matthieu Aubry, Michał
+            Gaździk, Tomasz Majczak, Grzegorz Kaszuba, Piotr Banaszczyk and
+            <a href="https://github.com/matomo-org/device-detector/graphs/contributors">contributors</a>.
+        </p>
+
+        <p>Together we can build the best Device Detection library.</p>
+
+        <p>We are looking forward to your contributions and pull requests!</p>
+    </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+    name: "contribute"
+});
+</script>
+
+
+<style lang="scss" scoped>
+    pre {
+        background: #31363b;
+        color: #eff0f1;
+        padding: 10px;
+
+        code {
+            &::before {
+                content: "➜ ";
+                color: #1cdc9a;
+            }
+
+            .keyword {
+                color: #1cdc9a;
+            }
+
+            .path {
+                color: #3daee9;
+            }
+
+            .string {
+                color: #f67400;
+            }
+        }
+    }
+
+</style>

client/src/views/DetectedDevices.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="about box" v-if="supported.operatingSystems">
-    <h2>What Device Detector is able to detect</h2>
+    <h1>What Device Detector is able to detect</h1>
 
     <em>Last update: {{lastUpdated.toLocaleString()}}</em>
     <h3>List of detected operating systems:</h3>