feat: add version and footer

Author: jaonoctus

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lnreceipt",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {

src/App.vue

@@ -1,7 +1,15 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { version } from '../package.json'
+</script>
 
 <template>
-  <div class="min-h-screen w-full flex items-center justify-center p-4">
+  <div class="flex-col min-h-screen w-full flex items-center justify-between p-4 text-sm">
+    <div class="flex-1"></div>
     <RouterView />
+    <div class="flex-1"></div>
+    <div class="text-center">
+      <p>v{{ version }} | made by <a href="https://jaonoctus.dev" target="_blank" class="font-medium text-primary">jaonoctus</a> with <a href="https://vuejs.org" target="_blank" class="font-medium text-primary">Vue.js</a>, <a href="https://www.npmjs.com/package/light-bolt11-decoder" target="_blank" class="font-medium text-primary">bolt11</a> and <span class="font-medium text-red-400">love</span>.</p>
+      <p>You can download the <a href="https://github.com/jaonoctus/lnreceipt/releases" target="_blank" class="font-medium text-primary underline">lnreceipt-standalone.html</a> offline version from the latest GitHub release</p>
+    </div>
   </div>
 </template>

src/pages/HomeView.vue

@@ -41,8 +41,6 @@ const decodedInvoice = computed(() => {
       return null
     }
 
-    console.log(decoded)
-
     const amount = decoded.sections.find((section) => section.name === 'amount')?.value
     const description =
       decoded.sections.find((section) => section.name === 'description')?.value ?? 'empty'
@@ -99,19 +97,23 @@ function formatLong(text: string) {
 </script>
 
 <template>
-  <div class="min-h-screen w-full flex items-center justify-center p-4">
+  <div class="w-full flex items-center justify-center p-4">
     <Card class="w-full max-w-2xl">
       <CardHeader>
         <CardTitle> Lightning Receipt </CardTitle>
-        <CardDescription>
-          The provided preimage cryptographically proves that the specified invoice has been
-          successfully paid. Learn more
-          <a
-            href="https://faq.blink.sv/blink-and-other-wallets/how-to-prove-that-a-lightning-invoice-was-paid"
-            target="_blank"
-            class="font-medium text-primary underline underline-offset-4"
+        <CardDescription class="text-xs">
+          <p>The provided preimage cryptographically proves that the specified invoice has been
+            successfully paid.
+          </p>
+          <p>
+            Learn more
+            <a
+              href="https://faq.blink.sv/blink-and-other-wallets/how-to-prove-that-a-lightning-invoice-was-paid"
+              target="_blank"
+              class="font-medium text-primary"
             >here</a
-          >.
+            >.
+          </p>
         </CardDescription>
       </CardHeader>
       <CardContent>