feat: search using DocSearch (#158)

* chore: install `@docsearch/react@3` * wip: update `Header.module.scss` * wip: update `app/layout.jsx` * wip: create `header/FlexContainer` component * wip: create `DocSearch/index.js` * wip: create `DocSearch.module.scss` * wip: create `DocSearch.scss` * wip
lumirlumir · Nov 18, 2024 · 3bd3abe · 3bd3abe
1 parent 21bf15e
commit 3bd3abe
Show file tree

Hide file tree

Showing 11 changed files with 497 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "count-docs": "ls -R src/posts/docs | grep .md | wc -l"
   },
   "dependencies": {
+    "@docsearch/react": "^3.8.0",
     "@giscus/react": "^3.0.0",
     "@next/third-parties": "^14.2.18",
     "@vercel/analytics": "^1.4.0",

diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -15,6 +15,8 @@ import Links from '@/components/aside/Links';
 import Profile from '@/components/aside/Profile/Profile';
 
 import DarkModeToggle from '@/components/header/DarkModeToggle';
+import DocSearch from '@/components/header/DocSearch';
+import FlexContainer from '@/components/header/FlexContainer';
 import Title from '@/components/header/Title';
 
 import { GOOGLE_GA_ID } from '@/constants';
@@ -43,7 +45,10 @@ export default function RootLayout({ children }) {
 
           <Header>
             <Title />
-            <DarkModeToggle />
+            <FlexContainer>
+              <DocSearch />
+              <DarkModeToggle />
+            </FlexContainer>
           </Header>
           <Aside>
             <Profile />