Merge branch 'release/2.2.0'

.editorconfig

@@ -1,4 +1,3 @@
-# Editor configuration, see https://editorconfig.org
 root = true
 
 [*]
@@ -9,8 +8,6 @@ insert_final_newline = true
 max_line_length = 140
 trim_trailing_whitespace = true
 
-[*.ts]
-quote_type = single
-
 [*.md]
+max_line_length = false
 trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,8 @@
+.angular
+.pnpm-store
+dist
+e2e/protractor.conf.js
+node_modules
+pnpm-lock.yaml
+public
+src/test.ts

.eslintrc.json

@@ -0,0 +1,134 @@
+{
+  "root": true,
+  "env": {
+    "browser": true
+  },
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "plugins": ["rxjs-angular"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "prettier",
+        "plugin:rxjs/recommended",
+        "plugin:@angular-eslint/all",
+        "plugin:@angular-eslint/recommended--extra",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        // Custom rules
+        // @typescript-eslint
+        "@typescript-eslint/array-type": "error",
+        "@typescript-eslint/class-literal-property-style": "error",
+        "@typescript-eslint/consistent-indexed-object-style": "error",
+        "@typescript-eslint/consistent-type-assertions": [
+          "error",
+          {
+            "assertionStyle": "as",
+            "objectLiteralTypeAssertions": "never"
+          }
+        ],
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/consistent-type-imports": "error",
+        "@typescript-eslint/dot-notation": "error",
+        "@typescript-eslint/explicit-function-return-type": "error",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "error",
+          {
+            "accessibility": "no-public"
+          }
+        ],
+        "@typescript-eslint/member-delimiter-style": [
+          "error",
+          {
+            "multiline": {
+              "delimiter": "none",
+              "requireLast": true
+            }
+          }
+        ],
+        "@typescript-eslint/method-signature-style": "error",
+        "@typescript-eslint/no-base-to-string": "error",
+        "@typescript-eslint/no-confusing-non-null-assertion": "error",
+        "@typescript-eslint/no-confusing-void-expression": [
+          "error",
+          {
+            "ignoreArrowShorthand": true,
+            "ignoreVoidOperator": true
+          }
+        ],
+        "@typescript-eslint/no-dynamic-delete": "error",
+        "@typescript-eslint/no-empty-function": [
+          "error",
+          {
+            "allow": ["private-constructors", "protected-constructors"]
+          }
+        ],
+        "@typescript-eslint/no-extra-parens": ["error", "functions"],
+        "@typescript-eslint/no-implicit-any-catch": "error",
+        "@typescript-eslint/no-invalid-void-type": "error",
+        "@typescript-eslint/no-non-null-assertion": "error",
+        "@typescript-eslint/no-unnecessary-boolean-literal-compare": "error",
+        "@typescript-eslint/no-unnecessary-condition": "error",
+        "@typescript-eslint/no-unnecessary-qualifier": "error",
+        "@typescript-eslint/no-unnecessary-type-arguments": "error",
+        "@typescript-eslint/no-unnecessary-type-constraint": "error",
+        "@typescript-eslint/no-unsafe-argument": "error",
+        "@typescript-eslint/no-unsafe-assignment": "error",
+        "@typescript-eslint/no-var-requires": "error",
+        "@typescript-eslint/non-nullable-type-assertion-style": "error",
+        "@typescript-eslint/prefer-for-of": "error",
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/prefer-includes": "error",
+        "@typescript-eslint/prefer-nullish-coalescing": "error",
+        "@typescript-eslint/prefer-optional-chain": "error",
+        "@typescript-eslint/prefer-readonly": "error",
+        "@typescript-eslint/prefer-reduce-type-parameter": "error",
+        "@typescript-eslint/prefer-return-this-type": "error",
+        "@typescript-eslint/prefer-string-starts-ends-with": "error",
+        "@typescript-eslint/prefer-ts-expect-error": "error",
+        "@typescript-eslint/promise-function-async": "error",
+        "@typescript-eslint/require-array-sort-compare": "error",
+        "@typescript-eslint/semi": ["error", "never"],
+        "@typescript-eslint/sort-type-union-intersection-members": "error",
+        "@typescript-eslint/switch-exhaustiveness-check": "error",
+        "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/unified-signatures": "error",
+        // eslint-plugin-rxjs-angular
+        //"rxjs-angular/prefer-async-pipe": "error",
+        "rxjs-angular/prefer-takeuntil": "error"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/all"],
+      "rules": {
+        // Custom rules
+        "@angular-eslint/template/i18n": "off"
+      }
+    }
+  ]
+}

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: NatoBoram # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: ["https://paypal.me/NatoBoram/5"] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.gitignore

@@ -1,46 +1,126 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# Created by https://www.toptal.com/developers/gitignore/api/angular,linux,windows,macos,visualstudiocode
+# Edit at https://www.toptal.com/developers/gitignore?templates=angular,linux,windows,macos,visualstudiocode
 
+### Angular ###
+## Angular ##
 # compiled output
-/dist
+dist/
-/tmp
+tmp/
-/out-tsc
+app/**/*.js
-# Only exists if Bazel was run
+app/**/*.js.map
-/bazel-out
 
 # dependencies
-/node_modules
+node_modules/
-
+bower_components/
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
 
 # IDEs and editors
-/.idea
+.idea/
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
 
