Skip to content

Commit

Permalink
Merge pull request #154 from Maakaf/103-insert-some-real-projects
Browse files Browse the repository at this point in the history
103 insert some real projects
  • Loading branch information
Darkmift authored Mar 10, 2024
2 parents 73f5f5e + 5904c4d commit 606eceb
Show file tree
Hide file tree
Showing 12 changed files with 359 additions and 91 deletions.
1 change: 1 addition & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
GITHUB_TOKEN=your_github_token
77 changes: 77 additions & 0 deletions app/[locale]/api/projects/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { IGithubProjectsMaakafResponse } from '@/hooks/useFetchProjects';
import { NextResponse, NextRequest } from 'next/server';

const url =
'https://raw.githubusercontent.com/Maakaf/maakaf-temp/main/src/assets/table_data/projects.json';

async function fetchGitHubData(githubLink: string) {
const ownerRepo = githubLink.replace('https://github.com/', '').split('/');
const token = process.env.GITHUB_TOKEN;
const query = `
query {
repository(owner: "${ownerRepo[0]}", name: "${ownerRepo[1]}") {
name
openGraphImageUrl
description
url
createdAt
updatedAt
stargazerCount
languages(first: 5, orderBy: {field: SIZE, direction: DESC}) {
edges {
node {
name
}
}
}
collaborators{
totalCount
}
contributors: mentionableUsers(first: 5) {
edges {
node {
avatarUrl
login
}
}
}
}
}
`;

const response = await fetch('https://api.github.com/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({ query }),
});

const data = await response.json();
return data.data.repository; // Adjust this based on the query response structure
}

export async function GET(_request: NextRequest) {
try {
const response = await fetch(url);
const projects: IGithubProjectsMaakafResponse[] = await response.json();

if (!projects?.[0]?.githubLink) {
throw new Error('Failed to fetch projects');
}

const githubDataPromises = projects.map(project =>
fetchGitHubData(project.githubLink)
);
const githubData = await Promise.all(githubDataPromises);

const res = NextResponse.json({ items: githubData });
res.headers.set('Cache-Control', 's-maxage=1800, stale-while-revalidate');
return res;
} catch (error) {
const res = NextResponse.json({ error }, { status: 500 });
res.headers.set('Cache-Control', 's-maxage=60, stale-while-revalidate');
return res;
}
}
6 changes: 0 additions & 6 deletions app/[locale]/api/route.ts

This file was deleted.

32 changes: 32 additions & 0 deletions app/[locale]/projects/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Metadata } from 'next';

export const metadata: Metadata = {
title: 'הפרויקטים',
description:
'הכירו את פרויקטי הקוד הפתוח של חברי הקהילה, ובחרו לאילו פרויקטים תרצו להצטרף',
openGraph: {
title: 'הפרויקטים | מעקף',
description:
'הכירו את פרויקטי הקוד הפתוח של חברי הקהילה, ובחרו לאילו פרויקטים תרצו להצטרף',
url: 'https://maakaf-website.vercel.app/projects',
siteName: 'Maakaf',
type: 'website',
images: [
{
url: 'https://maakaf-website.vercel.app/favicon.ico',
width: 600,
height: 600,
},
],
},
};

const ProjectsLayout = ({ children }: { children: React.ReactNode }) => {
return (
<section className="self-center w-full h-[90vh] px-20 pb-6 flex flex-col justify-center gap-4">
{children}
</section>
);
};

export default ProjectsLayout;
93 changes: 46 additions & 47 deletions app/[locale]/projects/page.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,58 @@
'use client';
import FiltersBar from '@/components/Projects/FiltersBar/FiltersBar';
import { Metadata } from 'next';
import ProjectCard, {
ProjectCardProps,
} from '@/components/Projects/ProjectCard/ProjectCard';

