fix: changed svg generator

Author: Raymond Ottun

Diff for: package-lock.json

@@ -30,9 +30,9 @@
   "license": "ISC",
   "dependencies": {
     "@faker-js/faker": "^8.0.2",
-    "geopattern": "^1.2.3",
     "handlebars": "^4.7.7",
     "object-path": "^0.11.8",
+    "trianglify": "^4.1.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {

Diff for: package.json

@@ -40,8 +40,7 @@ export const generate = (
 ): void => {
   const { template, output, locale } = argv
   try {
-
-    if(!fs.existsSync(template)) {
+    if (!fs.existsSync(template)) {
       throw new Error(`File or directory "${template}" does not exist`)
     }
 

Diff for: src/cmds/generate.ts

@@ -42,7 +42,7 @@ Handlebars.registerHelper(
 
     if (!operators[operator]) {
       throw new Error(
-        `Handlerbars Helper "compare" doesn't know the operator ${String(operator)}`
+        `Handlebars Helper "compare" doesn't know the operator ${String(operator)}`
       )
     }
 

Diff for: src/helpers/compare.ts

@@ -1,61 +1,41 @@
 import Handlebars from 'handlebars'
-import Geopattern from 'geopattern'
+import trianglify from 'trianglify'
 import './image'
 
-const toDataUrl = jest.fn(() => 'url_image')
-const toDataUri = jest.fn(() => 'uri_image')
 const toSvg = jest.fn(() => 'svg_image')
-const toBase64 = jest.fn(() => 'base64_image')
 
-jest.mock('geopattern', () => {
-  return {
-    generate: jest.fn(() => {
-      return {
-        toDataUrl,
-        toDataUri,
-        toSvg,
-        toBase64
-      }
-    })
-  }
+jest.mock('trianglify', () => {
+  return jest.fn(() => {
+    return {
+      toSVGTree: toSvg
+    }
+  })
 })
 
 test('imageURL', () => {
   const result = Handlebars.compile(`{{imageURL "boy"}}`)({})
-  expect(result).toMatchInlineSnapshot(`"url_image"`)
-  expect(Geopattern.generate).toHaveBeenLastCalledWith('boy', {
-    baseColor: '#933c3c'
-  })
-})
-
-test('imageURL custom color', () => {
-  const result = Handlebars.compile(`{{imageURL "boy" "#00000"}}`)({})
-  expect(result).toMatchInlineSnapshot(`"url_image"`)
-  expect(Geopattern.generate).toHaveBeenLastCalledWith('boy', {
-    baseColor: '#00000'
+  expect(result).toMatchInlineSnapshot(
+    `"url("data:image/svg+xml;base64,c3ZnX2ltYWdl")"`
+  )
+  expect(trianglify).toHaveBeenLastCalledWith({
+    cellSize: 125,
+    height: 800,
+    seed: 'boy',
+    width: 1200,
+    yColors: 'match'
   })
 })
 
 test('imageURI', () => {
-  const result = Handlebars.compile(`{{imageURI "girl"}}`)({})
-  expect(result).toMatchInlineSnapshot(`"uri_image"`)
-  expect(Geopattern.generate).toHaveBeenLastCalledWith('girl', {
-    baseColor: '#933c3c'
-  })
-})
-
-test('imageSVG', () => {
-  const result = Handlebars.compile(`{{imageSVG "man"}}`)({})
-  expect(result).toMatchInlineSnapshot(`"svg_image"`)
-  expect(Geopattern.generate).toHaveBeenLastCalledWith('man', {
-    baseColor: '#933c3c'
-  })
-})
-
-test('imageBase64', () => {
-  const result = Handlebars.compile(`{{imageBase64 "woman"}}`)({})
-  expect(result).toMatchInlineSnapshot(`"base64_image"`)
-  expect(Geopattern.generate).toHaveBeenLastCalledWith('woman', {
-    baseColor: '#933c3c'
+  const result = Handlebars.compile(`{{imageURI "man"}}`)({})
+  expect(result).toMatchInlineSnapshot(
+    `"data:image/svg+xml;base64,c3ZnX2ltYWdl"`
+  )
+  expect(trianglify).toHaveBeenLastCalledWith({
+    cellSize: 125,
+    height: 800,
+    seed: 'man',
+    width: 1200,
+    yColors: 'match'
   })
 })

Diff for: src/helpers/image.test.ts

@@ -1,39 +1,28 @@
 import Handlebars from 'handlebars'
-import GeoPattern from 'geopattern'
+import trianglify from 'trianglify'
 
-const DEFAULT_COLOR = '#933c3c'
+const generateSVG = ({ seed }: { seed: string }): string => {
+  const svg = trianglify({
+    width: 1200,
+    height: 800,
+    cellSize: 125,
+    seed,
+    yColors: 'match'
+  }).toSVGTree().toString()
+
+  return Buffer.from(svg).toString('base64')
+}
 
 /**
  * Generate a pattern image from a string.
  */
 Handlebars.registerHelper('imageURL', function (text: string, ...args: any[]) {
-  const [, baseColor = DEFAULT_COLOR] = args.concat().reverse()
-  return GeoPattern.generate(text, { baseColor }).toDataUrl()
+  return `url("data:image/svg+xml;base64,${generateSVG({ seed: text })}")`
 })
 
 /**
  * Generate a pattern image from a string.
  */
 Handlebars.registerHelper('imageURI', function (text: string, ...args: any[]) {
-  const [, baseColor = DEFAULT_COLOR] = args.concat().reverse()
-  return GeoPattern.generate(text, { baseColor }).toDataUri()
-})
-
-/**
- * Generate a pattern image from a string.
- */
-Handlebars.registerHelper('imageSVG', function (text: string, ...args: any[]) {
-  const [, baseColor = DEFAULT_COLOR] = args.concat().reverse()
-  return GeoPattern.generate(text, { baseColor }).toSvg()
+  return `data:image/svg+xml;base64,${generateSVG({ seed: text })}`
 })
-
-/**
- * Generate a pattern image from a string.
- */
-Handlebars.registerHelper(
-  'imageBase64',
-  function (text: string, ...args: any[]) {
-    const [, baseColor = DEFAULT_COLOR] = args.concat().reverse()
-    return GeoPattern.generate(text, { baseColor }).toBase64()
-  }
-)

Diff for: src/helpers/image.ts

@@ -4,9 +4,9 @@ import Handlebars from 'handlebars'
  * Replace newlines with <br> tags.
  */
 Handlebars.registerHelper('nlbr', function (text: string) {
-    // Replace newlines with escape characters
-    var escapedText = text.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '\\n');
-    // Surround the text with double quotes
-    var jsonString = '"' + escapedText + '"';
-    return jsonString;
+  // Replace newlines with escape characters
+  const escapedText = text.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '\\n')
+  // Surround the text with double quotes
+  const jsonString = '"' + escapedText + '"'
+  return jsonString
 })

Diff for: src/helpers/nl.ts

@@ -1,16 +1,16 @@
-import Handlebars from "handlebars";
+import Handlebars from 'handlebars'
 
 /**
  * Select the first non-empty value from a list of values.
  */
-Handlebars.registerHelper("select", function (...args: any[]) {
-    const [, ...rest] = args.concat().reverse()
+Handlebars.registerHelper('select', function (...args: any[]) {
+  const [, ...rest] = args.concat().reverse()
 
-    return rest.reverse().find((v: any) => {
-        if(v === undefined || v === null || v === "") {
-            return false
-        }
+  return rest.reverse().find((v: any) => {
+    if (v === undefined || v === null || v === '') {
+      return false
+    }
 
-        return true
-    })
-})
+    return true
+  })
+})