-# IDE - VSCode
+# misc
+.sass-cache/
+connect.lock/
+coverage/
+libpeerconnection.log/
+npm-debug.log
+testem.log
+typings/
+.angular/
+
+# e2e
+e2e/*.js
+e2e/*.map
+
+# System Files
+.DS_Store/
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### VisualStudioCode ###
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
-.history/*
+!.vscode/*.code-snippets
 
-# misc
+# Local History for Visual Studio Code
-/.sass-cache
+.history/
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
 
-# System Files
+# Built Visual Studio Code Extensions
-.DS_Store
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Support for Project snippet scope
+
+### Windows ###
+# Windows thumbnail cache files
 Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/angular,linux,windows,macos,visualstudiocode

.gitlab-ci.yml

@@ -1,20 +1,25 @@
-image: node:14
+image: node:latest
 
 before_script:
-  - yarn
+  - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6
+  - pnpm config set store-dir .pnpm-store
+  - pnpm i
+
+variables:
+  # https://stackoverflow.com/a/69746937/5083247
+  NODE_OPTIONS: --openssl-legacy-provider
 
 cache:
   key:
     files:
-      - package.json
+      - pnpm-lock.yaml
-      - yarn.lock
   paths:
-    - node_modules
+    - .pnpm-store
 
 build:
   stage: build
   script:
-    - yarn run build:prod
+    - pnpm run build:prod
   artifacts:
     paths:
       - dist/angular
@@ -22,12 +27,13 @@ build:
 test:
   stage: test
   script:
-    - yarn run lint
+    - pnpx ng lint
+    - pnpx prettier --check .
 
 pages:
   stage: deploy
   script:
-    - yarn run build:gitlab
+    - pnpm run build:gitlab
     - mv dist/angular public
     - cp public/index.html public/404.html
   artifacts:

.ipfs-npmrc

@@ -1,3 +1,3 @@
 {
-  "packageManager": "yarn"
+  "packageManager": "pnpm"
 }

.markdownlint.json

@@ -1,6 +1,4 @@
 {
-  "line-length": {
+  "line_length": false,
-    "line_length": 140
-  },
   "no-duplicate-heading": false
 }

.prettierignore

@@ -0,0 +1,6 @@
+.angular
+.pnpm-store
+dist
+node_modules
+pnpm-lock.yaml
+public

.prettierrc.yaml

@@ -0,0 +1,3 @@
+arrowParens: avoid
+printWidth: 140
+semi: false

.vscode/extensions.json

@@ -5,13 +5,12 @@
   "recommendations": [
     "angular.ng-template",
     "davidanson.vscode-markdownlint",
+    "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
     "gitlab.gitlab-workflow",
-    "hookyqr.beautify",
     "johnpapa.angular2",
     "ms-vscode.vscode-typescript-next",
-    "ms-vscode.vscode-typescript-tslint-plugin",
-    "msjsdiag.debugger-for-chrome",
     "visualstudioexptteam.vscodeintellicode"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.

.vscode/launch.json

@@ -37,9 +37,7 @@
       "request": "launch",
       "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
       "protocol": "inspector",
-      "args": [
+      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
-        "${workspaceFolder}/e2e/protractor.conf.js"
-      ]
     }
   ]
 }

.vscode/settings.json

@@ -1,12 +1,20 @@
 {
+  "[css][scss][html][javascript][typescript][json][jsonc][markdown][yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "editor.codeActionsOnSave": {
     "source.fixAll": true,
+    "source.fixAll.eslint": true,
     "source.organizeImports": true
   },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "editor.rulers": [
+  "editor.rulers": [140],
-    140
+  "eslint.options": {
-  ],
+    "extensions": [".ts", ".html"]
+  },
+  "eslint.packageManager": "pnpm",
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html"],
   "files.associations": {
     ".ipfs-npmrc": "json"
   },
@@ -14,8 +22,8 @@
   "html.format.maxPreserveNewLines": 1,
   "html.format.wrapAttributes": "auto",
   "html.format.wrapLineLength": 140,
-  "npm.packageManager": "yarn",
+  "npm.packageManager": "pnpm",
-  "tslint.packageManager": "yarn",
+  "tslint.packageManager": "pnpm",
   "typescript.preferences.importModuleSpecifier": "relative",
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "typescript.updateImportsOnFileMove.enabled": "always"

.vscode/tasks.json

@@ -17,10 +17,7 @@
         "owner": "typescript",
         "source": "ts",
         "applyTo": "closedDocuments",
-        "fileLocation": [
+        "fileLocation": ["relative", "${cwd}"],
-          "relative",
-          "${cwd}"
-        ],
         "pattern": "$tsc",
         "background": {
           "activeOnStart": true,
@@ -32,6 +29,6 @@
           }
         }
       }
-    },
+    }
   ]
 }

CHANGELOG.md

@@ -18,6 +18,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 
 ### Security
 
+## [2.2.0] - 2022-03-11
+
+### Added
+
+- More information in the `package.json`.
+- Added ESLint
+- Added Prettier
+- Put success reponses at the top of the list
+
+### Changed
+
+- Updated `gateways.json`
+- Upgraded to Angular 13
+- Targets ESNext
+
+### Removed
+
+- Removed TSLint
+
 ## [2.1.1] - 2021-03-20
 
 ### Added

README.md

@@ -5,39 +5,10 @@
 
 Cache a specific hash on a bunch of public gateways.
 
-You can view this website on [GitLab Pages](https://natoboram.gitlab.io/public-gateway-cacher) and [IPFS](https://bafybeib43z6e5yuywjclls72rvipygoteyi3yeyxwewxi7yd5txypxprpa.ipfs.dweb.link).
+You can view this website on [GitLab Pages](https://natoboram.gitlab.io/public-gateway-cacher) and [IPFS](https://bafybeigmtv32yzjryuv5uwfhzqtrjt6va7dwaxuvhoqqirkwcg2q6mlai4.ipfs.dweb.link).
 
 ![Screenshot](https://bafybeie7txrbzw6ipb62lplnpzsjpz7s4o5q7uufb5rjfelol2cuxeyzye.ipfs.dweb.link/Screenshot_2020-07-09%20Public%20Gateway%20Cacher.png)
 
 **NOTE :** All of these (except `ipfs.io` and `dweb.link`) are hosted by third-parties and should be treated as such.
 
-If you'd like to add a new public gateway, please go to
+If you'd like to add a new public gateway, please go to [github.com/ipfs/public-gateway-checker](https://github.com/ipfs/public-gateway-checker), submit a pull request then open an issue [here](https://gitlab.com/NatoBoram/public-gateway-cacher/issues/new).
-[github.com/ipfs/public-gateway-checker](https://github.com/ipfs/public-gateway-checker), submit a pull request then open an issue [here](https://gitlab.com/NatoBoram/public-gateway-cacher/issues/new).
-
-## Angular
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.20.
-
-### Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-### Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-### Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-### Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-### Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-### Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular.json

@@ -2,8 +2,9 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "yarn",
+    "packageManager": "pnpm",
-    "analytics": "10b848ad-8b81-4346-852f-5eff89573a85"
+    "analytics": "10b848ad-8b81-4346-852f-5eff89573a85",
+    "defaultCollection": "@angular-eslint/schematics"
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -29,15 +30,18 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
+            "assets": ["src/favicon.png", "src/assets"],
-            "assets": [
+            "styles": ["src/styles.scss"],
-              "src/favicon.png",
+            "stylePreprocessorOptions": {
-              "src/assets"
+              "includePaths": ["node_modules"]
-            ],
+            },
-            "styles": [
+            "scripts": [],
-              "src/styles.scss"
+            "vendorChunk": true,
-            ],
+            "extractLicenses": false,
-            "scripts": []
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -49,11 +53,7 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": true,
-              "namedChunks": true,
-              "aot": true,
               "extractLicenses": true,
-              "vendorChunk": true,
               "buildOptimizer": true,
               "budgets": [
                 {
@@ -77,11 +77,7 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": true,
-              "namedChunks": true,
-              "aot": true,
               "extractLicenses": true,
-              "vendorChunk": true,
               "buildOptimizer": true,
               "budgets": [
                 {
@@ -105,11 +101,7 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": true,
-              "namedChunks": true,
-              "aot": true,
               "extractLicenses": true,
-              "vendorChunk": true,
               "buildOptimizer": true,
               "budgets": [
                 {
@@ -124,7 +116,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -150,27 +143,12 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
+            "assets": ["src/favicon.png", "src/assets"],
-              "src/favicon.png",
+            "styles": ["src/styles.scss"],
-              "src/assets"
+            "stylePreprocessorOptions": {
-            ],
+              "includePaths": ["node_modules"]
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
             },
-        "lint": {
+            "scripts": []
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
           }
         },
         "e2e": {
@@ -184,6 +162,12 @@
               "devServerTarget": "public-gateway-cacher:serve:production"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
         }
       }
     }

e2e/protractor.conf.js

@@ -2,35 +2,35 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+const { SpecReporter, StacktraceOption } = require("jasmine-spec-reporter")
 
 /**
  * @type { import("protractor").Config }
  */
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: [
+  specs: ["./src/**/*.e2e-spec.ts"],
-    './src/**/*.e2e-spec.ts'
-  ],
   capabilities: {
-    browserName: 'chrome'
+    browserName: "chrome",
   },
   directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+  baseUrl: "http://localhost:4200/",
-  framework: 'jasmine',
+  framework: "jasmine",
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
-    print: function () { }
+    print: function () {},
   },
   onPrepare() {
-    require('ts-node').register({
+    require("ts-node").register({
-      project: require('path').join(__dirname, './tsconfig.json')
+      project: require("path").join(__dirname, "./tsconfig.json"),
-    });
+    })
-    jasmine.getEnv().addReporter(new SpecReporter({
+    jasmine.getEnv().addReporter(
+      new SpecReporter({
         spec: {
-        displayStacktrace: StacktraceOption.PRETTY
+          displayStacktrace: StacktraceOption.PRETTY,
-      }
+        },
-    }));
+      })
-  }
+    )
-};
+  },
+}

e2e/src/app.e2e-spec.ts

@@ -1,23 +1,25 @@
-import { browser, logging } from 'protractor';
+import { browser, logging } from "protractor"
-import { AppPage } from './app.po';
+import { AppPage } from "./app.po"
 
-describe('workspace-project App', (): void => {
+describe("workspace-project App", (): void => {
-  let page: AppPage;
+  let page: AppPage
 
   beforeEach((): void => {
-    page = new AppPage();
+    page = new AppPage()
-  });
+  })
 
-  it('should display welcome message', (): void => {
+  it("should display welcome message", (): void => {
-    page.navigateTo();
+    void page.navigateTo()
-    expect(page.getTitleText()).toEqual('public-gateway-cacher app is running!');
+    void expect(page.getTitleText()).toEqual("public-gateway-cacher app is running!")
-  });
+  })
 
   afterEach(async (): Promise<void> => {
     // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER)
-    expect(logs).not.toContain(jasmine.objectContaining({
+    const expected: Partial<logging.Entry> = {
       level: logging.Level.SEVERE,
-    } as logging.Entry));
+    }
-  });
+
-});
+    void expect(logs).not.toContain(jasmine.objectContaining(expected))
+  })
+})

e2e/src/app.po.ts

