Merge pull request #326 from nocodb/blog-corrections

DarkPhoenix2704 · web-flow · commit 5ed34252ab25 · 2025-10-14T12:25:34.000+05:30
diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
@@ -34,7 +34,7 @@ jobs:
         id: claude
         uses: anthropics/claude-code-action@v1
         with:
-          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
 
           # Optional: Customize the trigger phrase (default: @claude)
           # trigger_phrase: "/claude"
diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
@@ -4,6 +4,7 @@ import {baseOptions} from '@/app/layout.config';
 import {Footer} from "@/components/blog/home/Footer";
 import {Navbar} from "@/components/blog/home/Navbar";
 import { ReCaptchaProvider } from "next-recaptcha-v3";
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
 
 export const metadata = {
     icons: {
@@ -16,9 +17,11 @@ export default function Layout({children,}: { children: ReactNode; }): React.Rea
         <HomeLayout {...baseOptions} nav={{
             component: Navbar()
         }}>
-            <ReCaptchaProvider reCaptchaKey="6LcdnI0oAAAAAHYW3hwztfZw9qAjX4TiviE4fWip">
-                {children}
-            </ReCaptchaProvider>
+            <NuqsAdapter>
+                <ReCaptchaProvider reCaptchaKey="6LcdnI0oAAAAAHYW3hwztfZw9qAjX4TiviE4fWip">
+                    {children}
+                </ReCaptchaProvider>
+            </NuqsAdapter>
             <Footer/>
         </HomeLayout>
     )
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -1,74 +1,100 @@
 import {blogSource} from "@/lib/source";
-import {FeaturedPost} from "@/components/blog/FeaturedPost";
 import BlogCard from "@/components/blog/BlogCard";
 import {Separator} from "@/components/ui/separator";
 import Link from "next/link";
 import {CategoryTabs} from "@/components/blog/Category";
 import Subscribe from "@/components/blog/Subscribe";
+import {SearchInput} from "@/components/blog/SearchInput";
+import Image from "next/image";
 
 export const metadata = {
     title: "Blog | NocoDB",
     description: "Insights, tutorials, and updates from the team building the future of no-code databases.",
 }
 
 export default async function BlogPage({searchParams}: {
-    searchParams?: Promise<{ category?: string; page?: string }>
+    searchParams?: Promise<{ category?: string; page?: string; search?: string }>
 }) {
     const posts = blogSource.getPages().sort(
         (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
     );
 
-    const featuredPost = posts?.length ? posts[0] : null;
-
-    const latestPosts = posts.filter(post => post.data?.title !== featuredPost?.data?.title);
-
     const categories = new Set<string>();
-    latestPosts.forEach((post) => {
+    posts.forEach((post) => {
         categories.add(post.data.category ?? "Uncategorized");
     });
 
     const selectedCategory = (await searchParams)?.category;
+    const searchQuery = (await searchParams)?.search?.toLowerCase() || '';
     const currentPage = parseInt((await searchParams)?.page || "1", 10);
     const postsPerPage = 15;
 
     const categoryFilteredPosts = selectedCategory
-        ? latestPosts.filter((post) => (post.data.category ?? "Uncategorized") === selectedCategory)
-        : latestPosts;
+        ? posts.filter((post) => (post.data.category ?? "Uncategorized") === selectedCategory)
+        : posts;
+
+    const searchFilteredPosts = searchQuery
+        ? categoryFilteredPosts.filter((post) => {
+            const titleMatch = post.data.title?.toLowerCase().includes(searchQuery);
+            const descriptionMatch = post.data.description?.toLowerCase().includes(searchQuery);
+            const authorMatch = post.data.author?.toLowerCase().includes(searchQuery);
+            return titleMatch || descriptionMatch || authorMatch;
+        })
+        : categoryFilteredPosts;
 
     const startIndex = (currentPage - 1) * postsPerPage;
     const endIndex = startIndex + postsPerPage;
-    const displayedPosts = categoryFilteredPosts.slice(0, endIndex);
+    const displayedPosts = searchFilteredPosts.slice(0, endIndex);
 
-    const hasMorePosts = endIndex < categoryFilteredPosts.length;
+    const hasMorePosts = endIndex < searchFilteredPosts.length;
     const nextPage = currentPage + 1;
     return (
         <main className="py-8 w-full md:py-12">
-            <div className="container py-20 lg:py-16">
-                <h1 className="text-center text-nc-content-grey-emphasis text-[40px] font-semibold leading-15.5">
+            <div className="container py-10 lg:pt-16 lg:pb-8">
+                <h1 className="text-nc-content-grey-emphasis text-[40px] font-semibold leading-15.5">
                     Blog
                 </h1>
-                <h5 className="text-nc-content-grey-subtle text-center mt-10 lg:mt-6 text-base leading-6 font-medium">
-                    Insights, tutorials, and updates <br/>
-                    from the team building the future of no-code databases.
+                <h5 className="text-nc-content-grey-subtle mt-6 lg:mt-2 text-base leading-6 font-medium">
+                    Insights, tutorials, and updates from the team building the future of no-code databases.
                 </h5>
+                <div className="mt-6">
+                    <SearchInput />
+                </div>
             </div>
-            <div className="container mx-auto">
-                {featuredPost && (
-                    <FeaturedPost post={featuredPost}/>
-                )}
-            </div>
-
-            <Subscribe/>
 
-            <div className="container mt-5 lg:mt-20">
-                <CategoryTabs categories={Array.from(categories)} selectedCategory={selectedCategory}/>
+            
+            <div className="container mt-5">
+                
+                <CategoryTabs categories={Array.from(categories)} selectedCategory={selectedCategory} searchQuery={searchQuery}/>
                 <Separator className="border-nc-border-grey-medium"/>
             </div>
 
             <div className="container py-8 lg:pt-15 lg:pb-20 gap-8 lg:gap-16 grid grid-cols-1 lg:grid-cols-2">
-                {displayedPosts.map((post) => (
-                    <BlogCard post={post} key={post.url}/>
-                ))}
+                {displayedPosts.length === 0 ? (
+                    <div className="col-span-full flex flex-col items-center justify-center py-16">
+                        <Image
+                            src="/img/no-search-result-found.png"
+                            alt="No results found"
+                            width={400}
+                            height={300}
+                            className="mb-6"
+                        />
+                        <h2 className="text-2xl font-semibold text-nc-content-grey-emphasis mb-2">
+                            No posts found
+                        </h2>
+                        <p className="text-nc-content-grey-subtle">
+                            {searchQuery 
+                                ? `No blog posts match "${searchQuery}". Try a different search term.`
+                                : selectedCategory
+                                    ? `No blog posts found in the "${selectedCategory}" category.`
+                                    : "No blog posts available."}
+                        </p>
+                    </div>
+                ) : (
+                    displayedPosts.map((post) => (
+                        <BlogCard post={post} key={post.url}/>
+                    ))
+                )}
             </div>
 
             {hasMorePosts && (
@@ -79,6 +105,7 @@ export default async function BlogPage({searchParams}: {
                             pathname: "/blog",
                             query: {
                                 ...(selectedCategory ? {category: selectedCategory} : {}),
+                                ...(searchQuery ? {search: searchQuery} : {}),
                                 page: nextPage.toString(),
                             },
                         }}
@@ -89,6 +116,7 @@ export default async function BlogPage({searchParams}: {
                 </div>
             )}
 
+            <Subscribe/>
             <Separator/>
         </main>
     );
diff --git a/components/blog/Category.tsx b/components/blog/Category.tsx
@@ -5,16 +5,20 @@ import {cn} from "@/lib/utils";
 interface TabProps {
     categories: string[]
     selectedCategory?: string
+    searchQuery?: string
 }
 
-export function CategoryTabs({categories, selectedCategory}: TabProps) {
+export function CategoryTabs({categories, selectedCategory, searchQuery}: TabProps) {
     return (
         <div className="border-b border-nc-border-grey-medium">
             <div className="flex flex-wrap space-x-6">
                 <div className="relative mb-4">
                     <Link
                         scroll={false}
-                        href="/blog"
+                        href={{
+                            pathname: "/blog",
+                            query: searchQuery ? { search: searchQuery } : undefined,
+                        }}
                         className={`text-nc-content-brand-default mx-2 relative px-3 py-1.5 rounded-[6px] text-sm h-6 bg-nc-background-brand ${!selectedCategory ? "font-semibold" : ""}`}
                     >
                         <span>All</span>
@@ -28,7 +32,13 @@ export function CategoryTabs({categories, selectedCategory}: TabProps) {
                     >
                         <Link
                             scroll={false}
-                            href={`/blog?category=${encodeURIComponent(category)}`}
+                            href={{
+                                pathname: "/blog",
+                                query: {
+                                    category: encodeURIComponent(category),
+                                    ...(searchQuery ? { search: searchQuery } : {}),
+                                },
+                            }}
                             style={{backgroundColor: getCategoryColor(category)}}
                             className={cn(`text-nc-content-grey-subtle-2 mb-2 relative px-3 py-1.5 rounded-[6px] text-sm h-6 bg-nc-background-brand`)}
                         >
diff --git a/components/blog/SearchInput.tsx b/components/blog/SearchInput.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { useQueryState } from 'nuqs';
+import { Search } from 'lucide-react';
+
+export function SearchInput() {
+    const [search, setSearch] = useQueryState('search', {
+        defaultValue: '',
+        shallow: false,
+    });
+
+    return (
+        <div className="relative w-full max-w-md">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-nc-content-grey-subtle" />
+            <input
+                type="text"
+                placeholder="Search blog posts..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value || null)}
+                className="w-full pl-10 pr-4 py-2 border border-nc-border-grey-medium rounded-md bg-transparent text-nc-content-grey-emphasis placeholder:text-nc-content-grey-subtle focus:outline-none focus:ring-2 focus:ring-nc-content-brand-default focus:border-transparent"
+            />
+        </div>
+    );
+}
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.4.6",
     "next-validate-link": "^1.5.2",
+    "nuqs": "^2.7.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "remark": "^15.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/img/no-search-result-found.png b/public/img/no-search-result-found.png
