Use JS router where possible

arran-nz · Apr 17, 2021 · 431a7c6 · 431a7c6
1 parent 0c61743
commit 431a7c6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Router, Route, Link } from "svelte-routing";
+    import { Router, Route } from "svelte-routing";
     import { navigate } from "svelte-routing";
 
     import { fade } from 'svelte/transition';

diff --git a/src/AppHeader.svelte b/src/AppHeader.svelte
@@ -24,7 +24,7 @@
 
 <article>
 
-  <a href="https://qcard.link" alt="Reload the application">
+  <a use:link href="/" alt="Reload the application">
     <h1><strong>QCard</strong>.link</h1>
   </a>
 
@@ -33,3 +33,7 @@
   </p>
 
 </article>
+
+<script>
+    import { link } from 'svelte-routing'
+</script>
diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte
@@ -1,10 +1,10 @@
 <script>
-    import { Link } from "svelte-routing";
     import ContactCard from '../ContactCard.svelte'; 
     import AppHeader from '../AppHeader.svelte'; 
     import Footer from '../Footer.svelte';
     import QRCode from '../QRCode.svelte';
     import QCard from "../plugins/qcard";
+    import { link } from 'svelte-routing'
 
     let qCard = new QCard(
         "Julia",
@@ -30,7 +30,7 @@
                 <li>⚡ Super <strong>light-weight</strong>, optimzed for cellular internet</li>
             </ul>    
 
-            <a href="https://qcard.link/create" class="bold button">Create a QCard</a>
+            <a use:link href="/create" class="bold button">Create a QCard</a>
         </div>
 
         <div class="media card">
@@ -66,7 +66,7 @@
             </p>
             <p>
                 The vCard is then encoded into <a target="_blank" href="https://en.wikipedia.org/wiki/Base64" alt="Base64 Wikipedia">Base64</a>
-                and appended to the URL <code>{qCard.toUrl().substring(0, 40)}...</code>
+                and appended to the URL <code>{qCard.toViewUrl().substring(0, 40)}...</code>
             </p>
             <br />
 
@@ -92,7 +92,7 @@
             <img class="icon" src="/icons/arrow-down.svg" alt="Arrow pointing down"/>
 
             <div class="qrcode mx-auto">
-                <QRCode dataToEncode = {qCard.toUrl()}/>
+                <QRCode dataToEncode={`https://qcard.link${qCard.toViewUrl()}`}/>
             </div>
         </div>
     </div>
@@ -103,7 +103,7 @@
         <div class="explaination center">
             <img style="width:50%" class="mx-auto" src="/images/undraw_professional_card.svg" alt="A person showing their personal information card"/>
             <h1>You know what to do!</h1>
-            <a href="https://qcard.link/create" class="mx-auto bold button">Create a QCard</a>
+            <a use:link href="/create" class="mx-auto bold button">Create a QCard</a>
         </div>
     </div>
 

diff --git a/src/plugins/qcard.js b/src/plugins/qcard.js
@@ -2,9 +2,6 @@
 import { generateVCardString } from './vcard.js';
 import { encode } from './base64.js';
 
-const VIEW_PREFIX = "http://localhost:5000/card/#";
-
-
 class QCard {
 
     constructor(
@@ -27,8 +24,16 @@ class QCard {
         this.xmpp = xmpp
     }
 
-    toUrl() {
-        return VIEW_PREFIX + encode(this.toVCardString())
+    toViewUrl() {
+        return `/card/#${this.toEncodedString()}`
+    }
+
+    toEditUrl() {
+        return `/create/#${this.toEncodedString()}`
+    }
+
+    toEncodedString() {
+        return encode(this.toVCardString())
     }
 
     toVCardString() {