fix: rounded mark + little tweaks

pmndrs · Sep 14, 2024 · baba3b7 · baba3b7
1 parent 4d7ffd3
commit baba3b7
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -36,6 +36,10 @@ main :target {
  }
 }
 
+mark {
+ @apply -m-[--pad] rounded-sm p-[--pad] [--pad:0.05rem];
+}
+
 /**
  * Pmndrs theme for JavaScript, CSS and HTML
  * Loosely based on https://marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs

diff --git a/src/components/Search/SearchItem.tsx b/src/components/Search/SearchItem.tsx
@@ -30,9 +30,11 @@ function SearchItem({
  className,
  search,
  result,
+ ...props
 }: Omit<ComponentProps<typeof Link>, 'href'> & SearchItemProps) {
  return (
  <Link
+ {...props}
  href={result.url}
  className={cn(className, 'block no-underline')}
  target={result.url.startsWith('http') ? '_blank' : undefined}

diff --git a/src/components/Search/SearchModalContainer.tsx b/src/components/Search/SearchModalContainer.tsx
@@ -87,7 +87,7 @@ export const SearchModalContainer = ({ className }: ComponentProps<'search'>) =>
  onSelect={router.push}
  className="rounded-md transition-colors data-[selected=true]:bg-surface-container-high"
  >
- <SearchItem search={query} result={result} />
+ <SearchItem search={query} result={result} tabIndex={-1} />
  </Command.Item>
  )
  })}

diff --git a/src/utils/text.ts b/src/utils/text.ts
@@ -7,4 +7,6 @@ export const escape = (text: string) => text.replace(/[|\\{}()[\]^$+*?.]/g, '\\$
  * Bolds matching text, returning HTML.
  */
 export const highlight = (text: string, target: string) =>
- text.replace(new RegExp(target, 'gi'), (match: string) => `<mark>${match}</mark>`)
+ target.length > 0
+ ? text.replace(new RegExp(target, 'gi'), (match: string) => `<mark>${match}</mark>`)
+ : text