search

fezcode · fezcode · commit ce41696cfe28 · 2025-10-24T04:23:36.000+03:00
diff --git a/public/posts/001-project-overview.md b/public/posts/001-project-overview.md
@@ -39,8 +39,8 @@ The project follows a typical React application structure, with key directories
 1.  **Entry Point (`src/index.js`):** The application starts by rendering the main `App` component into the `index.html` file.
 2.  **Main Application (`src/App.js`):** The `App` component sets up client-side routing using `HashRouter`, defines the overall layout, and manages global contexts like the `ToastProvider`.
 3.  **Routing (`react-router-dom`):** `AnimatedRoutes` (likely a component that uses `react-router-dom`'s `Routes` and `Route` components) handles mapping URLs to specific page components.
-4.  **Content Fetching:** Blog posts and other dynamic content are fetched from `.txt` files located in the `public/` directory. Metadata for these posts is often stored in corresponding `.json` files (e.g., `public/posts/shownPosts.json`).
+4.  **Content Fetching:** Blog posts and other dynamic content are fetched from `.txt` files located in the `public/` directory. Metadata for these posts is often stored in corresponding `.json` files (e.g., `public/posts/posts.json`). The blog page now includes a search functionality to easily find posts by title or slug.
 5.  **Styling (`Tailwind CSS`):** The UI is styled primarily using Tailwind CSS utility classes, with some custom CSS if needed.
 6.  **Deployment:** The application is built into static assets and deployed to GitHub Pages using the `gh-pages` package.
 
-This overview provides a foundational understanding of the Fezcode project. Subsequent documents will delve into more specific details of each component and concept.
+This overview provides a foundational understanding of the Fezcode project. Subsequent documents will delve into more specific details of each component and concept.
diff --git a/src/index.css b/src/index.css
@@ -57,6 +57,16 @@ code {
   font-weight: 400; /* Lighter font weight */
 }
 
+.prose h1 code,
+.prose h2 code,
+.prose h3 code,
+.prose h4 code,
+.prose h5 code,
+.prose h6 code {
+  padding: 0.1em 0.2em !important;
+  font-size: 0.9em !important;
+}
+
 :root {
   --color-dev-badge: #44403c; /* stone-700 */
   --color-takes-badge: #065f46; /* emerald-800 */
diff --git a/src/pages/BlogPage.js b/src/pages/BlogPage.js
@@ -9,6 +9,7 @@ const BlogPage = () => {
   const [displayItems, setDisplayItems] = useState([]);
   const [loading, setLoading] = useState(true);
   const [activeFilter, setActiveFilter] = useState('all'); // New state for active filter
+  const [searchQuery, setSearchQuery] = useState(''); // New state for search query
 
   useEffect(() => {
     const fetchPostSlugs = async () => {
@@ -94,9 +95,21 @@ const BlogPage = () => {
   }, []);
 
   const filteredItems = displayItems.filter(item => {
-    if (activeFilter === 'all') return true;
-    if (activeFilter === 'series') return item.isSeries;
-    return item.category === activeFilter && !item.isSeries;
+    const matchesFilter = () => {
+      if (activeFilter === 'all') return true;
+      if (activeFilter === 'series') return item.isSeries;
+      return item.category === activeFilter && !item.isSeries;
+    };
+
+    const matchesSearch = () => {
+      if (searchQuery === '') return true;
+      const query = searchQuery.toLowerCase();
+      const title = item.title ? item.title.toLowerCase() : '';
+      const slug = item.slug ? item.slug.toLowerCase() : '';
+      return title.includes(query) || slug.includes(query);
+    };
+
+    return matchesFilter() && matchesSearch();
   });
 
   if (loading) {
@@ -143,6 +156,16 @@ const BlogPage = () => {
               Total: {filteredItems.length}
             </span>
           </div>
+          {/* Search Input */}
+          <div className="mt-8 mb-4 flex justify-center">
+            <input
+              type="text"
+              placeholder="Search posts..."
+              className="w-full max-w-md px-4 py-2 rounded-full bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
           {/* Filter Buttons */}
           <div className="mt-8 flex justify-center space-x-4">
             <button
