Cleanup frontend

.drone.yml

@@ -62,9 +62,9 @@ steps:
         path: /wasm
     commands:
       - cd frontend
-      - yarn install
+      - npm install
       - "cp /wasm/* public/"
-      - yarn build
+      - npm run build
   - name: upload
     image: plugins/s3
     settings:

Makefile

@@ -16,3 +16,14 @@ build-cross-clis: ## Builds the CLIs for all supported platforms
 	rm -rf ./dist && mkdir ./dist
 	GOOS=linux GOARCH=amd64 go build -o dist/covergen.linux-amd64 ./cmd/covergen
 	GOOS=darwin GOARCH=amd64 go build -o dist/covergen.darwin-amd64 ./cmd/covergen
+
+.PHONY: wasm-frontend
+wasm-frontend: wasm
+	cp covergen.wasm frontend/public/covergen.wasm
+
+.PHONY: clis-frontend
+clis-frontend: build-cross-clis
+	cp -r dist/ frontend/public/
+
+.PHONY: prepare-frontend
+prepare-frontend: wasm-frontend clis-frontend ### Prepares all main-repo requirements for the frontend

cmd/server/main.go

@@ -1,15 +0,0 @@
-package main
-
-import (
-	"fmt"
-	"net/http"
-)
-
-// Super simple development webserver
-func main() {
-	err := http.ListenAndServe(":9090", http.FileServer(http.Dir("assets")))
-	if err != nil {
-		fmt.Println("Failed to start server", err)
-		return
-	}
-}

frontend/.gitignore

@@ -4,5 +4,5 @@ dist
 dist-ssr
 *.local
 
-.yarn/install-state.gz
 public/*.wasm
+public/dist

frontend/README.md

@@ -1,11 +1,30 @@
-# Vue 3 + Typescript + Vite
+# Covergen Frontend
 
-This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Quick startup
 
-## Recommended IDE Setup
+For the frontend to function, the `covergen` wasm blob needs to be made available.
+This is not present in-tree but is easily prepared by running `make prepare-frontend` in the parent directory 
+(i.e. the repo root).
+This will also do prepare the cross-cli's, but those are optional (you can run `make wasm-frontend` to just do the wasm).
 
-- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+After this the usual `vite` / `vue3` commands apply:
 
-## Type Support For `.vue` Imports in TS
+```shell
+npm run dev
+```
 
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
+To prepare a proper final build:
+```shell
+npm run build
+```
+
+## A note on `wasm_exec.js`
+
+Go WASM requires a 'helper' library, `wasm_exec.js` to help with the bridging memory from Go <-> JS.
+This file is **different for each Go (1.XX) version**. The version bundled in-tree is for Go 1.16.
+If you run a different version, you might need to copy it from your local golang dist folder, 
+usually `/usr/local/go/misc/wasm/wasm_exec.js`.
+
+If your distribution doesn't provide this file (e.g. Fedora) you can just copy it from the go main repo by going to
+[https://github.com/golang/go/blob/master/misc/wasm/wasm_exec.js](https://github.com/golang/go/blob/master/misc/wasm/wasm_exec.js)
+and using the GitHub branch selector to select the `release-branch.go1.XX` that matches your version of go (run `go version` to find out).

frontend/package.json

@@ -5,33 +5,33 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "lint": "yarn lint:ts && yarn lint:style",
+    "lint": "npm run lint:ts && npm run lint:style",
     "lint:ts": "vue-tsc --noEmit",
     "lint:style": "eslint --ext .ts,.vue --ignore-path .gitignore .",
-    "lint:fix": "yarn lint:style --fix"
+    "lint:fix": "npm run lint:style --fix"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.0",
-    "pinia": "^2.0.9",
+    "pinia": "^2.0.13",
-    "tailwindcss": "^3.0.15",
+    "tailwindcss": "^3.0.24",
-    "vue": "^3.2.25"
+    "vue": "^3.2.33"
   },
   "devDependencies": {
     "@types/golang-wasm-exec": "^1.15.0",
-    "@types/node": "^17.0.10",
+    "@types/node": "^17.0.25",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.10.0",
+    "@typescript-eslint/parser": "^5.20.0",
-    "@vitejs/plugin-vue": "^2.0.0",
+    "@vitejs/plugin-vue": "^2.3.1",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.4",
-    "eslint": "^8.7.0",
+    "eslint": "^8.13.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier-vue": "^3.1.0",
-    "eslint-plugin-vue": "^8.3.0",
+    "eslint-plugin-vue": "^8.6.0",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.12",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
-    "typescript": "^4.4.4",
+    "typescript": "^4.6.3",
-    "vite": "^2.7.2",
+    "vite": "^2.9.5",
-    "vue-tsc": "^0.29.8"
+    "vue-tsc": "^0.34.7"
   }
 }

frontend/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path d="m86.915 15.448-28.008 100.83-1.937 6.98h15.472l22.56-80.772 23.683 85.512-23.683 85.51-22.613-80.953H56.935l1.987 7.16 27.992 100.83H102.6l25.394-92.088 25.04 90.807.354 1.282h15.683l28.008-100.83 1.988-7.161h-15.47l-22.614 80.953-23.681-85.51 23.68-85.512 22.563 80.773h15.454l-1.937-6.98-27.992-100.83h-15.683l-25.394 92.088L102.95 16.73l-.353-1.282H86.913z"/>
+</svg>

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
+          <Logo class="h-12" />
-            src="../assets/logo.png"
-            alt="covergen logo"
-            class="h-8 w-auto mr-2"
-          />
           <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),
+    // This type refinement is proper as the `undefined` value can never happen from this point onwards
-    update: () => (label.value = randomLabel()),
+    label: readonly(label as Ref<string>),
+    // Updates the returned `label` with a new randomly chosen one
+    update() {
+      label.value = randomLabel();
+    },
   };
 }

frontend/tsconfig.json

@@ -9,10 +9,16 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
     "lib": ["esnext", "dom"],
     "paths": {
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
 }