✨ Add second qr code for vCard

Resolves #74

Author: tmueller

src/Cards/src/components/app.tsx

@@ -13,8 +13,8 @@ import { BrowserData, BrowserDataAdt, getBrowserData, shareUrl } from "../model/
 import { ElmishResult, Init, Subscribe, Update, cmd } from "@fun-ts/elmish";
 import { ErrorIcon, LoaderIcon } from "./icons";
 import { UrlDataOrigin, UrlDataOriginAdt, compressToUrlParam, getParametersFromUrl, getStableStringFromParameters, makeCurrentUrl } from "../model/url-data";
-import { VCardDataAdt, getVCardUrl, vCardFieldsFromAppData, vCardFieldsFromAppDataLoaded } from "../model/v-card-url";
-import { constant, identity, pipe } from "fp-ts/function";
+import { VCardDataAdt, getVCardString, getVCardUrl, vCardFieldsFromAppData, vCardFieldsFromAppDataLoaded, vCardStringAsUrl } from "../model/v-card-url";
+import { constant, flow, identity, pipe } from "fp-ts/function";
 import { getWindowTitleFromAppData, setWindowTitle } from "../model/window-title";
 
 import { Card } from "./card";
@@ -193,8 +193,12 @@ export const update: Update<Model, Msg> = (model, msg) => pipe(
                         pipe(
                             data,
                             vCardFieldsFromAppData,
-                            d => getVCardUrl({ ...d, avatarBase64: O.none }),
-                            url => VCardDataAdt.as.Loaded({ url }),
+                            d => getVCardString({ ...d, avatarBase64: O.none }),
+                            vCardString => VCardDataAdt.as.Loaded({
+                                url: vCardStringAsUrl(vCardString),
+                                vCard: vCardString,
+                                vCardNoImage: vCardString,
+                            }),
                         ),
             },
             pipe(
@@ -317,12 +321,20 @@ export const update: Update<Model, Msg> = (model, msg) => pipe(
                     vCardFieldsFromAppDataLoaded,
                     O.fold(
                         () => VCardDataAdt.of.NotLoaded({}),
-                        data => VCardDataAdt.of.Loaded({
-                            url: getVCardUrl({
+                        flow(
+                            data => ({
                                 ...data,
                                 avatarBase64: O.some(imageData.base64)
+                            }),
+                            dataWithImg => VCardDataAdt.of.Loaded({
+                                url: getVCardUrl(dataWithImg),
+                                vCard: getVCardString(dataWithImg),
+                                vCardNoImage: getVCardString({
+                                    ...dataWithImg,
+                                    avatarBase64: O.none
+                                })
                             })
-                        })
+                        )
                     ),
                 ),
             },
@@ -339,13 +351,17 @@ export const update: Update<Model, Msg> = (model, msg) => pipe(
                     vCardFieldsFromAppDataLoaded,
                     O.fold(
                         () => VCardDataAdt.of.NotLoaded({}),
-                        data => VCardDataAdt.of.Loaded({
-                            url: getVCardUrl({
+                        flow(
+                            data => ({
                                 ...data,
-                                avatarBase64: O.none
+                                avatarBase64: O.none,
+                            }),
+                            dataWithoutImg => VCardDataAdt.of.Loaded({
+                                url: getVCardUrl(dataWithoutImg),
+                                vCard: getVCardString(dataWithoutImg),
+                                vCardNoImage: getVCardString(dataWithoutImg),
                             })
-                        })
-                    ),
+                        )),
                 ),
             },
             cmd.none
@@ -418,6 +434,7 @@ export const view: PreactView<Model, Msg> = (dispatch, model) => (
             <QrCodeView
                 appData={model.appData}
                 browserData={model.browserData}
+                vCardData={model.vCardData}
             />
         </Page>
         <Page route={Routes.of.Share}>
@@ -506,11 +523,14 @@ const CardView: FunctionComponent<CardViewProps> = ({
 type QrCodeViewProps = {
     appData: ADTType<typeof AppDataAdt>;
     browserData: ADTType<typeof BrowserDataAdt>;
+    vCardData: ADTType<typeof VCardDataAdt>;
 };
 
+// TODO: replace nested matchers with sequencing
 const QrCodeView: FunctionComponent<QrCodeViewProps> = ({
     appData,
     browserData,
+    vCardData
 }) => pipe(
     browserData,
     BrowserDataAdt.matchStrict({
@@ -530,14 +550,23 @@ const QrCodeView: FunctionComponent<QrCodeViewProps> = ({
                 Failure: () => <>
                     <ErrorIcon /> An error occurred while loading application data.
                 </>,
-                Loaded: (appDataLoaded) => (
-                    <QrCodeCard
-                        href={pipe(
-                            appDataLoaded,
-                            appDataToUrlParams,
-                            makeCurrentUrl(location)
-                        )}
-                    />
+                Loaded: (appDataLoaded) => pipe(
+                    vCardData,
+                    VCardDataAdt.matchStrict({
+                        NotLoaded: () => <></>,
+                        Loading: () => <LoaderIcon />,
+                        Failure: () => <>
+                            <ErrorIcon /> An error occurred while creating vcard data.
+                        </>,
+                        Loaded: (vCardDataLoaded) => <QrCodeCard
+                            href={pipe(
+                                appDataLoaded,
+                                appDataToUrlParams,
+                                makeCurrentUrl(location)
+                            )}
+                            vcard={vCardDataLoaded.vCardNoImage}
+                        />
+                    })
                 )
             })
         ),

src/Cards/src/components/qr-code-card.css.ts

@@ -1,23 +1,51 @@
-import { keyframes, style } from "@vanilla-extract/css";
-
+import { style } from "@vanilla-extract/css";
 import { varsApp } from "../theme/variables.css";
 
-const fadeIn = keyframes({
-    "0%": { opacity: 0 },
-    "100%": { opacity: 1 },
-});
-
 export const qrCode = style({
     borderRadius: varsApp.space.small,
 
-    animation: `${fadeIn} 1s`,
     backgroundColor: `rgb(${varsApp.color.light.rgb},.75)`,
     color: varsApp.color.dark.hex,
-    transition: "background 1s, color 1s",
 
-    selectors: {
-        "&:hover": {
-            backgroundColor: varsApp.color.light.hex,
+    scrollSnapAlign: "center",
+    scrollSnapStop: "always",
+
+    display: "block"
+});
+
+export const firstQr = style({
+    // marginBottom: varsApp.space.large
+});
+
+export const outer = style({
+    borderRadius: varsApp.space.small,
+
+    display: "flex",
+    flexDirection: "column",
+    flexWrap: "wrap",
+    gap: varsApp.space.large,
+
+    scrollbarWidth: "none",
+
+    overflowX: "auto",
+    overflowY: "hidden",
+
+    aspectRatio: "1",
+
+    scrollSnapType: "both mandatory",
+    scrollBehavior: "smooth",
+
+    overscrollBehaviorX: "none",
+    overscrollBehaviorY: "unset",
+
+    "@media": {
+        "(hover: none)": {
+            // ...and vertical on desktop
+            flexDirection: "row",
+            overflowX: "hidden",
+            overflowY: "auto",
+            overscrollBehaviorX: "unset",
+            overscrollBehaviorY: "none",
         }
     }
 });

src/Cards/src/components/qr-code-card.tsx

@@ -7,17 +7,25 @@ import { QrCode } from "./qr-code";
 
 type QrCodeCardProps = {
     href: string;
+    vcard: string;
     className?: string;
 };
 
 export const QrCodeCard: FunctionComponent<QrCodeCardProps> = ({
     href,
+    vcard,
     className = "",
 }) => (
-    <PageContent className={className}>
-        <QrCode text={href}
-            border={5}
-            className={`${styles.qrCode} ${theme.lightTheme}`}
-        />
+    <PageContent className={`${className}`}>
+        <div className={styles.outer}>
+            <QrCode text={href}
+                border={5}
+                className={`${styles.qrCode} ${styles.firstQr} ${theme.lightTheme}`}
+            />
+            <QrCode text={vcard}
+                border={5}
+                className={`${styles.qrCode} ${theme.lightTheme}`}
+            />
+        </div>
     </PageContent>
 );

src/Cards/src/components/qr-code.tsx

@@ -30,6 +30,8 @@ export const QrCode: FunctionComponent<QrCodeProps> = ({
     border = 0,
     className = ""
 }) => pipe(
+    // Throws RangeError if qrcode too long
+    // TODO: convert to Either
     qrCodeGen.QrCode.encodeText(text, ecc),
     code => <svg xmlns="http://www.w3.org/2000/svg"
         version="1.1"

src/Cards/src/model/v-card-url.ts

@@ -23,7 +23,7 @@ const vCardParamEncoder = (prefix: string) => O.map<string, string>(
 );
 
 const vCardImageEncoder = O.map<Base64Data, string>(
-    d => `PHOTO;ENCODING=BASE64;TYPE=${d.type.toUpperCase()}:${d.content}\n\n`
+    d => `PHOTO;TYPE=${d.type.toUpperCase()};ENCODING=b:${d.content}\n`
 );
 
 type VCardInput =
@@ -45,18 +45,26 @@ const renderVCard = (params: VCardFields) => pipe(
     content => `BEGIN:VCARD\nVERSION:3.0\n${content}END:VCARD`
 );
 
-const vCardUrl = (vcardData: string) => pipe(
-    new Blob([vcardData], { type: "text/vcard" }),
+export const vCardStringAsUrl = (vCardData: string) => pipe(
+    new Blob([vCardData], { type: "text/vcard" }),
     URL.createObjectURL
 );
 
-export const getVCardUrl = flow(
+export const getVCardString = flow(
     encodeVCardFields,
     renderVCard,
-    vCardUrl
 );
 
-export const VCardDataAdt = makeRemoteResultADT<{ url: string; }>();
+export const getVCardUrl = flow(
+    getVCardString,
+    vCardStringAsUrl
+);
+
+export const VCardDataAdt = makeRemoteResultADT<{
+    url: string;
+    vCard: string;
+    vCardNoImage: string;
+}>();
 
 export const vCardFieldsFromAppData = (a: AppData) => pipe(
     a,