Make link tags generator & faviconize more consistent #5

Author: neg4n

packages/faviconize/src/constants.ts

@@ -4,6 +4,6 @@ export const defaultOutputDirectory = 'icons/'
 
 export const iconTypesAndEdgesMap: IconTypeAndEdges = {
   icon: [196, 160, 96, 32, 16],
-  'msapplication-TileImage': [70, 150, 310],
+  'msapplication-square[size]logo': [70, 150, 310],
   'apple-touch-icon': [57, 144, 72, 144, 60, 120, 76, 152],
 }

packages/faviconize/src/faviconize.ts

@@ -7,6 +7,7 @@ import {
   resolveAndCheckInputFilePath,
   forEachIconTypeEdgeIncludes,
   isValidHexColorString,
+  arrayInsertAt,
 } from './helpers'
 import { IconType } from './types'
 
@@ -23,11 +24,17 @@ export async function faviconize(
 ) {
   const resolvedImageInput = Buffer.isBuffer(imageInput) ? imageInput : await resolveAndCheckInputFilePath(imageInput)
   const normalizedOutputTypes = normalizeOutputTypes(outputIconTypes)
-  const resolvedOutputPath = await resolveAndCreateOrUseOutputPath(outputDirectoryPath)
+  const resolvedOutputDirectoryPath = await resolveAndCreateOrUseOutputPath(outputDirectoryPath)
 
   await forEachIconTypeEdgeIncludes(normalizedOutputTypes, async (type, edge) => {
     const size = [edge, edge]
-    const outputFileAbsolutePath = path.join(resolvedOutputPath, `${type}-${size.join('x')}.png`)
+
+    const outputFileName =
+      type === 'msapplication-square[size]logo'
+        ? `${arrayInsertAt(type.split('[size]'), 1, size.join('x')).join("")}.png`
+        : `${type}-${size.join('x')}.png`
+
+    const outputFileAbsolutePath = path.join(resolvedOutputDirectoryPath, outputFileName)
 
     await sharp(resolvedImageInput)
       .resize(...size)
@@ -54,11 +61,16 @@ export async function generateIconsLinkTags(outputIconTypes?: IconType | Array<I
 
   await forEachIconTypeEdgeIncludes(normalizedOutputTypes, (type, edge) => {
     const size = [edge, edge]
-    const fileName = `${type}-${size.join('x')}.png`
+
+    const fileName =
+      type === 'msapplication-square[size]logo'
+        ? `${arrayInsertAt(type.split('[size]'), 1, size.join('x')).join("")}.png`
+        : `${type}-${size.join('x')}.png`
+
     const filePath = path.join('icons', fileName)
 
-    if (type === 'msapplication-TileImage') {
-      linkTags.push(`<meta name="msapplication-TileImage" content="${filePath}">`)
+    if (type === 'msapplication-square[size]logo') {
+      linkTags.push(`<meta name="msapplication-square${size.join('x')}logo" content="${filePath}">`)
       return
     }
 

packages/faviconize/src/helpers.ts

@@ -60,3 +60,7 @@ export async function forEachIconTypeEdgeIncludes(
 export function isValidHexColorString(color: string) {
   return /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/.test(color)
 }
+
+export function arrayInsertAt<T>(array: Array<T>, index: number, newItem: T) {
+  return [...array.slice(0, index), newItem, ...array.slice(index)]
+}

packages/faviconize/src/types.ts

@@ -1,4 +1,4 @@
-export type IconType = 'icon' | 'msapplication-TileImage' | 'apple-touch-icon'
+export type IconType = 'icon' | 'msapplication-square[size]logo' | 'apple-touch-icon'
 
 export type IconTypeAndEdges = {
   [key in IconType]: number[]