1<!doctype html> 2<html class="no-js" lang=""> 3 4<head> 5
5<script src="https://assets.adobedtm.com/f94f5647937d/05ab40b58039/launch-60d4ca033ceb.min.js" async></script>
5 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Bibliographic Framework Initiative Technical Site - BIBFRAME.org</title> 9 <meta name="description" content=""> 10 11 <meta property="og:title" content="bibframe.org"> 12 13 <meta property="og:url" content="bibframe.org"> 14 <meta property="og:image" content=""> 15 <meta property="og:image:alt" content=""> 16 17 <link rel="icon" href="/favicon.ico" sizes="any"> 18 19 <style> 20 /* Light mode - ensure white background */ 21 .has-background-white-ter { 22 background-color: #f5f5f5 !important; 23 } 24 25 @media (prefers-color-scheme: dark) { 26 .has-background-white-ter { 27 background-color: #23262e !important; 28 border-bottom: 1px solid #333333; 29 } 30 31 nav.logo-hero-container { 32 background-color: #23262e !important; 33 } 34 35 .logo-hero-container p.title { 36 color: #f0f0f0 !important; 37 } 38 39 .logo-hero-container p.subtitle { 40 color: #c0c0c0 !important; 41 } 42 43 .logo img { 44 filter: brightness(0.9) contrast(0.85); 45 opacity: 0.8; 46 } 47 } 48 49 .logo-hero-container{ 50 margin-top: 2em; 51 padding-top: 1em; 52 padding-bottom: 1em; 53 } 54 .logo-hero{ 55 display:flex; 56 57 } 58 .logo{ 59 flex-shrink:1; 60 61 } 62 .logo img{ 63 width: 180px; 64 height: auto; 65 } 66 .title{ 67 flex:1; 68 } 69 70 main{ 71 padding-top: 2em; 72 } 73 74 h3{ 75 margin-bottom: 0.5em !important; 76 } 77 78 h3 span { 79 vertical-align: super; 80 font-size: 0.6em; 81 color: #dc143c; 82 margin-left: 0.3em; 83 font-weight: bold; 84 } 85 .small-new { 86 vertical-align: super; 87 font-size: 0.8em; 88 color: #dc143c; 89 margin-left: 0.3em; 90 font-weight: bold; 91 } 92 /* Fix columns width to stay within container */ 93 #search-results.columns { 94 margin-left: 0; 95 margin-right: 0; 96 } 97 98 #search-results .column:first-child { 99 border-right: 1px solid #e0e0e0; 100 padding-right: 1.5rem; 101 } 102 103 #search-results .column:last-child { 104 padding-left: 1.5rem; 105 } 106 107 .title-result:hover, .contributor-box:hover { 108 background-color: #f5f5f5 !important; 109 transform: translateY(-2px); 110 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; 111 transition: all 0.2s ease; 112 } 113 114 .contributor-box { 115 transition: all 0.2s ease; 116 cursor: pointer; 117 } 118 119 .slide-transition { 120 animation: slideInOut 0.4s ease-in-out; 121 } 122 123 @keyframes slideInOut { 124 0% { 125 transform: translateX(0); 126 opacity: 1; 127 } 128 50% { 129 transform: translateX(20px); 130 opacity: 0; 131 } 132 100% { 133 transform: translateX(0); 134 opacity: 1; 135 } 136 } 137 138 .working-message { 139 padding: 2rem; 140 text-align: center; 141 color: #3273dc; 142 font-size: 1.2rem; 143 font-style: italic; 144 } 145 146 /* Non-text work cards with different background */ 147 .non-text-work { 148 background-color: #fef8f0 !important; 149 } 150 151 /* Contributor image fade-in animation */ 152 .contributor-image img { 153 transition: opacity 0.4s ease-in-out; 154 } 155 156 .contributor-image img.loaded { 157 opacity: 1 !important; 158 } 159 160 @keyframes fadeIn { 161 from { 162 opacity: 0; 163 } 164 to { 165 opacity: 1; 166 } 167 } 168 169 /* Progress bar styles */ 170 .progress-container { 171 padding: 1rem; 172 background: #f5f5f5; 173 border-radius: 8px; 174 margin-bottom: 1rem; 175 } 176 177 .progress { 178 height: 8px; 179 background-color: #e0e0e0; 180 border-radius: 4px; 181 overflow: hidden; 182 margin-bottom: 0.5rem; 183 } 184 185 .progress-bar { 186 height: 100%; 187 background: linear-gradient(90deg, #3273dc 0%, #2366d1 100%); 188 border-radius: 4px; 189 transition: width 0.3s ease; 190 } 191 192 .progress-text { 193 font-size: 0.875rem; 194 color: #666; 195 text-align: center; 196 } 197 198 @media (prefers-color-scheme: dark) { 199 #search-results .column:first-child { 200 border-right-color: #5a5a5a; 201 } 202
203 .title-result:hover, .contributor-box:hover { 204 background-color: #4a4a4a !important; 205 } 206 207 .working-message { 208 color: #7db8f1; 209 } 210 211 .progress-container { 212 background: #2a2a2a; 213 } 214 215 .progress { 216 background-color: #3a3a3a; 217 } 218 219 .progress-text { 220 color: #aaa; 221 } 222 223 /* Brighten cards in dark mode */ 224 .box { 225 background-color: #3a3a3a !important; 226 border: 1px solid #525252 !important; 227 } 228 229 /* Brighten text in dark mode */ 230 .has-text-weight-semibold { 231 color: #e8e8e8 !important; 232 } 233 234 .has-text-grey { 235 color: #d5d5d5 !important; 236 } 237 238 .has-text-grey-light { 239 color: #9a9a9a !important; 240 } 241 242 .is-size-6.has-text-dark { 243 color: #d0d0d0 !important; 244 } 245 246 .has-text-primary { 247 color: #6fa8dc !important; 248 } 249 250 /* Keep contributions count greenish */ 251 .is-size-7.has-text-primary.has-text-weight-semibold { 252 color: #48c78e !important; 253 } 254 255 /* Brighten contributor cards */ 256 .contributor-box { 257 background-color: #3a3a3a !important; 258 border-color: #525252 !important; 259 } 260 261 .contributor-box .has-text-weight-semibold { 262 color: #e8e8e8 !important; 263 } 264 265 /* Fix Wikidata text in contributor cards */ 266 .wikidata-info .has-text-dark { 267 color: #b0b0b0 !important; 268 } 269 270 /* Input field in dark mode */ 271 .input { 272 background-color: #3a3a3a !important; 273 border-color: #525252 !important; 274 color: #e8e8e8 !important; 275 } 276 277 .input::placeholder { 278 color: #9a9a9a !important; 279 } 280 281 /* Non-text work cards in dark mode */ 282 .non-text-work { 283 background-color: #2e3038 !important; 284 } 285 } 286 287 /* Shimmer loading animation */ 288 .shimmer-container { 289 padding: 1rem; 290 } 291 292 .shimmer { 293 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 294 background-size: 200% 100%; 295 animation: shimmer 1.5s infinite; 296 border-radius: 4px; 297 } 298 299 .shimmer-title { 300 height: 32px; 301 width: 60%; 302 margin-bottom: 1.5rem; 303 } 304 305 .shimmer-line { 306 height: 14px; 307 margin-bottom: 0.75rem; 308 } 309 310 .shimmer-line.short { 311 width: 40%; 312 } 313 314 .shimmer-line.medium { 315 width: 70%; 316 } 317 318 .shimmer-line.long { 319 width: 90%; 320 } 321 322 .shimmer-button { 323 height: 36px; 324 width: 150px; 325 margin-right: 0.75rem; 326 display: inline-block; 327 } 328 329 .shimmer-box { 330 height: 200px; 331 margin-bottom: 1rem; 332 } 333 334 @keyframes shimmer { 335 0% { 336 background-position: -200% 0; 337 } 338 100% { 339 background-position: 200% 0; 340 } 341 } 342 343 @media (prefers-color-scheme: dark) { 344 .shimmer { 345 background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%); 346 } 347 } 348 349 </style> 350 351
351<script type="module" crossorigin src="/assets/index-TJJYi2Nj.js"></script>
351 352 <link rel="stylesheet" crossorigin href="/assets/index-DoJ5lpHG.css"> 353</head> 354 355<body> 356 357 358<nav class="has-background-white-ter logo-hero-container"> 359 360 <div class="container"> 361 <section class="hero"> 362 <div class="logo-hero"> 363 <div class="logo"><img src="/bibframe.jpg"/></div> 364 <div class="title"> 365 <div class="hero-body"> 366 <p class="title">BIBFRAME.org</p> 367 <p class="subtitle">Demonstration of BIBFRAME Tools</p> 368 </div> 369 370 </div> 371 </div> 372 </section> 373 </div> 374 375</nav> 376 377 378<main class="container" style="margin-bottom: 6rem;"> 379 380 <h3 class="title is-3">Edit a BIBFRAME Resource</h3> 381 <p style="padding-bottom: 1em;">Edit a monograph BIBFRAME resource from id.loc.gov. Enter a Title or Author name below:</p> 382 <div class="field has-addons"> 383 <div class="control is-expanded"> 384 <input class="input" type="text" name="search" id="search" placeholder="Search for a title or author..."> 385 </div> 386 <div class="control"> 387 388 </div> 389 </div> 390 391 392 393 <h3 class="title is-3" style="margin-top: 2em;">Documentation</h3> 394 <div class="content"> 395 <ul> 396 <li><p><a class="has-text-weight-semibold" href="https://bibframe.org/primer">BIBFRAME Primer</a><span class="small-new">NEW!</span> -- Reference guide for those who would like to implement the BIBFRAME model and vocabulary.</p></li> 397 <li><p><a class="has-text-weight-semibold" href="https://id.loc.gov/ontologies/bibframe.html">Ontology</a> -- The BIBFRAME ontology with examples. <a href="https://github.com/lcnetdev/bibframe-ontology">[source code]</a></p></li> 398 </ul> 399 </div> 400 401 402 <h3 class="title is-3">Marva Editor</h3> 403 <div class="content"> 404 <p>Marva is a BIBFRAME editor in development by the Library of Congress. This is a demonstration site for viewing the editor functionality. There are two versions online you can experiment with:</p> 405 <ul> 406 <li><p><a class="has-text-weight-semibold" href="/marva/">Marva Quartz Version</a> -- This is a newer version of Marva that is under development (mid 2024). <a href="https://github.com/lcnetdev/marva-quartz">[source code]</a></p></li> 407<li><p><a class="has-text-weight-semibold" href="https://bibframe.org/docs/view/documentation-marva-manual/index.md">Marva Manual</a> -- Regularly updated documentation for Marva.</p></li> 408 409 410 <li><p><a class="has-text-weight-semibold" href="/classic/">Marva Classic Version</a> -- This is an older version developed in 2020-2022. <a href="https://github.com/lcnetdev/marva-frontend">[source code]</a> </p></li> 411 </ul> 412 </div> 413 414 415 <h3 class="title is-3">Tools & Resources</h3> 416 <div class="content"> 417 <ul> 418 <li><p><a class="has-text-weight-semibold" href="/dancer/">Profile Editor - DCTap-Dancer</a> -- A tabular DCTap profile editor that generates CSV/TSV and JSON profiles that works with Marva. <a href="https://github.com/lcnetdev/dctap-dancer">[source code]</a></p></li> 419 <li><p><a class="has-text-weight-semibold" href="https://github.com/lcnetdev/marc2bibframe2">marc2bibframe</a> -- XSLT-based conversion from MARC XML to BIBFRAME 2.</p></li> 420 <li><p><a class="has-text-weight-semibold" href="https://github.com/lcnetdev/bibframe2marc">bibframe2marc</a> -- XSLT 1.0 conversion from RDF/XML BIBFRAME 2 to MARC XML.</p></li> 421 <li><p><a class="has-text-weight-semibold" href="/dctap/">BIG DCTAP Profiles</a> -- BIBFRAME Interoperability Group (BIG): Dublin Core Tabular Application Profiles.</p></li> 422 423 </ul> 424 </div> 425 426 427 <h3 class="title is-3">Scriptshifter</h3> 428 <div class="content"> 429 <p>An automated tool developed by Library of Congress that can convert over ninety non-latin scripts into latin script following the LC/ALA guidelines.</p> 430 <ul> 431 <li><p><a class="has-text-weight-semibold" href="/scriptshifter/">Online Tool</a> -- A web interface using the library/tool. <a href="https://github.com/lcnetdev/scriptshifter">[source code & more info]</a></p></li> 432 </ul> 433 </div> 434 435 436 437 438 439 440</main> 441 442 443 444</body> 445 446</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.