bsign-customization-full 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsign-customization-full",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/index.css

@@ -4,7 +4,7 @@
 @font-face {
   font-family: 'Bebasneue';
   src:
-    url('https://cdn.jsdelivr.net/npm/bsign-customization@latest/src/fonts/BEBASNEUE-REGULAR.TTF') format('truetype');
+    url('/fonts/BEBASNEUE-REGULAR.TTF') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -13,7 +13,7 @@
 @font-face {
   font-family: 'GOTHICB';
   src:
-    url('./fonts/GOTHICB.TTF') format('truetype');
+    url('/fonts/GOTHICB.TTF') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -22,11 +22,11 @@
 @font-face {
   font-family: 'Braille';
   src:
-    url('https://cdn.jsdelivr.net/npm/bsign-customization@latest/src/fonts/Braille-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
+    url('/fonts/Braille-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
 
 @custom-variant dark (&:is(.dark *));
 

package/src/index.tsx

@@ -3,6 +3,7 @@ import SignCustomizer, { type SignCustomizerProps } from "./AppDemo2"
 import resizableStyles from "react-resizable/css/styles.css?inline"
 import widgetStyles from "./index.css?inline"
 import { WidgetPortalContainerContext } from "./lib/widget-context"
+import { resolveAssetUrl } from "./lib/asset-url"
 
 export type WidgetTarget = string | HTMLElement
 
@@ -10,7 +11,24 @@ export interface MountConstructorWidgetProps extends SignCustomizerProps {
   widgetCss?: string | string[]
 }
 
-const BASE_WIDGET_CSS = `${resizableStyles}\n${widgetStyles}`
+const FONT_ASSET_PATHS = [
+  "/fonts/BEBASNEUE-REGULAR.TTF",
+  "/fonts/GOTHICB.TTF",
+  "/fonts/Braille-Regular.ttf",
+] as const
+
+function resolveFontUrlsInCss(styles: string): string {
+  return FONT_ASSET_PATHS.reduce((nextStyles, fontPath) => {
+    const resolvedFontPath = resolveAssetUrl(fontPath)
+
+    return nextStyles
+      .replaceAll(`url('${fontPath}')`, `url('${resolvedFontPath}')`)
+      .replaceAll(`url("${fontPath}")`, `url("${resolvedFontPath}")`)
+      .replaceAll(`url(${fontPath})`, `url(${resolvedFontPath})`)
+  }, styles)
+}
+
+const BASE_WIDGET_CSS = `${resizableStyles}\n${resolveFontUrlsInCss(widgetStyles)}`
 const rootsByHost = new WeakMap<HTMLElement, Root>()
 
 function resolveTarget(target: WidgetTarget): HTMLElement {

package/src/lib/asset-url.ts

@@ -1,6 +1,24 @@
 const ABSOLUTE_URL_PATTERN = /^(?:[a-z][a-z\d+\-.]*:)?\/\//i
 const SPECIAL_PROTOCOL_PATTERN = /^(?:data|blob):/i
 
+function isLocalhostHost(hostname: string): boolean {
+  const normalizedHost = hostname.toLowerCase()
+  return (
+    normalizedHost === "localhost" ||
+    normalizedHost === "127.0.0.1" ||
+    normalizedHost === "[::1]" ||
+    normalizedHost.endsWith(".localhost")
+  )
+}
+
+function shouldUseRelativeUrls(): boolean {
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  return isLocalhostHost(window.location.hostname)
+}
+
 function toBaseUrl(url: string): string | undefined {
   try {
     return new URL(".", url).toString()
@@ -65,6 +83,14 @@ export function resolveAssetUrl(path: string): string {
     return path
   }
 
+  if (shouldUseRelativeUrls()) {
+    if (path.startsWith("/") || path.startsWith("./") || path.startsWith("../")) {
+      return path
+    }
+
+    return `./${path}`
+  }
+
   const normalizedPath = path.startsWith("/") ? path.slice(1) : path
   return new URL(normalizedPath, getAssetBaseUrl()).toString()
 }