Skip to content

Commit 05e6c89

Browse files
s2sharpitmkubdev
s2sharpit
and
mkubdev
authored
feat: add CODEOWNERS and fix blog page error (#474)
* adding a sample file of codeowners * Update CODEOWNERS * adding Panquesito7 as codeowner of all md files * updating codeowners file Signed-off-by: Tushar Saini <[email protected]> * fixing errors Signed-off-by: Tushar Saini <[email protected]> * removing unnecessary code Signed-off-by: Tushar Saini <[email protected]> * fixing bug in fetching data in blog page Signed-off-by: Tushar Saini <[email protected]> * changing bg color of blog cards for dark theme Signed-off-by: Tushar Saini <[email protected]> * Update src/app/blogs/Blog.tsx Co-authored-by: Maxime Kubik <[email protected]> * fixing unnecessary code in blog section Signed-off-by: Tushar Saini <[email protected]> * adding default image in blog section Signed-off-by: Tushar Saini <[email protected]> * making seperate function for cover image in src/lib/uitls.ts Signed-off-by: Tushar Saini <[email protected]> --------- Signed-off-by: Tushar Saini <[email protected]> Co-authored-by: Maxime Kubik <[email protected]>
1 parent d5158a2 commit 05e6c89

File tree

5 files changed

+101
-51
lines changed

5 files changed

+101
-51
lines changed

‎.github/CODEOWNERS

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# pattern:
2+
3+
# file/directory user
4+
5+
# Default reviewers/codeowners for all code changes
6+
* @WebXDAO/webx-core @WebXDAO/webx-guild-developer
7+
8+
# Reviewer by organization Team
9+
10+
# Reviewer by specific folders
11+
12+
# Reviewer by specific files
13+
*.md @Panquesito7

‎next.config.mjs

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ const nextConfig = {
55
appDir: true,
66
},
77
images: {
8-
domains: ["res.cloudinary.com", "github.com", "avatars.githubusercontent.com"],
8+
domains: [
9+
"res.cloudinary.com",
10+
"github.com",
11+
"avatars.githubusercontent.com",
12+
"og-image-rest-generator.fly.dev",
13+
],
914
},
1015
};
1116

‎src/app/blogs/Blog.tsx

Lines changed: 56 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
1+
import { createDefaultImageCover } from "@/lib/utils";
12
import Image from "next/image";
23
import Link from "next/link";
34

