manager-ui-configuration

A JavaScript library that provides generic, declarative modules for configuring git-clerk as part of the Manager UI. It allows you to define a hierarchical file structure of STAC catalogs and collections, and automatically generates JSON schemas, automation wizards, custom editor interfaces, dynamic enums, and i18n configuration for the git-clerk editor.

Overview

The library's main entry point (git-clerk-config.mjs) accepts a single configuration object and initializes five subsystems that git-clerk consumes at runtime:

Module	Purpose
Schema Map	Maps file paths to JSON schemas so git-clerk knows which schema to use for each catalog.json / collection.json
Automation	Generates step-by-step wizards that bootstrap new catalogs or collections with the correct folder structure and parent links
Custom Editor Interfaces	Registers specialized UI editors (select dropdowns, date-range pickers, auto-updating strings) inside the JSON editor
Generate Enums	Dynamically populates enum values in schemas by reading catalog links at runtime
i18n	Merges user-provided internationalization messages with sensible defaults

Getting Started

Prerequisites

• A running git-clerk instance
• A web server capable of serving ES modules (the dev setup uses live-server)

Installation

npm install

Development Server

npm run serve

This starts live-server on port 8080 with CORS enabled. The example configuration at example/config.js imports the library from http://localhost:8080/git-clerk-config.mjs.

Usage

Import and call GitClerkConfiguration with your config object:

import GitClerkConfiguration from "./git-clerk-config.mjs";

GitClerkConfiguration({
  fileStructure: {
    /* ... */
  },
  defaultSchemaDetails: {
    /* ... */
  },
  editors: {
    /* ... */
  },
  i18n: {
    /* ... */
  },
  automationDetails: {
    /* ... */
  },
  slugify: (str) => {
    /* ... */
  },
});

The function registers the resulting config on globalThis.gitClerkConfig (and window.GitClerkConfiguration) so git-clerk can consume it.

Configuration Reference

fileStructure

Defines the hierarchical catalog/collection tree. Placeholder segments like <...> eg - <title>, <date>, <id>, <lorem-ipsum> etc become user-input fields in automation wizards.

{
  type: "catalog",
  rootPath: "master",
  children: {
    atmosphere: {
      type: "catalog",
      title: "Atmosphere",
      children: {
        "<atmosphere-topic>": {
          type: "collection",
          title: "Atmosphere Collection",
        },
      },
    },
  },
}

• type - "catalog" or "collection"
• rootPath - Root directory in the repository
• title - Human-readable name used in automation wizard titles
• children - Nested nodes; keys with this pattern <...> are treated as dynamic path placeholders

defaultSchemaDetails

Default schema configuration applied to every generated schema entry.

{
  catalog_schema: "https://example.com/catalog.json",     // JSON Schema URL for catalogs
  collection_schema: "https://example.com/collection.json", // JSON Schema URL for collections
  preview: "/pangeo.html",  // Preview page path
  content: {},               // Default content
  jsonform: {                // JSON Editor form options
    propertiesToggle: true,
    options: {
      display_required_only: true,
      disable_properties: false,
    },
  },
}

Important: catalog_schema and collection_schema must point to JSON Schema files that use absolute URLs for their $ref values (e.g. "$ref": "https://example.com/definitions.json"), not relative paths. The JSON Editor resolves $ref via Ajax at runtime, and relative paths will fail to resolve in the git-clerk context.

editors

Custom editor interface definitions. Each key becomes the editor ID.

{
  temporalInterval: {
    type: "array",                     // Schema type: "array", "string", or "object"
    format: "temporal-interval",       // Custom format identifier
    func: "TemporalIntervalEditor",   // Editor class name (string) or class reference
    operation: true,                   // Enable bidirectional link operations (optional)
  },
}

Important: The format value defined in each editor config (e.g. "temporal-interval") must be assigned to the corresponding property inside the JSON Schema. The JSON Editor uses the format field to resolve which custom editor to render. If the schema property does not have a matching format, the custom editor will not be used.

For example, if you register an editor with format: "temporal-interval", your schema must include:

{
  "temporal_extent": {
    "type": "array",
    "format": "temporal-interval"
  }
}

Built-in editors:

Editor	Description
SelectEditor	Custom select/multi-select dropdown that populates from catalog links and manages bidirectional relationships
TemporalIntervalEditor	Date-range picker with start/end date inputs, outputs ISO 8601 timestamps
UpdateStringEditor	String editor that auto-populates the updated field with the current ISO timestamp

automationDetails

Controls how automation wizards generate links and initial file content.

{
  linkHref: (parentPath, fileName) =>
    `https://raw.githubusercontent.com/org/repo/master/${parentPath}/${fileName}`,
  initValue: (input) => ({
    id: slugify(input.title),
    title: input.title,
    created: new Date().toISOString().replace(/\.[0-9]{3}/, ""),
  }),
}

• linkHref(parentPath, fileName) - Generates the href for the parent catalog's link entry
• initValue(input) - Returns the initial JSON content for newly created files

i18n

Internationalization config merged with defaults (locale: "en", fallbackLocale: "en").

{
  locale: "en",
  fallbackLocale: "en",
  messages: {
    en: {
      buttonText: {
        automation: "Wizard",
      },
    },
  },
}

slugify

Optional custom slugification function. Defaults to the built-in helpers.slugify which lowercases and replaces spaces with hyphens. You can provide your own slugify system.

schema

Optional. Provide a pre-built schema array directly instead of generating from fileStructure. Each entry should have at least path and url properties.

customAutomation

Optional. Additional automation entries appended after the auto-generated ones.

generateEnums

Set to true to enable runtime enum generation from catalog links.

Example

The example/ folder contains a working reference configuration based on the Pangeo datastore that can be used as a starting point:

• example/config.js - Full configuration demonstrating fileStructure with nested catalogs and collections (atmosphere, climate, hydro, ocean), a custom TemporalIntervalEditor, i18n overrides, automation details with linkHref/initValue, and remote schema URLs. This is a good starting point for building your own config.
• example/pangeo.html - A preview page that embeds STAC Browser in an iframe and communicates with git-clerk via postMessage to display collection previews.

To run the example, start the dev server (npm run serve) and point your git-clerk instance to load example/config.js.

Dependencies

Runtime (CDN):

• @json-editor/json-editor - JSON Schema-based form editor
• lodash-es - merge for deep object merging (i18n)

Dev:

• @eox/eslint-config - ESLint configuration
• live-server - Development server

License

MIT