@@ -1,11 +1,11 @@
-import { browser, by, element } from 'protractor';
+import { browser, by, element } from "protractor"
 
 export class AppPage {
-  navigateTo(): Promise<unknown> {
+  async navigateTo(): Promise<unknown> {
-    return browser.get(browser.baseUrl) as Promise<unknown>;
+    return browser.get(browser.baseUrl) as Promise<unknown>
   }
 
-  getTitleText(): Promise<string> {
+  async getTitleText(): Promise<string> {
-    return element(by.css('pgc-root .content span')).getText() as Promise<string>;
+    return element(by.css("pgc-root .content span")).getText() as Promise<string>
   }
 }

e2e/tsconfig.json

@@ -4,11 +4,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es2018",
+    "target": "ESNext",
-    "types": [
+    "types": ["jasmine", "jasminewd2", "node"]
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
   }
 }

karma.conf.js

@@ -3,30 +3,30 @@
 
 module.exports = function (config) {
   config.set({
-    basePath: '',
+    basePath: "",
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
     plugins: [
-      require('karma-jasmine'),
+      require("karma-jasmine"),
-      require('karma-chrome-launcher'),
+      require("karma-chrome-launcher"),
-      require('karma-jasmine-html-reporter'),
+      require("karma-jasmine-html-reporter"),
-      require('karma-coverage-istanbul-reporter'),
+      require("karma-coverage-istanbul-reporter"),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require("@angular-devkit/build-angular/plugins/karma"),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/public-gateway-cacher'),
+      dir: require("path").join(__dirname, "./coverage/public-gateway-cacher"),
-      reports: ['html', 'lcovonly', 'text-summary'],
+      reports: ["html", "lcovonly", "text-summary"],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ["progress", "kjhtml"],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ["Chrome"],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
-  });
+  })
-};
+}

package.json

@@ -1,6 +1,28 @@
 {
   "name": "public-gateway-cacher",
-  "version": "2.1.1",
+  "version": "2.2.0",
+  "description": "Cache a specific hash on a bunch of public gateways.",
+  "keywords": [
+    "IPFS"
+  ],
+  "homepage": "https://natoboram.gitlab.io/public-gateway-cacher",
+  "bugs": {
+    "url": "https://gitlab.com/NatoBoram/public-gateway-cacher/-/issues",
+    "email": "contact-project+natoboram-public-gateway-cacher-11685619-issue-@incoming.gitlab.com"
+  },
+  "license": "GPL-3.0-or-later",
+  "author": {
+    "name": "Nato Boram",
+    "url": "https://gitlab.com/NatoBoram"
+  },
+  "funding": [
+    {
+      "type": "patreon",
+      "url": "https://www.patreon.com/NatoBoram"
+    },
+    "https://paypal.me/NatoBoram/5"
+  ],
+  "repository": "gitlab:NatoBoram/public-gateway-cacher",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --ssl",
@@ -9,53 +31,61 @@
     "build:gitlab": "ng build --configuration=gitlab --base-href /public-gateway-cacher/",
     "build:ipfs": "ng build --configuration=ipfs",
     "test": "ng test",
-    "lint": "ng lint",
+    "lint": "ng lint --fix",
+    "eslint": "eslint --fix .",
+    "prettier": "prettier --write .",
     "e2e": "ng e2e",
-    "publish:ipfs": "yarn run build:ipfs && ipfs add --recursive --chunker=buzhash --cid-version=1 dist/angular",
+    "publish:ipfs": "pnpm run build:ipfs && ipfs add --recursive --chunker=buzhash --cid-version=1 dist/angular",
     "postinstall": "ngcc"
   },
-  "private": false,
   "dependencies": {
-    "@angular/animations": "~11.2.6",
+    "@angular/animations": "~13.2.6",
-    "@angular/cdk": "~11.2.5",
+    "@angular/cdk": "~13.2.6",
-    "@angular/common": "~11.2.6",
+    "@angular/common": "~13.2.6",
-    "@angular/compiler": "~11.2.6",
+    "@angular/compiler": "~13.2.6",
-    "@angular/core": "~11.2.6",
+    "@angular/core": "~13.2.6",
-    "@angular/flex-layout": "^11.0.0-beta.33",
+    "@angular/flex-layout": "^13.0.0-beta.38",
-    "@angular/forms": "~11.2.6",
+    "@angular/forms": "~13.2.6",
-    "@angular/material": "^11.2.5",
+    "@angular/material": "^13.2.6",
-    "@angular/platform-browser": "~11.2.6",
+    "@angular/platform-browser": "~13.2.6",
-    "@angular/platform-browser-dynamic": "~11.2.6",
+    "@angular/platform-browser-dynamic": "~13.2.6",
-    "@angular/router": "~11.2.6",
+    "@angular/router": "~13.2.6",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^5.1.3",
-    "ipfs-css": "^1.2.0",
+    "ipfs-css": "^1.3.0",
-    "rxjs": "~6.6.0",
+    "rxjs": "~7.5.5",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.5",
+    "@angular-devkit/build-angular": "~13.2.6",
-    "@angular/cli": "~11.2.5",
+    "@angular-eslint/builder": "13.1.0",
-    "@angular/compiler-cli": "~11.2.6",
+    "@angular-eslint/eslint-plugin": "13.1.0",
-    "@angular/language-service": "~11.2.6",
+    "@angular-eslint/eslint-plugin-template": "13.1.0",
-    "@types/jasmine": "~3.6.0",
+    "@angular-eslint/schematics": "13.1.0",
+    "@angular-eslint/template-parser": "13.1.0",
+    "@angular/cli": "~13.2.6",
+    "@angular/compiler-cli": "~13.2.6",
+    "@angular/language-service": "~13.2.6",
+    "@types/jasmine": "~3.10.3",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
+    "@types/node": "^17.0.21",
-    "codelyzer": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "5.14.0",
-    "jasmine-core": "~3.6.0",
+    "@typescript-eslint/parser": "5.14.0",
-    "jasmine-spec-reporter": "~5.0.0",
+    "eslint": "^8.2.0",
-    "karma": "~6.2.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-rxjs": "^5.0.2",
+    "eslint-plugin-rxjs-angular": "^2.0.0",
+    "jasmine-core": "~4.0.1",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.3.17",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
+    "prettier": "^2.5.1",
     "protractor": "~7.0.0",
-    "rxjs-tslint-rules": "^4.33.3",
+    "ts-node": "~10.7.0",
-    "ts-node": "~8.10.2",
+    "typescript": "~4.5.5"
-    "tslint": "~6.1.2",
+  },
-    "tslint-consistent-codestyle": "^1.16.0",
+  "private": true
-    "tslint-origin-ordered-imports-rule": "^1.3.0-0",
-    "tslint-rxjs-subject-restrictions-rule": "^1.0.4",
-    "typescript": "~4.1.5"
-  }
 }

src/app/app-routing.module.ts

@@ -1,14 +1,17 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core"
-import { RouterModule, Routes } from '@angular/router';
+import type { Routes } from "@angular/router"
-import { environment } from '../environments/environment';
+import { RouterModule } from "@angular/router"
+import { environment } from "../environments/environment"
 
-const routes: Routes = [{
+const routes: Routes = [
-  path: '',
+  {
-  loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
+    path: "",
-}];
+    loadChildren: async () => import("./pages/pages.module").then(m => m.PagesModule),
+  },
+]
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: environment.useHash, relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes, { useHash: environment.useHash, relativeLinkResolution: "legacy" })],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.html

@@ -3,8 +3,7 @@
 
   <!-- Theme Switcher -->
   <button mat-icon-button="">
-    <mat-icon (click)="themeService.switchTheme()">{{themeService.icon}}</mat-icon>
+    <mat-icon (click)="themeService.switchTheme()">{{ themeService.icon }}</mat-icon>
   </button>
-
 </mat-toolbar>
 <router-outlet></router-outlet>

src/app/app.component.spec.ts

@@ -1,35 +1,43 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { TestBed, waitForAsync } from "@angular/core/testing"
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterTestingModule } from "@angular/router/testing"
-import { AppComponent } from './app.component';
+import { AppComponent } from "./app.component"
 
