@hanology/cham-browser 0.4.66 → 0.4.68

package/package.json

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

package/template/src/App.vue

@@ -56,7 +56,10 @@ function onKey(event: KeyboardEvent) {
         <Suspense :key="route.fullPath">
           <component :is="Component" />
           <template #fallback>
-            <div class="route-loading"></div>
+            <div class="route-loading">
+              <img v-if="logoUrl" :src="logoUrl" alt="" class="route-loading-logo" />
+              <div v-else class="route-loading-seal">文</div>
+            </div>
           </template>
         </Suspense>
       </Transition>
@@ -175,4 +178,22 @@ function onKey(event: KeyboardEvent) {
   justify-content: center;
   min-height: 100vh;
 }
+.route-loading-logo {
+  width: 56px; height: auto;
+  object-fit: contain;
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.route-loading-seal {
+  width: 56px; height: 56px;
+  border: 2px solid var(--vermillion);
+  border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 28px; font-weight: 900;
+  color: var(--vermillion);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; transform: scale(0.96); }
+  50% { opacity: 1; transform: scale(1); }
+}
 </style>

package/template/src/composables/useAnnotationRenderer.ts

@@ -51,10 +51,6 @@ export function buildVerseAnnotations(annotations: Annotation[], verseIndex: num
   return segments
 }
 
-export function countVerseSpans(annotations: Annotation[], verseIndex: number): number {
-  return buildVerseAnnotations(annotations, verseIndex).length
-}
-
 export function renderAnnotatedText(text: string, spans: AnnSpan[], useRuby = false, startNum = 0): string {
   if (!spans.length) return esc(text)
 

package/template/src/styles/main.css

@@ -132,6 +132,7 @@
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: 56px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -144,6 +145,7 @@ body {
   line-height: 1.8;
   min-height: 100vh;
   overflow-x: hidden;
+  overscroll-behavior-y: contain;
 }
 ::selection { background: var(--vermillion); color: var(--selection-text); }
 ::-webkit-scrollbar { width: 6px; height: 6px; }

package/template/src/views/PieceView.vue

@@ -364,13 +364,13 @@ function tcy(n: number): string {
           <template v-if="piece.contributors && piece.contributors.length > 1">
             <div v-for="group in contributorGroups" :key="group.title" class="v-author-group">
               <span class="v-author-role">{{ group.title }}</span>
-              <span v-for="name in group.names" :key="name" class="v-poem-author" @click="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)">{{ name }}</span>
+              <span v-for="name in group.names" :key="name" class="v-poem-author" role="button" tabindex="0" @click="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)" @keydown.enter="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)">{{ name }}</span>
             </div>
           </template>
-          <span v-else class="v-poem-author" @click="openAuthorPane">{{ piece.author }}</span>
-          <div v-if="piece.source?.textRef" class="v-source-link" @click="router.push(`/${piece.source.textRef}`)">
+          <span v-else class="v-poem-author" role="button" tabindex="0" @click="openAuthorPane" @keydown.enter="openAuthorPane">{{ piece.author }}</span>
+          <router-link v-if="piece.source?.textRef" :to="`/${piece.source.textRef}`" class="v-source-link">
             ← {{ meta?.title }}
-          </div>
+          </router-link>
           <div class="v-poem-meta">
             <template v-if="isMultiPart">
               <span class="v-meta-item" v-html="tcy(piece.parts!.length) + ' ' + t('piece.stanzas')" />
@@ -543,9 +543,9 @@ function tcy(n: number): string {
             <div class="h-nav-title-row">
               <span v-if="piece.era" class="h-era">{{ piece.era }}</span>
               <span class="h-breadcrumb">
-                <span v-if="piece.source?.textRef" class="h-source-link" @click="router.push(`/${piece.source.textRef}`)">
+                <router-link v-if="piece.source?.textRef" :to="`/${piece.source.textRef}`" class="h-source-link">
                   {{ meta?.title }} →
-                </span>
+                </router-link>
                 <span class="h-sep">{{ piece.num }}.</span>
                 {{ piece.title }}
               </span>
@@ -553,10 +553,10 @@ function tcy(n: number): string {
                 <template v-for="(group, gi) in contributorGroups" :key="group.title">
                   <span v-if="gi > 0" class="h-sep">|</span>
                   <span class="h-author-role">{{ group.title }}</span>
-                  <span v-for="name in group.names" :key="name" class="h-author-link" @click="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)">{{ name }}</span>
+                  <span v-for="name in group.names" :key="name" class="h-author-link" role="button" tabindex="0" @click="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)" @keydown.enter="openAuthorPane(piece.contributors!.find(c => c.name === name)?.id)">{{ name }}</span>
                 </template>
               </template>
-              <span v-else class="h-author-link" @click="openAuthorPane">{{ piece.author }}</span>
+              <span v-else class="h-author-link" role="button" tabindex="0" @click="openAuthorPane" @keydown.enter="openAuthorPane">{{ piece.author }}</span>
             </div>
             <div class="h-controls">
               <span class="h-tag h-tag-pager">{{ piece.num }} / {{ pieces.length }}</span>