@cu-mkp/editioncrafter 0.2.5 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +148 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
[](https://zenodo.org/badge/latestdoi/574677398)
|
|
2
|
+
|
|
3
|
+
# editioncrafter
|
|
4
|
+
NOW IN BETA: Software for the development of EditionCrafter, digital critical edition publication tool
|
|
5
|
+
|
|
6
|
+
EditionCrafter can be included in a React app or a HTML website. EditionCrafter should work on any content management system (CMS) where you can edit the HTML of your page. We have tested it on Hugo CMS, Astro Framework, and Scalar CMS. We also have an example Hugo website that you can fork. Please see that website's [README](https://github.com/cu-mkp/editioncrafter-project) for more information.
|
|
7
|
+
|
|
8
|
+
## EditionCrafter in a React App
|
|
9
|
+
|
|
10
|
+
If you are including EditionCrafter in a React app, add this module to your project:
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
npm add @cu-mkp/editioncrafter
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
The reference section below details all of the props of the EditionCrafter component. Here is an example of use:
|
|
17
|
+
|
|
18
|
+
```jsx
|
|
19
|
+
import EditionCrafter from '@cu-mkp/editioncrafter'
|
|
20
|
+
|
|
21
|
+
<EditionCrafter
|
|
22
|
+
documentName='BnF Ms. Fr. 640'
|
|
23
|
+
transcriptionTypes={{
|
|
24
|
+
tc: 'Diplomatic (FR)',
|
|
25
|
+
tcn: 'Normalized (FR)',
|
|
26
|
+
tl: 'Translation (EN)'
|
|
27
|
+
}}
|
|
28
|
+
iiifManifest='https://cu-mkp.github.io/editioncrafter-data/fr640_3r-3v-example/iiif/manifest.json'
|
|
29
|
+
/>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## EditionCrafter in an HTML Website
|
|
33
|
+
|
|
34
|
+
To include EditionCrafter in your HTML website, you need to create a `div` somewhere on your page, assign it an ID and then pass that ID to EditionCrafter. The reference section details the options for EditionCrafter, which are otherwise the same as the React component. Here is an example of use:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<div id="ec"></div>
|
|
38
|
+
|
|
39
|
+
<script type="text/javascript" src="https://www.unpkg.com/@cu-mkp/editioncrafter-umd" ></script>
|
|
40
|
+
|
|
41
|
+
<script type="text/javascript">
|
|
42
|
+
|
|
43
|
+
EditionCrafter.viewer({
|
|
44
|
+
id: 'ec',
|
|
45
|
+
documentName: 'BnF Ms. Fr. 640',
|
|
46
|
+
iiifManifest='https://cu-mkp.github.io/editioncrafter-data/fr640_3r-3v-example/iiif/manifest.json',
|
|
47
|
+
transcriptionTypes: {
|
|
48
|
+
tc: 'Diplomatic (FR)',
|
|
49
|
+
tcn: 'Normalized (FR)',
|
|
50
|
+
tl: 'Translation (EN)'
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
</script>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## EditionCrafter Viewer Reference
|
|
58
|
+
|
|
59
|
+
The following props are available to the `<EditionCrafter>` viewer component:
|
|
60
|
+
|
|
61
|
+
### documentInfo
|
|
62
|
+
|
|
63
|
+
Optional; used **only** in the case that you wish to load multiple documents in the same viewer for easy comparison.
|
|
64
|
+
|
|
65
|
+
An *object* whose keys are unique document IDs for each document you wish to include, and whose values are *objects* specifying the `documentName`, `transcriptionTypes`, and `iiifManifest` for each document as described below. For example:
|
|
66
|
+
```js
|
|
67
|
+
documentInfo={{
|
|
68
|
+
FHL_007548733_TAOS_BAPTISMS_BATCH_2: {
|
|
69
|
+
documentName: 'Taos Baptisms Batch 2',
|
|
70
|
+
transcriptionTypes: {
|
|
71
|
+
translation: 'Translation',
|
|
72
|
+
transcription: 'Transcription',
|
|
73
|
+
},
|
|
74
|
+
iiifManifest: 'https://cu-mkp.github.io/editioncrafter/taos-baptisms-example/iiif/manifest.json',
|
|
75
|
+
},
|
|
76
|
+
eng_415_145a: {
|
|
77
|
+
documentName: 'Eng 415-145a',
|
|
78
|
+
transcriptionTypes: {
|
|
79
|
+
'eng-415-145a': 'Transcription',
|
|
80
|
+
},
|
|
81
|
+
iiifManifest: 'https://cu-mkp.github.io/bic-editioncrafter-data/eng-415-145a/iiif/manifest.json',
|
|
82
|
+
}
|
|
83
|
+
}}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### documentName
|
|
87
|
+
|
|
88
|
+
Required. (Note: This is required even in the case that you have also included a `documentInfo` prop.)
|
|
89
|
+
|
|
90
|
+
A *string* giving the name of the document(s).
|
|
91
|
+
|
|
92
|
+
### iiifManifest
|
|
93
|
+
|
|
94
|
+
Required if no `documentInfo` prop specified.
|
|
95
|
+
|
|
96
|
+
The URL of the IIIF manifest for your document.
|
|
97
|
+
|
|
98
|
+
### threePanel
|
|
99
|
+
|
|
100
|
+
Optional. (Defaults to `false`.)
|
|
101
|
+
|
|
102
|
+
A *boolean* flag, which when set to `true` adds a third pane to the viewer. The third pane starts collapsed on the righthand side of the viewer and can be expanded by clicking and dragging the divider. This pane operates independently from the other throw; for example Book Mode is disabled in the third pane.
|
|
103
|
+
|
|
104
|
+
### transcriptionTypes
|
|
105
|
+
|
|
106
|
+
Required if no `documentInfo` prop specified.
|
|
107
|
+
|
|
108
|
+
An *object* providing a dictionary of the different transciption types provided in your TEI document. The keys of this object should correspond to the `xml:id` values of the different `<text>` layers of your document. For example, suppose you have the following text layers in your document:
|
|
109
|
+
|
|
110
|
+
```xml
|
|
111
|
+
<text xml:id="transcription">
|
|
112
|
+
|
|
113
|
+
... my transcription ...
|
|
114
|
+
|
|
115
|
+
</text>
|
|
116
|
+
|
|
117
|
+
<text xml:id="translation">
|
|
118
|
+
|
|
119
|
+
... my translation ...
|
|
120
|
+
|
|
121
|
+
</text>
|
|
122
|
+
```
|
|
123
|
+
In this case the `transcriptionTypes` object might have the form:
|
|
124
|
+
|
|
125
|
+
```js
|
|
126
|
+
transcriptionTypes = {
|
|
127
|
+
transcription: 'Transcription',
|
|
128
|
+
translation: 'Translation'
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
The value for each transcription type should be a string that will be displayed in the selection menu within the viewer. These need not correspond precisely to the keys. For instance in the example above, you could add more information to the display strings, e.g. `'Transcription (FR)'` and `Translation (EN)`.
|
|
132
|
+
|
|
133
|
+
## Structure of this repository
|
|
134
|
+
|
|
135
|
+
There are two apps in this repo. `editioncrafter` is a React component, while `editioncrafter-umd` wraps the React component into a UMD module for use on non-React pages.
|
|
136
|
+
|
|
137
|
+
## Storybook
|
|
138
|
+
|
|
139
|
+
For local development, you can use the Storybook component.
|
|
140
|
+
|
|
141
|
+
Setup for Storybook was kind of rushed and the process could still be made simpler.
|
|
142
|
+
|
|
143
|
+
1. Clone the [`edition-crafter-cli`](https://github.com/cu-mkp/editioncrafter-cli) repository if you haven't already, do the usual `npm install`, and run `npm start` to launch a server with a test document.
|
|
144
|
+
2. Back here in `editioncrafter`, run `npm run storybook` to launch Storybook. You'll see a component called EditionCrafter in the sidebar, and it should be all set to try.
|
|
145
|
+
|
|
146
|
+
By default, Storybook doesn't display the hash routing params used by `react-router`. You can use the "Open canvas in new tab" button on the top right to open the component in its own tab:
|
|
147
|
+
|
|
148
|
+
|