geonetwork-ui 2.7.0-dev.8ac6cd7aa → 2.7.0-dev.9895bd35c

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -1,25 +1,25 @@
 import { Injectable } from '@angular/core'
-import { extend, Extent } from 'ol/extent'
-import GeoJSON from 'ol/format/GeoJSON'
+import { extend } from 'ol/extent'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
-
-const GEOJSON = new GeoJSON()
+import { BoundingBox, getGeometryBoundingBox } from '../../../../../../libs/util/shared/src'
 
 @Injectable({
   providedIn: 'root',
 })
 export class MapUtilsService {
-  getRecordExtent(record: Partial<CatalogRecord>): Extent {
+  getRecordExtent(record: Partial<CatalogRecord>): BoundingBox {
     if (!('spatialExtents' in record) || record.spatialExtents.length === 0) {
       return null
     }
     // extend all the spatial extents into an including bbox
     return record.spatialExtents.reduce(
       (prev, curr) => {
-        if ('bbox' in curr) return extend(prev, curr.bbox)
+        if ('bbox' in curr) return extend(prev, curr.bbox) as BoundingBox
         else if ('geometry' in curr) {
-          const geom = GEOJSON.readGeometry(curr.geometry)
-          return extend(prev, geom.getExtent())
+          return extend(
+            prev,
+            getGeometryBoundingBox(curr.geometry)
+          ) as BoundingBox
         }
         return prev
       },

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -389,7 +389,9 @@ export class MapViewComponent implements AfterViewInit {
     ) {
       // FIXME: here we're assuming that the TMS serves vector tiles only; should be checked with ogc-client first
       return of({
-        url: link.url.toString().replace(/\/?$/, '/{z}/{x}/{y}.pbf'),
+        url: link.url
+          .toString()
+          .replace(/\/?$/, `/${link.name}/{z}/{x}/{y}.pbf`),
         type: 'xyz',
         tileFormat: 'application/vnd.mapbox-vector-tile',
         name: link.name,

package/src/libs/feature/router/src/lib/default/state/router.facade.ts

@@ -63,7 +63,8 @@ export class RouterFacade {
   }
 
   goToOrganization(organizationName: string) {
-    const path = `${this.routerService.getOrganizationPageRoute()}/${organizationName}`
+    const safeOrgName = organizationName.replace('/', '')
+    const path = `${this.routerService.getOrganizationPageRoute()}/${safeOrgName}`
     this.go({
       path,
       queryParamsHandling: '',

package/src/libs/feature/search/src/lib/state/reducer.ts

@@ -8,6 +8,7 @@ import {
   SortByField,
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { DEFAULT_PAGE_SIZE, FIELDS_SUMMARY } from '../constants'
+import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export const SEARCH_FEATURE_KEY = 'searchState'
@@ -55,7 +56,9 @@ export const initSearch = (): SearchStateSearch => {
     },
     params: {
       filters: {},
-      pageSize: DEFAULT_PAGE_SIZE,
+      pageSize: getOptionalSearchConfig()?.LIMIT
+        ? getOptionalSearchConfig().LIMIT
+        : DEFAULT_PAGE_SIZE,
       currentPage: 0,
       favoritesOnly: false,
       useSpatialFilter: true,

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -67,7 +67,10 @@
         [ngClass]="{
           '!bg-primary': currentlyActive,
         }"
-        >{{ link.accessServiceProtocol }}</span
+        translate
+        >record.metadata.api.accessServiceProtocol.{{
+          link.accessServiceProtocol
+        }}</span
       >
       <span
         *ngIf="link.accessServiceProtocol === 'GPFDL'"

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -13,8 +13,7 @@
       <span class="px-3">({{ linksCount }})</span>
     </div>
     <gn-ui-previous-next-buttons
-      class="md:block hidden"
-      *ngIf="_list?.pagesCount > 1"
+      *ngIf="(isMobile$ | async) === false && _list?.pagesCount > 1"
       [listComponent]="_list"
     ></gn-ui-previous-next-buttons>
   </div>
@@ -40,7 +39,7 @@
 
 <ng-container>
   <gn-ui-block-list
-    class="md:block hidden"
+    *ngIf="(isMobile$ | async) === false"
     #blockList
     (listChanges)="updateList($event)"
     containerClass="gap-4 pt-5 pb-7"
@@ -57,12 +56,14 @@
   </gn-ui-block-list>
 </ng-container>
 
-<div class="mb-5 md:hidden block" *ngFor="let link of filteredLinks">
-  <gn-ui-download-item
-    size="M"
-    [link]="link"
-    [color]="getLinkColor(link)"
-    [format]="getLinkFormat(link)"
-    [isFromApi]="isFromApi(link)"
-  ></gn-ui-download-item>
+<div class="mb-5" *ngFor="let link of filteredLinks">
+  <ng-container *ngIf="(isMobile$ | async) === true">
+    <gn-ui-download-item
+      size="M"
+      [link]="link"
+      [color]="getLinkColor(link)"
+      [format]="getLinkFormat(link)"
+      [isFromApi]="isFromApi(link)"
+    ></gn-ui-download-item>
+  </ng-container>
 </div>

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -6,7 +6,11 @@ import {
 } from '@angular/core'
 import { TranslateDirective, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
+import {
+  getBadgeColor,
+  getFileFormat,
+  getIsMobile,
+} from '../../../../../../libs/util/shared/src'
 import { DatasetDownloadDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
@@ -50,6 +54,8 @@ export class DownloadsListComponent {
     return this.filteredLinks?.length || 0
   }
 
+  isMobile$ = getIsMobile()
+
   activeFilterFormats: FilterFormat[] = ['all']
 
   updateList($event: BlockListComponent) {

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.html

@@ -7,7 +7,10 @@
     class="shrink-0 text-[0.75em]"
     name="matLocationSearchingOutline"
   ></ng-icon>
-  <span class="ml-1 hidden sm:inline-block shrink-0" *ngIf="showLabel" translate
+  <span
+    class="ml-1 inline-block shrink-0"
+    *ngIf="(isMobile$ | async) === false && showLabel"
+    translate
     >record.metadata.isGeographical</span
   >
 </div>

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.ts

@@ -4,7 +4,11 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
 import { CommonModule } from '@angular/common'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
+import {
+  getIsMobile,
+  LinkClassifierService,
+  LinkUsage,
+} from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-geo-data-badge',
@@ -24,6 +28,8 @@ export class GeoDataBadgeComponent {
   @Input() styling = 'default'
   @Input() record: CatalogRecord
 
+  isMobile$ = getIsMobile()
+
   isGeodata() {
     const links =
       'onlineResources' in this.record ? this.record.onlineResources : []

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -74,10 +74,6 @@ export class MetadataQualityComponent implements OnChanges {
     )
   }
 
-  hasGetCapabilities(url: string): boolean {
-    return url.toLowerCase().includes('capabilities')
-  }
-
   initialize() {
     if (!this.propsToValidate) {
       this.propsToValidate = getAllKeysValidator()

package/src/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.ts

@@ -6,16 +6,16 @@ import { matCheck, matWarningAmber } from '@ng-icons/material-icons/baseline'
 
 marker('record.metadata.quality.title.success')
 marker('record.metadata.quality.title.failed')
-marker('record.metadata.quality.description.success')
-marker('record.metadata.quality.description.failed')
-marker('record.metadata.quality.topic.success')
-marker('record.metadata.quality.topic.failed')
+marker('record.metadata.quality.abstract.success')
+marker('record.metadata.quality.abstract.failed')
+marker('record.metadata.quality.topics.success')
+marker('record.metadata.quality.topics.failed')
 marker('record.metadata.quality.keywords.success')
 marker('record.metadata.quality.keywords.failed')
 marker('record.metadata.quality.legalConstraints.success')
 marker('record.metadata.quality.legalConstraints.failed')
-marker('record.metadata.quality.contact.success')
-marker('record.metadata.quality.contact.failed')
+marker('record.metadata.quality.contacts.success')
+marker('record.metadata.quality.contacts.failed')
 marker('record.metadata.quality.updateFrequency.success')
 marker('record.metadata.quality.updateFrequency.failed')
 marker('record.metadata.quality.organisation.success')

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.html

@@ -1,5 +1,8 @@
 <div
   class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
+  *ngIf="
+    (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1
+  "
 >
   <div
     class="relative shrink-0"
@@ -17,7 +20,10 @@
       name="iconoirSearch"
     ></ng-icon>
   </div>
-  <div class="text-sm px-1 ml-auto hidden sm:inline">
+  <div
+    *ngIf="(isMobile$ | async) === false"
+    class="text-sm px-1 ml-auto inline"
+  >
     <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
       <span
         class="text-sm font-medium text-gray-900"

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.ts

@@ -6,7 +6,7 @@ import { DatasetFeatureCatalog } from '../../../../../../libs/common/domain/src/
 import { FormsModule } from '@angular/forms'
 import { of } from 'rxjs'
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'
-import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { createFuzzyFilter, getIsMobile } from '../../../../../../libs/util/shared/src'
 import { iconoirSearch } from '@ng-icons/iconoir'
 
 @Component({
@@ -39,6 +39,8 @@ export class SearchFeatureCatalogComponent {
     return this._featureCatalog
   }
 
+  isMobile$ = getIsMobile()
+
   @Output() filteredFeatureCatalogChange =
     new EventEmitter<DatasetFeatureCatalog>()
   filteredFeatureCatalog: DatasetFeatureCatalog

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

@@ -231,6 +231,7 @@ export function loadAppConfig() {
           'filter_geometry_url',
           'search_preset',
           'advanced_filters',
+          'limit',
         ],
         warnings,
         errors
@@ -257,6 +258,7 @@ export function loadAppConfig() {
                 filters: param.filters,
               })),
               ADVANCED_FILTERS: parsedSearchSection.advanced_filters,
+              LIMIT: parsedSearchSection.limit,
             } as SearchConfig)
 
       const parsedMetadataQualitySection = parseConfigSection(

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

@@ -124,7 +124,7 @@ export const wrongLanguageCodeConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
-metadata_language = "fra"
+metadata_language = "abc"
 
 [map]
 

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

@@ -60,6 +60,7 @@ export interface SearchConfig {
   FILTER_GEOMETRY_DATA?: string
   SEARCH_PRESET?: SearchPreset[]
   ADVANCED_FILTERS?: []
+  LIMIT?: number
 }
 
 export interface MetadataQualityConfig {

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

@@ -1,4 +1,4 @@
-import { LANGUAGE_CODES_ISO_3 } from './constants'
+import { toLang2 } from '../../../../../libs/util/i18n/src'
 
 const flatten = (
   base: string,
@@ -129,13 +129,10 @@ export function checkMetadataLanguage(
   parsedConfigSection: any,
   outWarnings: string[]
 ) {
-  if (
-    LANGUAGE_CODES_ISO_3.indexOf(
-      parsedConfigSection.metadata_language.toLowerCase()
-    ) === -1
-  ) {
+  const lang2 = toLang2(parsedConfigSection.metadata_language.toLowerCase())
+  if (lang2?.length !== 2) {
     outWarnings.push(
-      `In the [global] section: metadata_language = "${parsedConfigSection.metadata_language}" is not in ISO 639-2/B format`
+      `In the [global] section: metadata_language = "${parsedConfigSection.metadata_language}" is not a recognized ISO 639 language code`
     )
   }
   return parsedConfigSection

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

@@ -1,20 +1,32 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
+/**
+ * Taken from https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
+ * Note: some languages have multiple 3-char codes, like 'fre' and 'fra'; in that case, the one to be used
+ * in priority is the one defined last
+ */
 const LANG_3_TO_2_MAPPER = {
   eng: 'en',
+  nld: 'nl', // duplicate for "dut"
   dut: 'nl',
+  fra: 'fr', // duplicate for "fre"
   fre: 'fr',
+  deu: 'de', // duplicate for "ger"
   ger: 'de',
   kor: 'ko',
   spa: 'es',
+  ces: 'cs', // duplicate for "cze"
   cze: 'cs',
   cat: 'ca',
   fin: 'fi',
+  isl: 'is', // duplicate for "ice"
   ice: 'is',
   ita: 'it',
   por: 'pt',
   rus: 'ru',
+  zho: 'zh', // duplicate for "chi"
   chi: 'zh',
+  slk: 'sk', // duplicate for "slo"
   slo: 'sk',
   roh: 'rm',
   ara: 'ar',
@@ -25,10 +37,12 @@ const LANG_3_TO_2_MAPPER = {
   tur: 'tr',
   arm: 'hy',
   aze: 'az',
+  kat: 'ka', // duplicate for "geo"
   geo: 'ka',
   ukr: 'uk',
+  cym: 'cy', // duplicate for "wel"
   wel: 'cy',
-}
+} as const
 
 export const LANGUAGE_NAMES = {
   en: 'English',
@@ -58,26 +72,63 @@ export const LANGUAGE_NAMES = {
   ka: 'ქართული',
   uk: 'українська',
   wel: 'Cymraeg',
-}
+} as const
+
+export type LanguageCode3 = keyof typeof LANG_3_TO_2_MAPPER
+export type LanguageCode2 = (typeof LANG_3_TO_2_MAPPER)[LanguageCode3]
 
 export const LANG_2_TO_3_MAPPER = Object.entries(LANG_3_TO_2_MAPPER).reduce(
   (mapperObject, langEntry) => {
     return { ...mapperObject, [langEntry[1]]: langEntry[0] }
   },
   {}
-)
+) as Record<LanguageCode2, LanguageCode3>
 
-export function getLang3FromLang2(lang2: string): string {
-  return LANG_2_TO_3_MAPPER[lang2] ?? lang2
-}
+/**
+ * This can be:
+ * - an ISO 639-2 language code in 3 characters (e.g. 'eng', 'fre', 'ger')
+ * - an ISO 639-1 language code in 2 characters (e.g. 'en', 'fr', 'de')
+ * - a 2-character language code with locale (e.g. 'fr_FR', 'fr_CA')
+ */
+export type LanguageCodeLike = LanguageCode2 | LanguageCode3 | string
 
-export function getLang2FromLang3(lang3: string): string {
-  return LANG_3_TO_2_MAPPER[lang3] ?? lang3
+/**
+ * Converts a language code in any format to the ISO 639-2 format (3 characters)
+ * Returns the given string if the corresponding language code could not be recognized
+ */
+export function toLang3(lang: LanguageCodeLike): LanguageCode3 | string {
+  if (!lang) {
+    // also handle falsy values just in case
+    return lang
+  }
+  if (lang.length === 3) {
+    return LANG_2_TO_3_MAPPER[LANG_3_TO_2_MAPPER[lang.toLowerCase()]] ?? lang
+  }
+  const lang2 = lang.toLowerCase().substring(0, 2)
+  return LANG_2_TO_3_MAPPER[lang2] ?? lang
 }
 
-export function getLocalizedIndexKey(lang2: string): string {
-  const lang3 = getLang3FromLang2(lang2)
-  return lang3 ? `lang${lang3}` : null
+/**
+ * Converts a language code in any format to the ISO 639-1 format (2 characters)
+ * Returns the given string if the corresponding language code could not be recognized
+ */
+export function toLang2(lang: LanguageCodeLike): LanguageCode2 | string {
+  if (!lang) {
+    // also handle falsy values just in case
+    return lang
+  }
+  if (lang.length === 3) {
+    return LANG_3_TO_2_MAPPER[lang.toLowerCase()] ?? lang
+  }
+  const lang2 = lang.toLowerCase().substring(0, 2)
+  if (lang2 in LANG_2_TO_3_MAPPER) {
+    return lang2
+  }
+  if (lang.match(/[a-z]{2}_[A-Z]{2}/)) {
+    // remove locale code even if the language code is not known
+    return lang2
+  }
+  return lang
 }
 
 marker('language.en')

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

@@ -23,8 +23,8 @@ export const FORMATS = {
   excel: {
     extensions: [
       'excel',
-      'xls',
       'xlsx',
+      'xls',
       'ms-excel',
       'openxmlformats-officedocument',
     ],
@@ -190,6 +190,7 @@ export function isFormatInQueryParam(
   alias: string
 ): boolean {
   const queryParams = link.url.searchParams
+  if (!queryParams) return false
   for (const [key, value] of queryParams.entries()) {
     if (key === 'format' || key === 'f') {
       return value === alias

package/src/libs/util/shared/src/lib/record/quality-score.util.ts

@@ -11,15 +11,18 @@ const ValidatorMapper: TValidatorMapper = {
   title: (record) => !!record?.title,
   abstract: (record) => !!record?.abstract,
   keywords: (record) => (record?.keywords?.length ?? 0) > 0,
-  legalConstraints: (record) => (record?.legalConstraints?.length ?? 0) > 0,
-  contacts: (record) => !!record?.contacts?.[0]?.email,
-  updateFrequency: (record) => !!record?.updateFrequency,
+  legalConstraints: (record) =>
+    !!(
+      record?.legalConstraints?.length &&
+      record.legalConstraints.some((c) => c?.text?.trim().length > 0)
+    ),
+  contacts: (record) =>
+    !!record?.contacts?.[0]?.email &&
+    record.contacts[0].email !== 'missing@missing.com',
+  updateFrequency: (record) =>
+    !!record?.updateFrequency && record.updateFrequency !== 'unknown',
   topics: (record) => (record?.topics?.length ?? 0) > 0,
   organisation: (record) => !!record?.contacts?.[0]?.organization?.name,
-  capabilities: (record) =>
-    record?.onlineResources?.some((resource) =>
-      resource?.url?.href.toLowerCase().includes('capabilities')
-    ),
   source: (record) => !!record?.extras?.sourcesIdentifiers,
 } as const
 
@@ -40,12 +43,12 @@ function getMappersFromKind(kind: RecordKind) {
   ]
 
   switch (kind) {
-    case 'service':
-      kindKeys = ['capabilities']
-      break
     case 'reuse':
       kindKeys = ['topics', 'organisation', 'source']
       break
+    case 'service':
+      kindKeys = []
+      break
     case 'dataset':
     default:
       kindKeys = ['updateFrequency', 'topics', 'organisation']

package/src/libs/util/shared/src/lib/utils/geojson.ts

@@ -1,8 +1,11 @@
-import { Feature, FeatureCollection, Geometry } from 'geojson'
+import type { Feature, FeatureCollection, Geometry, Position } from 'geojson'
 
+/**
+ * @returns The geometry if available, otherwise null.
+ */
 export function getGeometryFromGeoJSON(
   data: FeatureCollection | Feature | Geometry
-): Geometry {
+): Geometry | null {
   if (data.type === 'FeatureCollection') {
     return data?.features?.[0]?.geometry || null
   }
@@ -24,3 +27,70 @@ export function getGeometryFromGeoJSON(
   }
   return null
 }
+
+// FIXME: this type should be more generic across the project
+export type BoundingBox = [number, number, number, number]
+
+export function getGeometryBoundingBox(geometry: Geometry): BoundingBox {
+  // use the bounding box if specified in the GeoJSON object
+  if (geometry.bbox) {
+    return geometry.bbox.length > 4
+      ? [geometry.bbox[0], geometry.bbox[1], geometry.bbox[3], geometry.bbox[4]]
+      : (geometry.bbox as BoundingBox)
+  }
+
+  const coordinatesReducer = (prev: BoundingBox, coords: Position) =>
+    [
+      Math.min(prev[0], coords[0]),
+      Math.min(prev[1], coords[1]),
+      Math.max(prev[2], coords[0]),
+      Math.max(prev[3], coords[1]),
+    ] as BoundingBox
+  const coordinatesArrayReducer = (
+    prev: BoundingBox,
+    coordsArray: Position[]
+  ) => {
+    const bbox = coordsArray.reduce(coordinatesReducer, emptyExtent)
+    return [
+      Math.min(prev[0], bbox[0]),
+      Math.min(prev[1], bbox[1]),
+      Math.max(prev[2], bbox[2]),
+      Math.max(prev[3], bbox[3]),
+    ] as BoundingBox
+  }
+  const emptyExtent = [Infinity, Infinity, -Infinity, -Infinity] as BoundingBox
+
+  switch (geometry.type) {
+    case 'MultiPolygon':
+      return geometry.coordinates.reduce((prev, polygonCoords) => {
+        const bbox = polygonCoords.reduce(coordinatesArrayReducer, emptyExtent)
+        return [
+          Math.min(prev[0], bbox[0]),
+          Math.min(prev[1], bbox[1]),
+          Math.max(prev[2], bbox[2]),
+          Math.max(prev[3], bbox[3]),
+        ] as BoundingBox
+      }, emptyExtent)
+    case 'GeometryCollection':
+      return geometry.geometries.reduce((prev, geom) => {
+        const bbox = getGeometryBoundingBox(geom)
+        return [
+          Math.min(prev[0], bbox[0]),
+          Math.min(prev[1], bbox[1]),
+          Math.max(prev[2], bbox[2]),
+          Math.max(prev[3], bbox[3]),
+        ] as BoundingBox
+      }, emptyExtent)
+    case 'Polygon':
+    case 'MultiLineString':
+      return geometry.coordinates.reduce(coordinatesArrayReducer, emptyExtent)
+    case 'LineString':
+    case 'MultiPoint':
+      return geometry.coordinates.reduce<BoundingBox>(
+        coordinatesReducer,
+        emptyExtent
+      )
+    case 'Point':
+      return coordinatesReducer(emptyExtent, geometry.coordinates)
+  }
+}

package/src/libs/util/shared/src/lib/utils/index.ts

@@ -4,6 +4,7 @@ export * from './format-fields'
 export * from './fuzzy-filter'
 export * from './geojson'
 export * from './image-resize'
+export * from './mobile-screen'
 export * from './no-duplicate-file-name'
 export * from './parse'
 export * from './remove-whitespace'

package/src/libs/util/shared/src/lib/utils/mobile-screen.ts

@@ -0,0 +1,14 @@
+import { fromEvent, startWith, map, shareReplay } from 'rxjs'
+
+/**
+ * This returns true when the screen size is under 768px, which is the mobile threshold.
+ */
+const MOBILE_MAX_WIDTH = 768
+
+export function getIsMobile() {
+  return fromEvent(window, 'resize').pipe(
+    startWith(window.innerWidth),
+    map(() => window.innerWidth < MOBILE_MAX_WIDTH),
+    shareReplay({ bufferSize: 1, refCount: true })
+  )
+}