better file naming in gui

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <NavBar />
-  <span id="jackal-logo"><img id="beacon-logo-footer" width="14" height="14" src="/public/icon.svg" />Made by Jackal Labs</span>
+  <span id="jackal-logo"><img id="beacon-logo-footer" width="14" height="14" src="/icon.svg" />Made by Jackal Labs</span>
   <router-view />
 </template>
 

src/utils/conversion.ts

@@ -1,4 +1,4 @@
 export function sanitizeName (source: string): string {
-  return source.replace(/[ .+/=]/g, '_')
+  return source.toLowerCase().replace(/[ .+/=]/g, '_')
     .replace(/[^ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\-_]/g, '')
 }

src/views/HomePage.vue

@@ -41,7 +41,11 @@
   const test = ref('')
 
   function requestData (owner: string, fileName: string): Promise<string> {
-    const url = `https://jackal.link/p/${owner}/beacon/published/${fileName}.html`
+    let f = fileName;
+    if (fileName == "introducing_beacon") {
+      f = "Introducing_Beacon"
+    }
+    const url = `https://jackal.link/p/${owner}/beacon/published/${f}.html`
     return fetch(url)
       .then(resp => resp.text())
       .catch(err => {

src/views/UserPage.vue

@@ -15,7 +15,7 @@
                 <router-link :to="`/` + address + `/` + item.name">
                   <div class="work-body">
                     <span>{{ item.date }}</span>
-                    <h2>{{ item.name }}</h2>
+                    <h2>{{ rename(item.name) }}</h2>
                   </div>
                 </router-link>
               </li>
@@ -41,6 +41,19 @@
 
   const address = route.params.user
 
+  function rename(val:string ) {
+    return toTitleCase(val.replace(new RegExp('_', 'g'), ' '))
+  }
+
+  function toTitleCase(str: string) {
+    return str.replace(
+      /\w\S*/g,
+      function(txt) {
+        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+      }
+    );
+  }
+
   function convertToTitleCase (str: string) {
     if (!str) {
       return ''