import { groq } from "next-sanity"; import Link from "next/link"; import Card from "../../components/Card"; import DailyDevArticlesCard from "../../components/DailyDevArticlesCard"; import { sanityClient } from "../../config/Sanity"; import medium from "medium-sdk"; async function getDailyDevArticles() { const res = await fetch(`https://dev.to/api/articles?username=ashishpandey`); return res.json(); } async function getData({ search, page = 1 }) { let searchQuery = search || "ashish"; let postsPerPage = parseInt(page * 4); const query = groq` *[_type == "post" && (searchQueries match "${searchQuery}" || title match "${searchQuery}" || excerpt match "${searchQuery}" ) ][0..${postsPerPage}] | order(_createdAt desc) { categories,excerpt,mainImage,slug,title,_createdAt,_id,imageSubtitle,imageTitle, author->{ name,image } } `; const posts = await sanityClient.fetch(query); let postslength = posts.length; let disabled = Number.isInteger(Number(postslength / 5)) && postslength != 0 ? false : true; return { posts, disabled, }; } export default async function BlogPage({ searchParams }) { const { posts, disabled } = await getData(searchParams); const dailyDevArticlesRes = await getDailyDevArticles(); const dailyArticles = await Promise.all(dailyDevArticlesRes); const page = parseInt(searchParams.page) || 1; const query = searchParams.search; return ( <main className="overflow-hidden"> <div className="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 xxl:grid-cols-3 gap-5"> {posts?.map((item, i) => { return <Card data={item} />; })} </div> <div className="flex justify-center items-center"> <Link href={`/blogs?page=${page + 1}&search=${query ? query : ""}`} disabled={disabled} className="relative inline-flex items-center justify-center px-10 py-4 overflow-hidden font-mono font-medium tracking-tighter text-white bg-gray-800 rounded-lg group" > <span className="absolute w-0 h-0 transition-all duration-500 ease-out bg-green-500 rounded-full group-hover:w-56 group-hover:h-56"></span> <span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-700"></span> <span className="relative"> {disabled ? "No more Posts" : "Load more"} </span> </Link> </div> <div className="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 xxl:grid-cols-3 gap-5"> {dailyArticles?.map((item, i) => { return <DailyDevArticlesCard data={item} />; })} </div> </main> ); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter