Cleanup frontend

frontend/src/components/Nav.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
+import Logo from '@/icons/Logo.vue';
+
 const downloads = [
   { name: 'Linux', link: './dist/covergen.linux-amd64' },
   { name: 'Darwin', link: './dist/covergen.darwin-amd64' },
 ];
 </script>
+
 <template>
   <div class="w-full mx-auto px-8">
     <div class="relative flex items-center justify-between h-16">
       <div class="flex-1 flex items-stretch justify-between">
         <div class="flex-shrink-0 flex items-center">
-          <img
-            src="../assets/logo.png"
-            alt="covergen logo"
-            class="h-8 w-auto mr-2"
-          />
+          <Logo class="h-12" />
           <h1>CoverGen</h1>
         </div>
 
         <div class="ml-6">
-          <div class="flex space-x-4 items-center text-sm font-medium">
+          <div class="flex space-x-4 items-center text-sm font-medium h-full">
             <span class="text-base"> Download me: </span>
             <a
               v-for="dl in downloads"

frontend/src/components/Renderer.vue

@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
 const store = useCover();
 const { frontUri, backUri } = storeToRefs(store);
 </script>
+
 <template>
   <div class="flex flex-row grow">
     <div class="grow p-4">

frontend/src/icons/Logo.vue

@@ -0,0 +1,48 @@
+<template>
+  <svg
+    xml:space="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 400 180"
+    fill="currentColor"
+  >
+    <path
+      d="M144.452 125.98c1.289-10.15 10.953-18.66 21.799-18.66 11.49 0 21.477 7.689 23.087 18.66Zm51.543 3.485c0-15.89-12.886-28.295-29.638-28.295-16.32 0-28.992 13.121-28.992 28.397 0 15.377 13.207 27.782 29.422 27.782 11.598 0 22.121-6.46 26.846-16.506h-7.516c-4.081 6.766-11.383 10.457-19.544 10.457-11.598 0-21.477-8.713-22.121-19.785h51.543z"
+    />
+    <path
+      d="M145.748 124.918h42.28c-2.03-9.655-10.986-16.541-21.774-16.541-9.757 0-18.698 7.317-20.506 16.54m44.868 2.118h-47.412l.151-1.187c1.37-10.8 11.644-19.588 22.9-19.588 12.348 0 22.52 8.23 24.185 19.57zm-24.254-24.81c-15.376 0-27.885 12.265-27.885 27.34 0 14.735 12.702 26.723 28.314 26.723 10.57 0 20.23-5.595 25.073-14.388h-5.112c-4.265 6.654-11.581 10.458-20.176 10.458-5.906 0-11.562-2.14-15.924-6.027-4.383-3.904-6.977-9.146-7.303-14.76l-.066-1.118h51.607v-.991c0-7.415-2.917-14.29-8.213-19.36-5.307-5.079-12.522-7.877-20.315-7.877m.43 56.18c-16.836 0-30.533-12.938-30.533-28.84 0-16.243 13.505-29.457 30.103-29.457 17.24 0 30.747 12.893 30.747 29.354v3.108h-51.447c.552 4.643 2.834 8.944 6.503 12.213 3.95 3.519 9.069 5.456 14.411 5.456 8.005 0 14.779-3.618 18.583-9.927l.32-.53h9.871l-.7 1.493c-4.895 10.406-15.83 17.13-27.859 17.13M240.365 151.13c-12.705 0-23.042-9.867-23.042-21.997 0-12.13 10.337-21.999 23.042-21.999 12.705 0 23.042 9.869 23.042 21.999 0 12.13-10.337 21.998-23.042 21.998m0-49.996c-9.34 0-17.668 4.195-23.042 10.71v-29.13h-6.284v47.944h.045c.833 14.731 13.648 26.471 29.28 26.471 16.171 0 29.327-12.56 29.327-27.997 0-15.438-13.156-27.998-29.326-27.998"
+    />
+    <path
+      d="M240.365 108.193c-12.094 0-21.933 9.393-21.933 20.939s9.839 20.94 21.933 20.94 21.932-9.394 21.932-20.94c0-11.546-9.838-20.939-21.932-20.939m0 43.997c-13.318 0-24.151-10.344-24.151-23.058 0-12.713 10.833-23.056 24.15-23.056 13.318 0 24.152 10.343 24.152 23.056 0 12.714-10.834 23.058-24.151 23.058m-28.217-22.36.043.771c.808 14.283 13.184 25.47 28.174 25.47 15.558 0 28.217-12.084 28.217-26.939 0-14.854-12.659-26.94-28.217-26.94-8.687 0-16.767 3.757-22.171 10.307l-1.98 2.401V83.772h-4.066zm28.217 28.359c-15.817 0-28.934-11.549-30.314-26.472h-.121V81.655h8.502v27.358c5.732-5.713 13.571-8.938 21.933-8.938 16.782 0 30.436 13.035 30.436 29.057s-13.654 29.057-30.436 29.057M61.529 21.606l-17.78 61.11-1.23 4.231h9.822l14.322-48.953L81.697 89.82l-15.034 51.824L52.308 92.58h-9.81l1.261 4.34 17.77 61.11h9.957l16.12-55.811 15.895 55.034.226.778h9.955l17.78-61.111 1.262-4.34h-9.82l-14.356 49.062L93.515 89.82l15.033-51.825 14.323 48.953h9.81l-1.23-4.23-17.77-61.111h-9.955l-16.12 55.811-15.897-55.034-.224-.777h-9.957zM169.784 86.007H163.5V40.574h6.284z"
+    />
+    <path
+      d="M164.608 84.948h4.067V41.63h-4.067zm6.284 2.118h-8.502V39.514h8.502z"
+    />
+    <path d="M169.784 46.568h-16.286v-6h16.286z" />
+    <path
+      d="M154.604 45.517h14.067v-3.882h-14.067Zm16.286 2.117h-18.505v-8.117h18.505zM169.784 28.654H163.5v-6h6.284z"
+    />
+    <path
+      d="M164.608 27.595h4.067v-3.883h-4.067zm6.284 2.117h-8.502v-8.117h8.502zM356.393 157.132h-6.285v-6h6.285z"
+    />
+    <path
+      d="M351.218 156.073h4.066v-3.883h-4.066zm6.285 2.117H349v-8.117h8.503zM217.325 155.916h-6.284v-29.934h6.284z"
+    />
+    <path
+      d="M212.15 154.857h4.066V127.04h-4.066zm6.284 2.118h-8.502v-32.053h8.502z"
+    />
+    <g>
+      <path
+        d="M313.766 151.13c-12.705 0-23.041-9.867-23.041-21.997 0-12.13 10.336-21.999 23.041-21.999 12.706 0 23.042 9.869 23.042 21.999 0 12.13-10.336 21.998-23.042 21.998m0-49.996c-9.34 0-17.668 4.195-23.041 10.71v-29.13h-6.285v47.944h.045c.834 14.731 13.648 26.471 29.281 26.471 16.17 0 29.326-12.56 29.326-27.997 0-15.438-13.155-27.998-29.326-27.998"
+      />
+    </g>
+    <g>
+      <path
+        d="M313.766 108.193c-12.094 0-21.932 9.393-21.932 20.939s9.838 20.94 21.932 20.94 21.934-9.394 21.934-20.94c0-11.546-9.84-20.939-21.934-20.939m0 43.997c-13.316 0-24.15-10.344-24.15-23.058 0-12.713 10.834-23.056 24.15-23.056 13.318 0 24.152 10.343 24.152 23.056 0 12.714-10.834 23.058-24.152 23.058m-28.216-22.36.042.771c.808 14.283 13.184 25.47 28.174 25.47 15.56 0 28.218-12.084 28.218-26.939 0-14.854-12.658-26.94-28.218-26.94-8.686 0-16.767 3.757-22.17 10.307l-1.98 2.401V83.772h-4.066zm28.216 28.359c-15.817 0-28.934-11.549-30.314-26.472h-.12V81.655h8.502v27.358c5.731-5.713 13.57-8.938 21.932-8.938 16.782 0 30.436 13.035 30.436 29.057s-13.654 29.057-30.436 29.057"
+      />
+    </g>
+    <path d="M290.716 155.918h-6.285v-29.935h6.285z" />
+    <path
+      d="M285.538 154.856h4.067v-27.818h-4.067Zm6.284 2.118h-8.503v-32.053h8.503z"
+    />
+  </svg>
+</template>

