@hanology/cham-browser 0.3.9 → 0.4.2

package/template/src/components/PronunciationGroup.vue

@@ -8,38 +8,47 @@ defineProps<{
 
 <template>
   <span class="pron-group">
-    <span class="ann-pron" :class="segment.lang === 'yue' ? 'ann-yue' : 'ann-cmn'">
+    <span class="pron-badge" :class="segment.lang === 'yue' ? 'pron-yue' : 'pron-cmn'">
       {{ segment.label }}
     </span>
-    <span
-      v-for="(part, i) in segment.parts"
-      :key="i"
-      class="ann-phonetic"
-    >{{ part }}</span>
+    <span class="pron-text">{{ segment.parts.join(' ') }}</span>
   </span>
 </template>
 
 <style scoped>
 .pron-group {
   display: inline-flex;
-  align-items: baseline;
-  gap: 0.3em;
+  align-items: center;
+  gap: 5px;
   white-space: nowrap;
 }
-.ann-pron {
-  display: inline-block;
-  font-size: 0.75em;
+.pron-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  font-size: 11px;
   font-family: var(--sans);
-  font-weight: 600;
-  padding: 1px 3px;
-  border-radius: 2px;
-  vertical-align: middle;
+  font-weight: 700;
+  letter-spacing: 0.5px;
   line-height: 1;
+  flex-shrink: 0;
+}
+.pron-yue {
+  background: var(--jade);
+  color: #fff;
+}
+.pron-cmn {
+  background: var(--ink);
+  color: var(--paper);
 }
-.ann-yue { background: var(--jade); color: #fff; }
-.ann-cmn { background: var(--ink); color: var(--paper); }
-.ann-phonetic {
+.pron-text {
   font-family: var(--sans);
+  font-size: 13px;
   color: var(--ink-light);
+  letter-spacing: 0.5px;
 }
 </style>

package/template/src/components/ReadingToolbar.vue

@@ -91,6 +91,26 @@ function close() { open.value = false }
   right: 24px;
   z-index: 500;
 }
+
+@media (max-width: 768px) {
+  .rt { bottom: 16px; right: 16px; }
+  .rt-panel {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    width: auto;
+    border-radius: 16px 16px 0 0;
+    max-height: 60vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    animation: slideUpMobile 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+  }
+  @keyframes slideUpMobile {
+    from { opacity: 0; transform: translateY(100%); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+}
 .rt-fab {
   width: 44px; height: 44px;
   border-radius: 50%;

package/template/src/components/SectionBlock.vue

@@ -68,14 +68,17 @@ const paragraphsHtml = computed(() => {
     </div>
     <div v-if="isAnnotations" class="sb-text sb-ann-list">
       <div v-for="entry in entries" :key="entry.num" class="sb-ann-entry">
-        <span class="sb-ann-num">{{ entry.numDisplay }}</span>
-        <span class="sb-ann-term">{{ entry.term }}</span>
-        <PronunciationGroup
-          v-for="seg in entry.pronSegments"
-          :key="seg.lang"
-          :segment="seg"
-        />
-        <span v-if="entry.definition" class="sb-ann-def">{{ entry.definition }}</span>
+        <div class="sb-ann-head">
+          <span class="sb-ann-num">{{ entry.numDisplay }}</span>
+          <span class="sb-ann-term">{{ entry.term }}</span>
+          <PronunciationGroup
+            v-for="seg in entry.pronSegments"
+            :key="seg.lang"
+            :segment="seg"
+            class="sb-ann-pron"
+          />
+        </div>
+        <div v-if="entry.definition" class="sb-ann-def">{{ entry.definition }}</div>
       </div>
     </div>
     <div v-else class="sb-text" v-html="paragraphsHtml" />
@@ -114,11 +117,54 @@ const paragraphsHtml = computed(() => {
 .sb-text :deep(p) { margin-bottom: 16px; text-indent: 2em; }
 .sb-text :deep(p:last-child) { margin-bottom: 0; }
 
+/* ─── Annotation list ─── */
 .sb-ann-list { text-align: start; }
-.sb-ann-entry { margin-bottom: 14px; }
-.sb-ann-num { color: var(--vermillion); font-weight: 600; font-family: var(--sans); }
-.sb-ann-term { font-weight: 600; color: var(--ink); }
-.sb-ann-def { white-space: pre-line; }
+.sb-ann-entry {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-light);
+}
+.sb-ann-entry:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.sb-ann-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 10px;
+  margin-bottom: 4px;
+}
+.sb-ann-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  background: var(--vermillion);
+  color: #fff;
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.sb-ann-term {
+  font-weight: 700;
+  font-size: 1.05em;
+  color: var(--ink);
+  padding: 2px 8px;
+  background: var(--surface-warm);
+  border-radius: 3px;
+}
+.sb-ann-pron {
+  margin-left: 2px;
+}
+.sb-ann-def {
+  color: var(--ink-mid);
+  line-height: 2;
+  white-space: pre-line;
+  padding-left: 32px;
+}
 
 /* ─── 直排模式 ─── */
 .sb-vertical {
@@ -163,5 +209,38 @@ const paragraphsHtml = computed(() => {
 .sb-vertical .sb-ann-entry {
   margin-bottom: 0;
   margin-left: 16px;
+  padding: 0;
+  border-bottom: none;
+}
+.sb-vertical .sb-ann-head {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.sb-vertical .sb-ann-num {
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: none;
+  color: var(--vermillion);
+  font-size: inherit;
+}
+.sb-vertical .sb-ann-term {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+.sb-vertical .sb-ann-def {
+  padding-left: 0;
+  margin-left: 12px;
+}
+
+@media (max-width: 768px) {
+  .sb-ann-entry {
+    padding: 10px 0;
+  }
+  .sb-ann-def {
+    padding-left: 0;
+  }
 }
 </style>

package/template/src/components/SideNav.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { useReadingMode, THEMES, THEME_LABELS, FONT_SIZES } from '../composables/useReadingMode'
 import type { LayoutMode, FontSize } from '../composables/useReadingMode'
@@ -20,9 +20,10 @@ const emit = defineEmits<{
 
 const { theme, layout, mainFontSize, bodyFontSize, setTheme, setLayout, setMainFontSize, setBodyFontSize } = useReadingMode()
 const { t, setLocale, locale, availableLocales, localeLabels } = useI18n()
-const { logoUrl } = useSiteConfig()
+const { logoUrl, aboutHtml } = useSiteConfig()
 const router = useRouter()
 const settingsOpen = ref(false)
+const aboutPane = inject<{ toggleAbout: () => void }>('aboutPane')
 
 function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 </script>
@@ -31,7 +32,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
   <nav class="sidenav">
     <button class="sn-brand" @click="emit('home')" title="首頁">
       <img v-if="logoUrl" :src="logoUrl" alt="" class="sn-logo" />
-      <span v-else class="sn-seal">漢流</span>
+      <span v-else class="sn-seal">文</span>
     </button>
 
     <button class="sn-btn" @click="emit('back')" title="返回">
@@ -49,7 +50,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 
     <div class="sn-spacer" />
 
-    <button class="sn-btn" @click="router.push('/about')" title="關於">
+    <button v-if="aboutHtml" class="sn-btn" @click="aboutPane?.toggleAbout()" title="關於">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
     </button>
 

package/template/src/components/VerticalScroll.vue

@@ -96,6 +96,11 @@ function onTap(event: MouseEvent) {
   cursor: help;
   transition: background 0.15s;
 }
+:deep(.ann-target.ann-overlap) {
+  border-left-width: 3px;
+  border-left-style: double;
+  padding-left: 3px;
+}
 :deep(.ann-num) {
   font-size: 0.45em;
   font-family: var(--sans);
@@ -121,4 +126,34 @@ function onTap(event: MouseEvent) {
 :deep(.ann-target.pronunciation.semantic) {
   border-left-color: var(--gold);
 }
+:deep(.ann-target.person) {
+  border-left-color: var(--ann-person);
+}
+:deep(.ann-target.place) {
+  border-left-color: var(--ann-place);
+}
+:deep(.ann-target.event) {
+  border-left-color: var(--ann-event);
+}
+:deep(.ann-target.date) {
+  border-left-color: var(--ann-date);
+}
+:deep(.ann-target.allusion) {
+  border-left-color: var(--ann-allusion);
+}
+:deep(.ann-target.person:hover) {
+  background: rgba(58, 90, 140, 0.08);
+}
+:deep(.ann-target.place:hover) {
+  background: rgba(139, 105, 20, 0.08);
+}
+:deep(.ann-target.event:hover) {
+  background: rgba(107, 76, 138, 0.08);
+}
+:deep(.ann-target.date:hover) {
+  background: rgba(42, 122, 122, 0.08);
+}
+:deep(.ann-target.allusion:hover) {
+  background: rgba(181, 101, 29, 0.08);
+}
 </style>

package/template/src/composables/useAnnotationRenderer.ts

@@ -7,6 +7,7 @@ export interface AnnSpan {
   start: number
   end: number
   annotations: Annotation[]
+  overlapping: boolean
 }
 
 export function esc(s: string): string {
@@ -17,27 +18,41 @@ export function buildVerseAnnotations(annotations: Annotation[], verseIndex: num
   const anns = annotations.filter(a =>
     a.range.scope === 'verse' && a.range.verseIndex === verseIndex
   )
-  const spanMap = new Map<string, Annotation[]>()
+  if (!anns.length) return []
+
+  const points = new Set<number>()
   for (const a of anns) {
-    const key = `${a.range.start ?? 0}:${a.range.end ?? 0}`
-    if (!spanMap.has(key)) spanMap.set(key, [])
-    spanMap.get(key)!.push(a)
+    points.add(a.range.start ?? 0)
+    points.add(a.range.end ?? 0)
+  }
+  const sorted = [...points].sort((a, b) => a - b)
+
+  const segments: AnnSpan[] = []
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const start = sorted[i]
+    const end = sorted[i + 1]
+    const covering = anns.filter(a =>
+      (a.range.start ?? 0) <= start && (a.range.end ?? 0) >= end
+    )
+    if (covering.length === 0) continue
+
+    const rangeKeys = new Set(
+      covering.map(a => `${a.range.start ?? 0}:${a.range.end ?? 0}`)
+    )
+
+    segments.push({
+      start,
+      end,
+      annotations: covering,
+      overlapping: rangeKeys.size > 1,
+    })
   }
-  return Array.from(spanMap.entries()).map(([k, matched]) => {
-    const [start, end] = k.split(':').map(Number)
-    return { start, end, annotations: matched }
-  }).sort((a, b) => a.start - b.start)
+
+  return segments
 }
 
 export function countVerseSpans(annotations: Annotation[], verseIndex: number): number {
-  const anns = annotations.filter(a =>
-    a.range.scope === 'verse' && a.range.verseIndex === verseIndex
-  )
-  const keys = new Set<string>()
-  for (const a of anns) {
-    keys.add(`${a.range.start ?? 0}:${a.range.end ?? 0}`)
-  }
-  return keys.size
+  return buildVerseAnnotations(annotations, verseIndex).length
 }
 
 export function renderAnnotatedText(text: string, spans: AnnSpan[], useRuby = false, startNum = 0): string {
@@ -53,13 +68,14 @@ export function renderAnnotatedText(text: string, spans: AnnSpan[], useRuby = fa
     annCounter++
     const ids = span.annotations.map(a => a.id).join(',')
     const kinds = [...new Set(span.annotations.map(a => a.kind))].join(' ')
+    const overlapCls = span.overlapping ? ' ann-overlap' : ''
     const numText = toChineseNumber(annCounter)
     const body = esc(text.slice(span.start, span.end))
     if (useRuby) {
       const rtCls = numText.length > 1 ? 'ann-num ann-num-long' : 'ann-num'
-      html += `<ruby class="ann-target ${kinds}" data-ann-ids="${ids}">${body}<rp></rp><rt class="${rtCls}">${numText}</rt><rp></rp></ruby>`
+      html += `<ruby class="ann-target${overlapCls} ${kinds}" data-ann-ids="${ids}">${body}<rp></rp><rt class="${rtCls}">${numText}</rt><rp></rp></ruby>`
     } else {
-      html += `<span class="ann-target ${kinds}" data-ann-ids="${ids}">${body}<sup class="ann-num">${numText}</sup></span>`
+      html += `<span class="ann-target${overlapCls} ${kinds}" data-ann-ids="${ids}">${body}<sup class="ann-num">${numText}</sup></span>`
     }
     cursor = span.end
   }
@@ -89,7 +105,8 @@ export function renderVerseGutter(text: string, spans: AnnSpan[], startNum = 0):
     annCounter++
     const ids = span.annotations.map(a => a.id).join(',')
     const kinds = [...new Set(span.annotations.map(a => a.kind))].join(' ')
-    textHtml += `<span class="ann-target ${kinds}" data-ann-ids="${ids}">${esc(text.slice(span.start, span.end))}</span>`
+    const overlapCls = span.overlapping ? ' ann-overlap' : ''
+    textHtml += `<span class="ann-target${overlapCls} ${kinds}" data-ann-ids="${ids}">${esc(text.slice(span.start, span.end))}</span>`
     gutter[span.start] = `<span class="ann-gutter-num ${kinds}" data-ann-ids="${ids}">${toChineseNumber(annCounter)}</span>`
     cursor = span.end
   }
@@ -123,11 +140,27 @@ export function useAnnotationTooltip() {
     const rect = (el ?? event.target as HTMLElement).getBoundingClientRect()
 
     if (layout.value === 'vertical') {
-      const left = rect.left - 12
-      style.value = {
-        right: Math.max(8, window.innerWidth - left) + 'px',
-        top: '50%',
-        transform: 'translateY(-50%)',
+      const isMobile = window.innerWidth < 768
+      if (isMobile) {
+        style.value = {
+          left: '4vw',
+          right: '4vw',
+          bottom: '0',
+          maxWidth: 'none',
+        }
+      } else if (window.innerWidth >= 1024) {
+        style.value = {
+          right: '20px',
+          top: '72px',
+          maxHeight: 'calc(100vh - 100px)',
+        }
+      } else {
+        const right = window.innerWidth - rect.left + 8
+        style.value = {
+          right: Math.min(right, window.innerWidth - 40) + 'px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+        }
       }
     } else {
       const isMobile = window.innerWidth < 768
@@ -156,7 +189,6 @@ export function useAnnotationTooltip() {
       const currentIds = items.value.map(a => a.id).sort().join(',')
       const newIds = annotations.map(a => a.id).sort().join(',')
       if (currentIds === newIds) {
-        // Same annotation: dismiss on mobile only (desktop uses hover to manage)
         if (window.innerWidth < 768) hide()
       } else {
         show(event, annotations)

package/template/src/composables/useData.ts

@@ -28,7 +28,12 @@ async function loadShared(): Promise<void> {
 
 const authorByName = computed(() => {
   const map = new Map<string, Author>()
-  for (const a of authors.value) map.set(a.name, a)
+  for (const a of authors.value) {
+    const existing = map.get(a.name)
+    if (!existing || (!existing.bio && a.bio)) {
+      map.set(a.name, a)
+    }
+  }
   return map
 })
 

package/template/src/composables/useI18n.ts

@@ -14,6 +14,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'site.subtitle': 'Classical Chinese Text Library',
     'nav.back': '返回',
     'nav.home': '首頁',
+    'nav.about': '關 於',
     'settings.layout': '版面',
     'settings.vertical': '直排',
     'settings.horizontal': '橫排',
@@ -36,7 +37,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'author.biography': '作者簡介',
     'author.collectedWorks': '收錄作品',
     'author.worksCount': '{count} 篇收錄作品',
-    'author.unknownDynasty': '未知朝代',
+    'author.unknownEra': '未知朝代',
     'annotation.pronunciation': '音',
     'annotation.semantic': '義',
     'annotation.notes': '注釋',
@@ -52,12 +53,23 @@ const messages: Record<Locale, Record<string, string>> = {
     'stat.pieceCount': '{count} 篇',
     'stat.authorCount': '{count} 位作者',
     'stat.piecePoems': '篇詩文',
+    'stat.authorsLabel': '位作者',
+    'catalog.noResults': '未找到符合「{query}」的篇章',
+    'catalog.enterLibrary': '進 入 文 庫 ↓',
+    'piece.noAuthorData': '暫無作者資料',
+    'piece.collected': '{count} 篇收錄',
+    'role.author': '作者',
+    'role.commentator': '註者',
+    'role.editor': '編者',
+    'role.translator': '譯者',
+    'role.annotator': '注者',
   },
   'zh-Hans': {
     'site.title': '古典诗文图书馆',
     'site.subtitle': 'Classical Chinese Text Library',
     'nav.back': '返回',
     'nav.home': '首页',
+    'nav.about': '关 于',
     'settings.layout': '版面',
     'settings.vertical': '直排',
     'settings.horizontal': '横排',
@@ -80,7 +92,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'author.biography': '作者简介',
     'author.collectedWorks': '收录作品',
     'author.worksCount': '{count} 篇收录作品',
-    'author.unknownDynasty': '未知朝代',
+    'author.unknownEra': '未知朝代',
     'annotation.pronunciation': '音',
     'annotation.semantic': '义',
     'annotation.notes': '注释',
@@ -96,12 +108,23 @@ const messages: Record<Locale, Record<string, string>> = {
     'stat.pieceCount': '{count} 篇',
     'stat.authorCount': '{count} 位作者',
     'stat.piecePoems': '篇诗文',
+    'stat.authorsLabel': '位作者',
+    'catalog.noResults': '未找到符合「{query}」的篇章',
+    'catalog.enterLibrary': '进 入 文 库 ↓',
+    'piece.noAuthorData': '暂无作者资料',
+    'piece.collected': '{count} 篇收录',
+    'role.author': '作者',
+    'role.commentator': '注者',
+    'role.editor': '编者',
+    'role.translator': '译者',
+    'role.annotator': '注者',
   },
   'en': {
     'site.title': 'Classical Chinese Text Library',
     'site.subtitle': 'Classical Chinese Text Library',
     'nav.back': 'Back',
     'nav.home': 'Home',
+    'nav.about': 'About',
     'settings.layout': 'Layout',
     'settings.vertical': 'Vertical',
     'settings.horizontal': 'Horizontal',
@@ -124,7 +147,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'author.biography': 'Biography',
     'author.collectedWorks': 'Collected Works',
     'author.worksCount': '{count} collected works',
-    'author.unknownDynasty': 'Unknown dynasty',
+    'author.unknownEra': 'Unknown era',
     'annotation.pronunciation': 'Pron',
     'annotation.semantic': 'Def',
     'annotation.notes': 'Notes',
@@ -140,6 +163,16 @@ const messages: Record<Locale, Record<string, string>> = {
     'stat.pieceCount': '{count} works',
     'stat.authorCount': '{count} authors',
     'stat.piecePoems': 'works',
+    'stat.authorsLabel': 'authors',
+    'catalog.noResults': 'No results for "{query}"',
+    'catalog.enterLibrary': 'Enter Library ↓',
+    'piece.noAuthorData': 'No author data available',
+    'piece.collected': '{count} works collected',
+    'role.author': 'Author',
+    'role.commentator': 'Commentator',
+    'role.editor': 'Editor',
+    'role.translator': 'Translator',
+    'role.annotator': 'Annotator',
   },
 }
 

package/template/src/composables/useReadingMode.ts

@@ -1,4 +1,4 @@
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 
 export type Theme = 'light' | 'sepia' | 'dark' | 'oled'
 export type LayoutMode = 'horizontal' | 'vertical'
@@ -21,18 +21,23 @@ const mainFontSize = ref<FontSize>(24)
 const bodyFontSize = ref<FontSize>(16)
 
 if (!import.meta.env.SSR) {
+  // Theme and font sizes only affect CSS, safe to apply before hydration
   const savedTheme = localStorage.getItem('theme') as Theme | null
   if (savedTheme && THEMES.includes(savedTheme)) theme.value = savedTheme
 
-  const savedLayout = localStorage.getItem('layout') as LayoutMode | null
-  if (savedLayout === 'vertical' || savedLayout === 'horizontal') layout.value = savedLayout
-
   const savedMain = parseInt(localStorage.getItem('mainFontSize') || '', 10)
   if (FONT_SIZES.includes(savedMain as any)) mainFontSize.value = savedMain as FontSize
 
   const savedBody = parseInt(localStorage.getItem('bodyFontSize') || '', 10)
   if (FONT_SIZES.includes(savedBody as any)) bodyFontSize.value = savedBody as FontSize
 
+  // Layout controls v-if/v-else DOM structure — must defer to after hydration
+  // to avoid SSR/client mismatch (SSR always renders vertical)
+  nextTick(() => {
+    const savedLayout = localStorage.getItem('layout') as LayoutMode | null
+    if (savedLayout === 'vertical' || savedLayout === 'horizontal') layout.value = savedLayout
+  })
+
   watch(theme, t => {
     document.documentElement.setAttribute('data-theme', t)
     localStorage.setItem('theme', t)

package/template/src/composables/useSiteConfig.ts

@@ -4,10 +4,16 @@ import type { Theme } from './useReadingMode'
 
 const LOGO_LIGHT = import.meta.env.CHAM_LOGO_URL || undefined
 const LOGO_DARK = import.meta.env.CHAM_LOGO_DARK_URL || undefined
+const SITE_TITLE = import.meta.env.CHAM_SITE_TITLE || ''
+const SITE_SUBTITLE = import.meta.env.CHAM_SITE_SUBTITLE || ''
+const ABOUT_HTML = import.meta.env.CHAM_ABOUT_HTML || ''
 
 const DARK_THEMES: Theme[] = ['dark', 'oled']
 
 export interface SiteConfig {
+  siteTitle: string
+  siteSubtitle: string
+  aboutHtml: string
   logoUrl: ReturnType<typeof computed<string | undefined>>
 }
 
@@ -17,5 +23,10 @@ export function useSiteConfig(): SiteConfig {
     if (DARK_THEMES.includes(theme.value) && LOGO_DARK) return LOGO_DARK
     return LOGO_LIGHT
   })
-  return { logoUrl }
+  return {
+    siteTitle: SITE_TITLE,
+    siteSubtitle: SITE_SUBTITLE,
+    aboutHtml: ABOUT_HTML,
+    logoUrl,
+  }
 }

package/template/src/router.ts

@@ -8,11 +8,9 @@ import LibraryHome from './views/LibraryHome.vue'
 import BookHome from './views/BookHome.vue'
 import PieceView from './views/PieceView.vue'
 import AuthorView from './views/AuthorView.vue'
-import AboutView from './views/AboutView.vue'
 
 export const routes: RouteRecordRaw[] = [
   { path: '/', component: LibraryHome },
-  { path: '/about', component: AboutView },
   { path: '/author/:name', component: AuthorView, props: true },
   { path: '/:bookId', component: BookHome, props: true },
   { path: '/:bookId/:num', component: PieceView, props: true },