feat: #420 reimplement icon picker (#421)

packages/icons/src/repositories/github.icon-repository.ts

@@ -0,0 +1,72 @@
+import type { IconRepositoryLicense } from "../types/icon-repository-license";
+import type { RepositoryIconGroup } from "../types/repository-icon-group";
+import { IconRepository } from "./icon-repository";
+
+export class GitHubIconRepository extends IconRepository {
+  constructor(
+    public readonly name: string,
+    public readonly slug: string,
+    public readonly license: IconRepositoryLicense,
+    public readonly repositoryUrl?: URL,
+    public readonly repositoryIndexingUrl?: URL,
+    public readonly repositoryBlobUrlTemplate?: string,
+  ) {
+    super(
+      name,
+      slug,
+      license,
+      repositoryUrl,
+      repositoryIndexingUrl,
+      repositoryBlobUrlTemplate,
+    );
+  }
+
+  protected async getAllIconsInternalAsync(): Promise<RepositoryIconGroup> {
+    if (!this.repositoryIndexingUrl || !this.repositoryBlobUrlTemplate) {
+      throw new Error("Repository URLs are required for this repository");
+    }
+
+    const response = await fetch(this.repositoryIndexingUrl);
+    const listOfFiles = (await response.json()) as GitHubApiResponse;
+
+    return {
+      success: true,
+      icons: listOfFiles.tree
+        .filter((treeItem) =>
+          this.allowedImageFileTypes.some((allowedExtension) =>
+            treeItem.path.includes(allowedExtension),
+          ),
+        )
+        .map((treeItem) => {
+          const fileNameWithExtension =
+            this.getFileNameWithoutExtensionFromPath(treeItem.path);
+
+          return {
+            imageUrl: new URL(
+              this.repositoryBlobUrlTemplate!.replace("{0}", treeItem.path),
+            ),
+            fileNameWithExtension: fileNameWithExtension,
+            local: false,
+            sizeInBytes: treeItem.size,
+            checksum: treeItem.sha,
+          };
+        }),
+      slug: this.slug,
+    };
+  }
+}
+
+interface GitHubApiResponse {
+  sha: string;
+  url: string;
+  tree: TreeItem[];
+  truncated: boolean;
+}
+
+export interface TreeItem {
+  path: string;
+  mode: string;
+  sha: string;
+  url: string;
+  size?: number;
+}

packages/icons/src/repositories/icon-repository.ts

@@ -0,0 +1,38 @@
+import { logger } from "@homarr/log";
+
+import type { IconRepositoryLicense } from "../types/icon-repository-license";
+import type { RepositoryIconGroup } from "../types/repository-icon-group";
+
+export abstract class IconRepository {
+  protected readonly allowedImageFileTypes = [".png", ".svg", ".jpeg"];
+
+  protected constructor(
+    public readonly name: string,
+    public readonly slug: string,
+    public readonly license: IconRepositoryLicense,
+    public readonly repositoryUrl?: URL,
+    public readonly repositoryIndexingUrl?: URL,
+    public readonly repositoryBlobUrlTemplate?: string,
+  ) {}
+
+  public async getAllIconsAsync(): Promise<RepositoryIconGroup> {
+    try {
+      return await this.getAllIconsInternalAsync();
+    } catch (err) {
+      logger.error(
+        `Unable to request icons from repository "${this.slug}": ${JSON.stringify(err)}`,
+      );
+      return {
+        success: false,
+        icons: [],
+        slug: this.slug,
+      };
+    }
+  }
+
+  protected abstract getAllIconsInternalAsync(): Promise<RepositoryIconGroup>;
+
+  protected getFileNameWithoutExtensionFromPath(path: string) {
+    return path.replace(/^.*[\\/]/, "");
+  }
+}

packages/icons/src/repositories/jsdelivr.icon-repository.ts

@@ -0,0 +1,63 @@
+import type { IconRepositoryLicense } from "../types/icon-repository-license";
+import type { RepositoryIconGroup } from "../types/repository-icon-group";
+import { IconRepository } from "./icon-repository";
+
+export class JsdelivrIconRepository extends IconRepository {
+  constructor(
+    public readonly name: string,
+    public readonly slug: string,
+    public readonly license: IconRepositoryLicense,
+    public readonly repositoryUrl: URL,
+    public readonly repositoryIndexingUrl: URL,
+    public readonly repositoryBlobUrlTemplate: string,
+  ) {
+    super(
+      name,
+      slug,
+      license,
+      repositoryUrl,
+      repositoryIndexingUrl,
+      repositoryBlobUrlTemplate,
+    );
+  }
+
+  protected async getAllIconsInternalAsync(): Promise<RepositoryIconGroup> {
+    const response = await fetch(this.repositoryIndexingUrl);
+    const listOfFiles = (await response.json()) as JsdelivrApiResponse;
+
+    return {
+      success: true,
+      icons: listOfFiles.files
+        .filter((file) =>
+          this.allowedImageFileTypes.some((allowedImageFileType) =>
+            file.name.includes(allowedImageFileType),
+          ),
+        )
+        .map((file) => {
+          const fileNameWithExtension =
+            this.getFileNameWithoutExtensionFromPath(file.name);
+
+          return {
+            imageUrl: new URL(
+              this.repositoryBlobUrlTemplate.replace("{0}", file.name),
+            ),
+            fileNameWithExtension: fileNameWithExtension,
+            local: false,
+            sizeInBytes: file.size,
+            checksum: file.hash,
+          };
+        }),
+      slug: this.slug,
+    };
+  }
+}
+
+interface JsdelivrApiResponse {
+  files: JsdelivrFile[];
+}
+
+interface JsdelivrFile {
+  name: string;
+  size: number;
+  hash: string;
+}