chore(release): 1.5.0

closes issue #2

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.5.0](https://git.lufrai.com/rappli/rappli/compare/v1.4.0...v1.5.0) (2022-09-17)
+
+
+### Features
+
+* implement font setting and load cantarell explicitly ([a84a869](https://git.lufrai.com/rappli/rappli/commit/a84a8695a8c6fcea98f514d950282c6af045ff08)), closes [#2](https://git.lufrai.com/rappli/rappli/issues/2)
+
 ## [1.4.0](https://git.lufrai.com/rappli/rappli/compare/v1.3.0...v1.4.0) (2022-09-15)
 
 

README.md

@@ -28,6 +28,7 @@ npm run dev -- --open
 ### Guidelines & Validation of Swiss Qr Codes
 
 - Guidelines: https://www.paymentstandards.ch/dam/downloads/ig-qr-bill-de.pdf
+- Liste von Alternativen: https://www.paymentstandards.ch/de/home/readiness/generators.html
 - Swico QR Validator: https://www.swiss-qr-invoice.org/validator/?lang=de
 - Six QR Validator: https://validation.iso-payments.ch/gp/qrrechnung/validation
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "rappli",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "rappli",
-      "version": "1.4.0",
+      "version": "1.5.0",
       "license": "MIT",
       "dependencies": {
         "solid-start": "v0.1.0-alpha.89",
@@ -18,6 +18,10 @@
         "rappli": "bin/rappli.js"
       },
       "devDependencies": {
+        "@fontsource/barlow": "^4.5.8",
+        "@fontsource/exo-2": "^4.5.9",
+        "@fontsource/manrope": "^4.5.11",
+        "@fontsource/overpass": "^4.5.9",
         "@formkit/auto-animate": "^1.0.0-beta.1",
         "@iconify/json": "^2.1.81",
         "@tailwindcss/typography": "^0.5.4",
@@ -27,6 +31,7 @@
         "autoprefixer": "^10.4.2",
         "autosize": "^5.0.1",
         "big.js": "^6.2.1",
+        "cantarell": "^0.303.0",
         "daisyui": "^2.20.0",
         "date-fns": "^2.29.1",
         "froebel": "^0.18.0",
@@ -1622,6 +1627,30 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@fontsource/barlow": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/barlow/-/barlow-4.5.8.tgz",
+      "integrity": "sha512-tfSFrtac5nVIehoYpQf0ZW1W+sKDnk3NEpuMfiyKHQFB95Mz00kSnZqXnIEaAwMxRjoLk+HQzaH+1O7B6Uo3rA==",
+      "dev": true
+    },
+    "node_modules/@fontsource/exo-2": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/exo-2/-/exo-2-4.5.9.tgz",
+      "integrity": "sha512-5+u82a8pm/5sm1Xz+1wJMbAHOWerl0/YABYNxMIf2wFN4+W3+fKf4XeEGjvTnm6LYeX7yor5TrA/bcX3hnqx+Q==",
+      "dev": true
+    },
+    "node_modules/@fontsource/manrope": {
+      "version": "4.5.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/manrope/-/manrope-4.5.11.tgz",
+      "integrity": "sha512-YOdZShn/ply0nKcMYZF4ggrNQD7cDsq6aJ8QkjiA1WVXn6ztD1x7XMd538wEqF+Er+22d00dilEDqpVPFU0FjQ==",
+      "dev": true
+    },
+    "node_modules/@fontsource/overpass": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/overpass/-/overpass-4.5.9.tgz",
+      "integrity": "sha512-77Elez6xGdZrYgl4HE/d4x9FUOKObpMitmOCU/431HXC4ek1hUA7lsm+QcMsHr7Kbc8gxjvl7jUhTlOXNOkPow==",
+      "dev": true
+    },
     "node_modules/@formkit/auto-animate": {
       "version": "1.0.0-beta.1",
       "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-1.0.0-beta.1.tgz",
@@ -2346,6 +2375,12 @@
         }
       ]
     },
