perf(theme): optimize scroll-padding-top (#191)

plugins/plugin-md-power/src/client/components/FileTreeItem.vue

@@ -123,7 +123,7 @@ onUnmounted(() => {
   transition: color var(--t-color);
 }
 
-.file-tree-item .tree-node.file .name.focus {
+.file-tree-item .tree-node .name.focus {
   font-weight: bold;
   color: var(--vp-c-brand-1);
   transition: color var(--t-color);

theme/src/client/components/VPButton.vue

@@ -29,7 +29,7 @@ const component = computed(() => {
 const { link, isExternal } = useLink(toRef(props, 'href'), toRef(props, 'target'))
 
 function linkTo(e: Event) {
-  if (!isExternal.value) {
+  if (!isExternal.value && link.value?.[0] !== '#') {
     e.preventDefault()
     if (link.value)
       router.push(link.value)
@@ -42,7 +42,7 @@ function linkTo(e: Event) {
     :is="component"
     class="vp-button"
     :class="[size, theme]"
-    :href="withBase(link || '')"
+    :href="link?.[0] === '#' ? link : withBase(link || '')"
     :target="target ?? (isExternal ? '_blank' : undefined)"
     :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
     @click="linkTo($event)"

theme/src/client/components/VPContent.vue

@@ -5,6 +5,7 @@ import VPDoc from '@theme/VPDoc.vue'
 import VPFriends from '@theme/VPFriends.vue'
 import VPPage from '@theme/VPPage.vue'
 import { nextTick, watch } from 'vue'
+import { useRoute } from 'vuepress/client'
 import { useBlogPageData, useData, useSidebar } from '../composables/index.js'
 import { inBrowser } from '../utils/index.js'
 
@@ -15,13 +16,21 @@ const props = defineProps<{
 const { hasSidebar } = useSidebar()
 const { frontmatter } = useData()
 const { isBlogLayout } = useBlogPageData()
+const route = useRoute()
 
-watch([isBlogLayout, () => frontmatter.value.pageLayout], () => nextTick(() =>
-  inBrowser && document.documentElement.classList.toggle(
-    'bg-gray',
-    isBlogLayout.value,
-  ),
-), { immediate: true })
+watch(
+  [isBlogLayout, () => frontmatter.value.pageLayout, () => route.path],
+  () => nextTick(() => {
+    if (inBrowser) {
+      document.documentElement.classList.toggle('bg-gray', isBlogLayout.value)
+      const layout = document.documentElement.className.match(/(?:^|\s)(layout-\S+)(?:$|\s)/)?.[1]
+      if (layout)
+        document.documentElement.classList.remove(layout)
+      document.documentElement.classList.add(`layout-${isBlogLayout.value ? 'blog' : frontmatter.value.pageLayout || 'doc'}`)
+    }
+  }),
+  { immediate: true },
+)
 </script>
 
 <template>

theme/src/client/composables/link.ts

@@ -29,7 +29,13 @@ export function useLink(
     const currentPath = link.startsWith('./') && SEARCH_RE.test(link)
       ? `/${page.value.filePathRelative!}`
       : route.path
-    return resolveRouteFullPath(link, currentPath)
+    const path = resolveRouteFullPath(link, currentPath)
+    if (path.includes('#')) {
+      if (path.slice(0, path.indexOf('#')) === route.path) {
+        return path.slice(path.indexOf('#'))
+      }
+    }
+    return path
   })
 
   return { isExternal, link }

theme/src/client/styles/normalize.css

@@ -23,7 +23,17 @@ html {
   font-size: 16px;
   line-height: 1.4;
 
-  scroll-padding-top: 80px;
+  scroll-padding-top: 0;
+}
+
+@media (min-width: 960px) {
+  html {
+    scroll-padding-top: 80px;
+  }
+
+  html.layout-home {
+    scroll-padding-top: var(--vp-nav-height, 80px);
+  }
 }
 
 body {

theme/src/node/plugins/getPlugins.ts

@@ -47,7 +47,7 @@ export function getPlugins({
       headerLinkSelector: 'a.outline-link',
       headerAnchorSelector: '.header-anchor',
       delay: 200,
-      offset: 20,
+      offset: 5,
     }),
 
     ...customContainerPlugins,