export const metadata: Metadata = {
title: 'הפרויקטים',
description:
'הכירו את פרויקטי הקוד הפתוח של חברי הקהילה, ובחרו לאילו פרויקטים תרצו להצטרף',
openGraph: {
title: 'הפרויקטים | מעקף',
description:
'הכירו את פרויקטי הקוד הפתוח של חברי הקהילה, ובחרו לאילו פרויקטים תרצו להצטרף',
url: 'https://maakaf-website.vercel.app/projects',
siteName: 'Maakaf',
type: 'website',
images: [
{
url: 'https://maakaf-website.vercel.app/favicon.ico',
width: 600,
height: 600,
},
],
},
};
import { ProjectCardProps } from '@/components/Projects/ProjectCard/ProjectCard';
import { MempmizedProjectsDisplay } from '@/components/Projects/ProjectDisplay';
import useFetchProjects from '@/hooks/useFetchProjects';
import React from 'react';

const ProjectsPage = () => {
const exampleProjectCardData: ProjectCardProps = {
projectThumbnailSrc: '/',
updatedDate: new Date('2023/3/14'),
createdDate: new Date('2023/3/14'),
projectName: 'פרויקט אקראי 45HG',
contributorCount: 125,
contributorAvatars: [
{ imageSrc: '/images/avatars/avatar.jpg?0', name: 'ברוך אודם' },
{ imageSrc: '/images/avatars/avatar.jpg?1', name: 'ברוך אודם' },
],
description: `פסקת תיאור של הפרויקטים פה שתתן חשק לעשייה, שתדבר קצת על הפרויקט ומה
יש בו, מה מחפשים בדיוק במפתחים שמתנדבים, איזה פונקציות קיימות ואולי
מה הלך הרוח של הפרויקט. מה שצריך כדי לתת כמה שיותר מידע לככה הכרטיס
מתרחב כשיש יותר מ-3 שורות. בגדול הטקסט נשאר בגבולות ה700 פיקסלים,
אבל השפות תכנות והכפתורים יורדים למטה, כשכל השאר נשאר למעלה ותמיד
נשאר רווח של 24 פיקסלים בין התיבת טקסט לשפות תכנות והכפתורים.`,
tags: ['Java', 'Python', 'CSS', 'CSS1', 'CSS2', 'CSS3'],
githubLink: 'https://github.com/Maakaf/maakaf-website',
discordLink: 'https://discord.gg/ayh8HtRQXk',
project: {
name: 'MAAKAF_MeOnTheLine',
openGraphImageUrl: '',
collaborators: { totalCount: 0 },
description:
"Maakaf community project - At it's core - Digital business card system.",
url: 'https://github.com/shefyg/MAAKAF_MeOnTheLine',
createdAt: '2024-03-07T09:09:06Z',
updatedAt: '2024-03-07T15:43:38Z',
stargazerCount: 0,
languages: {
edges: [
{
node: {
name: 'JavaScript',
},
},
],
},
contributors: {
edges: [
{
node: {
avatarUrl: 'https://avatars.githubusercontent.com/u/1272318?v=4',
login: 'shefyg',
},
},
],
},
},
};

const { projects, loading } = useFetchProjects();

if (loading) return <div>Loading...</div>;

return (
<section className="self-center w-full h-[90vh] px-20 pb-6 flex flex-col justify-center gap-4">
<>
<FiltersBar />
<div className="projects flex flex-col justify-center gap-4">
<ProjectCard {...exampleProjectCardData}></ProjectCard>
<div className="overflow-y-auto projects flex flex-col justify-center gap-4">
{/* <ProjectCard {...exampleProjectCardData}></ProjectCard> */}
{projects?.items?.items?.length && (
<MempmizedProjectsDisplay projects={projects.items} />
)}
</div>
</section>
</>
);
};

Expand Down
71 changes: 34 additions & 37 deletions components/Projects/ProjectCard/ProjectCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,29 @@ import TagList from './TagList';
import AvatarList from './AvatarList';
import { AvatarData } from './Avatar';
import DiscordLink from '@/components/Common/DiscordLink';
import { RepoItem } from '@/hooks/useFetchProjects';

export interface ProjectCardProps {
projectThumbnailSrc: string;
updatedDate: Date;
createdDate: Date;
projectName: string;
contributorCount: number;
contributorAvatars: AvatarData[];
description: string;
tags: string[];
githubLink?: string;
discordLink?: string;
project: RepoItem;
}