+    "node_modules/cantarell": {
+      "version": "0.303.0",
+      "resolved": "https://registry.npmjs.org/cantarell/-/cantarell-0.303.0.tgz",
+      "integrity": "sha512-qrpi0oyF/vLJWUhl8Db+KEamByCXBlUiiuW/nr7f9/gREz4Uf0b/dIzCP3oS4kdWiu7cfeUmNUM9y8WxpR3wog==",
+      "dev": true
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -9295,6 +9330,30 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fontsource/barlow": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/barlow/-/barlow-4.5.8.tgz",
+      "integrity": "sha512-tfSFrtac5nVIehoYpQf0ZW1W+sKDnk3NEpuMfiyKHQFB95Mz00kSnZqXnIEaAwMxRjoLk+HQzaH+1O7B6Uo3rA==",
+      "dev": true
+    },
+    "@fontsource/exo-2": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/exo-2/-/exo-2-4.5.9.tgz",
+      "integrity": "sha512-5+u82a8pm/5sm1Xz+1wJMbAHOWerl0/YABYNxMIf2wFN4+W3+fKf4XeEGjvTnm6LYeX7yor5TrA/bcX3hnqx+Q==",
+      "dev": true
+    },
+    "@fontsource/manrope": {
+      "version": "4.5.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/manrope/-/manrope-4.5.11.tgz",
+      "integrity": "sha512-YOdZShn/ply0nKcMYZF4ggrNQD7cDsq6aJ8QkjiA1WVXn6ztD1x7XMd538wEqF+Er+22d00dilEDqpVPFU0FjQ==",
+      "dev": true
+    },
+    "@fontsource/overpass": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/overpass/-/overpass-4.5.9.tgz",
+      "integrity": "sha512-77Elez6xGdZrYgl4HE/d4x9FUOKObpMitmOCU/431HXC4ek1hUA7lsm+QcMsHr7Kbc8gxjvl7jUhTlOXNOkPow==",
+      "dev": true
+    },
     "@formkit/auto-animate": {
       "version": "1.0.0-beta.1",
       "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-1.0.0-beta.1.tgz",
@@ -9846,6 +9905,12 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001357.tgz",
       "integrity": "sha512-b+KbWHdHePp+ZpNj+RDHFChZmuN+J5EvuQUlee9jOQIUAdhv9uvAZeEtUeLAknXbkiu1uxjQ9NLp1ie894CuWg=="
     },
