geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.0

package/src/libs/ui/search/src/lib/ui-search.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { RouterLink } from '@angular/router'
 import { UtilSharedModule } from '../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
@@ -22,12 +21,22 @@ import { TagInputModule } from 'ngx-chips'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ResultsListItemComponent } from './results-list-item/results-list-item.component'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { UiElementsModule } from '../../../../../libs/ui/elements/src'
+import {
+  MetadataQualityComponent,
+  UiElementsModule,
+} from '../../../../../libs/ui/elements/src'
 import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview-feed.component'
 import { CommonModule } from '@angular/common'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { InteractiveTableComponent } from '../../../../../libs/ui/layout/src'
+import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
+import {
+  matCloudDownloadOutline,
+  matHomeWorkOutline,
+  matMapOutline,
+} from '@ng-icons/material-icons/outline'
+import { matFace } from '@ng-icons/material-icons/baseline'
 
 @NgModule({
   declarations: [
@@ -55,10 +64,17 @@ import { InteractiveTableComponent } from '../../../../../libs/ui/layout/src'
     UiWidgetsModule,
     UiInputsModule,
     UiElementsModule,
-    MatIconModule,
     MatCheckboxModule,
     RouterLink,
     InteractiveTableComponent,
+    // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone
+    NgIconsModule.withIcons({
+      matMapOutline,
+      matCloudDownloadOutline,
+      matFace,
+      matHomeWorkOutline,
+    }),
+    MetadataQualityComponent,
   ],
   exports: [
     RecordPreviewListComponent,
@@ -74,6 +90,9 @@ import { InteractiveTableComponent } from '../../../../../libs/ui/layout/src'
     RecordPreviewRowComponent,
   ],
   providers: [
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
     { provide: RESULTS_LAYOUT_CONFIG, useValue: DEFAULT_RESULTS_LAYOUT_CONFIG },
   ],
 })

package/src/libs/ui/widgets/src/lib/loading-mask/loading-mask.component.ts

@@ -1,15 +1,13 @@
-import {
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  Input,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 
 @Component({
   selector: 'gn-ui-loading-mask',
   templateUrl: './loading-mask.component.html',
   styleUrls: ['./loading-mask.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatProgressSpinnerModule],
+  standalone: true,
 })
 export class LoadingMaskComponent {
   @Input() message: string

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.html

@@ -8,14 +8,12 @@
       expanded: this.expanded,
       'bg-red-500': type === 'danger',
       'bg-yellow-500': type === 'warning',
-      'bg-blue-500': type === 'info'
+      'bg-blue-500': type === 'info',
     }"
     (mouseenter)="expand()"
     (mouseleave)="expandAndClose()"
   >
-    <mat-icon class="material-symbols-outlined mr-2 shrink-0 select-none">{{
-      icon
-    }}</mat-icon>
+    <ng-icon class="mr-2 shrink-0 select-none" [name]="icon"></ng-icon>
     <div class="grow" #content [ngClass]="{ invisible: !expanded }">
       <ng-content></ng-content>
     </div>

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.ts

@@ -8,7 +8,12 @@ import {
   ViewChild,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { MatIconModule } from '@angular/material/icon'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matErrorOutlineOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-popup-alert',
@@ -16,7 +21,8 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./popup-alert.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, NgIconComponent],
+  providers: [provideIcons({ matErrorOutlineOutline })],
 })
 export class PopupAlertComponent implements OnInit {
   @Input() icon: string

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.ts

@@ -10,6 +10,7 @@ interface ColorScheme {
   selector: 'gn-ui-progress-bar',
   templateUrl: './progress-bar.component.html',
   styleUrls: ['./progress-bar.component.css'],
+  standalone: true,
 })
 export class ProgressBarComponent {
   @Input() value = 0

package/src/libs/ui/widgets/src/lib/spinning-loader/spinning-loader.component.ts

@@ -4,5 +4,6 @@ import { Component } from '@angular/core'
   selector: 'gn-ui-spinning-loader',
   templateUrl: './spinning-loader.component.html',
   styleUrls: ['./spinning-loader.component.css'],
+  standalone: true,
 })
 export class SpinningLoaderComponent {}

package/src/libs/ui/widgets/src/lib/step-bar/step-bar.component.ts