export default function ProjectCard({
projectThumbnailSrc,
updatedDate,
createdDate,
projectName,
contributorCount,
contributorAvatars,
description,
tags,
githubLink,
discordLink,
project: {
openGraphImageUrl,
updatedAt,
createdAt,
name,
collaborators,
description,
languages,
contributors: { edges: contributors },
},
}: ProjectCardProps) {
const updatedDateString = updatedDate
const updatedDateString = new Date(updatedAt)
.toLocaleDateString('he-IL')
.replaceAll('.', '/');

const createdDateString = createdDate
const createdDateString = new Date(createdAt)
.toLocaleDateString('he-IL')
.replaceAll('.', '/');

Expand All @@ -49,7 +41,7 @@ export default function ProjectCard({
<ImageWithFallback
width="108"
height="108"
src={projectThumbnailSrc}
src={openGraphImageUrl}
alt="project name"
fallback={ProjectImagePlaceholder}
></ImageWithFallback>
Expand All @@ -65,31 +57,36 @@ export default function ProjectCard({
<div className="flex grow flex-col justify-between gap-6">
<div className="flex flex-col gap-4">
<div className="flex flex-wrap flex-col sm:flex-row sm:items-center gap-6 gap-y-2">
<div className="font-birzia text-xl font-bold">{projectName}</div>
<div className="font-birzia text-xl font-bold">{name}</div>
<div className="flex grow sm:justify-between items-center gap-2">
<div className="font-inter text-xs text-lightText bg-blue-400 dark:bg-pink-500 rounded-[50px] px-6 py-2 font-semibold">
{contributorCount} תורמים
{collaborators?.totalCount || 0} תורמים
</div>
<AvatarList avatars={contributorAvatars}></AvatarList>
<AvatarList
avatars={contributors.map(c => ({
imageSrc: c.node.avatarUrl,
name: c.node.login,
}))}
></AvatarList>
</div>
</div>
<ProjectCardDescription text={description}></ProjectCardDescription>
<ProjectCardDescription
text={description || 'none set'}
></ProjectCardDescription>
</div>
<div className="flex flex-wrap justify-between flex-col sm:flex-row gap-y-6 sm:items-end">
<TagList
className="flex-wrap grow basis-[min-content]"
tags={tags}
tags={languages.edges.map(l => l.node.name)}
></TagList>
<div className="flex gap-2">
{githubLink && <GithubButton link={githubLink} />}
{discordLink && (
<DiscordLink
href={discordLink}
className="flex-grow-[2] font-inter font-semibold bg-gray-50 text-gray-600 py-2 px-6"
>
ערוץ דיסקורד
</DiscordLink>
)}
{/* <GithubButton link={LINKS.GITHUB_LINK} />
<DiscordLink
href={LINKS.DISCORD_LINK}
className="flex-grow-[2] font-inter font-semibold bg-gray-50 text-gray-600 py-2 px-6"
>
ערוץ דיסקורד
</DiscordLink> */}
</div>
</div>
</div>
Expand Down
20 changes: 20 additions & 0 deletions components/Projects/ProjectDisplay.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { IRepositoriesAPIResponse } from '@/hooks/useFetchProjects';
import ProjectCard from './ProjectCard/ProjectCard';
import React from 'react';

const ProjectsDisplay = ({
projects,
}: {
projects: IRepositoriesAPIResponse;
}) => {
console.log('🚀 ~ projects:', projects);
return (
<div className="flex flex-col gap-4">
{projects.items.map((project, i) => (
<ProjectCard key={project.url + i} project={project} />
))}
</div>
);
};

export const MempmizedProjectsDisplay = React.memo(ProjectsDisplay);
2 changes: 1 addition & 1 deletion components/ui/accordion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as React from 'react';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { Triangle } from 'lucide-react';

import { cn } from '@/lib/utils';
import { cn } from '@/lib/utils/tailwind/cn';

const Accordion = AccordionPrimitive.Root;

Expand Down
Loading

0 comments on commit 606eceb

Please sign in to comment.