-describe('AppComponent', (): void => {
+describe("AppComponent", (): void => {
-  beforeEach(waitForAsync((): void => {
+  beforeEach(
-    TestBed.configureTestingModule({
+    waitForAsync((): void => {
-      imports: [
+      void TestBed.configureTestingModule({
-        RouterTestingModule
+        imports: [RouterTestingModule],
-      ],
+        declarations: [AppComponent],
-      declarations: [
+      }).compileComponents()
-        AppComponent
+    })
-      ],
+  )
-    }).compileComponents();
-  }));
 
-  it('should create the app', (): void => {
+  it("should create the app", (): void => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(AppComponent)
-    const app = fixture.debugElement.componentInstance;
+    if (!(fixture.debugElement.componentInstance instanceof AppComponent)) throw new Error("Expected AppComponent")
-    expect(app).toBeTruthy();
-  });
 
-  it(`should have as title 'public-gateway-cacher'`, (): void => {
+    const app: AppComponent = fixture.debugElement.componentInstance
-    const fixture = TestBed.createComponent(AppComponent);
+    void expect(app).toBeTruthy()
-    const app = fixture.debugElement.componentInstance;
+  })
-    expect(app.title).toEqual('public-gateway-cacher');
-  });
 
-  it('should render title', (): void => {
+  it(`should have a themeService`, (): void => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(AppComponent)
-    fixture.detectChanges();
+    if (!(fixture.debugElement.componentInstance instanceof AppComponent)) throw new Error("Expected AppComponent")
-    const compiled = fixture.debugElement.nativeElement;
+
-    expect(compiled.querySelector('.content span').textContent).toContain('public-gateway-cacher app is running!');
+    const app: AppComponent = fixture.debugElement.componentInstance
-  });
+    void expect(app.themeService).toBeTruthy()
-});
+  })
+
+  it("should render title", (): void => {
+    const fixture = TestBed.createComponent(AppComponent)
+    fixture.detectChanges()
+    if (!isHTMLElement(fixture.debugElement.nativeElement)) throw new Error("Expected HTMLElement")
+
+    const compiled: HTMLElement = fixture.debugElement.nativeElement
+    void expect(compiled.querySelector("h1")?.textContent).toContain("Public Gateway Cacher")
+  })
+})
+
+function isHTMLElement(element: unknown): element is HTMLElement {
+  return Object.getPrototypeOf(element) instanceof HTMLElement
+}

src/app/app.component.ts

@@ -1,13 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject } from "@angular/core"
-import { ThemeService } from './services/theme.service';
+import { ThemeService } from "./services/theme.service"
 
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
-  templateUrl: './app.component.html',
+  templateUrl: "./app.component.html",
-  styleUrls: ['./app.component.scss']
+  styleUrls: ["./app.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  constructor(
+  constructor(@Inject(ThemeService) readonly themeService: ThemeService) {}
-    public readonly themeService: ThemeService
-  ) { }
 }

src/app/app.module.ts

@@ -1,33 +1,29 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common"
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from "@angular/common/http"
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core"
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { FlexLayoutModule } from "@angular/flex-layout"
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule } from "@angular/material/button"
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule } from "@angular/material/icon"
-import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatToolbarModule } from "@angular/material/toolbar"
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule } from "@angular/platform-browser"
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
-import { AppRoutingModule } from './app-routing.module';
+import { AppRoutingModule } from "./app-routing.module"
-import { AppComponent } from './app.component';
+import { AppComponent } from "./app.component"
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent
-  ],
   imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
     AppRoutingModule,
-
+    BrowserAnimationsModule,
-    // Material
+    BrowserModule,
+    CommonModule,
     FlexLayoutModule,
+    HttpClientModule,
     MatButtonModule,
     MatIconModule,
     MatToolbarModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/enums/protocol.enum.ts

@@ -1,4 +1,4 @@
 export enum Protocol {
-  IPFS = 'ipfs',
+  IPFS = "ipfs",
-  IPNS = 'ipns',
+  IPNS = "ipns",
 }

src/app/enums/theme.enum.ts

@@ -1,4 +1,4 @@
 export enum Theme {
-  Light = 'theme-light',
+  Light = "theme-light",
-  Dark = 'theme-dark',
+  Dark = "theme-dark",
 }

src/app/interfaces/environment.ts

@@ -1,5 +1,5 @@
 export interface Environment {
-  production: boolean;
+  production: boolean
-  base_href?: string;
+  base_href?: string
-  useHash: boolean;
+  useHash: boolean
 }

src/app/pages/pages-routing.module.ts

@@ -1,14 +1,17 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core"
-import { RouterModule, Routes } from '@angular/router';
+import type { Routes } from "@angular/router"
-import { PagesComponent } from './pages.component';
+import { RouterModule } from "@angular/router"
+import { PagesComponent } from "./pages.component"
 
-const routes: Routes = [{
+const routes: Routes = [
-  path: '',
+  {
+    path: "",
     component: PagesComponent,
-}];
+  },
+]
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class PagesRoutingModule { }
+export class PagesRoutingModule {}

src/app/pages/pages.component.html

@@ -1,42 +1,40 @@
 <div class="container" fxLayout="column" fxLayoutAlign="space-evenly center" fxLayoutGap="1em">
-
   <!-- IPFS -->
   <form fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="1em">
-
     <!-- Hash -->
     <mat-form-field [color]="inputColour">
       <mat-label>IPFS</mat-label>
-      <input name="ipfs" [(ngModel)]="ipfs" matInput>
+      <input name="ipfs" [(ngModel)]="ipfs" matInput />
     </mat-form-field>
 
     <!-- Cache -->
     <button (click)="cacheIPFS()" type="button" mat-flat-button color="primary">Cache</button>
-
   </form>
 
   <!-- IPNS -->
   <form fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="1em">
-
     <!-- Hash -->
     <mat-form-field [color]="inputColour">
       <mat-label>IPNS</mat-label>
-      <input name="ipns" [(ngModel)]="ipns" matInput>
+      <input name="ipns" [(ngModel)]="ipns" matInput />
     </mat-form-field>
 
     <!-- Cache -->
     <button (click)="cacheIPNS()" type="button" mat-flat-button color="primary">Cache</button>
-
   </form>
 
-  <mat-progress-bar [value]="dataSource.data.length / gateways.length * 100" *ngIf="subscriptions.length" mode="determinate"
+  <mat-progress-bar
-    color="primary">
+    [value]="(dataSource.data.length / gateways.length) * 100"
+    *ngIf="subscriptions.length"
+    mode="determinate"
+    color="primary"
+  >
   </mat-progress-bar>
 
   <table class="mat-elevation-z8" [dataSource]="dataSource" mat-table aria-label="List of IPFS gateways and their statuses.">
-
     <!-- Result Column -->
     <ng-container matColumnDef="icon">
-      <th mat-header-cell *matHeaderCellDef scope="col"> Status </th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Status</th>
       <td mat-cell *matCellDef="let element">
         <span [matTooltip]="element.message"> {{ element.icon }} </span>
       </td>
@@ -44,7 +42,7 @@
 
     <!-- Gateway Column -->
     <ng-container matColumnDef="gateway">
-      <th mat-header-cell *matHeaderCellDef scope="col"> Gateway </th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Gateway</th>
       <td mat-cell *matCellDef="let element">
         <div [ngSwitch]="element.ok">
           <div *ngSwitchCase="true">
@@ -64,24 +62,21 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <!-- About -->
   <div fxLayout="column" fxLayoutAlign="space-evenly start" fxLayoutGap="1em">
     <h3>About</h3>
     <p>
-      This allows you to cache a specific IPFS hash to a bunch of public gateways.
+      This allows you to cache a specific IPFS hash to a bunch of public gateways. It's inspired from
-      It's inspired from <a class="link" href="https://github.com/ipfs/public-gateway-checker">github.com/ipfs/public-gateway-checker</a>.
+      <a class="link" href="https://github.com/ipfs/public-gateway-checker">github.com/ipfs/public-gateway-checker</a>. The source code is
-      The source code is available at <a class="link"
+      available at <a class="link" href="https://gitlab.com/NatoBoram/public-gateway-cacher">gitlab.com/NatoBoram/public-gateway-cacher</a>.
-        href="https://gitlab.com/NatoBoram/public-gateway-cacher">gitlab.com/NatoBoram/public-gateway-cacher</a>.
     </p>
     <p>
-      If you'd like to add a new public gateway,
+      If you'd like to add a new public gateway, please go to
-      please go to <a class="link" href="https://github.com/ipfs/public-gateway-checker">github.com/ipfs/public-gateway-checker</a>,
+      <a class="link" href="https://github.com/ipfs/public-gateway-checker">github.com/ipfs/public-gateway-checker</a>, submit a pull
-      submit a pull request then open an issue <a class="link"
+      request then open an issue <a class="link" href="https://gitlab.com/NatoBoram/public-gateway-cacher/issues/new">here</a>.
-        href="https://gitlab.com/NatoBoram/public-gateway-cacher/issues/new">here</a>.
     </p>
   </div>
-
 </div>

src/app/pages/pages.component.spec.ts

@@ -1,24 +1,28 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpClientTestingModule } from "@angular/common/http/testing"
-import { PagesComponent } from './pages.component';
+import type { ComponentFixture } from "@angular/core/testing"
+import { TestBed, waitForAsync } from "@angular/core/testing"
+import { PagesComponent } from "./pages.component"
 