frontend/src/lib/covergen.ts

@@ -19,6 +19,7 @@ declare global {
   }
 }
 
+// Load and run the WASM blob
 const go = new Go();
 WebAssembly.instantiateStreaming(fetch('covergen.wasm'), go.importObject).then(
   (result) => {
@@ -26,6 +27,13 @@ WebAssembly.instantiateStreaming(fetch('covergen.wasm'), go.importObject).then(
   }
 );
 
+/**
+ * generateCover generates a pdf containing both the front and back page for the invoice.
+ * If you want them separately, call generateSplitCover.
+ *
+ * @see generateSplitCover
+ * @param args
+ */
 export function generateCover(args: CoverArgs): File {
   const result = window.generateCover(args);
   if ('error' in result) {
@@ -35,6 +43,11 @@ export function generateCover(args: CoverArgs): File {
   return new File([result], 'cover.pdf', { type: 'application/pdf' });
 }
 
+/**
+ * generateSplitCover generates two pdfs, one for the front cover, and one for the back
+ * @see generateCover
+ * @param args
+ */
 export function generateSplitCover(args: CoverArgs): {
   front: File;
   back: File;

frontend/src/lib/randomlabel.ts

@@ -1,5 +1,11 @@
-import { readonly, ref } from 'vue';
+import { readonly, Ref, ref } from 'vue';
 
+/**
+ * Random labels as a library function.
+ * Will return a random label from the given options.
+ * Calling the `update` function that is returned will pick a new label.
+ * @param options
+ */
 export function randomLabel(options: string[]) {
   const label = ref<string>();
   const randomLabel = () => {
@@ -12,7 +18,11 @@ export function randomLabel(options: string[]) {
   label.value = randomLabel();
 
   return {
-    label: readonly(label),
-    update: () => (label.value = randomLabel()),
+    // This type refinement is proper as the `undefined` value can never happen from this point onwards
+    label: readonly(label as Ref<string>),
+    // Updates the returned `label` with a new randomly chosen one
+    update() {
+      label.value = randomLabel();
+    },
   };
 }