From 1079a695a6bba96deabae07b696108472432ff25 Mon Sep 17 00:00:00 2001 From: Serhii Bedrytskyi Date: Thu, 17 Nov 2022 15:51:23 +0200 Subject: [PATCH 1/6] fix: click on heading and toc --- app/router.options.ts | 16 +++++++++++++++ assets/css/main.css | 4 ++-- components/docs/DocsPageContent.vue | 11 +---------- components/docs/DocsTocLinks.vue | 30 +++++++++++------------------ nuxt.config.ts | 1 + 5 files changed, 31 insertions(+), 31 deletions(-) create mode 100644 app/router.options.ts diff --git a/app/router.options.ts b/app/router.options.ts new file mode 100644 index 000000000..67145fe8a --- /dev/null +++ b/app/router.options.ts @@ -0,0 +1,16 @@ +import type { RouterConfig } from '@nuxt/schema' +// https://router.vuejs.org/api/interfaces/routeroptions.html +export default { + + scrollBehavior (to, from, savedPosition) { + if (to.hash) { + const { marginTop } = getComputedStyle((document.querySelector(to.hash) as any)) + const marginTopValue = parseInt(marginTop) + const offset = (document.querySelector(to.hash) as any).offsetTop - marginTopValue + return { + top: offset, + behavior: 'smooth' + } + } + } +} diff --git a/assets/css/main.css b/assets/css/main.css index b787bf349..9c2a57eed 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -50,12 +50,12 @@ box-shadow: none !important; } -html, +/* html, body { height: 100%; width: 100%; overflow: auto; -} +} */ body { overflow-y: scroll; diff --git a/components/docs/DocsPageContent.vue b/components/docs/DocsPageContent.vue index 03b7f4708..aec5faa9a 100644 --- a/components/docs/DocsPageContent.vue +++ b/components/docs/DocsPageContent.vue @@ -85,12 +85,10 @@ onBeforeUnmount(() => { +
@@ -217,13 +215,6 @@ css({ alignSelf: 'flex-start', py: '{space.8}', }, - '&.closed': { - display: 'flex', - alignItems: 'center', - '@mq.lg': { - display: 'block' - } - }, '.toc-wrapper': { width: '100%', backdropFilter: '{backdrop.filter}', diff --git a/components/docs/DocsTocLinks.vue b/components/docs/DocsTocLinks.vue index 5688d1d43..a55d5b891 100644 --- a/components/docs/DocsTocLinks.vue +++ b/components/docs/DocsTocLinks.vue @@ -16,26 +16,18 @@ const router = useRouter() const { activeHeadings, updateHeadings } = useScrollspy() -watch( - () => route.path, - () => { - if (process.client) { - setTimeout(() => { - updateHeadings([ - ...document.querySelectorAll('.document-driven-page h1, .docus-content h1'), - ...document.querySelectorAll('.document-driven-page h2, .docus-content h2'), - ...document.querySelectorAll('.document-driven-page h3, .docus-content h3'), - ...document.querySelectorAll('.document-driven-page h4, .docus-content h4') - ]) - }, 300) - } - }, - { - immediate: true - } -) +if (process.client) { + setTimeout(() => { + updateHeadings([ + ...document.querySelectorAll('.document-driven-page h1, .docus-content h1'), + ...document.querySelectorAll('.document-driven-page h2, .docus-content h2'), + ...document.querySelectorAll('.document-driven-page h3, .docus-content h3'), + ...document.querySelectorAll('.document-driven-page h4, .docus-content h4') + ]) + }, 300) +} -const scrollToHeading = (id: string) => { +function scrollToHeading (id: string) { router.push(`#${id}`) emit('move', id) } diff --git a/nuxt.config.ts b/nuxt.config.ts index 0601d9abd..23a5bdb9d 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -48,6 +48,7 @@ export default defineNuxtConfig({ pinceau: { configFileName: 'tokens.config' + // preflight: false }, content: { From 6afe59eecbb95ca4078725b6620a46b203c6e344 Mon Sep 17 00:00:00 2001 From: Serhii Bedrytskyi Date: Thu, 17 Nov 2022 15:53:50 +0200 Subject: [PATCH 2/6] fix: active toc item hover color --- components/docs/DocsTocLinks.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/docs/DocsTocLinks.vue b/components/docs/DocsTocLinks.vue index a55d5b891..4acb3cf3a 100644 --- a/components/docs/DocsTocLinks.vue +++ b/components/docs/DocsTocLinks.vue @@ -70,11 +70,11 @@ css({ '@mq.lg': { paddingRight: '{space.3}' }, - '&:hover': { + '&:not(.active):hover': { color: '{colors.gray.900}', }, '@dark': { - '&:hover': { + '&:not(.active):hover': { color: '{colors.gray.400}', }, }, From ed9b4e1b321672565b722b702313aee192ec1ef0 Mon Sep 17 00:00:00 2001 From: Serhii Bedrytskyi Date: Thu, 17 Nov 2022 15:54:47 +0200 Subject: [PATCH 3/6] cleanup --- assets/css/main.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 9c2a57eed..aa6d081cc 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -50,13 +50,6 @@ box-shadow: none !important; } -/* html, -body { - height: 100%; - width: 100%; - overflow: auto; -} */ - body { overflow-y: scroll; -webkit-font-smoothing: antialiased; From 74fe2ab276a2e9f60f0768bbfd064aa380947d0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20Guilloux?= Date: Thu, 17 Nov 2022 17:38:24 +0100 Subject: [PATCH 4/6] chore(format): remove leading linebreak --- app/router.options.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/app/router.options.ts b/app/router.options.ts index 67145fe8a..5f578b642 100644 --- a/app/router.options.ts +++ b/app/router.options.ts @@ -1,7 +1,6 @@ import type { RouterConfig } from '@nuxt/schema' // https://router.vuejs.org/api/interfaces/routeroptions.html export default { - scrollBehavior (to, from, savedPosition) { if (to.hash) { const { marginTop } = getComputedStyle((document.querySelector(to.hash) as any)) From d82a7fe4d5979ad4f1fa6bc301af3a6e9fe572f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20Guilloux?= Date: Thu, 17 Nov 2022 17:43:46 +0100 Subject: [PATCH 5/6] fix(config): keep preflight --- nuxt.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nuxt.config.ts b/nuxt.config.ts index 23a5bdb9d..b9a333912 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -48,7 +48,7 @@ export default defineNuxtConfig({ pinceau: { configFileName: 'tokens.config' - // preflight: false + preflight: false }, content: { From 1edf8eefcf30fc4d63a455aaad4e6ddf5c4f3684 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20Guilloux?= Date: Thu, 17 Nov 2022 17:44:30 +0100 Subject: [PATCH 6/6] fix(config): keep preflight enabled (*) --- nuxt.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/nuxt.config.ts b/nuxt.config.ts index b9a333912..0601d9abd 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -48,7 +48,6 @@ export default defineNuxtConfig({ pinceau: { configFileName: 'tokens.config' - preflight: false }, content: {