-describe('PagesComponent', (): void => {
+describe("PagesComponent", (): void => {
-  let component: PagesComponent;
+  let component: PagesComponent
-  let fixture: ComponentFixture<PagesComponent>;
+  let fixture: ComponentFixture<PagesComponent>
 
-  beforeEach(waitForAsync((): void => {
+  beforeEach(
-    TestBed.configureTestingModule({
+    waitForAsync((): void => {
-      declarations: [PagesComponent]
+      void TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule],
+        declarations: [PagesComponent],
+      }).compileComponents()
     })
-      .compileComponents();
+  )
-  }));
 
   beforeEach((): void => {
-    fixture = TestBed.createComponent(PagesComponent);
+    fixture = TestBed.createComponent(PagesComponent)
-    component = fixture.componentInstance;
+    component = fixture.componentInstance
-    fixture.detectChanges();
+    fixture.detectChanges()
-  });
+  })
 
-  it('should create', (): void => {
+  it("should create", (): void => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy()
-  });
+  })
-});
+})

src/app/pages/pages.component.ts

@@ -1,133 +1,151 @@
-import { HttpErrorResponse } from '@angular/common/http';
+import { HttpErrorResponse } from "@angular/common/http"
-import { Component, EventEmitter, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import type { OnDestroy, OnInit } from "@angular/core"
-import { ThemePalette } from '@angular/material/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, ViewChild } from "@angular/core"
-import { MatTable, MatTableDataSource } from '@angular/material/table';
+import type { ThemePalette } from "@angular/material/core"
-import { Subscription } from 'rxjs';
+import { MatTable, MatTableDataSource } from "@angular/material/table"
-import { takeUntil } from 'rxjs/operators';
+import type { Subscription } from "rxjs"
-import { environment } from '../../environments/environment';
+import { takeUntil } from "rxjs/operators"
-import { Protocol } from '../enums/protocol.enum';
+import { environment } from "../../environments/environment"
-import { Theme } from '../enums/theme.enum';
+import { Protocol } from "../enums/protocol.enum"
-import { GatewayService } from '../services/gateway.service';
+import { Theme } from "../enums/theme.enum"
-import { ThemeService } from '../services/theme.service';
+import { GatewayService } from "../services/gateway.service"
+import { ThemeService } from "../services/theme.service"
 
 @Component({
-  selector: 'app-pages',
+  selector: "app-pages",
-  templateUrl: './pages.component.html',
+  templateUrl: "./pages.component.html",
-  styleUrls: ['./pages.component.scss']
+  styleUrls: ["./pages.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PagesComponent implements OnInit, OnDestroy {
+  @ViewChild(MatTable) matTable!: MatTable<Result>
 
-  @ViewChild(MatTable) matTable!: MatTable<Result>;
+  gateways!: string[]
+  inputColour: ThemePalette = "primary"
+  ipfs = ""
+  ipns = ""
 
-  gateways!: string[];
+  readonly dataSource = new MatTableDataSource<Result>([])
-  inputColour: ThemePalette = 'primary';
+  readonly displayedColumns = ["icon", "gateway"]
-  ipfs = '';
+  readonly subscriptions: Subscription[] = []
-  ipns = '';
 
-  readonly dataSource = new MatTableDataSource<Result>([]);
+  private readonly destroy$ = new EventEmitter<void>()
-  readonly displayedColumns: ['icon', 'gateway'] = ['icon', 'gateway'];
-  readonly subscriptions: Subscription[] = [];
-
-  private readonly destroy$ = new EventEmitter<void>();
 
   constructor(
-    private readonly gatewayService: GatewayService,
+    @Inject(GatewayService) private readonly gatewayService: GatewayService,
-    private readonly themeService: ThemeService
+    @Inject(ThemeService) private readonly themeService: ThemeService
-  ) { }
+  ) {}
 
   ngOnInit(): void {
-    this.gatewayService.list().subscribe((gateways): void => { this.gateways = gateways; });
+    this.gatewayService
+      .list()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((gateways): void => {
+        this.gateways = gateways
+      })
 
     // Theme
-    this.setColours(this.themeService.current);
+    this.setColours(this.themeService.current)
-    this.themeService.valueChanges.pipe(
+    this.themeService.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((theme): void => {
-      takeUntil(this.destroy$)
+      this.setColours(theme)
-    ).subscribe((theme): void => {
+    })
-      this.setColours(theme);
-    });
   }
 
   ngOnDestroy(): void {
-    this.destroy$.complete();
+    this.destroy$.next()
+    this.destroy$.complete()
   }
 
   cacheIPFS(): void {
-    this.ipfs = this.ipfs.trim();
+    this.ipfs = this.ipfs.trim()
-    this.cache(Protocol.IPFS, this.ipfs);
+    this.cache(Protocol.IPFS, this.ipfs)
   }
 
   cacheIPNS(): void {
-    this.ipns = this.ipns.trim();
+    this.ipns = this.ipns.trim()
-    this.cache(Protocol.IPNS, this.ipns);
+    this.cache(Protocol.IPNS, this.ipns)
   }
 
   cache(protocol: Protocol, hashpath: string): void {
-
     // Clear subscriptions
     while (this.subscriptions.length) {
-      const sub = this.subscriptions.pop();
+      const sub = this.subscriptions.pop()
       if (sub && !sub.closed) {
-        sub.unsubscribe();
+        sub.unsubscribe()
       }
     }
 
     // Clear table
-    this.dataSource.data = [];
+    this.dataSource.data = []
-    this.matTable.renderRows();
+    this.matTable.renderRows()
-    console.clear();
+    console.clear()
 
     this.gateways.forEach((gateway): void => {
       this.subscriptions.push(
-        this.gatewayService.get(gateway, protocol, hashpath).subscribe((resp): void => {
+        this.gatewayService
-          this.dataSource.data.push({
+          .get(gateway, protocol, hashpath)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(
+            (resp): void => {
+              this.dataSource.data.unshift({
                 gateway: this.gatewayService.url(gateway, protocol, hashpath),
                 message: resp.statusText,
                 icon: this.getIcon(resp.status),
                 ok: resp.ok,
-          });
+              })
-          this.matTable.renderRows();
+              this.matTable.renderRows()
-        }, (error: HttpErrorResponse): void => {
+            },
+            (error: unknown): void => {
+              if (!(error instanceof HttpErrorResponse)) return
+
               this.dataSource.data.push({
                 gateway: this.gatewayService.url(gateway, protocol, hashpath),
                 message: error.statusText,
                 icon: this.getIcon(error.status),
                 ok: error.ok,
-          });
-          this.matTable.renderRows();
               })
-      );
+              this.matTable.renderRows()
-    });
+            }
+          )
+      )
+    })
   }
 
   private setColours(theme: Theme): void {
     switch (theme) {
       case Theme.Light:
-        this.inputColour = 'primary';
+        this.inputColour = "primary"
-        break;
+        break
       case Theme.Dark:
-        this.inputColour = 'accent';
+        this.inputColour = "accent"
-        break;
+        break
       default:
-        break;
+        break
     }
   }
 
   private getIcon(status: number): string {
-    if (status >= 200 && status < 300) { return '✅'; }
+    if (status >= 200 && status < 300) {
+      return "✅"
+    }
     switch (status) {
-      case 0: return '❌';
+      case 0:
-      case 403: return '⛔';
+        return "❌"
-      case 404: return '❓';
+      case 403:
-      case 500: return '❗';
+        return "⛔"
-      default: return environment.production ? '❌' : '❔';
+      case 404:
+        return "❓"
+      case 500:
+        return "❗"
+      default:
+        return environment.production ? "❌" : "❔"
     }
   }
-
 }
 
 interface Result {
-  gateway: string;
+  gateway: string
-  message: string;
+  message: string
-  icon: string;
+  icon: string
-  ok: boolean;
+  ok: boolean
 }

src/app/pages/pages.module.ts

@@ -1,15 +1,15 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common"
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core"
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { FlexLayoutModule } from "@angular/flex-layout"
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from "@angular/forms"
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule } from "@angular/material/button"
-import { MatInputModule } from '@angular/material/input';
+import { MatInputModule } from "@angular/material/input"
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressBarModule } from "@angular/material/progress-bar"
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule } from "@angular/material/sort"
-import { MatTableModule } from '@angular/material/table';
+import { MatTableModule } from "@angular/material/table"
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipModule } from "@angular/material/tooltip"
-import { PagesRoutingModule } from './pages-routing.module';
+import { PagesRoutingModule } from "./pages-routing.module"
-import { PagesComponent } from './pages.component';
+import { PagesComponent } from "./pages.component"
 
 @NgModule({
   declarations: [PagesComponent],
@@ -24,6 +24,6 @@ import { PagesComponent } from './pages.component';
     MatTableModule,
     MatTooltipModule,
     PagesRoutingModule,
-  ]
+  ],
 })
