Display Projects | Next.js | Page 1

wispy patioBOT Jul 6, 2024, 6:01 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

subtle shadow Jul 6, 2024, 6:35 PM

#

this is your question ?

#

the question is not clear here can you explain your question more ?

#

@balmy plinth

balmy plinth Jul 6, 2024, 6:39 PM

#

ok ill start little by little

#

i have this from a random portfolio project it goes well with my template :

#

📎 message.txt

#

as you can see it uses upstash radis and conentlayer

subtle shadow Jul 6, 2024, 6:40 PM

#

ahhh i see you want to use this style but you dont have redis and other library in it ?

#

just remove the import and you will see waht to remove

balmy plinth Jul 6, 2024, 6:41 PM

#

yea i did but everything needs to be removed almost

#

ok so i have this component working well

#

import Link from "next/link";
import { HiPencilAlt } from "react-icons/hi";
import RemoveBtn from "./RemoveBtn";

const getProjects = async() => {
try{
const res = await fetch('http://localhost:3000/api/projects', {
cache: 'no-store',
});

if (!res.ok) {
  throw new Error("Failed to fetch projects");
}
return res.json();

} catch(error) {
console.log("Error loading projects: ", error);
return { projects: [] }; // Return an empty array in case of error
}
}

export default async function ProjectsList() {
const { projects } = await getProjects();
return(
<>
{projects.map((p: any) => (
<div className="p-4 border border-slate-300 my-3 flex justify-between gap-5 items-start">
<div>
<h2 className="font-bold text-2xl">{p.title}</h2>
<div>{p.description}</div>
</div>

      <div className="flex gap-2">
        <RemoveBtn id={p._id} />
        <Link href={`/test/editProject/${p._id}`}>
          <HiPencilAlt size={24} />
        </Link>
      </div>
    </div>
  ))}
</>

);
}

#

is it possible to adabt this into that?

subtle shadow Jul 6, 2024, 6:42 PM

#

i mean you can copy parts and replace the redis based on your data

#

but it is possible

#

so like you only want this card ``` <Card>
<Link href={/projects/${featured.slug}}>
<article className="relative w-full h-full p-4 md:p-8">
<div className="flex items-center justify-between gap-2">
<div className="text-xs text-zinc-100">
{featured.date ? (
<time dateTime={new Date(featured.date).toISOString()}>
{Intl.DateTimeFormat(undefined, {
dateStyle: "medium",
}).format(new Date(featured.date))}
</time>
) : (
<span>SOON</span>
)}
</div>
<span className="flex items-center gap-1 text-xs text-zinc-500">
<Eye className="w-4 h-4" />{" "}
{Intl.NumberFormat("en-US", { notation: "compact" }).format(
views[featured.slug] ?? 0,
)}
</span>
</div>

            <h2
              id="featured-post"
              className="mt-4 text-3xl font-bold text-zinc-100 group-hover:text-white sm:text-4xl font-display"
            >
              {featured.title}
            </h2>
            <p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
              {featured.description}
            </p>
            <div className="absolute bottom-4 md:bottom-8">
              <p className="hidden text-zinc-200 hover:text-zinc-50 lg:block">
                Read more <span aria-hidden="true">&rarr;</span>
              </p>
            </div>
          </article>
        </Link>
      </Card>```

#

then just get this card

#

remove this {featured.title} and replace it with data from your api

#

same with other things

balmy plinth Jul 6, 2024, 6:47 PM

#

what about these : const views = (
await redis.mget<number[]>(
...allProjects.map((p) => ["pageviews", "projects", p.slug].join(":")),
)
).reduce((acc, v, i) => {
acc[allProjects[i].slug] = v ?? 0;
return acc;
}, {} as Record<string, number>);

const featured = allProjects.find((project) => project.slug === "unkey")!;
const top2 = allProjects.find((project) => project.slug === "planetfall")!;
const top3 = allProjects.find((project) => project.slug === "highstorm")!;
const sorted = allProjects
.filter((p) => p.published)
.filter(
(project) =>
project.slug !== featured.slug &&
project.slug !== top2.slug &&
project.slug !== top3.slug,
)
.sort(
(a, b) =>
new Date(b.date ?? Number.POSITIVE_INFINITY).getTime() -
new Date(a.date ?? Number.POSITIVE_INFINITY).getTime(),
);