4-
async function getData() {
5+
interface BlogData {
6+
cover_image: string;
7+
title: string;
8+
description: string;
9+
url: string;
10+
user: {
11+
username: string;
12+
}
13+
}
14+
15+
async function getData(): Promise<BlogData[]> {
516
const res = await fetch("https://dev.to/api/articles?username=webxdao");
6-
// The return value is *not* serialized
7-
// You can return Date, Map, Set, etc.
817

9-
// Recommendation: handle errors
1018
if (!res.ok) {
11-
// This will activate the closest `error.js` Error Boundary
1219
throw new Error("Failed to fetch data");
1320
}
1421

@@ -17,59 +24,62 @@ async function getData() {
1724

1825
export default async function Blog() {
1926
// Initiate dev.to API request
20-
const blogData = getData();
21-
22-
// Wait for the promises to resolve
23-
const [dataT] = await Promise.all([blogData]);
27+
const blogData: BlogData[] = await getData();
2428

2529
return (
2630
<section className="mt-20">
2731
<div className="mx-auto max-w-5xl md:px-8">
28-
<h1 className="mt-10 text-xl font-bold">Get to know more</h1>
32+
<h1 className="mt-10 text-center text-2xl font-bold">Get to know more</h1>
2933
<p className="mx-auto mt-5 max-w-sm text-center md:max-w-xl lg:max-w-3xl">
3034
Discover the exciting world of blockchain technology as we come together to collaborate
3135
and expand our knowledge.
3236
</p>
3337
</div>
3438
<div className="mt-10 flex flex-wrap justify-center gap-16">
35-
{dataT.map((curElem: any) => (
36-
<div className="bg-whie flex max-w-xs flex-col rounded-lg bg-white/5 p-2 shadow-md shadow-purple-400/40 transition-all duration-200 ease-in hover:z-50 hover:shadow-lg hover:shadow-purple-400/60 sm:hover:-translate-y-1">
37-
<Image
38-
className="w-full rounded-md border"
39-
src={curElem.cover_image}
40-
width={400}
41-
height={250}
42-
alt=""
43-
/>
44-
<div className="grow px-6 py-4">
45-
<h3 className="mb-4 text-center text-sm font-bold uppercase leading-4 tracking-wider">
46-
{curElem.title}
47-
</h3>
48-
<p className="text-justify text-sm text-gray-700 dark:text-gray-300">
49-
{curElem.description}
50-
</p>
51-
</div>
52-
<div className="flex px-6 py-4">
53-
<Link
54-
href={curElem.url}
55-
target="_blank"
56-
className="w-fit-content font-inter text-14.0418 group mb-0 mr-auto flex items-center gap-6 rounded border-2 border-solid border-black px-4 py-1 text-black transition delay-0 ease-in hover:border-slate-500 hover:bg-slate-500 hover:font-semibold dark:border-white/80 dark:text-white dark:hover:border-slate-500"
57-
>
58-
<Image
59-
src="/Arrow1.png"
60-
alt="arrow"
61-
width={15}
62-
height={15}
63-
className="my-auto flex items-center transition duration-100 ease-in group-hover:invert dark:invert"
64-
/>
65-
<span className="transition duration-100 ease-in group-hover:text-white">
66-
Read More
67-
</span>
68-
</Link>
69-
</div>
70-
</div>
39+
{blogData.map((data) => (
40+
<BCard key={data.title} data={data} />
7141
))}
7242
</div>
7343
</section>
7444
);
7545
}
46+
47+
function BCard({ data }: { data: BlogData }) {
48+
const imgSrc = data.cover_image ?? createDefaultImageCover({
49+
title: data.title,
50+
username: data.user.username,
51+
});
52+
return (
53+
<div className="flex max-w-xs flex-col rounded-lg border bg-white/5 p-2 shadow-md shadow-purple-400/40 transition-transform duration-200 ease-in hover:z-50 hover:shadow-lg hover:shadow-purple-400/60 sm:hover:-translate-y-1">
54+
<Image
55+
className="h-36 w-full rounded-md border"
56+
src={imgSrc}
57+
alt={data.title}
58+
width={400}
59+
height={250}
60+
/>
61+
<div className="grow px-6 py-4">
62+
<h3 className="mb-4 text-center text-sm font-bold uppercase leading-4 tracking-wider">
63+
{data.title}
64+
</h3>
65+
<p className="text-justify text-sm text-gray-700 dark:text-gray-300">{data.description}</p>
66+
</div>
67+
<div className="flex px-6 py-4">
68+
<Link
69+
href={data.url}
70+
target="_blank"
71+
className="w-fit-content font-inter text-14.0418 group mb-0 mr-auto flex items-center gap-6 rounded border-2 border-solid border-black px-4 py-1 text-black transition delay-0 ease-in hover:border-slate-500 hover:bg-slate-500 hover:font-semibold dark:border-white/80 dark:text-white dark:hover:border-slate-500"
72+
>
73+
<Image
74+
src="/Arrow1.png"
75+
alt="arrow"
76+
width={15}
77+
height={15}
78+
className="my-auto flex items-center transition duration-100 ease-in group-hover:invert dark:invert"
79+
/>
80+
<span className="transition duration-100 ease-in group-hover:text-white">Read More</span>
81+
</Link>
82+
</div>
83+
</div>
84+
);
85+
}

‎src/app/blogs/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function BlogPage() {
4747

4848
<main className="mx-auto grid max-w-6xl gap-8 px-4">
4949
<div className="mx-auto max-w-5xl">
50-
<h1 className="my-10 text-center text-xl font-bold">Categories</h1>
50+
<h1 className="my-10 text-center text-2xl font-bold">Categories</h1>
5151
<div className="flex flex-wrap justify-center gap-9 sm:gap-14">
5252
{["Dapp", "Open Source", "Blockchain", "Community", "Hackathons"].map((name) => (
5353
<div className="w-40 rounded py-2 text-center shadow-md shadow-purple-400/40">

‎src/lib/utils.ts

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,28 @@
1-
import { clsx, type ClassValue } from "clsx"
2-
import { twMerge } from "tailwind-merge"
1+
import { clsx,type ClassValue } from "clsx";
2+
import { twMerge } from "tailwind-merge";
33

44
export function cn(...inputs: ClassValue[]) {
5-
return twMerge(clsx(inputs))
5+
return twMerge(clsx(inputs));
6+
}
7+
8+
export function createDefaultImageCover(data: any) {
9+
let queryString;
10+
try {
11+
const params = {
12+
head: "Blog",
13+
writer: "Punk Blogger",
14+
logo: "https://avatars.githubusercontent.com/u/89759498?s=100",
15+
template: "facebook-minimal",
16+
title: data.title,
17+
author: data.username,
18+
};
19+
20+
queryString = Object.entries(params)
21+
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
22+
.join("&");
23+
} catch (error) {
24+
queryString = " ";
25+
}
26+
const defaultImgUrl = `https://og-image-rest-generator.fly.dev/seo-banner?${queryString}`;
27+
return defaultImgUrl;
628
}

0 commit comments

Comments
 (0)