@hanology/cham-browser 0.3.0 → 0.3.2

package/package.json

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

package/template/src/assets/hanology-logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="160" height="260" viewBox="0 0 160 260"><g id="uuid-691c2f13-17ba-4e98-88b2-4889d68745ee"><path d="m25.37,28.67c-.52.35-3.94,2.64-3.47,4.29.58,2.03,6.22.07,17.77,1.56,3.05.39,8.3,1.25,13.21-1.55,0,0,0,0,0,0,1.28-1.23,2.77-2.96,2.29-4.16-.57-1.43-3.64-1.23-7.76-1.22-13.9.03-17.22-2.14-22.05,1.1Z" style="fill:#c02026; stroke-width:0px;"/><path d="m26.34,60.52c7.79,2.25,14.5-.36,24.35-4.38,2.73-1.11,12.7-5.17,12.21-6.98-.26-.95-3.32-1-10.98-.36-16.72,1.38-33.56,2.78-33.83,6.56-.16,2.29,5.84,4.47,8.25,5.16Z" style="fill:#c02026; stroke-width:0px;"/><path d="m76.79,24.41c-2.43,2.62.62,6.45,1.81,15.56,1.58,12.07-1.99,18.92,2.02,21.63,1.18.8,3.16,1.34,4.67.58,4.67-2.35-1.94-13.81.75-30.79.34-2.14,1-5.48-.86-7.3-1.97-1.93-6.42-1.8-8.39.32Z" style="fill:#c02026; stroke-width:0px;"/><path d="m16.66,88.73c1.22,1.36,4.64,3.61,26.14-3.52,13.89-4.6,20.84-6.91,20.58-8.88-.47-3.54-21.95-2.15-33.85-.48-6.71.94-12.28,2.25-13.82,6.2-.78,2.01-.63,4.9.95,6.67Z" style="fill:#c02026; stroke-width:0px;"/><path d="m63.85,34.39c2.75,3.84,11.96-2.11,29.56-3.34,9.33-.65,12.05.65,20.48-1.25,6.01-1.36,14.57-4.26,14.3-5.84-.58-3.39-41.11,5.79-56.61,3.5-1.26-.19-5.56-.92-7.42,1.34-1.16,1.41-1.41,4.06-.31,5.59Z" style="fill:#c02026; stroke-width:0px;"/><path d="m66.71,54.89c1.71.96,4.34-1.62,7.78-3.5,3.44-1.88,5.98-2.12,16.34-2.92,20.31-1.56,23.56-1.61,29.47-3.21,4.8-1.3,11.9-3.77,11.67-4.96-.25-1.29-8.94-.06-27.13,1.24-26.55,1.9-36.87,1.35-39.11,6.93-.9,2.24-.53,5.57.97,6.41Z" style="fill:#c02026; stroke-width:0px;"/><path d="m128.72,57.56c-.41-.94-1.64-1.26-2.54-1.45-16.65-3.63-49.28,4.73-54.34,3.66-.45-.1-1.73-.37-2.58.32-1.75,1.43.91,4.85-.18,10.51-.17.89-.57,2.55-1.04,5.38-.41,2.47-.37,2.83-.23,3.14.95,2.2,6.5,1.72,10.88,1.45,19.16-1.18,28.75-1.77,31.11-1.54,1.08.1,4.17.46,5.87-1.36.83-.89.92-1.98,1.09-2.36,4.75-10.6,13.24-14.86,11.96-17.76Zm-19.5,13.22c-1.67,1.76-3.85,2.01-7.1,2.32-14.83,1.42-11.71.37-19.14,1.01-2.89.25-6.08.64-6.83-.78-.27-.52-.04-.96.45-3.71.59-3.32.36-3.3.64-3.72,1.31-1.97,5.26-.5,11.82-.57,3.63-.04,2.89-.49,9-.93,7.78-.56,11.7-.81,12.76,1.16.83,1.54-.37,3.92-1.59,5.22Z" style="fill:#c02026; stroke-width:0px;"/><path d="m64.13,89.77c-.89,1.05-2.62,3.88-1.74,6.52.29.86.78,1.49,1.16,1.88,9.76-2.65,17.8-3.72,23.22-4.21,23.99-2.16,35.62-2.15,35.62-2.15,1.7,0,8.66.02,15.1-3.94.25-.15,5.69-3.54,5.09-5.1-.27-.69-1.64-.79-2.39-.8-9.55-.17-33.6,3.86-40.79,4.89-6.03.87-9.28,1.34-14.11,1.44-11.46.24-17.97-2.32-21.17,1.45Z" style="fill:#c02026; stroke-width:0px;"/><path d="m88.89,82.71c-1.4,2.04-.98,15.47-.98,15.47.2,6.33.3,9.5,0,10.45-.16.51-.54,1.6-.1,2.72.83,2.15,3.94,2.65,4.35,2.72.52.08,3.32.54,4.35-.91.74-1.04.21-2.56,0-3.26-1.12-3.75.5-5.62,1.27-12.51.66-5.92.46-14.65-2.23-16.09-1.04-.55-3.09-.9-4.83-.09,0,0-1.04.35-1.83,1.49Z" style="fill:#c02026; stroke-width:0px;"/><path d="m68.77,113.84c5.31,1.62,11.5,2.98,12.87.78.46-.74.18-1.58-.11-2.81-1.11-4.74.17-4.8-.43-13.69-.41-6.04-.64-9.09-2.36-10.15-1.99-1.23-5.42-.71-6.71,1.09-.83,1.16-.61,2.62-.54,3.08.38,2.81.07,8.65-2.72,21.7Z" style="fill:#c02026; stroke-width:0px;"/><path d="m107.38,114.08c2.54,2.49,8.31,2.16,9.79-.18.71-1.12.32-2.53.18-3.08-2.71-10.45.59-25.11-3.63-26.28-.13-.04-1.6-.08-4.53-.18-1.98-.07-2.06-.05-2.18,0-2.17.98-.06,7.44,0,16.13.06,8.55-1.91,11.38.36,13.6Z" style="fill:#c02026; stroke-width:0px;"/><path d="m143.14,110.5c.7-.75.73-1.76.77-3.75.03-1.71.05-4.12-.82-6.27-1.4-3.43-5.33-5.15-9.43-6.71-3.13-1.19-10.18-3.87-12.51-1.09-1.18,1.42-1.05,4.14.18,5.44.86.91,1.99.85,3.63,1.09,2.53.37,6.05,1.01,8.16,3.26,1.79,1.92,3.01,5.52,1.9,7.89-.3.65-.85,1.36-.58,1.74.29.41,1.29.06,2.75-.29,4-.94,4.97-.27,5.94-1.3Z" style="fill:#c02026; stroke-width:0px;"/><path d="m94.04,21.33c2.18-1.56,7.45-1.5,7.27-1.47h0c.07,1.99.16,4.87.22,8.33.05,3.38.1,6.38.04,9.71-.25,13.33-1.98,17.29-4.02,19.9-.64.82-1.75,2.21-2.55,1.95-1.52-.48-.29-6.34-.13-13.1.36-14.67-4.59-22.63-.83-25.33Z" style="fill:#c02026; stroke-width:0px;"/></g><g id="uuid-475a2031-9dcf-47fb-8049-a337ce097e20"><path d="m82.38,195.1c-.34-1.54-7.35-2.32-14.04-.39-6.16,1.78-6.53,4.27-15.45,8.89-7.53,3.89-11.36,4.24-11.33,6.05.03,2.24,5.89,4.44,10.7,4.39,3.05-.03,5.3-.97,5.78-1.17,3.22-1.38,3.94-3.12,7.73-6.31,1.31-1.1,3.23-2.36,7.06-4.87,7.58-4.96,9.75-5.69,9.55-6.59Z" style="fill:#c02026; stroke-width:0px;"/><path d="m54.89,151.13c-4.4,3.15-9.97,8.32-8.96,10.27.98,1.89,7.87.4,11.88-.91,5.59-1.82,6.64-3.62,11.12-5.75,10.03-4.76,23.11-4.43,30.82-4.23,2.49.06,5.11.22,7.68-1.4,4.68-2.96,6.86-10.38,4.58-12.85-1.94-2.1-6.37.13-15.14,2.84-22.64,6.97-29.99,3.45-41.98,12.03Z" style="fill:#c02026; stroke-width:0px;"/><path d="m98.12,135.63c.34-1.86-2.5-2.2-7.91-8.61-3.68-4.36-4.44-6.66-7.21-7.21-2.24-.44-5.09.4-6.51,2.33-2.16,2.9.92,5.58-.7,9.77-1.85,4.8-7.54,5.55-7.21,8.84.1.97.69,1.85,1.4,2.33,2.06,1.38,5.49-.47,6.89-1.17,10.59-5.31,20.6-2.74,21.26-6.27Z" style="fill:#c02026; stroke-width:0px;"/><path d="m55.75,192.03c-.92-1.43-5.07.65-12.14,1.9-11.86,2.09-19.58-.33-20.67,2.56-.26.68-.2,1.8,1.33,3.7.44.61,1.11,1.67,1.4,3.12.64,3.14-1.15,4.84-.45,5.99,1.17,1.93,8.08.28,13.63-2.11,3.49-1.5,8.36-4.11,13.44-8.79,2.14-2.37,4.24-5.15,3.46-6.36Z" style="fill:#c02026; stroke-width:0px;"/><path d="m23.89,183.87c2.93,1.75,6.93.05,14.91-3.34,5.87-2.49,8.09-4.45,9.55-6.14.58-.67,4.53-5.25,3.22-7.4-.96-1.57-4.14-.85-11.85.28-15.04,2.21-17.5,1.61-19.08,4.19-2.23,3.66-.52,10.18,3.23,12.41Z" style="fill:#c02026; stroke-width:0px;"/><path d="m44.01,150.66c6.26-.65,10,.08,11.62-2.35,1.16-1.72.74-4.43-.45-6.17-1.56-2.28-4.05-2.25-13.82-3.26-3.18-.33-9-.96-17.68-1.16-4.38-.1-5.57,0-6.51.93-3.23,3.22-1.16,13.92,5.04,15.82,3.45,1.06,6.84-1.02,7.8-1.66,3.64-.75,8.4-1.58,14-2.16Z" style="fill:#c02026; stroke-width:0px;"/><path d="m102.3,187.26c-.2.16-1.17.98-1.85,2.4-2.62,5.48,2.4,13.12,4.45,16.22,2.17,3.3,4.89,5.93,10.31,11.17,7.99,7.72,11.23,9.57,13.1,10.53,4.55,2.31,7.99,4.06,10.96,2.79,5.36-2.29,7.32-13.64,4.08-21.91-1.76-4.49-8.69-9.15-22.56-18.47-.77-.51-3.96-2.62-8.59-3.65-2.67-.59-6.95-1.48-9.9.93Z" style="fill:#c02026; stroke-width:0px;"/><path d="m90.32,166.05c2.71.09,4.85,1.45,5.16,3.07.5,2.6-3.97,4.65-4.44,4.86-.92.41-4.53,2.02-6.85,0-1.38-1.2-1.84-3.28-1.44-4.87.4-1.61,1.37-1.52,2.52-3.61.72-1.3.96-2.79,1.44-5.77.42-2.61.63-3.91.36-4.33-1.5-2.26-10.74-1.02-16.4,3.97-8.57,7.54-9.83,24.46-2.68,29.78,4.18,3.11,10.07,1.38,18.47-1.08,9.67-2.84,22.5-6.61,23.87-15.72,1.21-8.04-7.72-15-8.83-15.86-1.22-.95-6.86-5.37-9.92-3.46-2.49,1.56-2.24,6.69-2.16,8.33.1,2,.54,3.62.9,4.69Z" style="fill:#c02026; stroke-width:0px;"/><path d="m76.97,210.81c.62,11.14,2.26,17.04-1.66,22.12-1.15,1.5-2.43,2.46-3.28,3.01-.38,1.01-.87,2.66-.86,4.73,0,2.31.63,4.12,1.07,5.16,3.28.25,8.76.11,12.67-3.44,3.35-3.04,3.25-6.49,4.51-16.97,1.12-9.25,3.81-28.12.43-36.3-.5-1.22-1.26-2.49-2.58-3.03-2.87-1.16-6.52,1.93-6.82,2.19-1.23,1.07-4.49,4.47-3.48,22.54Z" style="fill:#c02026; stroke-width:0px;"/></g><g id="uuid-d894f56d-8ec7-4dc8-a748-3d877febe94e"><path d="m126.33,11.36c12.5,0,22.67,10.17,22.67,22.67v192.65c0,12.5-10.17,22.67-22.67,22.67H33.67c-12.5,0-22.67-10.17-22.67-22.67V34.03c0-12.5,10.17-22.67,22.67-22.67h92.65m0-6H33.67c-15.84,0-28.67,12.84-28.67,28.67v192.65c0,15.84,12.84,28.67,28.67,28.67h92.65c15.84,0,28.67-12.84,28.67-28.67V34.03c0-15.84-12.84-28.67-28.67-28.67h0Z" style="fill:#c02026; stroke-width:0px;"/></g></svg>