@@ -45,8 +45,8 @@ export class StepBarComponent {
     return index === this.currentStep
       ? 'bg-black'
       : index < this.currentStep
-      ? 'bg-white'
-      : this.color.innerBar
+        ? 'bg-white'
+        : this.color.innerBar
   }
 
   getChecked(index: number): boolean {

package/src/libs/ui/widgets/src/lib/ui-widgets.module.ts

@@ -3,24 +3,14 @@ import { UtilSharedModule } from '../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { NgxDropzoneModule } from 'ngx-dropzone'
 import { ColorScaleComponent } from './color-scale/color-scale.component'
-import { ProgressBarComponent } from './progress-bar/progress-bar.component'
 import { StepBarComponent } from './step-bar/step-bar.component'
 import { TagInputModule } from 'ngx-chips'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { LoadingMaskComponent } from './loading-mask/loading-mask.component'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { MatIconModule } from '@angular/material/icon'
-import { SpinningLoaderComponent } from './spinning-loader/spinning-loader.component'
 import { CommonModule } from '@angular/common'
 
 @NgModule({
-  declarations: [
-    ColorScaleComponent,
-    ProgressBarComponent,
-    StepBarComponent,
-    LoadingMaskComponent,
-    SpinningLoaderComponent,
-  ],
+  declarations: [ColorScaleComponent, StepBarComponent],
   imports: [
     CommonModule,
     TranslateModule.forChild(),
@@ -30,13 +20,7 @@ import { CommonModule } from '@angular/common'
     TagInputModule,
     UtilSharedModule,
     MatProgressSpinnerModule,
-    MatIconModule,
-  ],
-  exports: [
-    ProgressBarComponent,
-    StepBarComponent,
-    LoadingMaskComponent,
-    SpinningLoaderComponent,
   ],
+  exports: [StepBarComponent],
 })
 export class UiWidgetsModule {}

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -98,6 +98,7 @@ export function loadAppConfig() {
           'proxy_path',
           'metadata_language',
           'login_url',
+          'logout_url',
           'web_component_embedder_url',
           'languages',
           'contact_email',
@@ -124,6 +125,8 @@ export function loadAppConfig() {
                   ).toLowerCase()
                 : undefined,
               LOGIN_URL: parsedGlobalSection.login_url,
+              LOGOUT_URL: parsedGlobalSection.logout_url,
+              SETTINGS_URL: parsedGlobalSection.settings_url,
               WEB_COMPONENT_EMBEDDER_URL:
                 parsedGlobalSection.web_component_embedder_url,
               LANGUAGES: parsedGlobalSection.languages,
@@ -134,7 +137,7 @@ export function loadAppConfig() {
         parsed,
         'map_layer',
         ['type'],
-        ['name', 'url', 'data'],
+        ['name', 'url', 'data', 'styleUrl', 'accessToken'],
         warnings,
         errors
       )
@@ -146,6 +149,7 @@ export function loadAppConfig() {
           'max_zoom',
           'do_not_tile_wms',
           'max_extent',
+          'max_feature_count',
           'baselayer',
           'do_not_use_default_basemap',
           'external_viewer_url_template',
@@ -161,6 +165,7 @@ export function loadAppConfig() {
               MAX_ZOOM: parsedMapSection.max_zoom,
               DO_NOT_TILE_WMS: parsedMapSection.do_not_tile_wms,
               MAX_EXTENT: parsedMapSection.max_extent,
+              MAX_FEATURE_COUNT: parsedMapSection.max_feature_count,
               EXTERNAL_VIEWER_URL_TEMPLATE:
                 parsedMapSection.external_viewer_url_template,
               EXTERNAL_VIEWER_OPEN_NEW_TAB:
@@ -174,7 +179,9 @@ export function loadAppConfig() {
                     URL: map_layer.url,
                     NAME: map_layer.name,
                     DATA: map_layer.data,
-                  } as LayerConfig)
+                    STYLE_URL: map_layer.styleUrl,
+                    ACCESS_TOKEN: map_layer.accessToken,
+                  }) as LayerConfig
               ),
             } as MapConfig)
 

package/src/libs/util/app-config/src/lib/fixtures.ts

@@ -6,6 +6,7 @@ geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
 metadata_language = "fre"
 login_url = "/cas/login?service="
+logout_url = "/geonetwork/signout"
 web_component_embedder_url = "/datahub/wc-embedder.html"
 
 [map]

package/src/libs/util/app-config/src/lib/map-layers.ts

@@ -27,5 +27,11 @@ export function getMapContextLayerFromConfig(
         type: config.TYPE,
         ...(config.DATA ? { data: config.DATA } : { url: config.URL }),
       }
+    case 'maplibre-style':
+      return {
+        type: config.TYPE,
+        styleUrl: config.STYLE_URL,
+        accessToken: config.ACCESS_TOKEN,
+      }
   }
 }

package/src/libs/util/app-config/src/lib/model.ts

