feat: Update media-one image URL

.eslintrc.json

@@ -6,9 +6,11 @@
         "airbnb/hooks", 
         "prettier",
         "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "eslint-config-airbnb",
+        "eslint-config-next"
     ],
-    "plugins": ["react", "@typescript-eslint", "prettier"],
+    "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks"],
     "env": {
       "browser": true,
       "es2021": true,
@@ -24,6 +26,8 @@
       "sourceType": "module"
     },
     "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
       "@typescript-eslint/no-misused-promises": [
         "error",
         {

qodana.yaml

@@ -0,0 +1,29 @@
+#-------------------------------------------------------------------------------#
+#               Qodana analysis is configured by qodana.yaml file               #
+#             https://www.jetbrains.com/help/qodana/qodana-yaml.html            #
+#-------------------------------------------------------------------------------#
+version: "1.0"
+
+#Specify inspection profile for code analysis
+profile:
+  name: qodana.starter
+
+#Enable inspections
+#include:
+#  - name: <SomeEnabledInspectionId>
+
+#Disable inspections
+#exclude:
+#  - name: <SomeDisabledInspectionId>
+#    paths:
+#      - <path/where/not/run/inspection>
+
+#Execute shell command before Qodana execution (Applied in CI/CD pipeline)
+#bootstrap: sh ./prepare-qodana.sh
+
+#Install IDE plugins before Qodana execution (Applied in CI/CD pipeline)
+#plugins:
+#  - id: <plugin.id> #(plugin id can be found at https://plugins.jetbrains.com)
+
+#Specify Qodana linter for analysis (Applied in CI/CD pipeline)
+linter: jetbrains/qodana-js:latest

src/components/media-card/index.tsx

@@ -1,65 +1,53 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import clsx from "clsx";
 import Anchor from "@ui/anchor";
 import { IMedia } from "@utils/types";
 
 type TProps = Pick<
     IMedia,
-    "title" | "path" | "type" | "date" | "image" | "views"
+    "image" | "path" | "title" | "description" | "type" | "date"
 > & {
     className?: string;
 };
 
 const MediaCard = forwardRef<HTMLDivElement, TProps>(
-    ({ title, path, type, date, image, views, className }, ref) => {
-        console.log('Image Source:', image?.src); // Debugging log
+    ({ className, image, path, title, description, type, date }, ref) => {
         return (
-            <div
-                className={clsx(
-                    "media-card tw-flex tw-flex-col tw-relative tw-overflow-hidden tw-transition-all tw-duration-300 tw-rounded tw-bg-white tw-shadow-xl tw-shadow-black/5 tw-group tw-w-[280px] lg:tw-w-[320px] tw-h-auto hover:tw-transform hover:tw-translate-y-[-5px] hover:tw-shadow-2xl",
-                    className
-                )}
-                ref={ref}
-            >
-                {image?.src ? (
-                    <figure className="tw-relative tw-overflow-hidden tw-w-full tw-h-[200px] lg:tw-h-[250px]">
-                        <img
-                            className="tw-w-full tw-h-full tw-transition-transform tw-duration-500 tw-object-cover group-hover:tw-scale-110"
-                            src={image.src}
-                            alt={image?.alt || title}
-                            width={image?.width || 500}
-                            height={image?.height || 250}
-                            loading={image?.loading || "lazy"}
-                        />
-                        <Anchor path={path} className="link-overlay">
-                            {title}
-                        </Anchor>
-                    </figure>
-                ) : (
-                    <div className="tw-bg-dark/40 tw-w-full tw-h-[200px] lg:tw-h-[250px]" />
-                )}
+            <div className={clsx("media-card tw-group", className)} ref={ref}>
+                <div className="tw-relative tw-overflow-hidden tw-rounded tw-h-[250px]">
+                    {image?.src && (
+                        <figure className="tw-transition-transform tw-duration-1500 tw-h-full group-hover:tw-scale-110">
+                            <img
+                                className="tw-w-full tw-h-full tw-object-cover"
+                                src={image.src}
+                                alt={image?.alt || "Media"}
+                                width={image.width || 480}
+                                height={image.height || 250}
+                                loading={image.loading || "lazy"}
+                            />
+                        </figure>
+                    )}
+                    <Anchor className="link-overlay" path={path}>
+                        {title}
+                    </Anchor>
+                </div>
 
-                <div className="tw-py-6.1 tw-px-7.5 lg:tw-pt-5 lg:tw-pb-[5px] lg:tw-px-[38px] tw-flex-grow tw-flex tw-flex-col tw-justify-end">
-                    <Anchor
-                        path={`/${type}`}
-                        className="tw-font-medium tw-block tw-mb-1 -tw-tracking-tightest tw-uppercase tw-text-gray-700 hover:tw-text-gray-900"
-                    >
+                <div className="info tw-pt-[26px]">
+                    <div className="tw-text-base tw-font-medium tw-uppercase -tw-tracking-tightest tw-leading-[1.4] tw-mb-1.5">
                         {type}
-                    </Anchor>
-                    <h3 className="tw-text-xl tw-leading-normal lg:tw-text-[24px] lg:tw-leading-[1.42] tw-text-gray-800 tw-mb-0">
-                        <Anchor className="hover:tw-text-gray-900" path={path}>
-                            {title}
-                        </Anchor>
+                    </div>
+
+                    <h3 className="tw-mb-0 tw-leading-normal">
+                        <Anchor path={path}>{title}</Anchor>
                     </h3>
-                    <ul className="tw-flex tw-gap-7">
-                        <li className="tw-text-md tw-mt-3.8 tw-text-gray-600 tw-mb-0">
+
+                    <p className="tw-mt-2 tw-text-sm tw-text-gray-500">{description}</p>
+
+                    <ul className="tw-flex tw-gap-7 tw-text-gray-300 tw-text-md">
+                        <li className="tw-mt-3.8 tw-mb-0">
                             <i className="far fa-calendar tw-mr-2.5" />
                             {date}
                         </li>
-                        <li className="tw-text-md tw-mt-3.8 tw-text-gray-600">
-                            <i className="far fa-eye tw-mr-2.5" />
-                            {views} views
-                        </li>
                     </ul>
                 </div>
             </div>

src/containers/media-full/index.tsx

@@ -0,0 +1,57 @@
+import { motion } from "framer-motion";
+import Section from "@ui/section";
+import MediaCard from "@components/media-card/index"; // Assuming there's a media-card component similar to blog-card
+import Pagination from "@components/pagination/pagination-01";
+import { IMedia } from "@utils/types";
+import { scrollUpVariants } from "@utils/variants";
+
+const AnimatedMediaCard = motion(MediaCard);
+
+type TProps = {
+    data: {
+        media: IMedia[];
+        pagiData?: {
+            currentPage: number;
+            numberOfPages: number;
+        };
+    };
+};
+
+const MediaArea = ({ data: { media, pagiData } }: TProps) => {
+    return (
+        <Section className="media-area" space="bottom">
+            <h2 className="tw-sr-only">Media Section</h2>
+            <div className="tw-container">
+                {media.length > 0 && (
+                    <div className="tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+                        {media.map((item) => (
+                            <AnimatedMediaCard
+                                key={item.path}
+                                image={item.image}
+                                title={item.title}
+                                path={item.path}
+                                description={item.description}
+                                type={item.type}
+                                date={item.date}
+                                initial="offscreen"
+                                whileInView="onscreen"
+                                viewport={{ once: true, amount: 0.2 }}
+                                variants={scrollUpVariants}
+                            />
+                        ))}
+                    </div>
+                )}
+                {pagiData && pagiData.numberOfPages > 1 && (
+                    <Pagination
+                        className="tw-mt-[50px]"
+                        numberOfPages={pagiData.numberOfPages}
+                        currentPage={pagiData.currentPage}
+                        rootPage="media/media"
+                    />
+                )}
+            </div>
+        </Section>
+    );
+};
+
+export default MediaArea;

src/data/media/media-one.md

@@ -1,6 +1,6 @@
 ---
 title: "Media Title 1"
-image: "https://dummyimage.com/640x4:3/"
+image: "https://res.cloudinary.com/vetswhocode/image/upload/v1716598792/junior-senior-card_sjcshc.jpg"
 description: "Description for media 1"
 tags:
   - "tag1"

src/pages/media.tsx

@@ -2,64 +2,48 @@ import type { GetStaticProps, NextPage } from "next";
 import SEO from "@components/seo/page-seo";
 import Layout01 from "@layout/layout-01";
 import Breadcrumb from "@components/breadcrumb";
-import MediaGrid from "@components/media-grid";
+import MediaArea from "@containers/media-full/index"; // Assuming the new component is saved here
 import { getAllMedia } from "../lib/media";
 import { IMedia } from "@utils/types";
 
 type TProps = {
     data: {
         media: IMedia[];
+        currentPage: number;
+        numberOfPages: number;
     };
 };
 
 type PageProps = NextPage<TProps> & {
     Layout: typeof Layout01;
 };
 
-const Media: PageProps = ({ data: { media } }) => {
-    const whatWeHaveBuilt = media.filter(item => item.tags.some(tag => tag.title === 'github'));
-    const publications = media.filter(item => item.type === 'publication');
-    const podcasts = media.filter(item => item.type === 'podcast');
-    const courses = media.filter(item => item.type === 'course');
+const POSTS_PER_PAGE = 9;
 
+const Media: PageProps = ({ data: { media, currentPage, numberOfPages } }) => {
     return (
         <>
             <SEO title="Media" />
             <Breadcrumb
                 pages={[{ path: "/", label: "home" }]}
                 currentPage="Media"
             />
-            <div className="tw-container tw-mx-auto tw-my-8">
-                <MediaGrid section="What we have built" data={whatWeHaveBuilt} />
-                <MediaGrid section="Publications" data={publications} />
-                <MediaGrid section="Podcasts" data={podcasts} />
-                <MediaGrid section="Courses" data={courses} />
-            </div>
+            <MediaArea
+                data={{
+                    media,
+                    pagiData: { currentPage, numberOfPages },
+                }}
+            />
         </>
     );
 };
 
 Media.Layout = Layout01;
 
 export const getStaticProps: GetStaticProps = () => {
-    const { media } = getAllMedia([
+    const { media, count } = getAllMedia([
         "title", "image", "description", "tags", "date", "content", "slug", "excerpt", "sortOrder", "type"
-    ]);
-
-    if (!Array.isArray(media)) {
-        return {
-            props: {
-                data: {
-                    media: [],
-                },
-                layout: {
-                    headerShadow: true,
-                    headerFluid: false,
-                    footerMode: "light",
-                },
-            },
-        };
-    }
+    ], 0, POSTS_PER_PAGE);
 
     // Remove duplicates and sort data by sortOrder
     const uniqueMedia = Array.from(new Set(media.map(item => item.slug)))
@@ -71,6 +55,8 @@ export const getStaticProps: GetStaticProps = () => {
         props: {
             data: {
                 media: uniqueMedia,
+                currentPage: 1,
+                numberOfPages: Math.ceil(count / POSTS_PER_PAGE),
             },
             layout: {
                 headerShadow: true,
@@ -81,4 +67,4 @@ export const getStaticProps: GetStaticProps = () => {
     };
 };
 
-export default Media;
+export default Media;