Initial commit

frontend/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "plugin:vue/essential",
+        "standard"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 14,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+    }
+};

frontend/App.vue

@@ -0,0 +1,55 @@
+<template>
+  Hello world: {{ title }}
+
+  <div v-for="hit in this.hits" class="mt-3">
+    <div><strong>{{ hit.title }}</strong> ({{ hit.wordcount }} words)</div>
+    <div v-html="hit.snippet"></div>
+    <table v-html="hit.diff"></table>
+    <div>replacement: {{ hit.replacement }}</div>
+  </div>
+</template>
+
+<script>
+import axios from "redaxios";
+
+export default {
+  props: {
+    title: String,
+    api_base_url: String,
+  },
+  data() {
+    return {
+      hits: [],
+    };
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    api_call(endpoint, options) {
+      var url = `${this.api_base_url}/${endpoint}`;
+      return axios.get(url, options).catch(this.show_api_error_modal);
+    },
+    add_hit(hit) {
+      var params = { link_from: hit.title, link_to: this.title };
+      this.api_call("valid_hit", { params: params}).then((response) => {
+        if (response.data.valid) {
+          hit.diff = response.data.diff
+          hit.replacement = response.data.replacement
+          this.hits.push(hit);
+        }
+      });
+    }
+  },
+  mounted() {
+    var params = { title: this.title }
+    this.api_call("hits", { params: params}).then((response) => {
+      response.data.hits.forEach((hit) => { this.add_hit(hit) });
+    });
+  }
+};
+</script>
+
+<style>
+</style>

frontend/entry.js

@@ -0,0 +1,7 @@
+import {createApp} from 'vue';
+import App from './App.vue';
+
+export default function(props) {
+  const app = createApp(App, props).mount('#app');
+  return app;
+}