From 08e86fdc1e7cef0c4e45e0ba05aafd9901143ba0 Mon Sep 17 00:00:00 2001 From: bobinstein Date: Mon, 8 Apr 2024 17:52:10 -0400 Subject: [PATCH 1/3] fix: resolved error message on page click after closing search modal --- docs/src/.vuepress/theme/components/SearchModal.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/.vuepress/theme/components/SearchModal.vue b/docs/src/.vuepress/theme/components/SearchModal.vue index 662daaea..4a7b907e 100644 --- a/docs/src/.vuepress/theme/components/SearchModal.vue +++ b/docs/src/.vuepress/theme/components/SearchModal.vue @@ -121,6 +121,7 @@ export default { const modalOuter = this.$refs.modalOuter; const modalProper = this.$refs.modalProper; if ( + modalOuter && modalOuter.contains(event.target) && !modalProper.contains(event.target) ) { From 04fa1ff7cefea67fe2dc3570bb7fe803ccc98d9b Mon Sep 17 00:00:00 2001 From: bobinstein Date: Tue, 9 Apr 2024 11:18:22 -0400 Subject: [PATCH 2/3] style: corrected subheader display in search --- .../.vuepress/theme/components/SearchModal.vue | 15 ++++++++++++--- .../search-dependencies/flexsearchSvc.js | 2 +- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/docs/src/.vuepress/theme/components/SearchModal.vue b/docs/src/.vuepress/theme/components/SearchModal.vue index 4a7b907e..73285791 100644 --- a/docs/src/.vuepress/theme/components/SearchModal.vue +++ b/docs/src/.vuepress/theme/components/SearchModal.vue @@ -32,7 +32,7 @@ {{ s.title || s.path }} > {{ s.header.title }}> {{ s.header }} @@ -105,8 +105,8 @@ export default { this.suggestions = results.map((result) => { return { title: result.title, - path: result.path, - header: result.header, + path: result.path + result.slug, + header: result.headingStr, }; }); }, @@ -221,6 +221,13 @@ input:focus outline none +.suggestion:hover + color: var(--AccentColor) + a + color: var(--AccentColor) + span + color: var(--AccentColor) + .search-modal position fixed top 0 @@ -274,6 +281,8 @@ input:focus background-color var(--LineColor) border 1px solid var(--AccentColor) !important cursor pointer + span + color var(--AccentColor) .search-modal-content li:last-child border-bottom none diff --git a/docs/src/.vuepress/theme/components/search-dependencies/flexsearchSvc.js b/docs/src/.vuepress/theme/components/search-dependencies/flexsearchSvc.js index ee8c7ee4..045e0ea6 100644 --- a/docs/src/.vuepress/theme/components/search-dependencies/flexsearchSvc.js +++ b/docs/src/.vuepress/theme/components/search-dependencies/flexsearchSvc.js @@ -24,7 +24,7 @@ export default { // here you choose the fields you want to index. // for me I will search in the title and the content of each page. // of course I stripped the content before so I use the plain text content not the markdown text - field: ['title', 'headersStr', 'content'], + field: ['title', 'header', 'headersStr', 'content'], }, } index = new Flexsearch(indexSettings) From 6e7ce457acbbde0a3e0cc6cb1d02b6aa7542fcd4 Mon Sep 17 00:00:00 2001 From: bobinstein Date: Tue, 9 Apr 2024 13:28:19 -0400 Subject: [PATCH 3/3] feat: Added display of searched text in search result --- .../theme/components/SearchModal.vue | 30 ++++++++++++++++++- .../theme/components/SidebarGroup.vue | 2 +- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/docs/src/.vuepress/theme/components/SearchModal.vue b/docs/src/.vuepress/theme/components/SearchModal.vue index 73285791..ff097899 100644 --- a/docs/src/.vuepress/theme/components/SearchModal.vue +++ b/docs/src/.vuepress/theme/components/SearchModal.vue @@ -34,6 +34,7 @@ > {{ s.header }} + @@ -94,6 +95,17 @@ export default { }, methods: { + highlightSnippet(s) { + // console.log(s.contentStr) + const start = s.contentHighlight[0]; + const end = start + s.contentHighlight[1]; + const before = s.contentStr.slice(0, start); + const match = s.contentStr.slice(start, end); + const after = s.contentStr.slice(end); + + return `${before}${match}${after}`; + }, + async fetchSuggestions() { const query = this.query.trim().toLowerCase(); if (!query) { @@ -102,11 +114,14 @@ export default { } const results = await flexsearchSvc.match(query, query.split(/\s+/)); + // console.log(results) this.suggestions = results.map((result) => { return { title: result.title, path: result.path + result.slug, header: result.headingStr, + contentStr: result.contentStr, + contentHighlight: result.contentHighlight }; }); }, @@ -220,13 +235,26 @@ input:focus border 2px solid var(--AccentColor) !important outline none +.search-modal-content .content-snippet + display: block + margin-top: 0.5em + white-space: pre-wrap + color: var(--TextColor) + +.highlight + text-decoration: underline + color: var(--AccentColor) + .suggestion:hover color: var(--AccentColor) a color: var(--AccentColor) - span + span:not(.content-snippet) color: var(--AccentColor) + .content-snippet + color: var(--TextColor) !important + .search-modal position fixed diff --git a/docs/src/.vuepress/theme/components/SidebarGroup.vue b/docs/src/.vuepress/theme/components/SidebarGroup.vue index 1dc78b1a..a95c5d04 100644 --- a/docs/src/.vuepress/theme/components/SidebarGroup.vue +++ b/docs/src/.vuepress/theme/components/SidebarGroup.vue @@ -84,7 +84,7 @@ export default {