Merge pull request #85 from scaife-viewer/feature/tocsv2

Port TOCs to GraphQL endpoint

packages/common/src/URN.js

@@ -7,6 +7,8 @@ export default class URN {
     this.nss = null;
     this.textGroup = null;
     this.work = null;
+    this.versionPart = null;
+    this.workPart = null;
     this.reference = null;
     this.version = null;
     this.destructureUrn();
@@ -16,18 +18,19 @@ export default class URN {
   destructureUrn() {
     const split = this.absolute.split(this.delimiter);
     [this.scheme, this.nid, this.nss, this.work, this.reference] = split;
-    this.version = `${this.scheme}:${this.nid}:${this.nss}:${this.work}:`;
-    // eslint-disable-next-line prefer-destructuring
-    this.textGroup = this.version
-      .split('.')[0]
-      .split(':')
-      .slice(-1)[0];
+    this.version = `${this.urnPrefix}:${this.work}:`;
+    const versionParts = this.version.split(':').slice(-2)[0].split('.');
+    [this.textGroup, this.workPart, this.versionPart] = versionParts;
   }
 
   toString() {
     return this.absolute;
   }
 
+  get urnPrefix() {
+    return `${this.scheme}:${this.nid}:${this.nss}`;
+  }
+
   get lcp() {
     return this.reference
       ? this.reference
@@ -36,4 +39,26 @@ export default class URN {
           .slice(-1)[0]
       : null;
   }
+
+  upTo(segment) {
+    // NOTE: Backported from https://github.com/scaife-viewer/scaife-viewer/blob/59fbb4eb6bd886285eb27bf95c5ea0ce578f2b3e/static/src/js/urn.js#L32C1-L49C4
+    const segments = [this.urnPrefix, ':'];
+    if (segment === 'textGroup') {
+      segments.push(this.textGroup, ':');
+      return segments.join('');
+    }
+    if (segment === 'work') {
+      segments.push(this.textGroup, '.');
+      segments.push(this.workPart, ':');
+      return segments.join('');
+    }
+    if (segment === 'version') {
+      return this.version
+    }
+    if (segment === 'reference')  {
+      return this.absolute;
+    }
+    return null;
+  }
+
 }

packages/widget-toc/README.md

@@ -0,0 +1,25 @@
+# `widget-toc`
+
+The tables of contents (TOC) widget displays TOC entries.
+
+Each entry has a label and a URI.
+
+The URI can resolve to:
+
+- Another TOC (e.g., a list of lists)
+- The URN of a CTS passage
+
+Possible implementations include:
+- Browse folios from the Venetus A using the canonical book / line references (e.g. [urn:cite:scaife-viewer:toc.iliad-folio-ref-root](https://github.com/scaife-viewer/beyond-translation-site/blob/main/backend/data/tocs/toc.demo-root.json))
+- Browse CTS versions using card / para milestones extracted from TEI XML (e.g. [PerseusDL](https://github.com/scaife-viewer/beyond-translation-site/tree/feature/antigone-toc/backend/data/annotations/tocs/PerseusDL))
+- Navigate between a commentary and edition in differing text groups (e.g. [Eustathius’ Commentary on the Odyssey](https://scholarlyeditions.brill.com/eooc/) and [Odyssey](https://beyond-translation.perseus.org/reader/urn:cts:greekLit:tlg0012.tlg002.perseus-grc2:1.1-1.10))
+
+## Configuration options
+
+`$scaife.config.showRelevantTOCs`
+
+Default value is `true`.
+
+If `true`, only show TOCs relevant to the current passage.
+
+Set to `false` to show all TOCs.

packages/widget-toc/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@scaife-viewer/common": "^0.6.0",
-    "@scaife-viewer/store": "^0.6.0"
+    "@scaife-viewer/store": "^0.6.0",
+    "graphql-tag": "^2.12.6"
   }
 }

packages/widget-toc/src/TOC.vue

@@ -1,21 +1,20 @@
 <template>
   <aside class="toc-container">
-    <h3>{{ toc.title }}</h3>
+    <h3>{{ toc.label }}</h3>
     <p class="u-legend">{{ toc.description }}</p>
-    <div class="toc-grid" v-if="toc.items.length">
+    <div class="toc-grid">
       <template v-for="(item, index) in toc.items">
         <span :key="`index-${index}`" class="ref">{{ index + 1 }}.</span>
         <div :key="`item-${index}`" class="item">
           <router-link :to="getPayload(item.uri)">
-            {{ item.title }}
+            {{ item.label }}
           </router-link>
           <span v-if="showURNs">
             <tt>{{ item.uri }}</tt>
           </span>
         </div>
       </template>
     </div>
-    <h4 v-else>No results.</h4>
   </aside>
 </template>
 
@@ -65,6 +64,7 @@
     flex-direction: column;
     width: 100%;
   }
+  // TODO: Retire grid due to weird wrapping issues
   .toc-grid {
     display: grid;
     align-items: baseline;