Skip to content

Commit

Permalink
Refine configuration and content sections. (#16)
Browse files Browse the repository at this point in the history 
* Refine configuration and content sections.

* Add tooltip component, use for defaultTheme enum.

---------

Co-authored-by: Mark Baggett <[email protected]>
  • Loading branch information
@mathewjordan @markpbaggett
mathewjordan and markpbaggett authored Nov 30, 2023
1 parent 1bb225e commit c98d2ec
Show file tree
Hide file tree
Showing 15 changed files with 554 additions and 113 deletions.
35 changes: 35 additions & 0 deletions components/Shared/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Flex, IconButton, Tooltip } from "@radix-ui/themes";

import { InfoCircledIcon } from "@radix-ui/react-icons";

interface SharedTooltipProps {
children: React.ReactNode;
content: string;
}

export const SharedTooltip: React.FC<SharedTooltipProps> = ({
content,
children,
}) => {
return (
<Flex align="center" gap="2">
{children}
<Tooltip content={content}>
<IconButton
radius="full"
style={{
background: "none",
color: "var(--gray-12)",
padding: "0 !important",
height: "1em",
width: "1em",
}}
>
<InfoCircledIcon />
</IconButton>
</Tooltip>
</Flex>
);
};

export default SharedTooltip;
112 changes: 112 additions & 0 deletions pages/configuration.mdx
View file
Original file line number Diff line number Diff line change
@@ -1 +1,113 @@
import { Callout, Cards, Card } from "nextra/components";

# Configuration

The Canopy IIIF build process will read from a custom configuration file at config/canopy.json if it exists. If this configuration file does not exist, the default configuration `config/.default/canopy.default.json` will be used as a fallback for demonstration purposes.

<Callout type="info">
See the **[Create a Project guide](/get-started)** for a step-by-step guide
illustrating the setup of Canopy IIIF project.
</Callout>

## Configuration Options

Canopy IIIF is a highly configurable application that can be tailored to the needs of a project. Canopy configurations fallback to default options if not customized.

<Cards>
<Card title="Basic" href="/configuration#basic-configuration" />
<Card title="Search" href="/configuration/search" />
<Card title="Locale" href="/configuration/locale" />
<Card title="Map" href="/configuration/map" />
<Card title="Theme" href="/configuration/theme" />
</Cards>

## Basic Configuration

A custom Canopy configuration file can be created with the following steps:

1. Find your `config/` directory
2. Copy `canopy.sample.json` to `canopy.json`
3. Make updates to both the **prod** and **dev** configurations

## Properties

| Property | Type | Description |
| ------------ | --------------- | -------------------------------------- |
| `collection` | `string` | IIIF Collection URI |
| `label` | `label ` | IIIF Presentation 3.0 label property |
| `summary` | `summary` | IIIF Presentation 3.0 summary property |
| `featured` | `Array<string>` | Array of IIIF Manifest URIs |
| `metadata` | `Array<string>` | Array of `metadata` labels |

### collection

The `collection` property is required and must be the id of the referenced source IIIF Collection manifest. Collections referencing other Collections in their `items` property are not currently supported.

```json
"collection": "https://iiif.bodleian.ox.ac.uk/iiif/collection/hobhouse"
```

### label _and_ summary

