From 1ae9777c5917512c1d7eb8590135742820d40a10 Mon Sep 17 00:00:00 2001 From: Queue-ri Date: Thu, 29 May 2025 15:53:03 +0900 Subject: [PATCH 1/5] feat: Add anchor highlight css (#181) --- src/css/custom.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/css/custom.scss b/src/css/custom.scss index 258e72a3..ffbf8fd8 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -188,6 +188,16 @@ article { font-family: "SUIT-Regular", "Sans-serif"; } +/* article anchor highlight */ +.highlight-active { + background-color: rgba(255, 255, 0, 0.5); + transition: background-color 0s; +} +.highlight-fade-out { + transition: background-color 0.5s ease; + background-color: transparent; +} + code { background-color: var(--ifm-code-background); border: 2px solid rgba(0, 0, 0, 0.05); From e479b2855bb5207a8459597fb1241d65e7a15fd6 Mon Sep 17 00:00:00 2001 From: Queue-ri Date: Thu, 29 May 2025 15:53:38 +0900 Subject: [PATCH 2/5] feat: Modify MDX searchbar styles (#181) --- src/components/mdx-searchbar/searchbar.module.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/mdx-searchbar/searchbar.module.scss b/src/components/mdx-searchbar/searchbar.module.scss index 67f467ca..e8b43225 100644 --- a/src/components/mdx-searchbar/searchbar.module.scss +++ b/src/components/mdx-searchbar/searchbar.module.scss @@ -50,6 +50,7 @@ $snappy: cubic-bezier(0.694, 0.048, 0.335, 1.000); border: 0; width: 100%; height: 50px; + font-family: "SUIT-Regular", "Sans-serif"; padding: 10px 20px; background: white; border-radius: 3px; @@ -64,6 +65,10 @@ $snappy: cubic-bezier(0.694, 0.048, 0.335, 1.000); } } +html[data-theme=dark] .field { + background-color: var(--ifm-code-background); +} + .iconsContainer { position: absolute; top: 60%; @@ -74,6 +79,7 @@ $snappy: cubic-bezier(0.694, 0.048, 0.335, 1.000); opacity: 0.5; transform: translateY(50%); transition: opacity 0.25s ease, transform 0.43s $snappy; + cursor: pointer; } .iconSearch { From f4c73f54a2986a4cccd923401c15249b9ff28645 Mon Sep 17 00:00:00 2001 From: Queue-ri Date: Thu, 29 May 2025 15:57:26 +0900 Subject: [PATCH 3/5] feat: Implement `handleSearch` in MDX searchbar (#181) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 반만년만에 구현함 --- src/components/mdx-searchbar/searchbar.js | 79 +++++++++++++++++++++-- 1 file changed, 73 insertions(+), 6 deletions(-) diff --git a/src/components/mdx-searchbar/searchbar.js b/src/components/mdx-searchbar/searchbar.js index af10cf43..46f68a64 100644 --- a/src/components/mdx-searchbar/searchbar.js +++ b/src/components/mdx-searchbar/searchbar.js @@ -6,12 +6,79 @@ export default function SearchBar() { function handleKeyPress(event) { // event.preventDefault(); - if(event.key === 'Enter'){ - console.log(document.getElementById('search-input').value); - // Working on here.. + if (event.key === 'Enter') { + // console.log(document.getElementById('search-input').value); + handleSearch(); } } + function handleSearch() { + if (!searchString || searchString.trim().length < 2) { + alert("2글자 이상 입력해주십쇼 ㅡㅅㅡ\nPlz type more than 2 characters."); + return; + } + // convert to lowercase & whitespace to dash + const normalizedSearch = searchString.trim().toLowerCase().replace(/\s+/g, '-'); + + // query all anchor ids in the page + const anchors = Array.from(document.querySelectorAll('[id]')); + + // search anchor id with normalized keyword + const matchedAnchor = anchors.find(anchor => { + const anchorId = anchor.id.toLowerCase(); + return anchorId.includes(normalizedSearch); + }); + + if (matchedAnchor) { + /* Allow navigation to the same hash URL even if already at that position */ + // Remove existing hash then re-set + // Synchronously changing the hash twice may cause browsers to ignore the first or override with the second + // -> no navigation + // -> so we have to cheat the browser + const tempHash = '#_temp'; + // set fake hash: reload x scroll x -> only change URL + // -> to cheat the browser to think it's in a different state + history.replaceState(null, null, tempHash); + + // set real hash in the next event loop tick + setTimeout(() => { + // Type A. move directly + // location.hash = '#' + matchedAnchor.id; + + // Type B. scroll animation + matchedAnchor.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + + // update browser url state + history.replaceState(null, null, '#' + matchedAnchor.id); + + // highlight target anchor + highlightElement(matchedAnchor); + }, 0); + } else { + alert('그런 단어는 없는뎁쇼 ㅇㅅㅇ\nSowwy~ no such word here!'); + } + } + + function highlightElement(el) { + // reset + el.classList.remove('highlight-active', 'highlight-fade-out'); + void el.offsetWidth; // reflow + + // highlight for 1.5s then fadeout for .5s + el.classList.add('highlight-active'); + + setTimeout(() => { + el.classList.add('highlight-fade-out'); + }, 1500); + + setTimeout(() => { // 1.5s + .5s -> 2s + el.classList.remove('highlight-active', 'highlight-fade-out'); + }, 2000); + } + return (
@@ -20,9 +87,9 @@ export default function SearchBar() {
- setSearchString(event.target.value)} /> -
+ setSearchString(event.target.value)} /> +