fix: embedded element font not loading (#37)

added font option for each element, debugged font not loading, fixes

backend/src/data/default_config.json

@@ -1,16 +1,18 @@
 {
-  "fontName": "Arial",
+  "buttonFontName": "Arial",
   "buttonText": "Click me",
   "buttonBorder": "Light",
   "buttonTextColor": "#ffffff",
   "buttonBackgroundColor": "#ff808c",
+  "bannerFontName": "Arial",
   "bannerTitleText": "How to support?",
   "bannerDescriptionText": "You can support this page and my work by a one time donation or proportional to the time you spend on this website through web monetization.",
   "bannerSlideAnimation": "Down",
   "bannerPosition": "Bottom",
   "bannerTextColor": "#ffffff",
   "bannerBackgroundColor": "#ff808c",
   "bannerBorder": "Light",
+  "widgetFontName": "Arial",
   "widgetDonateAmount": 1,
   "widgetTitleText": "Future of support",
   "widgetDescriptionText": "Experience the new way to support our content. Activate Web Monetization in your browser and support our work as you browse. Every visit helps us keep creating the content you love! You can also support us by a one time donation using our solution below!",

frontend/app/components/compositions/ToolConfig.tsx

@@ -44,7 +44,7 @@ const ButtonConfig = ({
 }: Omit<PartialToolConfigProps, 'type'>) => {
   const [displayedControl, setDisplayedControl] = useState('background')
   const defaultFontValue = fontOptions.find(
-    (option) => option.value == config?.fontName
+    (option) => option.value == config?.buttonFontName
   )
 
   const bgColor = bgColors.button
@@ -97,12 +97,12 @@ const ButtonConfig = ({
         <div className="flex items-center max-w-36 w-32 shrink-0">
           <Select
             withBorder
-            name="fontName"
+            name="buttonFontName"
             placeholder="Select Font"
             options={fontOptions}
             value={defaultFontValue}
             onChange={(value) =>
-              setToolConfig({ ...config, fontName: value ?? '' })
+              setToolConfig({ ...config, buttonFontName: value ?? '' })
             }
           />
         </div>
@@ -144,7 +144,7 @@ const BannerConfig = ({
 }: Omit<PartialToolConfigProps, 'type'>) => {
   const [displayedControl, setDisplayedControl] = useState('background')
   const defaultFontValue = fontOptions.find(
-    (option) => option.value == config?.fontName
+    (option) => option.value == config?.bannerFontName
   )
 
   const bgColor = bgColors.banner
@@ -197,12 +197,12 @@ const BannerConfig = ({
         <div className="flex items-center max-w-36 w-32 shrink-0">
           <Select
             withBorder
-            name="fontName"
+            name="bannerFontName"
             placeholder="Select Font"
             options={fontOptions}
             value={defaultFontValue}
             onChange={(value) =>
-              setToolConfig({ ...config, fontName: value ?? '' })
+              setToolConfig({ ...config, bannerFontName: value ?? '' })
             }
           />
         </div>
@@ -300,7 +300,7 @@ const WidgetConfig = ({
 }: Omit<PartialToolConfigProps, 'type'>) => {
   const [displayedControl, setDisplayedControl] = useState('background')
   const defaultFontValue = fontOptions.find(
-    (option) => option.value == config?.fontName
+    (option) => option.value == config?.widgetFontName
   )
 
   const bgColor = bgColors.widget
@@ -376,12 +376,12 @@ const WidgetConfig = ({
         <div className="flex items-center max-w-36 w-32 shrink-0">
           <Select
             withBorder
-            name="fontName"
+            name="widgetFontName"
             placeholder="Select Font"
             options={fontOptions}
             value={defaultFontValue}
             onChange={(value) =>
-              setToolConfig({ ...config, fontName: value ?? '' })
+              setToolConfig({ ...config, widgetFontName: value ?? '' })
             }
           />
         </div>

frontend/app/lib/types.ts

@@ -22,16 +22,17 @@ export enum PositionType {
 }
 
 export interface ElementConfigType {
-  fontName: string
   walletAddress?: string
 
   // button specific
+  buttonFontName: string
   buttonText: string
   buttonBorder: CornerType
   buttonTextColor: string
   buttonBackgroundColor: string
 
   // banner specific
+  bannerFontName: string
   bannerTitleText: string
   bannerDescriptionText: string
   bannerSlideAnimation: SlideAnimationType
@@ -41,6 +42,7 @@ export interface ElementConfigType {
   bannerBackgroundColor: string
 
   // widget specific
+  widgetFontName: string
   widgetTitleText: string
   widgetDescriptionText: string
   // widgetDonateAmount: number // not posibble currently

frontend/app/lib/utils.ts

@@ -14,7 +14,7 @@ const getSelectedFont = (name: string) => {
 }
 
 export const getIlpayCss = (config: ElementConfigType) => {
-  const selectedFont = getSelectedFont(config.fontName)
+  const selectedFont = getSelectedFont(config.widgetFontName)
   const widgetButtonBorder =
     config.widgetButtonBorder == 'Light'
       ? '0.375rem'
@@ -69,7 +69,9 @@ export const generateConfigCss = (
   config: ElementConfigType,
   returnRaw = false
 ) => {
-  const selectedFont = getSelectedFont(config.fontName)
+  // const selectedButtonFont = getSelectedFont(config.buttonFontName)
+  const selectedBannerFont = getSelectedFont(config.bannerFontName)
+  const selectedWidgetFont = getSelectedFont(config.widgetFontName)
   const buttonBorder =
     config.buttonBorder == CornerType.Light
       ? '0.375rem'
@@ -93,7 +95,7 @@ export const generateConfigCss = (
 
   const css = `       
         .wm_button {
-            font-family: ${selectedFont}, system-ui, sans-serif !important;
+            font-family: ${selectedWidgetFont}, system-ui, sans-serif !important;
             font-size: 16px;
             padding: 8px 20px;
             border: 1px solid transparent;
@@ -103,7 +105,7 @@ export const generateConfigCss = (
             transition: all 0.5s ease;
         }       
         .wm_banner {
-            font-family: ${selectedFont}, system-ui, sans-serif !important;
+            font-family: ${selectedBannerFont}, system-ui, sans-serif !important;
             font-size: 16px;
             padding: 12px 20px;
             border: 1px solid transparent;
@@ -118,7 +120,7 @@ export const generateConfigCss = (
         }
 
         .wm_widget .content {
-            font-family: ${selectedFont}, system-ui, sans-serif !important;
+            font-family: ${selectedWidgetFont}, system-ui, sans-serif !important;
             font-size: 14px;
             padding: 12px 20px;
             color: ${config.widgetTextColor};
@@ -132,7 +134,7 @@ export const generateConfigCss = (
         }
 
         .ilpay_body {
-          font-family: ${selectedFont}, system-ui, sans-serif !important;
+          font-family: ${selectedWidgetFont}, system-ui, sans-serif !important;
           color: ${config.widgetTextColor};
         }
 

frontend/app/lib/validate.server.ts

@@ -5,25 +5,21 @@ export const walletSchema = z.object({
   walletAddress: z.string().min(1, { message: 'Wallet address is required' })
 })
 
-export const sharedSchema = z
-  .object({
-    fontName: z.string().min(1, { message: 'Choose a font' })
-  })
-  .merge(walletSchema)
-
 export const createButtonSchema = z
   .object({
     elementType: z.literal('button'),
+    buttonFontName: z.string().min(1, { message: 'Choose a font' }),
     buttonText: z.string().min(1, { message: 'Button label cannot be empty' }),
     buttonBorder: z.nativeEnum(CornerType),
     buttonTextColor: z.string().min(6),
     buttonBackgroundColor: z.string().min(6)
   })
-  .merge(sharedSchema)
+  .merge(walletSchema)
 
 export const createBannerSchema = z
   .object({
     elementType: z.literal('banner'),
+    bannerFontName: z.string().min(1, { message: 'Choose a font' }),
     bannerTitleText: z.string().optional(),
     bannerDescriptionText: z
       .string()
@@ -34,11 +30,12 @@ export const createBannerSchema = z
     bannerPosition: z.nativeEnum(PositionType),
     bannerBorder: z.nativeEnum(CornerType)
   })
-  .merge(sharedSchema)
+  .merge(walletSchema)
 
 export const createWidgetSchema = z
   .object({
     elementType: z.literal('widget'),
+    widgetFontName: z.string().min(1, { message: 'Choose a font' }),
     widgetButtonText: z.string().min(1),
     widgetDescriptionText: z.string().min(1),
     widgetButtonBorder: z.nativeEnum(CornerType),
@@ -47,7 +44,7 @@ export const createWidgetSchema = z
     widgetTextColor: z.string().min(1),
     widgetBackgroundColor: z.string().min(1)
   })
-  .merge(sharedSchema)
+  .merge(walletSchema)
 
 export const getElementSchema = (type: string) => {
   switch (type) {

frontend/public/css/banner.css

@@ -8,6 +8,7 @@
   z-index: 99998; /* needs to be 1 lower then the widget, to handle overlap */
   text-align: justify;
   overflow: hidden;
+  font-family: var(--wmt-banner-font), sans-serif;
 }
 
 ._wm_tools_banner_header {

frontend/public/css/widget.css

@@ -10,6 +10,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  font-family: var(--wmt-widget-font), sans-serif;
 }
 
 ._wm_tools_widget_trigger {

frontend/script/index.tsx

@@ -64,6 +64,13 @@ const createShadowDOM = () => {
   return { shadowHost, shadowRoot }
 }
 
+const appendPaymentPointer = (walletAddress: string) => {
+  const monetizationElement = document.createElement('link')
+  monetizationElement.rel = 'monetization'
+  monetizationElement.href = `https://${walletAddress}`
+  document.head.appendChild(monetizationElement)
+}
+
 const getCSSFile = (url: string) => {
   const link = document.createElement('link')
 
@@ -74,39 +81,81 @@ const getCSSFile = (url: string) => {
   return link
 }
 
+const allowedFonts = ['Cookie', 'Roboto', 'Open Sans', 'Titillium Web', `Arial`]
+const getFontFamily = (family: string, forElement: string = 'banner') => {
+  // if exists remove it
+  const currentFontFamily = document.getElementById(
+    `wmt-font-family-${forElement}`
+  ) as HTMLLinkElement
+  if (currentFontFamily) {
+    currentFontFamily.remove()
+  }
+
+  let selectedFont = 'Arial'
+  if (allowedFonts.indexOf(family) != -1) {
+    selectedFont = family
+  }
+
+  const styleObj = document.createElement('link') as HTMLLinkElement
+  styleObj.id = `wmt-font-family-${forElement}`
+  styleObj.rel = 'stylesheet'
+  styleObj.type = 'text/css'
+
+  switch (selectedFont) {
+    case 'Open Sans':
+      styleObj.href = `https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap`
+      break
+    case 'Cookie':
+      styleObj.href = `https://fonts.googleapis.com/css2?family=Cookie&display=swap`
+      break
+    case 'Roboto':
+      styleObj.href = `https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap`
+      break
+    default:
+      styleObj.href = `https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap`
+  }
+
+  return { fontFamily: styleObj, selectedFont }
+}
+
 const drawElement = (
   types: string[] | undefined,
   walletAddress: string,
   config: Config
 ) => {
   const { shadowHost, shadowRoot } = createShadowDOM()
 
+  // add payment pointer / wallet address to target website first
+  // so we have something to check against when displaying the banner
+  appendPaymentPointer(walletAddress)
+
   for (const key in types) {
     const type = types[Number(key)]
     switch (type) {
       case 'widget': {
+        const font = getFontFamily(config.widgetFontName, 'widget')
+        shadowHost.style.setProperty('--wmt-widget-font', font.selectedFont)
         const css = getCSSFile('css/widget.css')
         const element = drawWidget(walletAddress, config)
         shadowRoot.appendChild(css)
         shadowRoot.appendChild(element)
+        // font family needs to be outside of the shadow DOM
+        document.body.appendChild(font.fontFamily)
         document.body.appendChild(shadowHost)
         break
       }
       case 'banner':
       default:
-        // add the monetization link first,
-        // so we have something to check against when displaying the banner
-        const monetizationElement = document.createElement('link')
-        monetizationElement.rel = 'monetization'
-        monetizationElement.href = `https://${walletAddress}`
-        document.body.appendChild(monetizationElement)
-
+        const font = getFontFamily(config.bannerFontName, 'banner')
+        shadowHost.style.setProperty('--wmt-banner-font', font.selectedFont)
         const css = getCSSFile('css/banner.css')
         const element = drawBanner(config)
         if (element) {
           shadowRoot.appendChild(css)
           shadowRoot.appendChild(element)
         }
+        // font family needs to be outside of the shadow DOM
+        document.body.appendChild(font.fontFamily)
         document.body.appendChild(shadowHost)
     }
   }