The Canopy IIIF site **title** and **description** are respectively the `label` and `summary` IIIF Presentation API properties of the set IIIF Collection resource. You can optionally override this by providing a valid Presentation 3.0 [label](https://iiif.io/api/presentation/3.0/#label) and/or [summary](https://iiif.io/api/presentation/3.0/#summary) property. These values are transformed to meta elements in the `<head>` of the HTML document.

```json
"label": { "none": ["Hobhouse"] },
"summary": { "none": ["Manuscripts from the archive of Emily Hobhouse."] }
```

### featured

You can inform Canopy IIIF of featured Manifests by providing an array of ids. These must be within the referenced collection resource and the Manifest URIs must be an exact match. These Manifests will render throughout the interface in featured components.

**Warning:** In the current pre-release, featured Manifests must have an Image body on the first Canvas.

```json
"featured": [
"https://iiif.bodleian.ox.ac.uk/iiif/manifest/8da97e8c-4e12-457d-aad8-3327b3aec183.json",
"https://iiif.bodleian.ox.ac.uk/iiif/manifest/2968d5c7-3718-44ef-92ea-ee4cc58cc677.json"
]
```

### metadata

Curating Metadata allows implementers of Canopy IIIF to select metadata fields that provide additional access points to end users. The fields can be specified by listing the labels of each metadata property found in the `metadata` property of the manifest. Metadata labels that are curated will be automatically included as featured elements on the homepage, the metadata page, linking from works, and as facets on the search page. An optimal case is a label common to all or most manifests with some in diversity of values across those resources.

**Note:** Metadata labels are not yet BCP 47 language code aware; however, aggregation processes will make exact string comparisons regardless of language code.

```json
"metadata": ["Extent", "Title", "Date Statement", "Language"]
```

## Production and Development

Both the `prod` and `dev` environments have a configuration. These configurations can match each other; however in some cases, development speed can be aided by targeting a smaller IIIF Collection id as a fixture.

## Example Configuration

The following is an example configuration for the [Bodleian Libraries' Emily Hobhouse collection](https://archives.bodleian.ox.ac.uk/repositories/2/resources/2830). Two Manifests are featured and four metadata labels are curated.

```json copy filename="config/canopy.json"
{
"prod": {
"label": { "none": ["Hobhouse"] },
"summary": { "none": ["Manuscripts from the archive of Emily Hobhouse."] },
"collection": "https://iiif.bodleian.ox.ac.uk/iiif/collection/hobhouse",
"featured": [
"https://iiif.bodleian.ox.ac.uk/iiif/manifest/8da97e8c-4e12-457d-aad8-3327b3aec183.json",
"https://iiif.bodleian.ox.ac.uk/iiif/manifest/2968d5c7-3718-44ef-92ea-ee4cc58cc677.json"
],
"metadata": ["Extent", "Title", "Date Statement", "Language"]
},
"dev": {
"label": { "none": ["Hobhouse"] },
"summary": { "none": ["Manuscripts from the archive of Emily Hobhouse."] },
"collection": "https://iiif.bodleian.ox.ac.uk/iiif/collection/hobhouse",
"featured": [
"https://iiif.bodleian.ox.ac.uk/iiif/manifest/8da97e8c-4e12-457d-aad8-3327b3aec183.json",
"https://iiif.bodleian.ox.ac.uk/iiif/manifest/2968d5c7-3718-44ef-92ea-ee4cc58cc677.json"
],
"metadata": ["Extent", "Title", "Date Statement", "Language"]
}
}
```
1 change: 0 additions & 1 deletion pages/configuration/_meta.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,5 @@
"breadcrumb": true
}
},
"basic": "Basic",
"search": "Search"
}
89 changes: 0 additions & 89 deletions pages/configuration/basic.mdx
View file

This file was deleted.

12 changes: 11 additions & 1 deletion pages/configuration/locale.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
# Locale Preferences

