Rebuilt the Help screen in Svelte

src/js/app.js

@@ -133,7 +133,7 @@ module.exports = new Vue({
         "io-view": require("./io-view"),
         "admin-general-view": require("./admin-general-view"),
         "admin-network-view": require("./admin-network-view"),
-        "help-view": { template: "#help-view-template" },
+        "help-view": require("./help-view"),
         "cheat-sheet-view": {
             template: "#cheat-sheet-view-template",
             data: function() {

src/js/help-view.js

@@ -0,0 +1,14 @@
+module.exports = {
+    template: "#help-view-template",
+
+    attached: function() {
+        this.svelteComponent = SvelteComponents.createComponent(
+            "HelpView",
+            document.getElementById("help")
+        );
+    },
+
+    detached: function() {
+        this.svelteComponent.$destroy();
+    }
+};

src/pug/templates/help-view.pug

@@ -1,43 +1,2 @@
 script#help-view-template(type="text/x-template")
     #help
-        h2 Support & Contact Info
-        p
-            | Please visit
-            |
-            a(href="https://onefinitycnc.com/support", target="_blank")
-                | onefinitycnc.com/support
-            |
-            | for a variety of support resources, and to find our contact information.
-
-        h2 Discussion Forum
-        p
-            | Check out our support and discussion forum at
-            |
-            a(href="https://forum.onefinitycnc.com", target="_blank")
-                | forum.onefinitycnc.com
-            | . Register on the site and post a message. We can't wait to hear from you.
-        p
-            | We also maintain a list of
-            |
-            a(href="https://forum.onefinitycnc.com/t/what-cad-cam-software-can-be-used-to-make-gcode-files-for-the-onefinity-cnc/10253", target="_blank")
-                | recommended software packages
-            |
-            | on the forum.
-
-        h2 Credits & Acknowledgements
-        h4(style="margin-bottom: 0;") Artwork
-        p(style="margin-top: 0;")
-            | Special thanks to
-            |
-            a(href="https://www.instagram.com/fierysquirrelart/", target="_blank")
-                | @fierysquirrelart
-            |
-            | for many of the graphics used in the controller.
-
-        h4(style="margin-bottom: 0;") Buildbotics
-        p(style="margin-top: 0;")
-            | This controller is based on the
-            |
-            a(href="http://buildbotics.com", target="_blank")
-                | Buildbotics CNC Controller
-            | .

src/svelte-components/src/components/HelpView.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+</script>
+
+<h2>Support & Contact Info</h2>
+<p>
+    Please visit
+    <a href="https://onefinitycnc.com/support" target="_blank">
+        onefinitycnc.com/support
+    </a>
+    for a variety of support resources, and to find our contact information.
+</p>
+
+<h2>Discussion Forum</h2>
+<p>
+    Check out our support and discussion forum at
+    <a href="https://forum.onefinitycnc.com" target="_blank">
+        forum.onefinitycnc.com
+    </a>. Register on the site and post a message. We can't wait to hear from
+    you.
+</p>
+
+<p>
+    We also maintain a list of
+    <a
+        href="https://forum.onefinitycnc.com/t/what-cad-cam-software-can-be-used-to-make-gcode-files-for-the-onefinity-cnc/10253"
+        target="_blank"
+    >
+        recommended software packages
+    </a>
+    on the forum.
+</p>
+
+<h2>Credits & Acknowledgements</h2>
+<h4 style="margin-bottom: 0;">Artwork</h4>
+<p style="margin-top: 0;">
+    Special thanks to
+    <a href="https://www.instagram.com/fierysquirrelart/" target="_blank">
+        @fierysquirrelart
+    </a>
+    for many of the graphics used in the controller.
+</p>
+
+<h4 style="margin-bottom: 0;">Buildbotics</h4>
+<p style="margin-top: 0;">
+    This controller is based on the
+    <a href="http://buildbotics.com" target="_blank">
+        Buildbotics CNC Controller
+    </a>
+    .
+</p>

src/svelte-components/src/main.ts

@@ -5,6 +5,7 @@ matchAll.shim();
 
 import AdminNetworkView from "$components/AdminNetworkView.svelte";
 import SettingsView from "$components/SettingsView.svelte";
+import HelpView from "$components/HelpView.svelte";
 import DialogHost, { showDialog } from "$dialogs/DialogHost.svelte";
 import { handleConfigUpdate, setDisplayUnits } from "$lib/ConfigStore";
 import { handleControllerStateUpdate } from "$lib/ControllerState";
@@ -18,6 +19,9 @@ export function createComponent(component: string, target: HTMLElement, props: R
         case "SettingsView":
             return new SettingsView({ target, props });
 
+        case "HelpView":
+            return new HelpView({ target, props });
+
         case "DialogHost":
             return new DialogHost({ target, props });