-export class PagesModule { }
+export class PagesModule {}

src/app/services/gateway.service.spec.ts

@@ -1,11 +1,18 @@
-import { TestBed, TestBedStatic } from '@angular/core/testing';
+import { HttpClientTestingModule } from "@angular/common/http/testing"
-import { GatewayService } from './gateway.service';
+import type { TestBedStatic } from "@angular/core/testing"
+import { TestBed } from "@angular/core/testing"
+import { GatewayService } from "./gateway.service"
 
-describe('GatewayService', (): void => {
+describe("GatewayService", (): void => {
-  beforeEach((): TestBedStatic => TestBed.configureTestingModule({}));
+  beforeEach(
+    (): TestBedStatic =>
+      TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule],
+      })
+  )
 
-  it('should be created', (): void => {
+  it("should be created", (): void => {
-    const service: GatewayService = TestBed.inject(GatewayService);
+    const service: GatewayService = TestBed.inject(GatewayService)
-    expect(service).toBeTruthy();
+    void expect(service).toBeTruthy()
-  });
+  })
-});
+})

src/app/services/gateway.service.ts

@@ -1,37 +1,34 @@
-import { HttpClient, HttpResponse } from '@angular/common/http';
+import type { HttpResponse } from "@angular/common/http"
-import { Injectable } from '@angular/core';
+import { HttpClient } from "@angular/common/http"
-import { Observable } from 'rxjs';
+import { Inject, Injectable } from "@angular/core"
-import { environment } from '../../environments/environment';
+import type { Observable } from "rxjs"
-import { Protocol } from '../enums/protocol.enum';
+import { environment } from "../../environments/environment"
+import type { Protocol } from "../enums/protocol.enum"
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class GatewayService {
-
+  constructor(@Inject(HttpClient) private readonly http: HttpClient) {}
-  constructor(
-    private readonly http: HttpClient
-  ) { }
 
   list(): Observable<string[]> {
     return this.http.get<string[]>(
-      environment.base_href && environment.base_href !== '/'
+      environment.base_href && environment.base_href !== "/"
         ? `${environment.base_href}/assets/json/gateways.json`
-        : `${document.querySelector('base')?.href}assets/json/gateways.json`
+        : `${document.querySelector("base")?.href ?? ""}assets/json/gateways.json`
-    );
+    )
   }
 
   get(gateway: string, protocol: Protocol, hashpath: string): Observable<HttpResponse<string>> {
     return this.http.get(`${this.url(gateway, protocol, hashpath)}#x-ipfs-companion-no-redirect`, {
-      observe: 'response',
+      observe: "response",
-      responseType: 'text',
+      responseType: "text",
-    });
+    })
   }
 
   url(gateway: string, protocol: Protocol, hashpath: string): string {
-    const splits: string[] = hashpath.split('/');
+    const splits: string[] = hashpath.split("/")
-    const url: string = gateway.replace(':type', protocol).replace(':hash', splits.shift() || '');
+    const url: string = gateway.replace(":type", protocol).replace(":hash", splits.shift() ?? "")
-    return splits.length ? [url, splits.join('/')].join('/') : url;
+    return splits.length ? [url, splits.join("/")].join("/") : url
   }
-
 }

src/app/services/theme.service.spec.ts

@@ -1,15 +1,15 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from "@angular/core/testing"
-import { ThemeService } from './theme.service';
+import { ThemeService } from "./theme.service"
 
-describe('ThemeService', (): void => {
+describe("ThemeService", (): void => {
-  let service: ThemeService;
+  let service: ThemeService
 
   beforeEach((): void => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({})
-    service = TestBed.inject(ThemeService);
+    service = TestBed.inject(ThemeService)
-  });
+  })
 
-  it('should be created', (): void => {
+  it("should be created", (): void => {
-    expect(service).toBeTruthy();
+    void expect(service).toBeTruthy()
-  });
+  })
-});
+})

src/app/services/theme.service.ts

@@ -1,49 +1,51 @@
-import { Injectable } from '@angular/core';
+import { Injectable } from "@angular/core"
-import { Observable, Subject } from 'rxjs';
+import type { Observable } from "rxjs"
-import { Theme } from '../enums/theme.enum';
+import { Subject } from "rxjs"
+import { Theme } from "../enums/theme.enum"
 
 function enumGuard<T>(enumeration: T): (token: unknown) => token is T[keyof T] {
-  return (token: unknown): token is T[keyof T] => Object.values(enumeration).includes(token);
+  return (token: unknown): token is T[keyof T] => Object.values(enumeration).includes(token)
 }
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class ThemeService {
+  current = Theme.Light
+  icon = "brightness_low"
+  readonly valueChanges: Observable<Theme>
 
-  current = Theme.Light;
+  private readonly subject$ = new Subject<Theme>()
-  icon = 'brightness_low';
-  readonly valueChanges: Observable<Theme>;
-
-  private readonly subject$ = new Subject<Theme>();
 
   constructor() {
-    const stored = localStorage.getItem('theme');
+    const stored = localStorage.getItem("theme")
     if (enumGuard(Theme)(stored)) {
-      this.setTheme(stored);
+      this.setTheme(stored)
     }
 
-    this.valueChanges = this.subject$.asObservable();
+    this.valueChanges = this.subject$.asObservable()
   }
 
   switchTheme(): void {
-    this.setTheme(this.current === Theme.Light ? Theme.Dark : Theme.Light);
+    this.setTheme(this.current === Theme.Light ? Theme.Dark : Theme.Light)
   }
 
   setTheme(theme: Theme): void {
-    document.querySelector('body')?.classList.remove(this.current);
+    document.querySelector("body")?.classList.remove(this.current)
-    document.querySelector('body')?.classList.add(theme);
+    document.querySelector("body")?.classList.add(theme)
-    this.current = theme;
+    this.current = theme
-    this.icon = this.getIcon(theme);
+    this.icon = this.getIcon(theme)
-    this.subject$.next(theme);
+    this.subject$.next(theme)
-    localStorage.setItem('theme', theme);
+    localStorage.setItem("theme", theme)
   }
 
   getIcon(theme: Theme): string {
     switch (theme) {
-      case Theme.Dark: return 'brightness_high';
+      case Theme.Dark:
+        return "brightness_high"
       case Theme.Light:
-      default: return 'brightness_low';
+      default:
+        return "brightness_low"
     }
   }
 }

src/assets/json/gateways.json

@@ -3,9 +3,9 @@
   "https://dweb.link/:type/:hash",
   "https://gateway.ipfs.io/:type/:hash",
   "https://ipfs.infura.io/:type/:hash",
+  "https://infura-ipfs.io/:type/:hash",
   "https://ninetailed.ninja/:type/:hash",
-  "https://ipfs.globalupload.io/:hash",
+  "https://via0.com/:type/:hash",
-  "https://10.via0.com/:type/:hash",
   "https://ipfs.eternum.io/:type/:hash",
   "https://hardbin.com/:type/:hash",
   "https://gateway.blocksec.com/:type/:hash",
@@ -21,62 +21,73 @@
   "https://ipfs.busy.org/:type/:hash",
   "https://ipfs.greyh.at/:type/:hash",
   "https://gateway.serph.network/:type/:hash",
-  "https://jorropo.ovh/:type/:hash",
   "https://jorropo.net/:type/:hash",
-  "https://gateway.temporal.cloud/:type/:hash",
   "https://ipfs.fooock.com/:type/:hash",
   "https://cdn.cwinfo.net/:type/:hash",
-  "https://ipfs.privacytools.io/:type/:hash",
+  "https://aragon.ventures/:type/:hash",
+  "https://ipfs-cdn.aragon.ventures/:type/:hash",
   "https://permaweb.io/:type/:hash",
-  "https://ipfs.stibarc.com/:type/:hash",
   "https://ipfs.best-practice.se/:type/:hash",
   "https://2read.net/:type/:hash",
   "https://ipfs.2read.net/:type/:hash",
   "https://storjipfs-gateway.com/:type/:hash",
   "https://ipfs.runfission.com/:type/:hash",
-  "https://trusti.id/:type/:hash",
+  "https://ipfs.trusti.id/:type/:hash",
-  "https://apac.trusti.id/:type/:hash",
   "https://ipfs.overpi.com/:type/:hash",
   "https://gateway.ipfs.lc/:type/:hash",
-  "https://ipfs.leiyun.org/:type/:hash",
   "https://ipfs.ink/:type/:hash",
-  "https://ipfs.oceanprotocol.com/:type/:hash",
-  "https://d26g9c7mfuzstv.cloudfront.net/:type/:hash",
   "https://ipfsgateway.makersplace.com/:type/:hash",
   "https://gateway.ravenland.org/:type/:hash",