+    "cantarell": {
+      "version": "0.303.0",
+      "resolved": "https://registry.npmjs.org/cantarell/-/cantarell-0.303.0.tgz",
+      "integrity": "sha512-qrpi0oyF/vLJWUhl8Db+KEamByCXBlUiiuW/nr7f9/gREz4Uf0b/dIzCP3oS4kdWiu7cfeUmNUM9y8WxpR3wog==",
+      "dev": true
+    },
     "ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rappli",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "bin": "./bin/rappli.js",
   "scripts": {
     "dev": "solid-start dev",
@@ -20,6 +20,10 @@
   "license": "MIT",
   "type": "module",
   "devDependencies": {
+    "@fontsource/barlow": "^4.5.8",
+    "@fontsource/exo-2": "^4.5.9",
+    "@fontsource/manrope": "^4.5.11",
+    "@fontsource/overpass": "^4.5.9",
     "@formkit/auto-animate": "^1.0.0-beta.1",
     "@iconify/json": "^2.1.81",
     "@tailwindcss/typography": "^0.5.4",
@@ -29,6 +33,7 @@
     "autoprefixer": "^10.4.2",
     "autosize": "^5.0.1",
     "big.js": "^6.2.1",
+    "cantarell": "^0.303.0",
     "daisyui": "^2.20.0",
     "date-fns": "^2.29.1",
     "froebel": "^0.18.0",

src/components/Form.tsx

@@ -255,8 +255,8 @@ export const NumberInput: Component<
 
 export const Select: Component<
   {
-    value: string | number;
-    options: [string | number, string][];
+    value?: string | number;
+    options: [undefined | string | number, string][];
     label: string;
     labelMinWidth?: string;
     onChange: (v: any) => void;
@@ -286,7 +286,7 @@ export const Select: Component<
           {props.label}
         </span>
         <select
-          class="flex-1 select select-sm select-bordered"
+          class="flex-1 select select-sm select-bordered w-full overflow-hidden text-ellipsis"
           onChange={(e) => props.onChange(e.currentTarget.value)}
           {...rest}
         >

src/components/Page.tsx

@@ -48,7 +48,7 @@ const Page: FlowComponent = (props) => {
   });
 
   return (
-    <div class="flex-1 flex flex-col justify-start print:block overflow-y-hidden overflow-x-hidden xxl:overflow-y-auto items-center lg:max-w-[none] max-h-screen lg:max-h-[none] print:max-h-[none] min-h-screen print:min-h-0 p-5 pt-3 print:p-0">
+    <div class="page flex-1 flex flex-col justify-start print:block overflow-y-hidden overflow-x-hidden xxl:overflow-y-auto items-center lg:max-w-[none] max-h-screen lg:max-h-[none] print:max-h-[none] min-h-screen print:min-h-0 p-5 pt-3 print:p-0">
       <div
         aria-disabled="true"
         class="print:hidden text-xs text-black text-opacity-50 uppercase mb-2"

src/components/Settings/Overlay.tsx

@@ -766,6 +766,25 @@ const SettingsOverlay: Component = () => {
             <AccordionContent>
               <AccordionItemDivider>Corporate Design</AccordionItemDivider>
               <AccordionItemGrid>
+                <div class="col-span-2">
+                  <Select
+                    label="Schriftart"
+                    labelMinWidth={fullWidthLabelWidth}
+                    title="Schriftart für die Kopfzeile, Einleitung und Schlussbemerkung. Die Schriftart für den Empfangsschein und Zahlteil kann nicht geändert werden, diese wird aus Kompatibilitätsgründen vom System automatisch gewählt."
+                    options={[
+                      [
+                        "default",
+                        "QR Standard (Liberation Sans, Helvetica, Arial)",
+                      ],
+                      ["barlow", "Barlow"],
+                      ["exo2", "Exo 2"],
+                      ["manrope", "Manrope"],
+                      ["overpass", "Overpass"],
+                    ]}
+                    value={localState.font}
+                    onChange={(v) => setLocalState("font", v)}
+                  />
+                </div>
                 <div class="col-span-2">
                   <Select
                     label="Adress-Layout"

src/components/WelcomeModal.tsx

@@ -213,7 +213,7 @@ const WelcomeModal: Component = (props) => {
       <div class="max-h-[60vh] overflow-y-auto px-2">
         <div class="min-h-[60vh] flex items-center justify-center">
           <div>
-            <div class="flex flex-col items-center justify-around">
+            <div class="flex flex-col items-center justify-around font-[Cantarell,_system-ui,_sans-serif]">
               <div class="mt-3 mb-3 text-6xl lg:text-8xl flex items-end lg:w-[370px] justify-between gap-2 lg:gap-0 font-bold tracking-tighter leading-none text-swiss-red fill-current">
                 <AppIcon class="w-auto h-[0.9em]" />
                 <div>Räppli</div>

src/index.css

@@ -70,4 +70,13 @@
   .prose br {
     margin-bottom: 0;
   }
+
+  @font-face {
+    font-family: "Cantarell";
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
+    font-named-instance: "Regular";
+    src: url("node_modules/cantarell/cantarell.woff2") format("woff2");
+  }
 }

src/routes/index.tsx

@@ -8,6 +8,7 @@ import {
   ParentComponent,
   createSignal,
   onMount,
+  createEffect,
 } from "solid-js";
 import SwissInvoice, { InvoiceData } from "~/components/SwissInvoice";
 import { Meta, Style, Title } from "solid-meta";
@@ -150,6 +151,32 @@ export default function Home() {
 
     const externalTitle = "Räppli - Web App für Schweizerische Rechnungen";
 
+    createEffect(function () {
+      if (localState.font === "barlow") {
+        import("@fontsource/barlow/latin-400.css");
+        import("@fontsource/barlow/latin-600.css");
+        import("@fontsource/barlow/latin-700.css");
+      }
+
+      if (localState.font === "overpass") {
+        import("@fontsource/overpass/latin-400.css");
+        import("@fontsource/overpass/latin-600.css");
+        import("@fontsource/overpass/latin-700.css");
+      }
+
+      if (localState.font === "exo2") {
+        import("@fontsource/exo-2/latin-400.css");
+        import("@fontsource/exo-2/latin-600.css");
+        import("@fontsource/exo-2/latin-700.css");
+      }
+
+      if (localState.font === "manrope") {
+        import("@fontsource/manrope/latin-400.css");
+        import("@fontsource/manrope/latin-600.css");
+        import("@fontsource/manrope/latin-700.css");
+      }
+    });
+
     return (
       <div class="break-words whitespace-normal">
         <Title>{import.meta.env.SSR ? externalTitle : titleMemo()}</Title>
@@ -291,7 +318,7 @@ export default function Home() {
 
     const LufraiWatermark = () => (
       <Show when={localState.showLufraiWatermark}>
-        <div class="text-xs mb-10 font-medium flex justify-center items-center">
+        <div class="text-xs mb-10 font-medium flex justify-center items-center font-[Cantarell,_system-ui,_sans-serif]">
           <a
             aria-disabled="true"
             class="transition text-lufrai-primary-light hover:text-lufrai-primary leading-none fill-current hover:scale-110 flex items-center gap-2"
@@ -319,8 +346,20 @@ export default function Home() {
         }mm;
 }
 
+.page {
+  font-family: ${
+    {
+      default: '"Liberation Sans", Helvetica, Arial, sans-serif',
+      barlow: 'Barlow, "Liberation Sans", sans-serif',
+      exo2: '"Exo 2", "Liberation Sans", sans-serif',
+      manrope: 'Manrope, "Liberation Sans", sans-serif',
+      overpass: 'Overpass, "Liberation Sans", sans-serif',
+    }[localState.font]
+  };
+}
+
 .swissinvoice {
-  font-family: Liberation Sans, Helvetica, Arial, sans-serif;
+  font-family: "Liberation Sans", Helvetica, Arial, sans-serif;
 }
 
 @media print {

src/stores.ts

@@ -95,7 +95,7 @@ export const storeSchema = z.object({
 });
 export type StoreObject = Infer<typeof storeSchema>;
 
-export const CURRENT_VERSION = 1.3;
+export const CURRENT_VERSION = 1.5;
 
 export const migrateState = (state: Record<string, any>) => {
   state.version = CURRENT_VERSION;
@@ -142,6 +142,7 @@ export const localStoreSchema = z.object({
   iban: z.string(),
   creditor: addressSchema,
   addressLayout: z.literals(ADDRESS_LAYOUT_LEFT, ADDRESS_LAYOUT_RIGHT),
+  font: z.string(),
   customAddress: addressSchema,
   contact: z.object({
     name: z.string(),
@@ -169,6 +170,12 @@ export const migrateLocalState = (state: Record<string, any>) => {
     state.version = 1.3;
   }
 
+  if (state.version === 1.3) {
+    state.font = "default";
+
+    state.version = 1.5;
+  }
+
   state.version = CURRENT_VERSION;
 };
 
@@ -186,6 +193,7 @@ export const createLocalStore = () =>
       vatRate: 0.0,
       paymentTerms: undefined,
       creditor: createAddress(),
+      font: "default",
       addressLayout: ADDRESS_LAYOUT_RIGHT,
       customAddress: createAddress(),
       contact: {