-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
143 lines (138 loc) · 6.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PicaEditor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/codemirror/lib/codemirror.css">
<script src="//unpkg.com/vue@3.0.0"></script>
<script src="//unpkg.com/codemirror"></script>
<script src="//unpkg.com/codemirror/mode/xml/xml.js"></script>
<script>
if (location.hostname === "localhost") {
document.write('<link rel="stylesheet" href="../dist/pica-editor.css">')
document.write('<script src="../dist/pica-editor.js"><\/script>')
} else {
document.write('<link rel="stylesheet" href="https://unpkg.com/pica-editor/dist/pica-editor.css">')
document.write('<script src="https://unpkg.com/pica-editor"><\/script>')
}
</script>
<link rel="stylesheet" href="https://unpkg.com/pica-editor/dist/pica-editor.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="https://github.com/gbv/pica-editor" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a>
<h1>PicaEditor</h1>
<p>
<b>PicaEditor</b> is a web component to inspect and edit <a href="">PICA+ records</a>. It is based on <a href="https://v3.vuejs.org/">Vue.js 3</a> and <a href="https://codemirror.net/">CodeMirror</a>. Features include:
<ul>
<li>syntax highlighting</li>
<li>load records via unAPI</li>
<li>quick keyboard navigation (hit <kbd>↹ Tab</kbd> to jump through subfields)</li>
<li>validation and documentation (based on <a href="https://format.gbv.de/schema/avram/specification">Avram</a> schemas):
<ul>
<li>document field and subfields at the cursor</li>
<li>autocomplete (hit <kbd>↹ Tab</kbd> after the subfield indicator <code style="color: #a50;">$</code>) for define fields and subfields</li>
</li>
<li>detect and mark unknown fields and subfields</li>
</ul>
</ul>
</p>
<p>
Feature requests and bug reports
<a href="https://github.com/gbv/pica-editor/issues">are welcome</a> (in English or German)! Background information about PICA is available in the <a href=" https://pro4bib.github.io/pica/">German handbook on PICA data</a>.
</p>
<h2>Usage</h2>
<p>
See <a href="https://github.com/gbv/pica-editor#pica-editor">README</a>
for detailed instructions and documentation.
</p>
<div id="app">
<h2 id="examples">Examples</h2>
<p>
Using the following <code>databases</code>:
{{databases}}
</p>
<div class="example" title="Demo">
<pica-editor :databases="databases"
:unapi="'https://unapi.k10plus.de/'"
:xpn="'online'"
:avram="'https://format.k10plus.de/avram.pl?profile=k10plus'">
<pre>
003@ $0355973081
010@ $ager
011@ $a2001
019@ $aXA-DE$ZXXXX
021A $a@Zehn Jahre Pica in Niedersachsen und Deutschland$dSkizzen eines Erfolgs aus Anlass der 5. Verbundkonferenz des Gemeinsamen Bibliotheksverbundes der Länder Bremen, Hamburg, Mecklenburg-Vorpommern, Niedersachsen, Sachsen-Anhalt, Schleswig-Holstein und Thüringen, vom 11.-12. September, 2001 in Göttingen$h[Redaktion, Elmar Mittler]
029A $a@Gemeinsamer Bibliotheksverbund der Länder Bremen, Hamburg, Mecklenburg-Vorpommern, Niedersachsen, Sachsen-Anhalt, Schleswig-Holstein und Thüringen$bVerbundkonferenz$xGöttingen, Germany)
029F $a@Niedersächsische Staats- und Universitätsbibliothek Göttingen
033A $pGöttingen$nNiedersächsische Staats- und Universitätsbibliothek
034D $a181 p
034I $a21 cm
034M $aill
041A/01 $9181564734$VTsv1$7gnd/4366157-9$3211683000$aPICA$gBibliotheksinformationssystem
044A $aPICA Project$aCongresses
045A $aZ699.4.P23
045V $a10$a24,2
</pre>
</pica-editor>
</div>
<div class="example" title="Minimal usage">
<pica-editor>
<pre>003@ $0355973081</pre>
</pica-editor>
</div>
<div class="example" title="Add database with picabase to make PPN clickable">
<pica-editor :databases="[{picabase:'http://opac.k10plus.de/'}]">
<pre>003@ $0355973081</pre>
</pica-editor>
</div>
<div class="example" title="Add unapi and dbkey to enable record loading">
<pica-editor :databases="databases"
:dbkey="'opac-de-627'"
:unapi="'https://unapi.k10plus.de/'">
<pre>003@ $0355973081</pre>
</pica-editor>
</div>
<div class="example" title="Filter loaded records to level 0 fields">
<pica-editor :databases="databases"
:unapi="'https://unapi.k10plus.de/'"
:filter="rec => rec.filter(f => f[0][0]==='0')">
<pre>003@ $0355973081</pre>
</pica-editor>
</div>
<h2>PicaLoader</h2>
<p>
The PicaLoader component can also be used as independent form interface for loading PICA
records:
<pre class="html">
const { PicaLoader } = PicaEditor.components
</pre>
</p>
<div class="example">
<pica-loader :databases="databases"
:unapi="'https://unapi.k10plus.de/'" />
</div>
</div>
</body>
<script src="examples.js"></script>
<script>
const { PicaLoader } = PicaEditor.components
console.log(PicaEditor)
Vue.createApp({
components: { PicaEditor, PicaLoader },
data: () => {
return {
avram: "https://format.k10plus.de/avram.pl?profile=k10plus",
databases: [
{
dbkey: "opac-de-627",
picabase: "https://opac.k10plus.de/",
title: { de: "K10plus-Verbundkatalog" },
},
],
}
}
}).mount("#app")
</script>
</html>