@realfavicongenerator/check-favicon 0.0.1

package/src/helper.ts

@@ -0,0 +1,170 @@
+import fs from 'fs/promises'
+import path from 'path';
+import { Fetcher, pathToMimeType } from '.';
+import sharp, { FormatEnum } from 'sharp';
+
+export const filePathToReadableStream = async (path: string): Promise<ReadableStream> => {
+  const file = await fs.open(path, 'r');
+  const stream = file.createReadStream();
+
+  return new ReadableStream({
+    start(controller) {
+      stream.on('data', (chunk) => {
+        controller.enqueue(chunk);
+      });
+      stream.on('close', () => {
+        controller.close();
+      });
+    }
+  });
+}
+
+export const filePathToString = async (path: string): Promise<string> => (
+  fs.readFile(path, 'utf-8')
+)
+
+export const stringToReadableStream = (str: string): ReadableStream => {
+  return new ReadableStream({
+    start(controller) {
+      controller.enqueue(str);
+      controller.close();
+    }
+  });
+}
+
+export const readableStreamToString = async (readableStream: ReadableStream): Promise<string> => {
+  const reader = readableStream.getReader();
+  const chunks: Uint8Array[] = [];
+  let done = false;
+  while (!done) {
+    const { value, done: doneValue } = await reader.read();
+    done = doneValue;
+    if (value) {
+      chunks.push(value);
+    }
+  }
+  const concatenatedChunks = new Uint8Array(chunks.reduce((acc, chunk) => acc + chunk.length, 0));
+  let offset = 0;
+  for (const chunk of chunks) {
+    concatenatedChunks.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return new TextDecoder("utf-8").decode(concatenatedChunks);
+}
+
+export const readableStreamToBuffer = async (readableStream: ReadableStream): Promise<Buffer> => {
+  const reader = readableStream.getReader();
+  const chunks: Uint8Array[] = [];
+  let done = false;
+  while (!done) {
+    const { value, done: doneValue } = await reader.read();
+    done = doneValue;
+    if (value) {
+      chunks.push(value);
+    }
+  }
+  const concatenatedChunks = new Uint8Array(chunks.reduce((acc, chunk) => acc + chunk.length, 0));
+  let offset = 0;
+  for (const chunk of chunks) {
+    concatenatedChunks.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return Buffer.from(concatenatedChunks);
+}
+
+export type CheckIconProcessor = {
+  noHref: () => void,
+  icon404: () => void,
+  cannotGet: (httpStatusCode: number) => void,
+  downloadable: () => void,
+  square: (widthHeight: number) => void,
+  notSquare: (width: number, Height: number) => void,
+  rightSize: (widthHeight: number) => void,
+  wrongSize: (widthHeight: number) => void
+}
+
+export const checkIcon = async (
+  iconUrl: string | undefined,
+  processor: CheckIconProcessor,
+  fetcher: Fetcher,
+  mimeType: string | undefined,
+  expectedWidthHeight?: number
+): Promise<string | null> => {
+  if (!iconUrl) {
+    processor.noHref();
+    return null;
+  }
+
+  const res = await fetcher(iconUrl, mimeType);
+  if (res.status === 404) {
+    processor.icon404();
+  } else if (res.status >= 300) {
+    processor.cannotGet(res.status);
+  } else if (res.readableStream) {
+    processor.downloadable();
+
+    const content = await readableStreamToBuffer(res.readableStream);
+    const meta = await sharp(content).metadata();
+
+    const contentType = res.contentType || pathToMimeType(iconUrl);
+
+    if (meta.width && meta.height) {
+      if (meta.width !== meta.height) {
+        processor.notSquare(meta.width, meta.height);
+        return null;
+      } else {
+        processor.square(meta.width);
+
+        if (expectedWidthHeight) {
+          if (meta.width === expectedWidthHeight) {
+            processor.rightSize(meta.width);
+          } else {
+            processor.wrongSize(meta.width);
+          }
+        }
+      }
+    }
+
+    return bufferToDataUrl(content, contentType);
+  }
+
+  return null;
+}
+
+export const mergeUrlAndPath = (baseUrl: string, absoluteOrRelativePath: string): string => {
+  // If the path is a full URL, return it as is
+  if (absoluteOrRelativePath.startsWith('http://') || absoluteOrRelativePath.startsWith('https://')) {
+    return absoluteOrRelativePath;
+  }
+
+  const url = new URL(baseUrl);
+
+  // If the path starts with a slash, replace the pathname
+  if (absoluteOrRelativePath.startsWith('/')) {
+    return `${url.origin}${absoluteOrRelativePath}`;
+  } else {
+    // Otherwise, append the path to the existing pathname
+    return `${url.href}${url.href.endsWith('/') ? '' : '/'}${absoluteOrRelativePath}`;
+  }
+}
+
+export const parseSizesAttribute = (sizes: string | undefined | null): number | null => {
+  if (!sizes) {
+    return null;
+  }
+
+  const match = sizes.match(/(\d+)x(\d+)/);
+  if (match) {
+    if (match[1] !== match[2]) {
+      return null;
+    }
+
+    return parseInt(match[1]);
+  }
+
+  return null;
+}
+
+export const bufferToDataUrl = (buffer: Buffer, mimeType: string): string => {
+  return `data:${mimeType};base64,${buffer.toString('base64')}`;
+}

package/src/index.ts

@@ -0,0 +1,161 @@
+
+export enum CheckerStatus {
+  Ok = 'Ok',
+  Error = 'Error',
+  Warning = 'Warning'
+}
+
+export enum MessageId {
+  noHead,
+
+  svgFaviconDeclared,
+  noSvgFavicon,
+  multipleSvgFavicons,
+  noSvgFaviconHref,
+  svgFavicon404,
+  svgFaviconCannotGet,
+  svgFaviconDownloadable,
+  svgFaviconSquare,
+  svgFaviconNotSquare,
+
+  noIcoFavicon,
+  multipleIcoFavicons,
+  icoFaviconDeclared,
+  noIcoFaviconHref,
+  icoFavicon404,
+  icoFaviconCannotGet,
+  icoFaviconDownloadable,
+  icoFaviconExtraSizes,
+  icoFaviconMissingSizes,
+  icoFaviconExpectedSizes,
+
+  noDesktopPngFavicon,
+  no48x48DesktopPngFavicon,
+  desktopPngFaviconDeclared,
+  noDesktopPngFaviconHref,
+  desktopPngFaviconCannotGet,
+  desktopPngFaviconDownloadable,
+  desktopPngFavicon404,
+  desktopPngFaviconWrongSize,
+  desktopPngFaviconRightSize,
+
+  noTouchWebAppTitle,
+  multipleTouchWebAppTitles,
+  emptyTouchWebAppTitle,
+  touchWebAppTitleDeclared,
+  noTouchIcon,
+  duplicatedTouchIconSizes,
+  touchIconWithSize,
+  touchIconDeclared,
+  noTouchIconHref,
+  touchIcon404,
+  touchIconCannotGet,
+  touchIconDownloadable,
+  touchIconSquare,
+  touchIcon180x180,
+  touchIconNotSquare,
+  touchIconWrongSize,
+
+  noManifest,
+  noManifestHref,
+  manifest404,
+  manifestCannotGet,
+  manifestInvalidJson,
+  manifestName,
+  noManifestName,
+  manifestShortName,
+  noManifestShortName,
+  manifestBackgroundColor,
+  noManifestBackgroundColor,
+  manifestThemeColor,
+  noManifestThemeColor,
+  noManifestIcons,
+  noManifestIcon,
+  manifestIconDeclared,
+  manifestIconCannotGet,
+  manifestIconDownloadable,
+  manifestIcon404,
+  manifestIconNoHref,
+  manifestIconNotSquare,
+  manifestIconRightSize,
+  manifestIconSquare,
+  manifestIconWrongSize
+}
+
+export type CheckerMessage = {
+  status: CheckerStatus,
+  id: MessageId,
+  text: string
+}
+
+export type FetchResponse = {
+  status: number,
+  contentType: string | null,
+  readableStream?: ReadableStream | null
+}
+
+export type Fetcher = (url: string, contentType?: string) => Promise<FetchResponse>;
+
+export const fetchFetcher: Fetcher = async (url, contentType) => {
+  const res = await fetch(url, {
+    headers: {
+      'Content-Type': contentType || pathToMimeType(url),
+      'user-agent': 'RealFaviconGenerator Favicon Checker'
+    }
+  });
+
+  return {
+    status: res.status,
+    contentType: res.headers.get('Content-Type') || null,
+    readableStream: res.body
+  }
+}
+
+export type DesktopFaviconReport = {
+  messages: CheckerMessage[],
+  icon: string | null,
+}
+
+export type TouchIconTitleReport = {
+  messages: CheckerMessage[],
+  appTitle?: string
+}
+
+export type TouchIconIconReport = {
+  messages: CheckerMessage[],
+  touchIcon: string | null,
+}
+
+export type WebManifestReport = {
+  messages: CheckerMessage[],
+  name?: string,
+  shortName?: string,
+  backgroundColor?: string,
+  themeColor?: string,
+  icon: string | null
+}
+
+export type FaviconReport = {
+  desktop: DesktopFaviconReport,
+  touchIcon: TouchIconReport,
+  webAppManifest: WebManifestReport
+}
+
+export type TouchIconReport = TouchIconIconReport & TouchIconTitleReport;
+
+export const pathToMimeType = (path: string): string => {
+  const ext = path.split('.').pop();
+  switch (ext) {
+    case 'png':
+      return 'image/png';
+    case 'svg':
+      return 'image/svg+xml';
+    case 'ico':
+      return 'image/x-icon';
+    case 'jpg':
+    case 'jpeg':
+      return 'image/jpeg';
+    default:
+      return 'application/octet-stream';
+  }
+}

package/src/test-helper.ts

@@ -0,0 +1,12 @@
+import { CheckerMessage, FetchResponse, Fetcher } from ".";
+import { parse } from 'node-html-parser'
+
+export const testFetcher = (database: { [url: string]: FetchResponse }): Fetcher => {
+  return async (url, contentType) => {
+    const res = database[url];
+    if (!res) {
+      return { status: 404, contentType: contentType || 'application/octet-stream' };
+    }
+    return res;
+  }
+}

package/src/touch-icon.test.ts

@@ -0,0 +1,219 @@
+import { parse } from 'node-html-parser'
+import { CheckerMessage, CheckerStatus, FetchResponse, MessageId } from ".";
+import { checkTouchIcon, checkTouchIconIcon, checkTouchIconTitle, getDuplicatedSizes } from "./touch-icon";
+import { testFetcher } from './test-helper';
+import { bufferToDataUrl, filePathToReadableStream, readableStreamToBuffer } from './helper';
+
+type TestOutput = {
+  messages: Pick<CheckerMessage, 'id' | 'status'>[],
+  appTitle?: string,
+  touchIcon?: string | null
+}
+
+const runCheckTouchIconTitleTest = async (
+  headFragment: string | null,
+  output: TestOutput,
+  fetchDatabase: { [url: string]: FetchResponse } = {}
+) => {
+  const root = headFragment ? parse(headFragment) : null;
+  const result = await checkTouchIconTitle('https://example.com/', root, testFetcher(fetchDatabase));
+  const filteredMessages = result.messages.map(m => ({ status: m.status, id: m.id }));
+  expect({
+    messages: filteredMessages,
+    appTitle: result.appTitle
+  }).toEqual(output);
+}
+
+test('checkTouchIconTitle - noHead', async () => {
+  await runCheckTouchIconTitleTest(null, { messages: [{
+    status: CheckerStatus.Error,
+    id: MessageId.noHead,
+  }]});
+})
+
+test('checkTouchIconTitle - noTouchWebAppTitle', async () => {
+  await runCheckTouchIconTitleTest('<title>Some text</title>', { messages: [{
+    status: CheckerStatus.Warning,
+    id: MessageId.noTouchWebAppTitle,
+  }]});
+})
+
+test('checkTouchIconTitle - multipleTouchWebAppTitles', async () => {
+  await runCheckTouchIconTitleTest(`
+    <meta name="apple-mobile-web-app-title" content="First title">
+    <meta name="apple-mobile-web-app-title" content="Second title">
+  `, { messages: [{
+    status: CheckerStatus.Error,
+    id: MessageId.multipleTouchWebAppTitles,
+  }]});
+})
+
+test('checkTouchIconTitle - touchWebAppTitleDeclared', async () => {
+  await runCheckTouchIconTitleTest(`
+    <meta name="apple-mobile-web-app-title" content="The App Name">
+  `, { messages: [{
+    status: CheckerStatus.Ok,
+    id: MessageId.touchWebAppTitleDeclared,
+  }], appTitle: 'The App Name' });
+})
+
+const runCheckTouchIconTest = async (
+  headFragment: string | null,
+  output: TestOutput,
+  fetchDatabase: { [url: string]: FetchResponse } = {}
+) => {
+  const root = headFragment ? parse(headFragment) : null;
+  const result = await checkTouchIconIcon('https://example.com/', root, testFetcher(fetchDatabase));
+  const filteredMessages = result.messages.map(m => ({ status: m.status, id: m.id }));
+  expect({
+    messages: filteredMessages,
+    touchIcon: result.touchIcon
+  }).toEqual({
+    ...output,
+    touchIcon: output.touchIcon || null
+  });
+}
+
+test('checkTouchIcon - noHead', async () => {
+  await runCheckTouchIconTest(null, { messages: [{
+    status: CheckerStatus.Error,
+    id: MessageId.noHead,
+  }]});
+})
+
+test('checkTouchIcon - noTouchIcon', async () => {
+  await runCheckTouchIconTest('<title>Some text</title>', { messages: [{
+    status: CheckerStatus.Error,
+    id: MessageId.noTouchIcon,
+  }]});
+})
+
+test('checkTouchIcon - touchIconWithSize', async () => {
+  await runCheckTouchIconTest(`
+    <link rel="apple-touch-icon" sizes="152x152" href="some-other-icon.png">
+  `, { messages: [{
+    status: CheckerStatus.Ok,
+    id: MessageId.touchIconDeclared,
+  }, {
+    status: CheckerStatus.Warning,
+    id: MessageId.touchIconWithSize,
+  }]}, {
+    'https://example.com/some-other-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: null
+    }
+  });
+})
+
+test('checkTouchIcon - multipleTouchIcon - no size', async () => {
+  await runCheckTouchIconTest(`
+    <link rel="apple-touch-icon" href="some-icon.png">
+    <link rel="apple-touch-icon" href="some-other-icon.png">
+  `, { messages: [{
+    status: CheckerStatus.Ok,
+    id: MessageId.touchIconDeclared,
+  }, {
+    status: CheckerStatus.Error,
+    id: MessageId.duplicatedTouchIconSizes,
+  }]}, {
+    'https://example.com/some-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: null
+    },
+    'https://example.com/some-other-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: null
+    }
+  });
+})
+
+test('checkTouchIcon - multipleTouchIcon - specific size', async () => {
+  await runCheckTouchIconTest(`
+    <link rel="apple-touch-icon" sizes="180x180" href="some-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="some-other-icon.png">
+  `, { messages: [{
+    status: CheckerStatus.Ok,
+    id: MessageId.touchIconDeclared,
+  }, {
+    status: CheckerStatus.Warning,
+    id: MessageId.touchIconWithSize,
+  }, {
+    status: CheckerStatus.Error,
+    id: MessageId.duplicatedTouchIconSizes,
+  }]}, {
+    'https://example.com/some-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: null
+    },
+    'https://example.com/some-other-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: null
+    }
+  });
+})
+
+test('checkTouchIcon - touchIconWithSize', async () => {
+  await runCheckTouchIconTest(`
+    <link rel="apple-touch-icon" sizes="180x180" href="some-other-icon.png">
+  `, { messages: [{
+    status: CheckerStatus.Ok,
+    id: MessageId.touchIconDeclared,
+  }, {
+    status: CheckerStatus.Warning,
+    id: MessageId.touchIconWithSize,
+  }]}, {
+    'https://example.com/some-other-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: null
+    }
+  });
+})
+
+const testIcon = './fixtures/180x180.png';
+
+test('checkTouchIcon - Regular case', async () => {
+  await runCheckTouchIconTest(`
+    <link rel="apple-touch-icon" href="some-other-icon.png">
+  `, { messages: [{
+    status: CheckerStatus.Ok,
+    id: MessageId.touchIconDeclared,
+  }, {
+    status: CheckerStatus.Ok,
+    id: MessageId.touchIconDownloadable,
+  },{
+    status: CheckerStatus.Ok,
+    id: MessageId.touchIconSquare
+  }], touchIcon: bufferToDataUrl(await readableStreamToBuffer(await filePathToReadableStream(testIcon)), 'image/png')
+  }, {
+    'https://example.com/some-other-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: await filePathToReadableStream(testIcon)
+    }
+  });
+})
+
+
+
+test('getDuplicatedSizes', () => {
+  // No duplicates
+  expect(getDuplicatedSizes([])).toEqual([]);
+  expect(getDuplicatedSizes([ undefined ])).toEqual([]);
+  expect(getDuplicatedSizes([ '180x180' ])).toEqual([]);
+  expect(getDuplicatedSizes([ undefined, '180x180' ])).toEqual([]);
+
+  // Duplicates
+  expect(getDuplicatedSizes([ '152x152', '180x180', '180x180' ])).toEqual([ '180x180' ]);
+  expect(getDuplicatedSizes([ undefined, '180x180', undefined, undefined ])).toEqual([ undefined ]);
+  expect(getDuplicatedSizes([
+    '152x152', '180x180', '152x152', undefined, '152x152', undefined
+  ])).toEqual([
+    '152x152', undefined
+  ]);
+})