@@ -6,22 +6,27 @@ export interface GlobalConfig {
   PROXY_PATH?: string
   METADATA_LANGUAGE?: string
   LOGIN_URL?: string
+  LOGOUT_URL?: string
+  SETTINGS_URL?: string
   WEB_COMPONENT_EMBEDDER_URL?: string
   LANGUAGES?: string[]
   CONTACT_EMAIL?: string
 }
 
 export interface LayerConfig {
-  TYPE: 'xyz' | 'wms' | 'wfs' | 'geojson'
+  TYPE: 'xyz' | 'wms' | 'wfs' | 'geojson' | 'maplibre-style'
   URL?: string
   NAME?: string
   DATA?: string
+  STYLE_URL?: string
+  ACCESS_TOKEN?: string
 }
 
 export interface MapConfig {
   MAX_ZOOM?: number
   DO_NOT_TILE_WMS: boolean
   MAX_EXTENT?: [number, number, number, number] // Expressed as [minx, miny, maxx, maxy]
+  MAX_FEATURE_COUNT?: number
   EXTERNAL_VIEWER_URL_TEMPLATE?: string
   EXTERNAL_VIEWER_OPEN_NEW_TAB?: boolean
   DO_NOT_USE_DEFAULT_BASEMAP: boolean

package/src/libs/util/data-fetcher/src/lib/model.ts

@@ -48,11 +48,11 @@ export const ExcelMimeTypes = [
 export const GmlMimeTypes = ['application/gml+xml'] as const
 
 export type SupportedMimeType =
-  | typeof CsvMimeTypes[number]
-  | typeof JsonMimeTypes[number]
-  | typeof GeoJsonMimeTypes[number]
-  | typeof ExcelMimeTypes[number]
-  | typeof GmlMimeTypes[number]
+  | (typeof CsvMimeTypes)[number]
+  | (typeof JsonMimeTypes)[number]
+  | (typeof GeoJsonMimeTypes)[number]
+  | (typeof ExcelMimeTypes)[number]
+  | (typeof GmlMimeTypes)[number]
 
 export const SupportedTypes = [
   'csv',
@@ -61,7 +61,7 @@ export const SupportedTypes = [
   'excel',
   'gml',
 ] as const
-export type SupportedType = typeof SupportedTypes[number]
+export type SupportedType = (typeof SupportedTypes)[number]
 
 export const AllMimeTypes = {
   csv: CsvMimeTypes,

package/src/libs/util/data-fetcher/src/lib/readers/base-file.ts

@@ -28,7 +28,7 @@ export class BaseFileReader extends BaseReader {
       (result) =>
         ({
           itemsCount: result.items.length,
-        } as DatasetInfo)
+        }) as DatasetInfo
     )
   }
 

package/src/libs/util/data-fetcher/src/lib/utils.ts

@@ -8,8 +8,8 @@ import {
 } from './model'
 import { sharedFetch, useCache } from '@camptocamp/ogc-client'
 import { parseHeaders } from './headers'
-import parseDate from 'date-fns/parse'
-import parseIsoDate from 'date-fns/parseISO'
+import { parse as parseDate } from 'date-fns/parse'
+import { parseISO as parseIsoDate } from 'date-fns/parseISO'
 
 export async function inferDatasetType(
   url: string,
@@ -89,20 +89,22 @@ export function fetchDataAsArrayBuffer(url: string): Promise<ArrayBuffer> {
   })
 }
 