-  "https://ipfs.smartsignature.io/:type/:hash",
   "https://ipfs.funnychain.co/:type/:hash",
   "https://ipfs.telos.miami/:type/:hash",
-  "https://robotizing.net/:type/:hash",
   "https://ipfs.mttk.net/:type/:hash",
   "https://ipfs.fleek.co/:type/:hash",
   "https://ipfs.jbb.one/:type/:hash",
   "https://ipfs.yt/:type/:hash",
-  "https://jacl.tech/:type/:hash",
   "https://hashnews.k1ic.com/:type/:hash",
   "https://ipfs.vip/:type/:hash",
-  "https://ipfs.k1ic.com/:type/:hash",
   "https://ipfs.drink.cafe/:type/:hash",
   "https://ipfs.azurewebsites.net/:type/:hash",
   "https://gw.ipfspin.com/:type/:hash",
   "https://ipfs.kavin.rocks/:type/:hash",
   "https://ipfs.denarius.io/:type/:hash",
   "https://ipfs.mihir.ch/:type/:hash",
-  "https://bluelight.link/:type/:hash",
   "https://crustwebsites.net/:type/:hash",
-  "https://trusted-setup.filecoin.io/:type/:hash",
-  "http://3.211.196.68:8080/:type/:hash",
   "https://ipfs0.sjc.cloudsigma.com/:type/:hash",
-  "https://ipfs-tezos.giganode.io/:type/:hash",
-  "http://183.252.17.149:82/:type/:hash",
   "http://ipfs.genenetwork.org/:type/:hash",
   "https://ipfs.eth.aragon.network/:type/:hash",
   "https://ipfs.smartholdem.io/:type/:hash",
-  "https://bin.d0x.to/:type/:hash",
   "https://ipfs.xoqq.ch/:type/:hash",
-  "https://birds-are-nice.me/:type/:hash",
   "http://natoboram.mynetgear.com:8080/:type/:hash",
-  "https://ipfs.foxgirl.dev/:type/:hash",
   "https://video.oneloveipfs.com/:type/:hash",
-  "http://ipfs.anonymize.com/:type/:hash"
+  "http://ipfs.anonymize.com/:type/:hash",
+  "https://ipfs.taxi/:type/:hash",
+  "https://ipfs.scalaproject.io/:type/:hash",
+  "https://search.ipfsgate.com/:type/:hash",
+  "https://ipfs.decoo.io/:type/:hash",
+  "https://ivoputzer.xyz/:type/:hash",
+  "https://alexdav.id/:type/:hash",
+  "https://ipfs.uploads.nu/:type/:hash",
+  "https://hub.textile.io/:type/:hash",
+  "https://ipfs1.pixura.io/:type/:hash",
+  "https://ravencoinipfs-gateway.com/:type/:hash",
+  "https://konubinix.eu/:type/:hash",
+  "https://3cloud.ee/:type/:hash",
+  "https://ipfs.tubby.cloud/:type/:hash",
+  "https://ipfs.lain.la/:type/:hash",
+  "https://ipfs.adatools.io/:type/:hash",
+  "https://ipfs.kaleido.art/:type/:hash",
+  "https://ipfs.slang.cx/:type/:hash",
+  "https://ipfs.arching-kaos.com/:type/:hash",
+  "https://storry.tv/:type/:hash",
+  "https://ipfs.kxv.io/:type/:hash",
+  "https://ipfs.1-2.dev/:type/:hash",
+  "https://ipfs-nosub.stibarc.com/:type/:hash",
+  "https://dweb.eu.org/:type/:hash",
+  "https://permaweb.eu.org/:type/:hash",
+  "https://ipfs.namebase.io/:type/:hash",
+  "https://ipfs.tribecap.co/:type/:hash",
+  "https://ipfs.kinematiks.com/:type/:hash",
+  "https://c4rex.co/:type/:hash",
+  "https://ipfs.zod.tv/:type/:hash"
 ]

src/environments/environment.gitlab.ts

@@ -1,7 +1,7 @@
-import { Environment } from '../app/interfaces/environment';
+import type { Environment } from "../app/interfaces/environment"
 
 export const environment: Environment = {
   production: true,
-  base_href: '/public-gateway-cacher',
+  base_href: "/public-gateway-cacher",
   useHash: false,
-};
+}

src/environments/environment.ipfs.ts

@@ -1,6 +1,6 @@
-import { Environment } from '../app/interfaces/environment';
+import type { Environment } from "../app/interfaces/environment"
 
 export const environment: Environment = {
   production: true,
   useHash: true,
-};
+}

src/environments/environment.prod.ts

@@ -1,7 +1,7 @@
-import { Environment } from '../app/interfaces/environment';
+import type { Environment } from "../app/interfaces/environment"
 
 export const environment: Environment = {
   production: true,
-  base_href: '/',
+  base_href: "/",
   useHash: false,
-};
+}

src/environments/environment.ts

@@ -1,4 +1,4 @@
-import { Environment } from '../app/interfaces/environment';
+import type { Environment } from "../app/interfaces/environment"
 
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
@@ -6,9 +6,9 @@ import { Environment } from '../app/interfaces/environment';
 
 export const environment: Environment = {
   production: false,
-  base_href: '/',
+  base_href: "/",
   useHash: false,
-};
+}
 
 /*
  * For easier debugging in development mode, you can import the following file
@@ -17,4 +17,4 @@ export const environment: Environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/index.html

@@ -1,26 +1,23 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta charset="utf-8" />
-  <meta charset="utf-8">
     <title>Public Gateway Cacher</title>
 
     <!-- IPFS -->
     <script>
-    if (document.getElementsByTagName('base').length === 0) document.write('<base href="' + window.location.pathname + '"/>');
+      if (document.getElementsByTagName("base").length === 0) document.write('<base href="' + window.location.pathname + '"/>')
     </script>
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="icon" type="image/x-icon" href="favicon.png">
+    <link rel="icon" type="image/x-icon" href="favicon.png" />
 
     <!-- Material -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  </head>
 
-</head>
+  <body class="mat-app-background theme-light">
-
-<body class="mat-app-background theme-light">
     <app-root></app-root>
-</body>
+  </body>
-
 </html>

src/main.ts

@@ -1,11 +1,12 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode } from "@angular/core"
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
-import { AppModule } from './app/app.module';
+import { AppModule } from "./app/app.module"
-import { environment } from './environments/environment';
+import { environment } from "./environments/environment"
 
 if (environment.production) {
-  enableProdMode();
+  enableProdMode()
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
-  .catch((err): void => console.error(err));
+  .bootstrapModule(AppModule)
+  .catch((err): void => console.error(err))

src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -55,8 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import "zone.js" // Included with Angular CLI.
-
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

src/styles.scss

@@ -1,12 +1,12 @@
 // Custom Theming for Angular Material
+@use "@angular/material" as mat;
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 // // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -25,14 +25,14 @@
 // // that you are using.
 // @include angular-material-theme($public-gateway-cacher-theme);
 
-@import 'styles/ipfs-themes.scss';
+@import "styles/ipfs-themes.scss";
 
 .theme-light {
-  @include angular-material-theme($ipfs-light-theme);
+  @include mat.all-component-themes($ipfs-light-theme);
 }
 
 .theme-dark {
-  @include angular-material-theme($ipfs-dark-theme);
+  @include mat.all-component-themes($ipfs-dark-theme);
 }
 
 /* You can add global styles to this file, and also import other style files */
@@ -47,5 +47,5 @@ body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-@import '~bootstrap/scss/bootstrap-grid.scss';
+@import "~bootstrap/scss/bootstrap-grid.scss";
-@import '~ipfs-css/theme.scss';
+@import "~ipfs-css/theme.scss";

src/styles/ipfs-colours.scss

@@ -1,23 +1,34 @@
-$ipfs-colour-navy: (default: #0B3A53,
+@import "@angular/material/core/theming/palette";
+
+$ipfs-colour-navy: (
+  default: #0b3a53,
   lighter: #3e6480,
   darker: #00142a,
-  contrast: (default: $light-primary-text,
+  contrast: (
+    default: $light-primary-text,
     lighter: $light-primary-text,
     darker: $light-primary-text,
-  ));
+  ),
+);
 
-$ipfs-colour-aqua: (default: #69c5cd,
+$ipfs-colour-aqua: (
+  default: #69c5cd,
   lighter: #9df8ff,
   darker: #32949c,
-  contrast: (default: $dark-primary-text,
+  contrast: (
+    default: $dark-primary-text,
     lighter: $dark-primary-text,
     darker: $dark-primary-text,
-  ));
+  ),
+);
 
