add about info from package.json

.eslintrc.cjs

@@ -7,5 +7,6 @@ module.exports = {
   ],
   parserOptions: {
     ecmaVersion: 'latest',
-  }
+  },
+  ignorePatterns: ['src/app.config.mjs'],
 }

package.json

@@ -2,6 +2,8 @@
   "name": "Instacode",
   "description": "Scratchpad for instant JavaScript code running",
   "version": "0.0.0",
+  "author": "Grzegorz Kućmierz",
+  "homepage": "https://github.com/gkucmierz/instacode-app",
   "scripts": {
     "dev": "vite",
     "build": "vite build && cp dist/index.html dist/404.html",

src/app.config.mjs

@@ -1,4 +1,6 @@
 
+export { default as PACKAGE_JSON } from '../package.json' assert { type: 'json' };
+
 export const APP_URL = 'https://instacode.app';
 export const MAX_DATA_SIZE = 1e5;
 export const ERROR_MAX_DATA_SIZE = 'Error: Output exceeded maximum size allowed';

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import HomeView from '../views/HomeView.vue';
 import SettingsView from '../views/SettingsView.vue';
+import AboutView from '../views/AboutView.vue';
 
 import codeService from '../services/codeService';
 import { SHARE_CODE_ROUTE_NAME } from '../app.config';
@@ -29,10 +30,7 @@ const router = createRouter({
     {
       path: '/about',
       name: 'about',
-      // route level code-splitting
+      component: AboutView,
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
     }
   ]
 })

src/views/AboutView.vue

@@ -1,8 +1,78 @@
+<script>
+import { defineComponent } from 'vue';
+import { PACKAGE_JSON } from '../app.config';
+
+export default defineComponent({
+  data() {
+    return {
+      name: PACKAGE_JSON.name,
+      version: PACKAGE_JSON.version,
+      author: PACKAGE_JSON.author,
+      homepage: PACKAGE_JSON.homepage,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.about {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  font-family: monospace;
+
+  div {
+
+    h3 {
+      text-align: center;
+      color: #4ee;
+    }
+
+    .row {
+      display: flex;
+      flex-direction: row;
+
+      div {
+        display: flex;
+        flex: 1;
+        padding: 2px 4px;
+      }
+
+      div:nth-of-type(1) {
+        justify-content: flex-end;
+        color: #4b4;
+      }
+      div:nth-of-type(2) {
+        justify-content: flex-start;
+      }
+    }
+  }
+}
+</style>
+
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <div>
+      <h3>{{ name }}</h3>
+
+      <div class="row">
+        <div>version:</div>
+        <div class="selectable">{{ version }}</div>
+      </div>
+
+      <div class="row">
+        <div>source code:</div>
+        <div><a :href="homepage" target="_blank">github</a></div>
+      </div>
+
+      <div class="row">
+        <div>author:</div>
+        <div class="selectable">{{ author }}</div>
+      </div>
+
+    </div>
   </div>
 </template>
-
-<style scoped>
-</style>