subtle shadow Jul 6, 2024, 6:48 PM

#

that are just data processing

#

it really depends on your data how you stracture it based on what your api return. for then theu do filtering and sorting for project

#

so it is not relevant to design

#

i mean it is relevant but ony to display informatiuon

#

so you can just copy this part and data design will adjust to data

📎 message.txt

#

lets say you have extra text for project information then add that

#

you can remove other parts like data display part which i said {featured.title} something like this since this is not relivant to design only information

balmy plinth Jul 6, 2024, 6:51 PM

#

do i keep the article compoenent? import type { Project } from "@/.contentlayer/generated";
import Link from "next/link";
import { Eye, View } from "lucide-react";

type Props = {
project: Project;
views: number;
};

export const Article: React.FC<Props> = ({ project, views }) => {
return (
<Link href={/projects/${project.slug}}>
<article className="p-4 md:p-8">
<div className="flex justify-between gap-2 items-center">
<span className="text-xs duration-1000 text-zinc-200 group-hover:text-white group-hover:border-zinc-200 drop-shadow-orange">
{project.date ? (
<time dateTime={new Date(project.date).toISOString()}>
{Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(
new Date(project.date),
)}
</time>
) : (
<span>SOON</span>
)}
</span>
<span className="text-zinc-500 text-xs flex items-center gap-1">
<Eye className="w-4 h-4" />{" "}
{Intl.NumberFormat("en-US", { notation: "compact" }).format(views)}
</span>
</div>
<h2 className="z-20 text-xl font-medium duration-1000 lg:text-3xl text-zinc-200 group-hover:text-white font-display">
{project.title}
</h2>
<p className="z-20 mt-4 text-sm duration-1000 text-zinc-400 group-hover:text-zinc-200">
{project.description}
</p>
</article>
</Link>
);
};

subtle shadow Jul 6, 2024, 6:51 PM

#

but yea be mindfull that you will find other things in here that displays data but still part of the design

subtle shadow Jul 6, 2024, 6:52 PM

#

balmy plinth do i keep the article compoenent? import type { Project } from "@/.contentlayer...

its up to you man on how you want to keep your design .

balmy plinth Jul 6, 2024, 6:53 PM

#

so complicated sometimes its better to do smth from scratch lmao

#

ty for ur help ill see what i can do and get back to u if u dun mind 🙂

subtle shadow Jul 6, 2024, 6:55 PM

#

as i said it is just the data that you want to remove so in here it is the {project.description} ** {project.title}**
{project.date ? (<time dateTime={new Date(project.date).toISOString()}>{Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date(project.date),)}</time>) : (<span>SOON</span>)} this part is a loop so if you want to have this part you make sure you have a loop but if you dont want it you can just get the proper component like the <span>SOON</span> or <time dateTime={new Date(project.date).toISOString()}></time>

subtle shadow Jul 6, 2024, 6:56 PM

#

balmy plinth ty for ur help ill see what i can do and get back to u if u dun mind 🙂

sure if i see the notif why not

#

https://ejayz.uk/ hey this is my portfolio i just copy component from a ui library called daisy UII

Ejayz Portfolio

Static Portfolio

#

you copy design . then modify it

balmy plinth Jul 6, 2024, 6:58 PM

#

i worked with daisyUI on nuxt projects before

balmy plinth Jul 6, 2024, 6:58 PM

#

subtle shadow https://ejayz.uk/ hey this is my portfolio i just copy component from a ui libra...

looks cool tbh

#

sure man ty alot ill get back here in an hour or 2 and update u if it isn't solved ty again ❤️

wispy patioBOT Jul 7, 2024, 1:48 PM

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1259207687569276988 message)

sly lichen Jul 7, 2024, 3:53 PM

#

@balmy plinth for archival purposes please avoid deleting the original question unless strictly necessary, such as when the question contains secrets (that you should have never posted in the first place)

#Display Projects