diff --git a/__tests__/Card.test.tsx b/__tests__/Card.test.tsx index 3ba4419..3928315 100644 --- a/__tests__/Card.test.tsx +++ b/__tests__/Card.test.tsx @@ -1,3 +1,6 @@ +/* eslint-disable jsx-a11y/alt-text */ +/* eslint-disable @next/next/no-img-element */ +/* eslint-disable @typescript-eslint/no-explicit-any */ import "@testing-library/jest-dom"; import { render, screen, fireEvent } from "@testing-library/react"; import { Card } from "@/app/Component/Card"; @@ -49,7 +52,10 @@ describe("Card Component", () => { ); const mainImage = screen.getByAltText("Test Project thumbnail"); expect(mainImage).toHaveAttribute("src"); - expect(mainImage.getAttribute("src")).toContain("/path/to/image.jpg"); + expect(mainImage).toHaveAttribute( + "src", + expect.stringContaining("/path/to/image.jpg") + ); }); test("renders sub-image correctly", () => { @@ -66,7 +72,10 @@ describe("Card Component", () => { const subImage = screen.getByAltText("Test Project logo"); expect(subImage).toHaveAttribute("src"); - expect(subImage.getAttribute("src")).toContain("/path/to/logo.jpg"); + expect(subImage).toHaveAttribute( + "src", + expect.stringContaining("/path/to/logo.jpg") + ); }); test("navigates to correct link", () => { diff --git a/public/images/cardanoapi.png b/public/images/cardanoapi.png new file mode 100644 index 0000000..2a00bc7 Binary files /dev/null and b/public/images/cardanoapi.png differ diff --git a/src/app/Component/Pagination.tsx b/src/app/Component/Pagination.tsx new file mode 100644 index 0000000..abf26a5 --- /dev/null +++ b/src/app/Component/Pagination.tsx @@ -0,0 +1,92 @@ +"use client"; +import { useState } from "react"; +import { Card } from "./Card"; + +interface Project { + id: string; + projectName: string; + url: string; + imageUrl: string; + subImageUrl: string; + description: string; +} + +interface PaginationProps { + data: Project[]; + cardsPerPage: number; + totalPages: number; +} + +export default function Pagination({ + data, + cardsPerPage, + totalPages, +}: PaginationProps) { + const [currentPage, setCurrentPage] = useState(1); + + // Calculate the index range for the cards to display on the current page + const indexOfLastCard = currentPage * cardsPerPage; + const indexOfFirstCard = indexOfLastCard - cardsPerPage; + const currentCards = data.slice(indexOfFirstCard, indexOfLastCard); + + // Handle page change + const handlePageChange = (pageNumber: number): void => { + setCurrentPage(pageNumber); + }; + + return ( + <> +
+ {currentCards.map((project) => ( + + ))} +
+ + {/* Pagination Controls */} +
+ + + {/* Page Numbers */} + {[...Array(totalPages)].map((_, index) => ( + + ))} + + +
+ + ); +} diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx new file mode 100644 index 0000000..e8e82c9 --- /dev/null +++ b/src/app/api/og/route.tsx @@ -0,0 +1,78 @@ +/* eslint-disable jsx-a11y/alt-text */ + +/* eslint-enable jsx-a11y/alt-text */ +import Image from "next/image"; +import { ImageResponse } from "next/og"; + +export const runtime = "edge"; + +export async function GET(request: Request) { + const { searchParams } = new URL(request.url); + + const hasTitle = searchParams.has("title"); + const title = hasTitle ? searchParams.get("title") : "Cardano API"; + + // Fetch the Roboto font + const fontData = await fetch( + "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf" + ).then((res) => res.arrayBuffer()); + + // Fetch the image and convert to base64 + const imageBuffer = await fetch( + new URL("../../../../public/images/cardanoapi.png", import.meta.url) + ).then((res) => res.arrayBuffer()); + + const imageBase64 = `data:image/png;base64,${Buffer.from( + imageBuffer + ).toString("base64")}`; + + return new ImageResponse( + ( +
+ Cardano API +
+

+ {title} +

+ +

+ Explore a list of Cardano API Projects +

+
+
+ ), + { + width: 800, + height: 600, // Adjust size as needed + fonts: [ + { + name: "Roboto", + data: fontData, + style: "normal", + weight: 400, + }, + ], + } + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index d8fe655..1d61602 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,78 +1,36 @@ -"use client"; -import { useState } from "react"; -import { Card } from "./Component/Card"; +import { Metadata } from "next"; import data from "../data.json"; +import Pagination from "./Component/Pagination"; // New client component + +export const metadata: Metadata = { + title: "Cardano API", + description: "A list of Cardano Api projects", + openGraph: { + title: "Cardano Api", + description: "A list of Cardano Api Projects", + images: [ + { + url: "http://localhost:3000/api/og", + width: 1200, + height: 630, + alt: "Cardano Api", + }, + ], + siteName: "https://cardanoapi.io", + }, +}; export default function Home() { const cardsPerPage = 8; - const [currentPage, setCurrentPage] = useState(1); - - // Calculate the index range for the cards to display on the current page - const indexOfLastCard = currentPage * cardsPerPage; - const indexOfFirstCard = indexOfLastCard - cardsPerPage; - const currentCards = data.slice(indexOfFirstCard, indexOfLastCard); - - // Calculate the total number of pages const totalPages = Math.ceil(data.length / cardsPerPage); - // Handle page change - const handlePageChange = (pageNumber: number): void => { - setCurrentPage(pageNumber); - }; - return ( -
-
- {currentCards.map((project) => ( - - ))} -
- - {/* Pagination Controls */} -
- - - {/*Page Numbers*/} - {[...Array(totalPages)].map((_, index) => ( - - ))} - - -
+
+
); }