Configuration

Madoc uses configuration extensively across the application. It's relatively simple to add new configuration options to the application.

Adding new project config

Add the desired type to the Type definition and add your type:

// services/madoc-ts/src/types/project-configuration.ts
 
export type ProjectConfiguration = {
+ defaultEditorOrientation: 'vertical' | 'horizontal';
  allowCollectionNavigation: boolean;
  allowManifestNavigation: boolean;
  allowCanvasNavigation: boolean;
};

Add a default value in the base madoc configuration. This will be applied to sites that may not have saved your new configuration value.

// services/madoc-ts/config.json

{
  "cookieName": "madoc",
  "tokenExpires": 3600,
  "defaultSiteConfiguration": {
+   "defaultEditorOrientation": "horizontal",
    "allowCollectionNavigation": true,
    "allowManifestNavigation": true,
    "allowCanvasNavigation": true,
...

Add the configuration to the capture model for editing config. You can see examples of the various form types in this file.

     type: 'checkbox-field',
     inlineLabel: 'Skip automatically processing OCR during IIIF manifest import',
   },
+  defaultEditorOrientation: {
+    label: 'Default editor orientation',
+    description:
+      'When a user makes a contribution they will see the form either to the right of (horizontal) or below the image (vertical). The user can still change this if they want.',
+    type: 'dropdown-field',
+    options: [
+      { value: 'vertical', text: 'Vertical (to the right)' },
+      { value: 'horizontal', text: 'Horizontal (under) ' },
+    ],
+  },
 };

Now you can use your configuration value. If you want to use it in a React component you can use the following hook:

import { useSiteConfiguration } from '../features/SiteConfigurationContext';
 
const MyComponent: React.FC = () => {
  const config = useConfiguration();
 
  const ourValue = config.project.defaultEditorOrientation; // we just added.
 
  // ...
}

The configuration for the whole site is available to any component. Depending on where you component is rendered you may be given overrides for that particular context (for example: projects)

Capture Model Fields Export Formats