fix: reactivity of CopyrightInfo (#427)

project-trans · Sep 19, 2024 · 75cef0f · 75cef0f
1 parent 6eb309e
commit 75cef0f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/packages/vitepress-theme-project-trans/src/Layout.vue b/packages/vitepress-theme-project-trans/src/Layout.vue
@@ -22,12 +22,12 @@ const { frontmatter } = useData()
   <AppearanceToggle>
     <Layout>
       <template #doc-before>
-        <div class="vp-doc">
+        <NolebaseHighlightTargetedHeading />
+        <div class="vp-doc vp-doc-before">
           <h1>{{ frontmatter.title }}</h1>
           <PageInfo />
           <CopyrightInfo />
         </div>
-        <NolebaseHighlightTargetedHeading />
       </template>
       <template #doc-after>
         <AppFooter />
@@ -41,3 +41,10 @@ const { frontmatter } = useData()
     </Layout>
   </AppearanceToggle>
 </template>
+
+<style>
+.vp-doc-before + main > div > div > h2:first-of-type {
+  border-top: unset;
+  margin-top: 0;
+}
+</style>
diff --git a/packages/vitepress-theme-project-trans/src/components/CopyrightInfo.vue b/packages/vitepress-theme-project-trans/src/components/CopyrightInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
+import { computed } from 'vue'
 import type { Node, Trie } from '../plugins/CopyrightLoader.data'
 import { data } from '../plugins/CopyrightLoader.data'
 
@@ -28,16 +29,16 @@ function searchClosestInTrie(
 const paths = useData()
   .page.value.relativePath.replace('.md', '').split('/')
   .filter((item: string) => item !== '')
-const attrs = searchClosestInTrie(data, paths)
-const frontmatter = useData().frontmatter.value
+const attrs = computed(() => searchClosestInTrie(data, paths))
+const frontmatter = useData().frontmatter
 
-const originUrlExists = (attrs?.copyright?.url ?? null) != null
-const originUrl = attrs?.copyright?.url ?? 'javascript:void(0)'
+const originUrlExists = computed(() => (attrs.value?.copyright?.url ?? null) != null)
+const originUrl = computed(() => attrs.value?.copyright?.url ?? 'javascript:void(0)')
 
-const license = attrs?.copyright?.license ?? null
-const licenseExists = license != null
-const licenseUrlExists = (attrs?.copyright?.licenseUrl ?? null) != null
-const licenseUrl = attrs?.copyright?.licenseUrl ?? 'javascript:void(0)'
+const license = computed(() => attrs.value?.copyright?.license ?? null)
+const licenseExists = computed(() => license.value != null)
+const licenseUrlExists = computed(() => (attrs.value?.copyright?.licenseUrl ?? null) != null)
+const licenseUrl = computed(() => attrs.value?.copyright?.licenseUrl ?? 'javascript:void(0)')
 </script>
 
 <template>