@hanology/cham-browser 0.4.72 → 0.4.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.72",
+  "version": "0.4.74",
   "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
   "type": "module",
   "main": "dist/index.js",

package/template/src/components/PartBlock.vue

@@ -2,6 +2,8 @@
 import { computed } from 'vue'
 import type { Annotation, VerseLine, PieceSource } from '../types'
 import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations } from '../composables/useAnnotationRenderer'
+import { parseAnnotationBlock } from '../utils/annotationParser'
+import PronunciationGroup from './PronunciationGroup.vue'
 
 const props = defineProps<{
   num: number
@@ -54,12 +56,17 @@ const sourceLabel = (() => {
   const r = props.source?.range as Record<string, string> | undefined
   return r?.chapter || ''
 })()
+
+const annotationEntries = computed(() =>
+  props.annotationText ? parseAnnotationBlock(props.annotationText) : []
+)
 </script>
 
 <template>
   <div class="part-block" :class="{ 'part-block--vertical': vertical }">
-    <div v-if="sourceLabel" class="part-source">
-      {{ sourceLabel }}
+    <div v-if="sourceLabel" class="part-header">
+      <span class="part-header-num">{{ num }}</span>
+      <h3>{{ sourceLabel }}</h3>
     </div>
     <div class="part-text" @mouseover="onHover" @mouseleave="onLeave" @click="onTap">
       <span
@@ -69,7 +76,22 @@ const sourceLabel = (() => {
         v-html="verseHtml(i)"
       />
     </div>
-    <div v-if="annotationText" class="part-annotations">
+    <div v-if="annotationText && annotationEntries.length > 0" class="part-annotations">
+      <div v-for="entry in annotationEntries" :key="entry.num" class="part-ann-entry">
+        <div class="part-ann-head">
+          <span class="part-ann-num">{{ entry.numDisplay }}</span>
+          <span class="part-ann-term">{{ entry.term }}</span>
+          <PronunciationGroup
+            v-for="seg in entry.pronSegments"
+            :key="seg.lang"
+            :segment="seg"
+            class="part-ann-pron"
+          />
+        </div>
+        <div v-if="entry.definition" class="part-ann-def">{{ entry.definition }}</div>
+      </div>
+    </div>
+    <div v-else-if="annotationText" class="part-annotations">
       <div v-for="line in annotationText.split('\n')" :key="line" class="part-ann-line">{{ line }}</div>
     </div>
   </div>
@@ -93,17 +115,22 @@ const sourceLabel = (() => {
   border-left: 1px dashed var(--border-light);
 }
 
-.part-source {
-  font-family: var(--sans);
-  font-size: 12px;
-  letter-spacing: 1px;
-  color: var(--ink-faint);
-  background: var(--surface);
-  display: inline-block;
-  padding: 3px 10px;
-  border-radius: 3px;
-  margin-bottom: 12px;
-  border: 1px solid var(--border-light);
+.part-header {
+  display: flex; align-items: center; gap: 12px;
+  margin-bottom: 20px; padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.part-header-num {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 50%;
+  background: var(--vermillion); color: var(--paper);
+  font-family: var(--sans); font-size: 13px; font-weight: 700;
+  flex-shrink: 0;
+}
+
+.part-header h3 {
+  font-size: 18px; font-weight: 700; letter-spacing: 3px; color: var(--ink);
 }
 
 .part-text {
@@ -114,6 +141,59 @@ const sourceLabel = (() => {
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px dashed var(--border-light);
+  text-align: start;
+}
+
+.part-ann-entry {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-light);
+}
+.part-ann-entry:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.part-ann-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 10px;
+  margin-bottom: 4px;
+}
+
+.part-ann-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  background: var(--vermillion);
+  color: var(--paper);
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.part-ann-term {
+  font-weight: 700;
+  font-size: 1.05em;
+  color: var(--ink);
+  padding: 2px 8px;
+  background: var(--surface-warm);
+  border-radius: 3px;
+}
+
+.part-ann-pron {
+  margin-left: 2px;
+}
+
+.part-ann-def {
+  color: var(--ink-mid);
+  line-height: 2;
+  white-space: pre-line;
+  padding-left: 32px;
 }
 
 .part-ann-line {
@@ -175,9 +255,28 @@ const sourceLabel = (() => {
   font-size: 0.38em;
 }
 
-.part-block--vertical .part-source {
+.part-block--vertical .part-header {
+  flex-direction: column;
+  align-items: flex-start;
   margin-bottom: 0;
-  margin-left: 8px;
+  margin-left: 20px;
+  padding-bottom: 0;
+  border-bottom: none;
+  padding-left: 16px;
+  border-left: 2px solid var(--vermillion);
+}
+
+.part-block--vertical .part-header-num {
+  width: auto; height: auto;
+  border-radius: 0;
+  background: none;
+  color: var(--vermillion);
+  font-size: 16px;
+}
+
+.part-block--vertical .part-header h3 {
+  font-size: 20px;
+  letter-spacing: 6px;
 }
 
 .part-block--vertical .part-annotations {
@@ -188,4 +287,36 @@ const sourceLabel = (() => {
   border-top: none;
   border-left: 1px dashed var(--border-light);
 }
+
+.part-block--vertical .part-ann-entry {
+  margin-bottom: 0;
+  margin-left: 16px;
+  padding: 0;
+  border-bottom: none;
+}
+
+.part-block--vertical .part-ann-head {
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.part-block--vertical .part-ann-num {
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: none;
+  color: var(--vermillion);
+  font-size: inherit;
+}
+
+.part-block--vertical .part-ann-term {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+.part-block--vertical .part-ann-def {
+  padding-left: 0;
+  margin-left: 12px;
+}
 </style>