From d91996fd0864abd5029e4c4cff319db48be06b47 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Mon, 24 Apr 2023 09:07:20 +0800 Subject: [PATCH 01/78] fix(plugin-theme-data): remove locales field in themeLocaleData (close #1287) (#1313) --- .../src/client/composables/useThemeLocaleData.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/ecosystem/plugin-theme-data/src/client/composables/useThemeLocaleData.ts b/ecosystem/plugin-theme-data/src/client/composables/useThemeLocaleData.ts index 9683c056bdd..23a375a22b6 100644 --- a/ecosystem/plugin-theme-data/src/client/composables/useThemeLocaleData.ts +++ b/ecosystem/plugin-theme-data/src/client/composables/useThemeLocaleData.ts @@ -26,7 +26,11 @@ export const useThemeLocaleData = < export const resolveThemeLocaleData = ( theme: ThemeData, routeLocale: RouteLocale -): ThemeData => ({ - ...theme, - ...theme.locales?.[routeLocale], -}) +): ThemeData => { + const { locales, ...baseOptions } = theme + + return { + ...baseOptions, + ...locales?.[routeLocale], + } +} From 3382bb1763eec68f3f0380a9ec887f0b0a3b0e95 Mon Sep 17 00:00:00 2001 From: Vinicius Teixeira Dias <69281620+viniciusteixeiradias@users.noreply.github.com> Date: Tue, 9 May 2023 00:07:55 +1000 Subject: [PATCH 02/78] fix(plugin-docsearch): allow using slash key to init docsearch (#1323) --- .../composables/useDocsearchHotkeyListener.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/ecosystem/plugin-docsearch/src/client/composables/useDocsearchHotkeyListener.ts b/ecosystem/plugin-docsearch/src/client/composables/useDocsearchHotkeyListener.ts index e31f8cce499..086d9890e9e 100644 --- a/ecosystem/plugin-docsearch/src/client/composables/useDocsearchHotkeyListener.ts +++ b/ecosystem/plugin-docsearch/src/client/composables/useDocsearchHotkeyListener.ts @@ -5,10 +5,15 @@ import { useEventListener } from '@vueuse/core' */ export const useDocsearchHotkeyListener = (callback: () => void): void => { const remove = useEventListener('keydown', (event) => { - if (event.key === 'k' && (event.ctrlKey || event.metaKey)) { - event.preventDefault() - callback() - remove() + const isHotKeyBind = event.key === 'k' && (event.ctrlKey || event.metaKey) + const isSlashKey = event.key === '/' + + if (!isSlashKey && !isHotKeyBind) { + return } + + event.preventDefault() + callback() + remove() }) } From 23bdec6969b9666b800e0ebeb9e9b3a6ed05ef98 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Mon, 8 May 2023 22:19:42 +0800 Subject: [PATCH 03/78] perf(shared): reduce regexp match usage (#1315) --- packages/shared/src/utils/ensureEndingSlash.ts | 2 +- packages/shared/src/utils/ensureLeadingSlash.ts | 2 +- packages/shared/src/utils/removeEndingSlash.ts | 3 ++- packages/shared/src/utils/removeLeadingSlash.ts | 2 +- packages/shared/src/utils/resolveRoutePathFromUrl.ts | 12 ++++++++---- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/shared/src/utils/ensureEndingSlash.ts b/packages/shared/src/utils/ensureEndingSlash.ts index f058fbf12ef..678f3eeefcc 100644 --- a/packages/shared/src/utils/ensureEndingSlash.ts +++ b/packages/shared/src/utils/ensureEndingSlash.ts @@ -2,4 +2,4 @@ * Ensure a url string to have ending slash / */ export const ensureEndingSlash = (str: string): string => - /(\.html|\/)$/.test(str) ? str : str + '/' + str[str.length - 1] === '/' || str.endsWith('.html') ? str : `${str}/` diff --git a/packages/shared/src/utils/ensureLeadingSlash.ts b/packages/shared/src/utils/ensureLeadingSlash.ts index b2446b63c3d..1d574a86b41 100644 --- a/packages/shared/src/utils/ensureLeadingSlash.ts +++ b/packages/shared/src/utils/ensureLeadingSlash.ts @@ -2,4 +2,4 @@ * Ensure a url string to have leading slash / */ export const ensureLeadingSlash = (str: string): string => - str.replace(/^\/?/, '/') + str[0] === '/' ? str : `/${str}` diff --git a/packages/shared/src/utils/removeEndingSlash.ts b/packages/shared/src/utils/removeEndingSlash.ts index a8ab2a8c058..38c12f8fe4b 100644 --- a/packages/shared/src/utils/removeEndingSlash.ts +++ b/packages/shared/src/utils/removeEndingSlash.ts @@ -1,4 +1,5 @@ /** * Remove ending slash / from a string */ -export const removeEndingSlash = (str: string): string => str.replace(/\/$/, '') +export const removeEndingSlash = (str: string): string => + str[str.length - 1] === '/' ? str.slice(0, -1) : str diff --git a/packages/shared/src/utils/removeLeadingSlash.ts b/packages/shared/src/utils/removeLeadingSlash.ts index 1fb2a9a9491..227c1dff5ff 100644 --- a/packages/shared/src/utils/removeLeadingSlash.ts +++ b/packages/shared/src/utils/removeLeadingSlash.ts @@ -2,4 +2,4 @@ * Remove leading slash / from a string */ export const removeLeadingSlash = (str: string): string => - str.replace(/^\//, '') + str[0] === '/' ? str.slice(1) : str diff --git a/packages/shared/src/utils/resolveRoutePathFromUrl.ts b/packages/shared/src/utils/resolveRoutePathFromUrl.ts index 3781f0828ce..da25efd99cc 100644 --- a/packages/shared/src/utils/resolveRoutePathFromUrl.ts +++ b/packages/shared/src/utils/resolveRoutePathFromUrl.ts @@ -1,6 +1,10 @@ -export const resolveRoutePathFromUrl = (url: string, base = '/'): string => - url +export const resolveRoutePathFromUrl = (url: string, base = '/'): string => { + const pathname = url // remove url origin .replace(/^(https?:)?\/\/[^/]*/, '') - // remove site base - .replace(new RegExp(`^${base}`), '/') + + // remove site base + return pathname.startsWith(base) + ? `/${pathname.slice(base.length)}` + : pathname +} From eb0d0eaa4a57843838c6e564a8ced164b34d7677 Mon Sep 17 00:00:00 2001 From: zhaopan-pan Date: Wed, 10 May 2023 22:24:14 +0800 Subject: [PATCH 04/78] feat(theme-default): improve css variable acquisition (#1322) --- .../src/client/components/Navbar.vue | 31 +++++++++---------- .../src/client/components/NavbarItems.vue | 27 ++++++++-------- .../src/client/composables/index.ts | 1 + .../composables/useUpdateDeviceStatus.ts | 30 ++++++++++++++++++ ecosystem/theme-default/src/client/shim.d.ts | 5 +++ .../src/client/styles/_variables.module.scss | 5 +++ 6 files changed, 69 insertions(+), 30 deletions(-) create mode 100644 ecosystem/theme-default/src/client/composables/useUpdateDeviceStatus.ts create mode 100644 ecosystem/theme-default/src/client/styles/_variables.module.scss diff --git a/ecosystem/theme-default/src/client/components/Navbar.vue b/ecosystem/theme-default/src/client/components/Navbar.vue index 8fbfa7f3ab0..d08800d7eae 100644 --- a/ecosystem/theme-default/src/client/components/Navbar.vue +++ b/ecosystem/theme-default/src/client/components/Navbar.vue @@ -3,8 +3,12 @@ import NavbarBrand from '@theme/NavbarBrand.vue' import NavbarItems from '@theme/NavbarItems.vue' import ToggleColorModeButton from '@theme/ToggleColorModeButton.vue' import ToggleSidebarButton from '@theme/ToggleSidebarButton.vue' -import { computed, onMounted, ref } from 'vue' -import { useThemeLocaleData } from '../composables/index.js' +import { computed, ref } from 'vue' +import { + DeviceType, + useThemeLocaleData, + useUpdateDeviceStatus, +} from '../composables/index.js' defineEmits(['toggle-sidebar']) @@ -23,16 +27,14 @@ const linksWrapperStyle = computed(() => { } }) -// avoid overlapping of long title and long navbar links -onMounted(() => { - // TODO: migrate to css var - // refer to _variables.scss - const MOBILE_DESKTOP_BREAKPOINT = 719 - const navbarHorizontalPadding = - getCssValue(navbar.value, 'paddingLeft') + - getCssValue(navbar.value, 'paddingRight') - const handleLinksWrapWidth = (): void => { - if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) { +useUpdateDeviceStatus( + DeviceType.MOBILE, + (mobileDesktopBreakpoint: number): void => { + // avoid overlapping of long title and long navbar links + const navbarHorizontalPadding = + getCssValue(navbar.value, 'paddingLeft') + + getCssValue(navbar.value, 'paddingRight') + if (window.innerWidth < mobileDesktopBreakpoint) { linksWrapperMaxWidth.value = 0 } else { linksWrapperMaxWidth.value = @@ -41,10 +43,7 @@ onMounted(() => { (navbarBrand.value?.offsetWidth || 0) } } - handleLinksWrapWidth() - window.addEventListener('resize', handleLinksWrapWidth, false) - window.addEventListener('orientationchange', handleLinksWrapWidth, false) -}) +) function getCssValue(el: HTMLElement | null, property: string): number { // NOTE: Known bug, will return 'auto' if style value is 'auto' diff --git a/ecosystem/theme-default/src/client/components/NavbarItems.vue b/ecosystem/theme-default/src/client/components/NavbarItems.vue index 9d64ad3dc4b..4d88c691999 100644 --- a/ecosystem/theme-default/src/client/components/NavbarItems.vue +++ b/ecosystem/theme-default/src/client/components/NavbarItems.vue @@ -3,7 +3,7 @@ import AutoLink from '@theme/AutoLink.vue' import NavbarDropdown from '@theme/NavbarDropdown.vue' import { useRouteLocale, useSiteLocaleData } from '@vuepress/client' import { isLinkHttp, isString } from '@vuepress/shared' -import { computed, onMounted, ref } from 'vue' +import { computed, ref } from 'vue' import type { ComputedRef } from 'vue' import { useRouter } from 'vue-router' import type { @@ -11,7 +11,12 @@ import type { NavbarItem, ResolvedNavbarItem, } from '../../shared/index.js' -import { useNavLink, useThemeLocaleData } from '../composables/index.js' +import { + DeviceType, + useNavLink, + useThemeLocaleData, + useUpdateDeviceStatus, +} from '../composables/index.js' import { resolveRepoType } from '../utils/index.js' /** @@ -152,23 +157,17 @@ const navbarLinks = computed(() => [ ...navbarRepo.value, ]) -// avoid overlapping of long title and long navbar links -onMounted(() => { - // TODO: migrate to css var - // refer to _variables.scss - const MOBILE_DESKTOP_BREAKPOINT = 719 - - const handleMobile = (): void => { - if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) { +useUpdateDeviceStatus( + DeviceType.MOBILE, + (mobileDesktopBreakpoint: number): void => { + // avoid overlapping of long title and long navbar links + if (window.innerWidth < mobileDesktopBreakpoint) { isMobile.value = true } else { isMobile.value = false } } - handleMobile() - window.addEventListener('resize', handleMobile, false) - window.addEventListener('orientationchange', handleMobile, false) -}) +)