Canopy IIIF supports locale preferences for user interface language. The default configuration language is English; however, additional languages can be defined. For more information, [see Locale](#locale).
Canopy IIIF supports locale preferences for user interface language.

## Properties

For each Locale, the following properties are required:

| Property | Type | Description |
| :------- | :------- | :------------------------------------- |
| `config` | `string` | Path to the locale configuration file. |
| `label` | `string` | Label for the locale. |
| `lang` | `string` | BCP 47 language code for the locale. |

```json copy
"locales": [
Expand Down
82 changes: 77 additions & 5 deletions pages/configuration/map.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,63 @@
### Map
import { Callout } from "nextra/components";

A map route can be enabled to provide geographic discovery of works via `config/options.json`. This feature builds markers off of geographic point features found in [navPlace](https://iiif.io/api/extension/navplace/) properties at the Manifest level. To enable this option, set the option to `true`.
# Map

**Note:** Currently, only `navPlace` properties found at the Manifest level are displayed. Also, onlyFeatures of type: "Point" are displayed.
A map route can be enabled to provide geographic discovery of works via `config/options.json`. This feature builds markers off of geographic point features found in [navPlace](https://iiif.io/api/extension/navplace/) properties at the Manifest level. For implementation, Canopy IIIF uses [Leaflet](https://leafletjs.com/) to render the map.

**Note:** Currently, only `navPlace` properties found at the Manifest level are displayed. Also, only Features of `type` **Point** are displayed.

<Callout type="info">
See the **[Enable a Map with navPlace](/enable-a-map-with-navPlace)** for a
step-by-step guide.
</Callout>

## Properties

| Property | Type | Description |
| --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
| `enabled` | `boolean` | Boolean value to enable or disable the `/map` route. The default value is `false`. |
| `defaultBounds` | `Array` | The `defaultBounds` property defines the coordinates of the initial view of the map. |
| `icon` | `Object` | The `icon` property defines the icon used to represent each marker on the map. |
| `tileLayers` | `Array` | The map's tile layers are also configured here, giving users the ability to choose and customize layers for their project. |

### enabled

Boolean value to enable or disable the `/map` route. The default value is `false`. To enable this option, set the option to `true`.

```json
"map": { "enabled": true }
"enabled": true
```

The map's tile layers are also configured here, giving users the ability to choose and customize layers for their project. Additional services, such as MapBox, can be easily integrated following this pattern. Each tile layer defined here will appear as an option in the layer control of the map. The name property defines the text next to the radio button. The url property is the link to the tile layer. Finally, the attribution property defines the text that appears at the bottom of the map in case the tile layer requires any specific attribution on use. The first tile layer in the array will be used as the default map.
### defaultBounds

The `defaultBounds` property defines the coordinates of the initial view of the map. This property is an array of
arrays of longitude and latitude coordinates. Unless there are no markers found within the manifests of the
overarching collection, this property will be ignored.

```json
"defaultBounds": [[51.505, -0.09]]
```

### icon

The `icon` property defines the icon used to represent each marker on the map. The `iconUrl` property is the path to
the image file used as the icon. The `iconSize` property is an array of the width and height of the icon in pixels.
The `iconAnchor` property is an array of the x and y coordinates of the icon's anchor point in pixels. These values
are used to position the icon relative to its marker's coordinates.

```json copy
"icon": {
"iconUrl": "images/marker-icon.png",
"iconSize": [24, 36],
"iconAnchor": [12, 36]
}
```

### tileLayers

The map's tile layers are also configured here, giving users the ability to choose and customize layers for their project. Additional services, such as MapBox, can be easily integrated following this pattern. Each tile layer defined here will appear as an option in the layer control of the map. The name property defines the text next to the radio button. The url property is the link to the tile layer. Finally, the attribution property defines the text that appears at the bottom of the map in case the tile layer requires any specific attribution on use. The first tile layer in the array will be used as the default map.

```json copy
"tileLayers": [
{
"name": "OpenStreetMap",
Expand All @@ -24,3 +71,28 @@ The map's tile layers are also configured here, giving users the ability to choo
}
]
```

## Example Map Configuration

Example of the `map` configuration in `config/options.json` file with a map enabled:

```json copy filename="config/options.json"
{
"map": {
"defaultBounds": [[51.505, -0.09]],
"enabled": true,
"icon": {
"iconUrl": "images/marker-icon.png",
"iconSize": [24, 36],
"iconAnchor": [12, 36]
},
"tileLayers": [
{
"name": "OpenStreetMap",
"url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
"attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
}
]
}
}
```
Loading

0 comments on commit c98d2ec

Please sign in to comment.