Add a search component #38
Conversation
Add a search component to the portfolio. * **New Search Component**: Create `src/components/search.astro` to implement search functionality using Lunr.js. Index markdown files and display search results dynamically. * **Header Component**: Modify `src/components/header.astro` to import and include the new search component. * **Left Sidebar Component**: Modify `src/components/leftsidebar.astro` to import and include the new search component. * **Right Sidebar Component**: Modify `src/components/rightsidebar.astro` to import and include the new search component. * **Devcontainer Configuration**: Add `.devcontainer/devcontainer.json` to configure the development container. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/santoshyadavdev/portfolio?shareId=XXXX-XXXX-XXXX-XXXX).
|
Warning Rate limit exceeded@santoshyadavdev has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 17 minutes and 7 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (4)
WalkthroughThis pull request introduces a new search functionality across multiple components by adding a Changes
Sequence DiagramsequenceDiagram
participant User
participant SearchComponent
participant SearchIndex
User->>SearchComponent: Enter search query
SearchComponent->>SearchIndex: Fetch search index
SearchIndex-->>SearchComponent: Return index data
SearchComponent->>SearchComponent: Construct Lunr index
User->>SearchComponent: Type search query
SearchComponent->>SearchComponent: Perform search
SearchComponent-->>User: Display search results
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
❌ Deploy Preview for santoshyadav failed. Why did it fail? →
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/search.astro (2)
29-39: Avoid referencingdataoutside local scope in map callback.
Within line 35,datais out of scope if fetched data is not stored in a local variable. You might consider storing the JSON data in a local state.-const [results, setResults] = useState([]); +const [results, setResults] = useState<DocumentType[]>([]); +const [docs, setDocs] = useState<DocumentType[]>([]); ... useEffect(() => { // ... setDocs(data); }, []); ... if (index) { const newResults = index.search(query).map(({ ref }) => { - return data.find((doc) => doc.id === ref); + return docs.find((doc) => doc.id === ref); }); setResults(newResults); }
41-59: UI is straightforward and accessible.
Good job providing a placeholder. Consider adding ARIA labels for better accessibility.<input type="text" value={query} onChange={handleSearch} placeholder="Search..." + aria-label="Search text" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.devcontainer/devcontainer.json(1 hunks)src/components/header.astro(2 hunks)src/components/leftsidebar.astro(2 hunks)src/components/rightsidebar.astro(2 hunks)src/components/search.astro(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .devcontainer/devcontainer.json
🔇 Additional comments (8)
src/components/rightsidebar.astro (2)
4-4: Import readability and overall approach look good.
Proactively verifying the path usage ensures no duplication or cyclical imports.
20-20: Nice addition of the <Search /> component in the sidebar.
This helps users quickly find content. No issues noted.
src/components/search.astro (2)
2-4: Validation for external libraries or fallback.
Using useState, useEffect, and lunr is fine. However, consider verifying the environment supports these dependencies. If users have JavaScript disabled or if SSR usage is desired in certain builds, you may need a fallback.
5-8: State declarations appear correct.
The states manage query, results, and index effectively.
src/components/leftsidebar.astro (2)
3-3: Import path is consistent.
No issues with the import syntax.
16-16: Great addition of the <Search /> component.
Aligns well with the sidebar structure and enhances user experience.
src/components/header.astro (2)
6-6: Consistent import reference.
Ensures each location uses the same component.
76-76: Coexistence of <Theme /> and <Search />.
Having both theming and search in the header is beneficial. Verify the layout does not create UI clutter.
src/components/search.astro
Outdated
| useEffect(() => { | ||
| const fetchData = async () => { | ||
| const response = await fetch('/search-index.json'); | ||
| const data = await response.json(); | ||
| const idx = lunr(function () { | ||
| this.ref('id'); | ||
| this.field('title'); | ||
| this.field('content'); | ||
|
|
||
| data.forEach((doc) => { | ||
| this.add(doc); | ||
| }); | ||
| }); | ||
| setIndex(idx); | ||
| }; | ||
|
|
||
| fetchData(); | ||
| }, []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Ensure error handling around fetching search data.
If the JSON file fails to load, it might break the search. Add try/catch or handle a non-200 response from the fetch for better resiliency.
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('/search-index.json');
+ if (!response.ok) {
+ console.error("Failed to fetch search index:", response.statusText);
+ return;
+ }
const data = await response.json();
// ...
} catch (error) {
+ console.error("Error fetching search index:", error);
}
};
fetchData();
}, []);Committable suggestion skipped: line range outside the PR's diff.
* **header.astro** - Import Alpine.js - Add search input field with Alpine.js bindings * **leftsidebar.astro** - Add search input field with Alpine.js bindings * **rightsidebar.astro** - Add search input field with Alpine.js bindings * **search.astro** - Replace React state and effects with Alpine.js - Add search input field and results section with Alpine.js bindings
Add a search component to the portfolio.
src/components/search.astroto implement search functionality using Lunr.js. Index markdown files and display search results dynamically.src/components/header.astroto import and include the new search component.src/components/leftsidebar.astroto import and include the new search component.src/components/rightsidebar.astroto import and include the new search component..devcontainer/devcontainer.jsonto configure the development container.For more details, open the Copilot Workspace session.
Summary by CodeRabbit
New Features
Searchcomponent for enhanced search capabilities in the header, left sidebar, and right sidebar.Bug Fixes
Themecomponent in the header with the newSearchcomponent for improved navigation functionality.