add settings view

src/App.vue

@@ -1,5 +1,20 @@
-<script setup>
+<script>
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView } from 'vue-router';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data() {
+    window.addEventListener('keydown', e => {
+      if (!e) e = event;
+      const COMMA_CODE = 188;
+      if ((e.ctrlKey || e.metaKey) && e.keyCode === COMMA_CODE) {
+        this.$router.push({ name: 'settings' });
+        e.preventDefault();
+      }
+    });
+    return {};
+  },
+});
 </script>
 
 <template>

src/router/index.js

@@ -1,5 +1,6 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
-import HomeView from '../views/HomeView.vue'
+import HomeView from '../views/HomeView.vue';
+import SettingsView from '../views/SettingsView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,7 +8,12 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      component: HomeView,
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: SettingsView,
     },
     {
       path: '/about',

src/views/HomeView.vue

@@ -8,12 +8,11 @@ import Worker from '../file.worker.js?worker';
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 
-import { defineComponent, shallowRef } from 'vue'
+import { defineComponent, shallowRef } from 'vue';
 import { Codemirror } from 'vue-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import { oneDark } from '@codemirror/theme-one-dark'
 
-
 export default defineComponent({
   components: {
     Codemirror,
@@ -51,7 +50,7 @@ for (let i = 0; i < 42; ++i) {
       code,
       extensions,
       handleReady,
-      log: console.log,
+      log: _ => _, // console.log,
       worker: null,
       result: '',
     }

src/views/SettingsView.vue

@@ -0,0 +1,35 @@
+<script>
+import { RouterView } from 'vue-router';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data() {
+    const escDown = e => {
+      if (!e) e = event;
+      const ESC_CODE = 27;
+      if (e.keyCode === ESC_CODE) {
+        this.$router.go(-1);
+        e.preventDefault();
+      }
+    };
+    return {
+      escDown,
+    };
+  },
+  mounted() {
+    window.addEventListener('keydown', this.escDown);
+  },
+  unmounted() {
+    window.removeEventListener('keydown', this.escDown);
+  },
+});
+</script>
+
+<template>
+  <div class="settings">
+    <p>App Settings</p>
+  </div>
+</template>
+
+<style scoped>
+</style>