-export function tryParseDate(input: string): Date | null {
-  function tryIso() {
-    const parsed = parseIsoDate(input)
+export function tryParseDate(input: unknown): Date | null {
+  if (typeof input !== 'string') return null
+
+  function tryIso(value: string) {
+    const parsed = parseIsoDate(value)
     return isNaN(parsed.getDate()) ? null : parsed
   }
-  function tryFormat(format: string) {
-    const parsed = parseDate(input, format, new Date())
+  function tryFormat(value: string, format: string) {
+    const parsed = parseDate(value, format, new Date())
     return isNaN(parsed.getDate()) ? null : parsed
   }
   return (
-    tryIso() ||
-    tryFormat('dd/MM/yyyy') ||
-    tryFormat('dd.MM.yyyy') ||
-    tryFormat('MM/dd/yyyy') ||
+    tryIso(input) ||
+    tryFormat(input, 'dd/MM/yyyy') ||
+    tryFormat(input, 'dd.MM.yyyy') ||
+    tryFormat(input, 'MM/dd/yyyy') ||
     null
   )
 }

package/src/libs/util/i18n/src/index.ts

@@ -5,3 +5,4 @@ export * from './lib/lang.service'
 export * from './lib/file.translate.loader'
 export * from './lib/embedded.translate.loader'
 export * from './lib/translate.loader.utils'
+export * from './lib/language-codes'

package/src/libs/util/i18n/src/lib/i18n.constants.ts

@@ -22,52 +22,9 @@ marker('language.sk')
 
 export const DEFAULT_LANG = 'en'
 
-export const LANG_3_TO_2_MAPPER = {
-  eng: 'en',
-  dut: 'nl',
-  fre: 'fr',
-  ger: 'de',
-  kor: 'ko',
-  spa: 'es',
-  cze: 'cs',
-  cat: 'ca',
-  fin: 'fi',
-  ice: 'is',
-  ita: 'it',
-  por: 'pt',
-  rus: 'ru',
-  chi: 'zh',
-  slo: 'sk',
-}
-
-export const LANGUAGE_NAMES = {
-  en: 'English',
-  nl: 'Nederlands',
-  fr: 'Français',
-  de: 'Deutsch',
-  ko: '한국어',
-  es: 'Español',
-  cs: 'Čeština',
-  ca: 'Català',
-  fi: 'Suomi',
-  is: 'Íslenska',
-  it: 'Italiano',
-  pt: 'Português',
-  ru: 'Русский',
-  zh: '中文',
-  sk: 'Slovenčina',
-}
-
 // Caution: changing this can break language selection from third parties!
 export const LANGUAGE_STORAGE_KEY = 'geonetwork-ui-language'
 
-export const LANG_2_TO_3_MAPPER = Object.entries(LANG_3_TO_2_MAPPER).reduce(
-  (mapperObject, langEntry) => {
-    return { ...mapperObject, [langEntry[1]]: langEntry[0] }
-  },
-  {}
-)
-
 export function HttpLoaderFactory(http: HttpClient) {
   return new FileTranslateLoader(http, './assets/i18n/')
 }

package/src/libs/util/i18n/src/lib/lang.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { LANG_2_TO_3_MAPPER } from './i18n.constants'
+import { LANG_2_TO_3_MAPPER } from './language-codes'
 import { TranslateService } from '@ngx-translate/core'
 
 @Injectable({

package/src/libs/util/i18n/src/lib/language-codes.ts

@@ -0,0 +1,44 @@
+export const LANG_3_TO_2_MAPPER = {
+  eng: 'en',
+  dut: 'nl',
+  fre: 'fr',
+  ger: 'de',
+  kor: 'ko',
+  spa: 'es',
+  cze: 'cs',
+  cat: 'ca',
+  fin: 'fi',
+  ice: 'is',
+  ita: 'it',
+  por: 'pt',
+  rus: 'ru',
+  chi: 'zh',
+  slo: 'sk',
+  roh: 'rm',
+}
+
+export const LANGUAGE_NAMES = {
+  en: 'English',
+  nl: 'Nederlands',
+  fr: 'Français',
+  de: 'Deutsch',
+  ko: '한국어',
+  es: 'Español',
+  cs: 'Čeština',
+  ca: 'Català',
+  fi: 'Suomi',
+  is: 'Íslenska',
+  it: 'Italiano',
+  pt: 'Português',
+  ru: 'Русский',
+  zh: '中文',
+  sk: 'Slovenčina',
+  roh: 'Rumantsch',
+}
+
+export const LANG_2_TO_3_MAPPER = Object.entries(LANG_3_TO_2_MAPPER).reduce(
+  (mapperObject, langEntry) => {
+    return { ...mapperObject, [langEntry[1]]: langEntry[0] }
+  },
+  {}
+)

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -28,6 +28,8 @@ export class LinkClassifierService {
             return [LinkUsage.API, LinkUsage.MAP_API]
           case 'ogcFeatures':
             return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA]
+          case 'GPFDL':
+            return [LinkUsage.API]
           default:
             return [LinkUsage.UNKNOWN]
         }

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -7,7 +7,7 @@ export const FORMATS = {
   csv: {
     extensions: ['csv'],
     priority: 1,
-    color: '#559d7f',
+    color: '#a6d6c0',
     mimeTypes: ['text/csv', 'application/csv'],
   },
   excel: {
@@ -19,7 +19,7 @@ export const FORMATS = {
       'openxmlformats-officedocument',
     ],
     priority: 2,
-    color: '#0f4395',
+    color: '#acc5e4',
     mimeTypes: [
       'application/vnd.ms-excel',
       'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
@@ -28,31 +28,31 @@ export const FORMATS = {
   geojson: {
     extensions: ['geojson'],
     priority: 3,
-    color: '#1e5180',
+    color: '#b3cde8',
     mimeTypes: ['application/geo+json', 'application/vnd.geo+json'],
   },
   json: {
     extensions: ['json'],
     priority: 3,
-    color: '#1e5180',
+    color: '#b3cde8',
     mimeTypes: ['application/json'],
   },
   shp: {
     extensions: ['shp', 'shape', 'zipped-shapefile'],
     priority: 4,
-    color: '#328556',
+    color: '#b2d8ba',
     mimeTypes: ['x-gis/x-shapefile'],
   },
   gml: {
     extensions: ['gml'],
     priority: 5,
-    color: '#c92bce',
+    color: '#e3b3e5',
     mimeTypes: ['application/gml+xml', 'text/xml; subtype=gml'],
   },
   kml: {
     extensions: ['kml', 'kmz'],
     priority: 6,
-    color: '#348009',
+    color: '#c1e6a0',
     mimeTypes: [
       'application/vnd.google-earth.kml+xml',
       'application/vnd.google-earth.kmz',
@@ -61,55 +61,55 @@ export const FORMATS = {
   gpkg: {
     extensions: ['gpkg', 'geopackage'],
     priority: 7,
-    color: '#ea79ba',
+    color: '#f7cce6',
     mimeTypes: ['application/geopackage+sqlite3'],
   },
   zip: {
     extensions: ['zip', 'tar.gz'],
     priority: 8,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: ['application/zip', 'application/x-zip'],
   },
   pdf: {
     extensions: ['pdf'],
     priority: 9,
-    color: '#db544a',
+    color: '#f5b2a3',
     mimeTypes: ['application/pdf'],
   },
   jpg: {
     extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],
     priority: 9,
-    color: '#673ab7',
+    color: '#d1c1e9',
     mimeTypes: ['image/jpg'],
   },
   svg: {
     extensions: ['svg'],
     priority: 10,
-    color: '#d98294',
+    color: '#f3c1c9',
     mimeTypes: ['image/svg+xml'],
   },
   dxf: {
     extensions: ['dxf'],
     priority: 11,
-    color: '#de630b',
+    color: '#f6ceac',
     mimeTypes: ['application/x-dxf', 'image/x-dxf'],
   },
   html: {
     extensions: ['html', 'htm'],
     priority: 12,
-    color: '#f2bb3a',
+    color: '#FFF2CC',
     mimeTypes: ['text/html'],
   },
   fgb: {
     extensions: ['fgb', 'flatgeobuf'],
     priority: 13,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: ['application/flatgeobuf'],
   },
   jsonfg: {
     extensions: ['jsonfg', 'jsonfgc'],
     priority: 14,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: [
       'application/vnd.ogc.fg+json',
       'application/vnd.ogc.fg+json;compatibility=geojson',
@@ -138,7 +138,7 @@ export function getLinkPriority(link: DatasetOnlineResource): number {
 export function getFileFormatFromServiceOutput(
   serviceOutput: string
 ): FileFormat | null {
-  function formatMatcher(format: typeof FORMATS[FileFormat]): boolean {
+  function formatMatcher(format: (typeof FORMATS)[FileFormat]): boolean {
     const output = serviceOutput.toLowerCase()
     return (
       format.extensions.some((extension: string) =>

package/src/libs/util/shared/src/lib/services/proxy.service.ts

@@ -1,4 +1,5 @@
 import { Inject, Injectable, InjectionToken, Optional } from '@angular/core'
+import { Location } from '@angular/common'
 
 export const PROXY_PATH = new InjectionToken<string>('proxyPath')
 
@@ -6,7 +7,10 @@ export const PROXY_PATH = new InjectionToken<string>('proxyPath')
   providedIn: 'root',
 })
 export class ProxyService {
-  constructor(@Optional() @Inject(PROXY_PATH) private proxyPath: string) {}
+  constructor(
+    @Optional() @Inject(PROXY_PATH) private proxyPath: string,
+    private location: Location
+  ) {}
 
   /**
    * Transforms the URL to go through a proxy specified with the PROXY_PATH
@@ -16,7 +20,7 @@ export class ProxyService {
   getProxiedUrl(url: string): string {
     if (!this.proxyPath) return url
     const urlObj = new URL(url)
-    const current = window.location
+    const current = new URL(this.location.path(), window.location.href)
     const proxyUrl = new URL(this.proxyPath, current.toString()).toString()
     if (
       current.hostname === urlObj.hostname &&
@@ -28,7 +32,7 @@ export class ProxyService {
     if (url.indexOf(proxyUrl) === 0) return url
     return new URL(
       `${this.proxyPath}${encodeURIComponent(url)}`,
-      window.location.toString()
+      window.location.href
     ).toString()
   }
 }