feat(banners-lib): ✨ text to svg converting

packages/banners/package.json

@@ -16,5 +16,8 @@
 		"@types/node": "^20.10.0",
 		"eslint": "^8.54.0",
 		"linkedom": "^0.16.4"
+	},
+	"dependencies": {
+		"@fredli74/typr": "^0.3.8"
 	}
 }

packages/banners/src/index.js

@@ -3,6 +3,7 @@
  */
 import getLocalLayout from './layouts.js';
 import { isValidIcon } from './utils.js';
+import fontSvg from './text-svg.js';
 
 /**
  * @param {Readonly<string>} string - The string to be converted.
@@ -198,6 +199,8 @@ async function banner(object) {
 		},
 	);
 
+	dom.appendChild(stringToHtml(`<g transform="translate(30, 40)"><path d="${fontSvg}" transform="scale(0.01, -0.01)" fill="#ff0000" /></g>`, doc));
+
 	return htmlToString(dom, doc);
 }
 

packages/banners/src/text-svg.js

@@ -0,0 +1,14 @@
+import * as typr from '@fredli74/typr';
+
+const buffer = await fetch(
+	import.meta.resolve('/packages/banners/static/CalSans-SemiBold.ttf'),
+);
+const font = new typr.Font(await buffer.arrayBuffer());
+const glyhps = font.stringToGlyphs('Hello world');
+
+const path = font.glyphsToPath(glyhps);
+const svg = font.pathToSVG(path);
+
+export default svg;
+
+

pnpm-lock.yaml

@@ -41,6 +41,10 @@ importers:
         version: 0.34.6
 
   packages/banners:
+    dependencies:
+      '@fredli74/typr':
+        specifier: ^0.3.8
+        version: 0.3.8
     devDependencies:
       '@types/node':
         specifier: ^20.10.0
@@ -597,6 +601,10 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /@fredli74/typr@0.3.8:
+    resolution: {integrity: sha512-0Wr3arrJUOoF5HyE8/nusPsdOQaUEd9t0dq8GTHBgSakuh543VqQklIpuRWF/nEnoxkIJzHpCYYesWTyEqgrFg==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}