package/template/src/components/SideNav.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { useReadingMode, THEMES, THEME_LABELS, FONT_SIZES } from '../composables/useReadingMode'
 import type { LayoutMode, FontSize } from '../composables/useReadingMode'
 import { useI18n, LOCALE_LABELS, type Locale } from '../composables/useI18n'
+import logoSvg from '../assets/hanology-logo.svg'
 
 defineProps<{
   context?: string
@@ -26,7 +27,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 <template>
   <nav class="sidenav">
     <button class="sn-brand" @click="emit('home')" title="首頁">
-      <span class="sn-seal">漢流</span>
+      <img :src="logoSvg" alt="漢流" class="sn-logo" />
     </button>
 
     <button class="sn-btn" @click="emit('back')" title="返回">
@@ -127,27 +128,20 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 
 .sn-brand {
   width: 40px; height: 48px;
-  border: 2px solid var(--vermillion);
+  border: none;
   border-radius: 3px;
   background: none;
   display: flex; align-items: center; justify-content: center;
   cursor: pointer;
   transition: all 0.2s;
   margin-bottom: 4px;
+  padding: 2px;
 }
-.sn-brand:hover { background: var(--vermillion); }
-.sn-brand:hover .sn-seal { color: var(--paper); }
-.sn-seal {
-  writing-mode: vertical-rl;
-  text-orientation: upright;
-  font-family: var(--serif);
-  font-size: 14px; font-weight: 900;
-  color: var(--vermillion);
-  transition: color 0.2s;
-  display: flex;
-  align-items: center;
-  letter-spacing: 2px;
-  line-height: 1;
+.sn-brand:hover { opacity: 0.8; }
+.sn-logo {
+  height: 100%;
+  width: auto;
+  object-fit: contain;
 }
 
 .sn-btn {
@@ -297,8 +291,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 
 @media (max-width: 768px) {
   .sidenav { width: 44px; padding: 8px 0; gap: 6px; }
-  .sn-brand { width: 32px; height: 32px; }
-  .sn-seal { font-size: 15px; }
+  .sn-brand { width: 32px; height: 38px; }
   .sn-btn { width: 30px; height: 30px; }
   .sn-context { font-size: 10px; max-height: 80px; }
 }

package/template/src/views/AboutView.vue

@@ -5,6 +5,7 @@ import { useReadingMode } from '../composables/useReadingMode'
 import { useHorizontalScroll } from '../composables/useHorizontalScroll'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
+import logoSvg from '../assets/hanology-logo.svg'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -44,7 +45,7 @@ function goHome() { router.push('/') }
       <h1 class="h-page-title">關於漢流 / About Hanology</h1>
     </header>
     <div class="h-content">
-      <div class="h-seal">漢流</div>
+      <img :src="logoSvg" alt="漢流" class="h-logo" />
       <div class="h-about-block">
         <h2>漢流 · Hanology</h2>
         <p><strong>漢流</strong>，粵音 Han-Lou，普音 Han-Liu，意為「漢學之流」。</p>
@@ -133,18 +134,12 @@ function goHome() { router.push('/') }
 .h-page-title { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
 
 .h-content { max-width: 680px; margin: 0 auto; }
-.h-seal {
-  writing-mode: vertical-rl;
-  text-orientation: upright;
-  display: inline-flex;
-  align-items: center; justify-content: center;
-  width: 56px; height: 72px;
-  border: 2px solid var(--vermillion);
-  color: var(--vermillion);
-  font-size: 24px; font-family: var(--serif);
-  font-weight: 900; letter-spacing: 2px;
-  margin: 0 auto 40px; border-radius: 4px;
-  line-height: 1;
+.h-logo {
+  height: 80px;
+  width: auto;
+  object-fit: contain;
+  margin: 0 auto 40px;
+  display: block;
 }
 .h-about-block {
   margin-bottom: 40px; padding: 32px;

package/template/src/views/LibraryHome.vue

@@ -9,6 +9,7 @@ import { useHorizontalScroll } from '../composables/useHorizontalScroll'
 import BookCard from '../components/BookCard.vue'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
+import logoSvg from '../assets/hanology-logo.svg'
 import type { BookMeta } from '../types'
 
 const { scale, books, singleBook, loadLibrary } = useLibrary()
@@ -105,7 +106,7 @@ function openBook(bookId: string) {
     <!-- ═══════ 橫排模式 ═══════ -->
     <div v-else class="lib-root">
       <header class="lib-hero">
-        <div class="lib-seal">漢流</div>
+        <img :src="logoSvg" alt="漢流" class="lib-logo" />
         <h1>古典詩文圖書館</h1>
         <p class="lib-subtitle">Classical Chinese Text Library</p>
         <div class="lib-stats-bar">
@@ -171,22 +172,6 @@ function openBook(bookId: string) {
   justify-content: center;
   padding: 40px 20px;
 }
-.v-seal {
-  writing-mode: horizontal-tb;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px; height: 48px;
-  border: 2px solid var(--vermillion);
-  color: var(--vermillion);
-  font-size: 14px;
-  font-family: var(--serif);
-  font-weight: 900;
-  margin-bottom: 0;
-  margin-left: 16px;
-  border-radius: 4px;
-  letter-spacing: 0;
-}
 .v-title {
   font-size: 48px; font-weight: 900;
   letter-spacing: 16px; color: var(--ink);
@@ -283,21 +268,11 @@ function openBook(bookId: string) {
   text-align: center;
   margin-bottom: 48px;
 }
-.lib-seal {
-  writing-mode: vertical-rl;
-  text-orientation: upright;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px; height: 56px;
-  border: 2px solid var(--vermillion);
-  color: var(--vermillion);
-  font-size: 20px;
-  font-family: var(--serif);
-  letter-spacing: 2px;
+.lib-logo {
+  height: 64px;
+  width: auto;
+  object-fit: contain;
   margin-bottom: 24px;
-  border-radius: 4px;
-  line-height: 1;
 }
 .lib-hero h1 {
   font-size: 36px;

package/template/src/views/PieceView.vue

@@ -26,7 +26,7 @@ const vScroll = useHorizontalScroll(vPageRef)
 
 const authorPaneOpen = ref(false)
 const selectedAuthorId = ref('')
-const interaction = useAnnotationInteraction()
+const interaction = reactive(useAnnotationInteraction())
 const titleCollapsed = ref(false)
 const vTitleRef = ref<HTMLElement | null>(null)
 
@@ -271,7 +271,7 @@ function tcy(n: number): string {
             />
           </div>
           <SectionBlock
-            v-for="block in visibleLayerBlocks"
+            v-for="block in layerAnnotationBlocks"
             :key="block.label"
             num=""
             :label="block.label"