valaxy-theme-press 0.15.5 → 0.15.7

package/README.md

@@ -1,11 +1,11 @@
 # valaxy-theme-press
 
-This is a theme for valaxy docs.
+This is a theme for [valaxy docs](https://valaxy.site/).
 
 Inspired by [vitepress](https://vitepress.dev).
 
 我开发此主题以编写 Valaxy 的初期文档，同时以便发现 valaxy 编写主题中的痛点。
-<!-- 它增加了 VitePress 一些所没有的功能，而随着 VitePress 的完善，该主题将不再被维护，文档也将在未来迁移至 VitePress。 -->
+它增加了 VitePress 此前默认所没有的一些功能，KaTeX、文章分类、单页 CSS i18n + Vue i18n、Vue Router、Pinia 状态管理，组件自动注册等。
 
 - [预览](https://press.valaxy.site)
 

package/client/config.ts

@@ -0,0 +1 @@
+export const targetPadding = -40

package/client/index.ts

@@ -1 +1,3 @@
+export * from './config'
+
 export * from '../composables'

package/components/PressAlgoliaSearch.vue

@@ -44,6 +44,7 @@ const { loaded, load, metaKey } = useAddonAlgolia()
 </template>
 
 <style>
+/* stylelint-disable selector-class-pattern */
 .DocSearch-Button {
   display: flex;
   justify-content: center;
@@ -69,7 +70,7 @@ const { loaded, load, metaKey } = useAddonAlgolia()
   outline: none !important;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .DocSearch-Button {
     justify-content: flex-start;
     border: 1px solid transparent;
@@ -96,7 +97,7 @@ const { loaded, load, metaKey } = useAddonAlgolia()
   width: 16px;
   height: 16px;
   color: var(--va-c-text-1);
-  fill: currentColor;
+  fill: currentcolor;
   transition: color 0.5s;
 }
 
@@ -104,7 +105,7 @@ const { loaded, load, metaKey } = useAddonAlgolia()
   color: var(--va-c-text-1);
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .DocSearch-Button .DocSearch-Search-Icon {
     top: 1px;
     margin-right: 8px;
@@ -128,20 +129,20 @@ const { loaded, load, metaKey } = useAddonAlgolia()
   color: var(--va-c-text-1);
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .DocSearch-Button .DocSearch-Button-Placeholder {
     display: inline-block;
   }
 }
 
 .DocSearch-Button .DocSearch-Button-Keys {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   direction: ltr;
   display: none;
   min-width: auto;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .DocSearch-Button .DocSearch-Button-Keys {
     display: flex;
     align-items: center;
@@ -150,13 +151,15 @@ const { loaded, load, metaKey } = useAddonAlgolia()
 
 .DocSearch-Button .DocSearch-Button-Key {
   display: block;
-  margin: 2px 0 0 0;
+  margin: 2px 0 0;
   border: 1px solid var(--va-c-divider);
-  /*rtl:begin:ignore*/
+
+  /* rtl:begin:ignore */
   border-right: none;
   border-radius: 4px 0 0 4px;
   padding-left: 6px;
-  /*rtl:end:ignore*/
+
+  /* rtl:end:ignore */
   min-width: 0;
   width: auto;
   height: 22px;
@@ -167,13 +170,14 @@ const { loaded, load, metaKey } = useAddonAlgolia()
 }
 
 .DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  /*rtl:begin:ignore*/
+  /* rtl:begin:ignore */
   border-right: 1px solid var(--va-c-divider);
   border-left: none;
   border-radius: 0 4px 4px 0;
   padding-left: 2px;
   padding-right: 6px;
-  /*rtl:end:ignore*/
+
+  /* rtl:end:ignore */
 }
 
 .DocSearch-Button .DocSearch-Button-Key:first-child {
@@ -182,7 +186,8 @@ const { loaded, load, metaKey } = useAddonAlgolia()
   color: transparent;
 }
 
-.DocSearch-Button .DocSearch-Button-Key:first-child:after {
+.DocSearch-Button .DocSearch-Button-Key:first-child::after {
+  /* stylelint-disable-next-line value-keyword-case */
   content: v-bind(metaKey);
   font-size: 12px;
   letter-spacing: normal;

package/components/PressAside.vue

@@ -47,9 +47,7 @@ const app = useAppStore()
   right: 0;
   z-index: var(--pr-z-aside);
   width: var(--va-aside-width);
-
   transform: translateX(100%);
-
   transition: box-shadow var(--va-transition-duration), opacity 0.25s,
   transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
 

package/components/PressBackdrop.vue

@@ -13,10 +13,7 @@ defineProps<{
 <style scoped lang="scss">
 .press-backdrop {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: var(--pr-z-backdrop);
   background: rgba(0, 0, 0, .6);
   transition: opacity 0.5s;
@@ -31,7 +28,7 @@ defineProps<{
   }
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .press-backdrop {
     display: none;
   }

package/components/PressCategories.vue

@@ -43,10 +43,11 @@ function getCategoryByName(name: string) {
 .category-list {
   &:first-child {
     .category-list-item {
-      border-top: 0px;
+      border-top: 0;
     }
   }
 }
+
 .post-list-item {
   a {
     color: var(--va-c-text-light);

package/components/PressDocFooterLastUpdated.vue

@@ -28,6 +28,7 @@ const { t } = useI18n()
 </template>
 
 <style scoped>
+/* stylelint-disable selector-class-pattern */
 .press-lastUpdated {
   line-height: 24px;
   font-size: 14px;
@@ -35,7 +36,7 @@ const { t } = useI18n()
   color: var(--va-c-text-light);
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .press-lastUpdated {
     line-height: 32px;
     font-size: 14px;

package/components/PressFooter.vue

@@ -28,7 +28,7 @@ const { hasSidebar } = useSidebar()
   }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .pr-footer {
     padding: 32px;
   }

package/components/PressHome.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="press-home" style="--va-code-mobile-margin-x: 0">
+  <div
+    class="press-home" style="
+
+--va-code-mobile-margin-x: 0"
+  >
     <slot name="home-hero-before" />
     <PressHomeHero />
     <slot name="home-hero-after" />

package/components/PressLocalNav.vue

@@ -95,7 +95,7 @@ const { headers } = useOutline()
   margin-right: 8px;
   width: 16px;
   height: 16px;
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .top-link {

package/components/PressLocalNavOutlineDropdown.vue

@@ -73,6 +73,7 @@ const { t } = useI18n()
 </template>
 
 <style scoped>
+/* stylelint-disable selector-class-pattern */
 .VPLocalNavOutlineDropdown {
   padding: 12px 20px 11px;
 }
@@ -102,7 +103,7 @@ const { t } = useI18n()
   margin-left: 2px;
   width: 14px;
   height: 14px;
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 :deep(.outline-link) {

package/components/PressNav.vue

@@ -32,13 +32,8 @@ const classes = computed(() => ({
   z-index: var(--pr-z-nav);
 }
 
-.pr-Nav.fill-bg {
-  background-color: var(--pr-nav-bg-color);
-}
-
 @include screen('md') {
   .press-nav {
-    -webkit-backdrop-filter: saturate(50%) blur(8px);
     backdrop-filter: saturate(50%) blur(8px);
   }
 }

package/components/PressNavBar.vue

@@ -70,7 +70,6 @@ const themeConfig = useThemeConfig()
   .pr-navbar.has-sidebar .content {
     margin-right: -32px;
     padding-right: 32px;
-    -webkit-backdrop-filter: saturate(50%) blur(8px);
     backdrop-filter: saturate(50%) blur(8px);
   }
 

package/components/PressNavBarHamburger.vue

@@ -27,6 +27,8 @@ defineEmits<{
 </template>
 
 <style scoped>
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-single-line-max-declarations */
 .pr-NavBarHamburger {
   display: flex;
   justify-content: center;
@@ -35,7 +37,7 @@ defineEmits<{
   height: var(--pr-nav-height);
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .pr-NavBarHamburger {
     display: none;
   }

package/components/PressNavBarSearch.vue

@@ -20,19 +20,20 @@ const PressAlgoliaSearch = isAlgolia.value
 </template>
 
 <style>
+/* stylelint-disable selector-class-pattern */
 .VPNavBarSearch {
   display: flex;
   align-items: center;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .VPNavBarSearch {
     flex-grow: 1;
     padding-left: 24px;
   }
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .VPNavBarSearch {
     padding-left: 32px;
   }

package/components/PressNavBarSocialLinks.vue

@@ -17,7 +17,7 @@ const themeConfig = useThemeConfig()
   display: none;
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .pr-nav-bar-social-links {
     display: flex;
     align-items: center;

package/components/PressNavItemGroup.vue

@@ -61,18 +61,17 @@ const { t } = useI18n()
   position: absolute;
   top: 20px;
   left: 50%;
-
   min-width: 128px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
   transform: translateX(-50%) translateY(calc(var(--pr-nav-height) / 2));
-
   border-radius: 12px;
   padding: 12px;
   border: 1px solid rgba(60, 60, 60, 0.12);
-  background-color: #ffffff;
+  background-color: #fff;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+
   .dark &{
     background-color: #242424;
   }

package/components/PressNavItemLink.vue

@@ -37,6 +37,7 @@ const { t } = useI18n()
     color: var(--va-c-brand);
   }
 }
+
 .active{
   color: var(--va-c-brand);
 }

package/components/PressNavScreen.vue

@@ -31,14 +31,14 @@ const { lockBodyScroll, unlockBodyScroll } = useBodyScrollLock(screen)
 </template>
 
 <style scoped>
+/* stylelint-disable selector-class-pattern */
 .pr-NavScreen {
   position: fixed;
-  top: calc(var(--pr-nav-height) + var(--pr-layout-top-height, 0px) + 1px);
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
+  inset: calc(var(--pr-nav-height) + var(--pr-layout-top-height, 0px) + 1px) 0 0 0;
+
+  /* rtl:ignore */
+
+  /* rtl:ignore */
   padding: 0 32px;
   width: 100%;
   background-color: var(--pr-nav-screen-bg-color);
@@ -67,7 +67,7 @@ const { lockBodyScroll, unlockBodyScroll } = useBodyScrollLock(screen)
   transform: translateY(-8px);
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .pr-NavScreen {
     display: none;
   }

package/components/PressNavScreenMenuGroup.vue

@@ -80,7 +80,7 @@ function toggle() {
 }
 
 .pr-nav-screen-menu-group.open .button-icon {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   transform: rotate(45deg);
 }
 
@@ -109,7 +109,7 @@ function toggle() {
 }
 
 .group:first-child {
-  padding-top: 0px;
+  padding-top: 0;
 }
 
 .group + .group,

package/components/PressSidebar.vue

@@ -45,7 +45,6 @@ const { hasSidebar } = useSidebar()
 
 .press-sidebar {
   position: fixed;
-  top: 0;
   bottom: 0;
   left: 0;
   padding: 1rem;

package/components/PressSocialLink.vue

@@ -35,6 +35,6 @@ defineProps<{
 .pr-social-link > :deep(svg) {
   width: 20px;
   height: 20px;
-  fill: currentColor;
+  fill: currentcolor;
 }
 </style>

package/components/PressSwitchAppearance.vue

@@ -37,7 +37,7 @@ import { isDark, toggleDark } from 'valaxy'
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background-color: #ffffff;
+  background-color: #fff;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
   transition: background-color 0.25s, transform 0.25s;
 }

package/components/ValaxyMain.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { useFrontmatter, useLayout, useSidebar, useSiteConfig } from 'valaxy'
-import { computed } from 'vue'
+import { scrollTo, useFrontmatter, useLayout, useSidebar, useSiteConfig } from 'valaxy'
+import { computed, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 import { getLocaleTitle } from '../utils'
+import { targetPadding } from '../client'
 
 defineProps<{
   frontmatter: Post
@@ -19,6 +21,19 @@ const layout = useLayout()
 
 const { locale } = useI18n()
 const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.value))
+
+const route = useRoute()
+
+nextTick(() => {
+  if (route.hash) {
+    setTimeout(() => {
+      scrollTo(document.body, route.hash, {
+        smooth: true,
+        targetPadding,
+      })
+    }, 0)
+  }
+})
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.15.5",
+  "version": "0.15.7",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -23,6 +23,6 @@
     "@docsearch/js": "^3.5.2"
   },
   "devDependencies": {
-    "valaxy": "0.15.5"
+    "valaxy": "0.15.7"
   }
 }

package/setup/main.ts

@@ -1,4 +1,4 @@
-import { defineAppSetup } from 'valaxy'
+import { defineAppSetup, scrollTo } from 'valaxy'
 import { nextTick } from 'vue'
 
 import 'vitepress/dist/client/theme-default/styles/vars.css'
@@ -12,6 +12,8 @@ import 'vitepress/dist/client/theme-default/styles/components/custom-block.css'
 
 // import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css'
 
+import { targetPadding } from '../client'
+
 export default defineAppSetup((ctx) => {
   const { router, isClient } = ctx
   if (!isClient)
@@ -46,7 +48,9 @@ export default defineAppSetup((ctx) => {
               // still emit the event so we can listen to it in themes
               window.dispatchEvent(new Event('hashchange'))
               // use smooth scroll when clicking on header anchor links
-              scrollTo(link, hash, link.classList.contains('header-anchor'))
+              scrollTo(link, hash, {
+                smooth: link.classList.contains('header-anchor'),
+              })
             }
           }
         }
@@ -64,39 +68,10 @@ export default defineAppSetup((ctx) => {
       return
 
     nextTick(() => {
-      scrollTo(document.body, to.hash, true)
+      scrollTo(document.body, to.hash, {
+        smooth: true,
+        targetPadding,
+      })
     })
   })
 })
-
-function scrollTo(el: HTMLElement, hash: string, smooth = false) {
-  let target: Element | null = null
-  try {
-    target = el.classList.contains('header-anchor')
-      ? el
-      : ((decodeURIComponent(hash) && document.querySelector(decodeURIComponent(hash))) || null)
-  }
-  catch (e) {
-    console.warn(e)
-  }
-
-  if (target) {
-    const targetPadding = -64
-    const targetTop
-      = window.scrollY
-      + (target as HTMLElement).getBoundingClientRect().top
-      + targetPadding
-
-    // only smooth scroll if distance is smaller than screen height.
-    if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight) {
-      window.scrollTo(0, targetTop)
-    }
-    else {
-      window.scrollTo({
-        left: 0,
-        top: targetTop,
-        behavior: 'smooth',
-      })
-    }
-  }
-}

package/styles/css-vars.scss

@@ -1,20 +1,14 @@
 :root {
   --pr-c-indigo-lighter: #c9def1;
-}
-
-:root {
   --pr-c-bg: var(--va-c-bg);
-
   --pr-c-text-code: #374562;
   --pr-c-text-1: #213547;
-  --pr-c-text-2: rgba(60, 60, 60, .7);
+  --pr-c-text-2: rgba(60, 60, 60, 0.7);
 
   // aside
   --pr-aside-text-1: var(--pr-c-text-1);
   --pr-aside-text-2: rgba(60, 60, 60, 0.702);
-
   --pr-aside-divider: rgba(60, 60, 60, 0.122);
-
   --pr-c-divider-light: rgba(60, 60, 60, 0.12);
 
   // nav
@@ -39,7 +33,7 @@
 .dark {
   --pr-c-text-code: var(--pr-c-indigo-lighter);
   --pr-c-text-1: #ffffffde;
-  --pr-c-text-2: rgba(235, 235, 235, .6);
+  --pr-c-text-2: rgba(235, 235, 235, 0.6);
 
   // aside
   --pr-aside-text-2: #ebebeb99;

package/styles/helper.scss

@@ -1,5 +1,6 @@
 .gradient-text {
   background-clip: text;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -17,15 +18,12 @@
 
 .press-icon-btn {
   cursor: pointer;
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
   border: none;
   width: 3rem;
   height: 3rem;
-
   border-radius: 50%;
 
   div {

package/styles/markdown.scss

@@ -40,7 +40,7 @@
   }
 
   ul {
-    margin-top: 0em;
+    margin-top: 0;
     margin-bottom: 0.25em;
   }
 }