-$ipfs-colour-yellow: (default: #f39021,
+$ipfs-colour-yellow: (
+  default: #f39021,
   lighter: #ffc155,
   darker: #bb6200,
-  contrast: (default: $dark-primary-text,
+  contrast: (
+    default: $dark-primary-text,
     lighter: $dark-primary-text,
     darker: $dark-primary-text,
-  ));
+  ),
+);

src/styles/ipfs-palettes.scss

@@ -1,5 +1,6 @@
-@import 'ipfs-colours.scss';
+@use "@angular/material" as mat;
+@import "ipfs-colours.scss";
 
-$ipfs-primary: mat-palette($ipfs-colour-navy, 'default', 'lighter', 'darker');
+$ipfs-primary: mat.define-palette($ipfs-colour-navy, "default", "lighter", "darker");
-$ipfs-accent: mat-palette($ipfs-colour-aqua, 'default', 'lighter', 'darker');
+$ipfs-accent: mat.define-palette($ipfs-colour-aqua, "default", "lighter", "darker");
-$ipfs-warn: mat-palette($ipfs-colour-yellow, 'default', 'lighter', 'darker');
+$ipfs-warn: mat.define-palette($ipfs-colour-yellow, "default", "lighter", "darker");

src/styles/ipfs-themes.scss

@@ -1,4 +1,5 @@
-@import 'ipfs-palettes.scss';
+@use "@angular/material" as mat;
+@import "ipfs-palettes.scss";
 
-$ipfs-light-theme: mat-light-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);
+$ipfs-light-theme: mat.define-light-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);
-$ipfs-dark-theme: mat-dark-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);
+$ipfs-dark-theme: mat.define-dark-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);

src/test.ts

@@ -1,20 +1,16 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import "zone.js/testing"
 
-import 'zone.js/dist/zone-testing';
+import { getTestBed } from "@angular/core/testing"
-import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing"
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: any
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { teardown: { destroyAfterEach: false } })
-  BrowserDynamicTestingModule,
+
-  platformBrowserDynamicTesting()
-);
 // Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
+const context = require.context("./", true, /\.spec\.ts$/)
+
 // And load the modules.
-context.keys().map(context);
+context.keys().map(context)

tsconfig.app.json

@@ -5,11 +5,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
+  "files": ["src/main.ts", "src/polyfills.ts"],
-    "src/main.ts",
+  "include": ["src/**/*.d.ts"]
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
 }

tsconfig.json

@@ -6,20 +6,31 @@
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "useUnknownInCatchVariables": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "ESNext",
-    "module": "es2020",
+    "module": "ESNext",
-    "lib": [
+    "lib": ["ESNext", "DOM"]
-      "es2018",
-      "dom"
-    ]
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,

tsconfig.spec.json

@@ -3,16 +3,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
+    "types": ["jasmine"]
-      "jasmine"
-    ]
   },
-  "files": [
+  "files": ["src/test.ts", "src/polyfills.ts"],
-    "src/test.ts",
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
 }

tslint.json

@@ -1,324 +0,0 @@
-{
-  "extends": [
-    "tslint:recommended",
-    "rxjs-tslint-rules"
-  ],
-  "linterOptions": {
-    "exclude": [
-      "**/*-routing.module.ts",
-      "src/polyfills.ts",
-      "src/test.ts",
-      "**/*.po.ts"
-    ]
-  },
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-parens": false,
-    "arrow-return-shorthand": [
-      true,
-      "multiline"
-    ],
-    "ban-types": [
-      true,
-      [
-        "Object",
-        "Use {} instead."
-      ],
-      [
-        "String"
-      ]
-    ],
-    "callable-types": true,
-    "component-class-suffix": true,
-    "component-max-inline-declarations": true,
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
-    "contextual-decorator": false,
-    "contextual-lifecycle": true,
-    "curly": true,
-    "cyclomatic-complexity": [
-      true,
-      20
-    ],
-    "deprecation": {
-      "severity": "warning"
-    },
-    "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "encoding": true,
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-destructuring-spacing": true,
-    "import-spacing": true,
-    "increment-decrement": [
-      true,
-      "allow-post"
-    ],
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "max-file-line-count": [
-      true,
-      400
-    ],
-    "max-line-length": [
-      true,
-      {
-        "ignore-pattern": "^import |^export {(.*?)}|class [a-zA-Z]+ implements |// ",
-        "limit": 140
-      }
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "public-static-field",
-          "private-static-field",
-          "public-instance-field",
-          "private-instance-field",
-          "public-constructor",
-          "private-constructor",
-          "public-instance-method",
-          "protected-instance-method",
-          "private-instance-method",
-          "public-static-method",
-          "protected-static-method",
-          "private-static-method"
-        ]
-      }
-    ],
-    "newline-before-return": false,
-    "no-any": [
-      true,
-      {
-        "ignore-rest-args": true
-      }
-    ],
-    "no-arg": true,
-    "no-attribute-decorator": true,
-    "no-collapsible-if": true,
-    "no-conflicting-lifecycle": true,
-    "no-consecutive-blank-lines": [
-      true,
-      1
-    ],
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-default-export": true,
-    "no-default-import": true,
-    "no-duplicate-imports": true,
-    "no-duplicate-super": true,
-    "no-duplicate-switch-case": true,
-    "no-empty": [
-      true,
-      "allow-empty-functions"
-    ],
-    "no-for-in-array": true,
-    "no-forward-ref": true,
-    "no-host-metadata-property": true,
-    "no-implicit-dependencies": [
-      false,
-      "dev"
-    ],
-    "no-import-side-effect": [
-      true,
-      {
-        "ignore-module": "(hammerjs|core-js|zone.js)"
-      }
-    ],
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-invalid-template-strings": true,
-    "no-invalid-this": [
-      true,
-      "check-function-in-method"
-    ],
-    "no-lifecycle-call": true,
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "no-pipe-impure": true,
-    "no-queries-metadata-property": true,
-    "no-redundant-jsdoc": true,
-    "no-reference": true,
-    "no-require-imports": true,
-    "no-return-await": true,
-    "no-return-undefined": true,
-    "no-static-this": true,
-    "no-switch-case-fall-through": true,
-    "no-tautology-expression": true,
-    "no-this-assignment": true,
-    "no-trailing-whitespace": true,
-    "no-unbound-method": true,
-    "no-unnecessary-callback-wrapper": true,
-    "no-unnecessary-class": [
-      true,
-      "allow-constructor-only",
-      "allow-static-only",
-      "allow-empty-class"
-    ],
-    "no-unnecessary-initializer": true,
-    "no-unnecessary-type-assertion": true,
-    "no-unsafe-finally": true,
-    "no-unused": true,
-    "no-unused-css": true,
-    "no-var-keyword": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "object-literal-sort-keys": false,
-    "ordered-imports": false,
-    "origin-ordered-imports": [
-      true
-    ],
-    "prefer-const": true,
-    "prefer-inline-decorator": false,
-    "prefer-output-readonly": true,
-    "prefer-readonly": true,
-    "prefer-template": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": false,
-    "restrict-plus-operands": true,
-    "rx-subject-restrictions": true,
-    "rxjs-no-compat": true,
-    "rxjs-no-internal": true,
-    "semicolon": {
-      "options": [
-        "always"
-      ]
-    },
-    "space-before-function-paren": [
-      true,
-      {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    ],
-    "space-within-parens": true,
-    "template-banana-in-box": true,
-    "template-conditional-complexity": true,
-    "template-no-call-expression": true,
-    "template-no-negated-async": true,
-    "template-use-track-by-function": true,
-    "trailing-comma": [
-      true,
-      {
-        "esSpecCompliant": true,
-        "multiline": {
-          "arrays": "ignore",
-          "functions": "never",
-          "objects": "ignore",
-          "typeLiterals": "ignore"
-        }
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": [
-      true,
-      "call-signature",
-      "property-declaration",
-      "object-destructuring",
-      "arrow-call-signature"
-    ],
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "unnecessary-else": [
-      true,
-      {
-        "allow-else-if": true
-      }
-    ],
-    "use-component-view-encapsulation": true,
-    "use-isnan": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-decorator": true,
-    "use-pipe-transform-interface": true,
-    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-leading-underscore",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    }
-  },
-  "rulesDirectory": [
-    "codelyzer",
-    "node_modules/tslint-origin-ordered-imports-rule/dist",
-    "node_modules/tslint-rxjs-subject-restrictions-rule/dist",
-    "node_modules/tslint-consistent-codestyle/rules"
-  ]
-}