Merge branch 'pbclife:main' into main

lib/contributors.ts

@@ -30,18 +30,37 @@ function asserHasPropertyArray(
 }
 
 export const fetchAllContributors = async (
- limit: number
+ queryString: string
 ): Promise<{ count: number; contributors: (TCont & { _id: string })[] }> => {
  try {
- const { data } = await axios.get(
- `/contributors?select=avatar_url,gh_username,name,occupation,bio,createdAt,_id&limit=${limit}`
- );
+ const { data } = await axios.get(queryString);
  return data;
  } catch (error) {
  throw new Error(`Something went wrong`);
  }
 };
 
+export const fetchNewContributors = async (
+ limit: number
+): Promise<ReturnType<typeof fetchAllContributors>> => {
+ const queryString = `/contributors?select=avatar_url,gh_username,name,occupation,bio,createdAt,_id,createdAt&limit=${limit}&sort=-createdAt`;
+ return await fetchAllContributors(queryString);
+};
+
+export const fetchOldContributors = async (
+ limit: number
+): Promise<ReturnType<typeof fetchAllContributors>> => {
+ const queryString = `/contributors?select=avatar_url,gh_username,name,occupation,bio,createdAt,_id,createdAt&limit=${limit}&sort=createdAt`;
+ return await fetchAllContributors(queryString);
+};
+
+export const fetchPopularContributors = async (
+ limit: number
+): Promise<ReturnType<typeof fetchAllContributors>> => {
+ const queryString = `/contributors?select=avatar_url,gh_username,name,occupation,bio,createdAt,_id,followers,createdAt&limit=${limit}&sort=-followers`;
+ return await fetchAllContributors(queryString);
+};
+
 export const fetchSingleContributor = async (
  contId: string,
  contribution: Contribution
@@ -65,7 +84,10 @@ export const fetchSingleContributor = async (
  username: userName,
  });
  // creating payload for new contributor
- const contPayload: Omit<TContributor, 'isDeleted' | 'profile_views'> = {
+ const contPayload: Omit<
+ TContributor,
+ 'isDeleted' | 'profile_views' | 'createdAt'
+ > = {
  avatar_url: gh_user.avatar_url,
  bio: gh_user.bio,
  content: contribution.content,
@@ -76,6 +98,8 @@ export const fetchSingleContributor = async (
  name: contribution.meta.author as string,
  occupation: contribution.meta.occupation as string,
  location: gh_user.location,
+ followers: gh_user.followers,
+ following: gh_user.following,
  };
 
  const {

lib/date.ts

@@ -0,0 +1,20 @@
+export const getFormattedDate = (date: Date): string => {
+ const months: string[] = [
+ 'jan',
+ 'feb',
+ 'mar',
+ 'apr',
+ 'may',
+ 'jun',
+ 'jul',
+ 'aug',
+ 'sep',
+ 'oct',
+ 'nov',
+ 'dec',
+ ];
+
+ const dateCoord = date.toLocaleString().split('T')[0].split('-');
+
+ return `${dateCoord[2]} ${months[Number(dateCoord[1]) - 1]} ${dateCoord[0]}`;
+};

next.config.js

@@ -11,6 +11,9 @@ const withMdx = mdx({
 const nextConfig = withMdx({
  reactStrictMode: true,
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+ images: {
+ domains: ['avatars.githubusercontent.com'],
+ },
 });
 
 module.exports = nextConfig;

package.json

@@ -39,6 +39,7 @@
  "react-dom": "18.2.0",
  "remark": "^14.0.2",
  "remark-html": "^15.0.1",
+ "sharp": "^0.31.3",
  "typescript": "4.9.4"
  },
  "devDependencies": {

server/models/contributors.ts

@@ -42,6 +42,14 @@ const contributorSchema = new mongoose.Schema<TContributor, ContributorModel>(
  type: String,
  required: true,
  },
+ followers: {
+ type: Number,
+ default: 0,
+ },
+ following: {
+ type: Number,
+ default: 0,
+ },
  profile_views: {
  type: Number,
  default: 0,

server/models/validation/contributor.validation.ts

@@ -13,10 +13,19 @@ const ContV = z.object({
  content: z.string(),
  profile_views: z.number().default(0),
  isDeleted: z.boolean().default(false),
+ createdAt: z.date().optional().default(new Date(Date.now())),
+ followers: z.number().default(0),
+ following: z.number().default(0),
 });
 export default ContV;
 export type TContributor = z.infer<typeof ContV>;
 export type TCont = Pick<
  TContributor,
- 'avatar_url' | 'gh_username' | 'name' | 'bio' | 'occupation'
+ | 'avatar_url'
+ | 'gh_username'
+ | 'name'
+ | 'bio'
+ | 'occupation'
+ | 'createdAt'
+ | 'followers'
 >;

src/components/contributorpage/ContributorComp.tsx

@@ -0,0 +1,89 @@
+import type { TCont } from '&validation/contributor.validation';
+import { getFormattedDate } from 'lib/date';
+import Image from 'next/image';
+import { ComponentProps, FC } from 'react';
+import GithubIcon from '../icons/github';
+import Glow from '../utilities/glow';
+
+type ContributorProps = TCont &
+ ComponentProps<'div'> & {
+ glow?: boolean;
+ displayFollowers?: boolean;
+ };
+
+const ContributorComp: FC<ContributorProps> = ({
+ avatar_url,
+ bio,
+ gh_username,
+ name,
+ occupation,
+ createdAt,
+ className,
+ glow = false,
+ followers,
+ ...props
+}) => {
+ const contributedIn = getFormattedDate(createdAt);
+
+ return (
+ <div
+ className={`group relative mx-auto h-fit w-full rounded-md border ${
+ glow ? ` border-accent ` : `border-skin-base `
+ } bg-skin-base p-4 text-skin-base transition-colors duration-200 ease-in-out hover:border-accent hover:bg-skin-shine sm:max-w-md sm:p-6 ${
+ className || ``
+ }`}
+ {...props}
+ >
+ {glow && <Glow className="w-full" />}
+ {/* head */}
+ <div className={`flex items-center gap-x-4 ${bio && `pb-4`}`}>
+ {/* profile picture */}
+ <Image
+ alt={gh_username}
+ src={avatar_url}
+ width={144}
+ height={144}
+ className="h-12 w-12 rounded-full object-cover object-center"
+ />
+ {/* info */}
+ <div className="">
+ {/* name */}
+ <strong className="text-lg capitalize transition-colors duration-200 ease-in-out group-hover:text-accent ">
+ {name}
+ </strong>
+ {/* occupation */}
+ <p className="text-sm font-medium text-skin-muted transition-colors duration-200 ease-in-out group-hover:text-skin-base ">
+ {followers && followers > 0 ? (
+ <span className={`flex items-center gap-x-2 `}>
+ <GithubIcon className="h-5 w-5 text-skin-base" />
+ {followers} followers
+ </span>
+ ) : (
+ occupation
+ )}
+ </p>
+ </div>
+ </div>
+ {/* bio */}
+ {bio && (
+ <p
+ className={`border-t group-hover:border-accent ${
+ glow ? `border-accent` : `border-skin-base `
+ } py-2 font-medium`}
+ >
+ {bio}
+ </p>
+ )}
+ {/* contribution date */}
+ <div
+ className={`absolute right-2 top-1 border-transparent text-xs capitalize ${
+ glow ? `text-accent/70` : `text-skin-base/30`
+ }`}
+ >
+ {contributedIn}
+ </div>
+ </div>
+ );
+};
+
+export default ContributorComp;

src/components/contributorpage/NewContributrs.tsx

@@ -0,0 +1,26 @@
+import { ContributorsProps } from '@/pages/contributors';
+import FresLeafIcon from '@icons/fresh-leaf';
+import { FC } from 'react';
+import Represent from '../layouts/represent';
+import RenderContributors from './RenderContributors';
+
+type Props = {
+ contributors: ContributorsProps['newContributors'];
+};
+
+const NewContributrs: FC<Props> = ({ contributors }) => {
+ return (
+ <Represent
+ about="Lorem ipsum dolor sit amet consectetur adipisicing elit. In modi aliquid sapiente dicta ab accusamus id."
+ mainTitle="Fresh Contributors"
+ topTitle="Welcome"
+ TopIcon={FresLeafIcon}
+ >
+ <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+ <RenderContributors data={contributors} />
+ </div>
+ </Represent>
+ );
+};
+
+export default NewContributrs;

src/components/contributorpage/OldContributrs.tsx

@@ -0,0 +1,26 @@
+import { ContributorsProps } from '@/pages/contributors';
+import EarlyBirdsIcon from '@icons/early-birds';
+import { FC } from 'react';
+import Represent from '../layouts/represent';
+import RenderContributors from './RenderContributors';
+
+type Props = {
+ contributors: ContributorsProps['oldContributors'];
+};
+
+const OldContributrs: FC<Props> = ({ contributors }) => {
+ return (
+ <Represent
+ about="Lorem ipsum dolor sit amet consectetur adipisicing elit. In modi aliquid sapiente dicta ab accusamus id."
+ mainTitle="Our Early Birds"
+ topTitle="Had Contributed First"
+ TopIcon={EarlyBirdsIcon}
+ >
+ <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+ <RenderContributors data={contributors} />
+ </div>
+ </Represent>
+ );
+};
+
+export default OldContributrs;

src/components/contributorpage/PopularContributrs.tsx

@@ -0,0 +1,26 @@
+import { ContributorsProps } from '@/pages/contributors';
+import StarManIcon from '@icons/star-man';
+import { FC } from 'react';
+import Represent from '../layouts/represent';
+import RenderContributors from './RenderContributors';
+
+type Props = {
+ contributors: ContributorsProps['popularContributors'];
+};
+
+const PopularContributrs: FC<Props> = ({ contributors }) => {
+ return (
+ <Represent
+ about="Lorem ipsum dolor sit amet consectetur adipisicing elit. In modi aliquid sapiente dicta ab accusamus id."
+ mainTitle="Popular Contributors"
+ topTitle="Star Men"
+ TopIcon={StarManIcon}
+ >
+ <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+ <RenderContributors data={contributors} />
+ </div>
+ </Represent>
+ );
+};
+
+export default PopularContributrs;

src/components/contributorpage/RenderContributors.tsx

@@ -0,0 +1,26 @@
+import { ContributorsProps } from '@/pages/contributors';
+import Link from 'next/link';
+import { FC } from 'react';
+import ContributorComp from './ContributorComp';
+
+type Props = {
+ data:
+ | ContributorsProps['newContributors']
+ | ContributorsProps['oldContributors'];
+};
+
+const RenderContributors: FC<Props> = ({ data }) => {
+ return (
+ <>
+ {data.map((cont, index) => (
+ <Link key={cont._id} href={`/contributors/${cont.gh_username}`}>
+ <ContributorComp {...cont} glow={index === 0}>
+ <p>{cont.name}</p>
+ </ContributorComp>
+ </Link>
+ ))}
+ </>
+ );
+};
+
+export default RenderContributors;

src/components/hero/links.tsx

@@ -1,25 +1,17 @@
-import ForkIcon from '../icons/fork';
-import GithubIcon from '../icons/github';
+import HeroLinks from '@/data/HeroLinks';
+const replaceData = ['Create a Copy', 'Go to Repository'];
 
-const HeroLinks = [
- {
- id: 1,
- Icon: ForkIcon,
- title: `Create a copy`,
- href: `https://github.com/pbclife/pbclife/fork`,
- },
- {
- id: 2,
- Icon: GithubIcon,
- title: `Github repository`,
- href: `https://github.com/pbclife/pbclife`,
- },
-];
+const HLinks = HeroLinks.map((link, indx) => {
+ return {
+ ...link,
+ title: replaceData[indx],
+ };
+});
 
 export default function Links() {
  return (
  <div className="flex flex-wrap-reverse items-center gap-y-4 gap-x-4 font-semibold text-skin-base sm:gap-x-6">
- {HeroLinks.map((link) => (
+ {HLinks.map((link) => (
  <a
  href={link.href}
  target="_blank"

src/components/icons/early-birds.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+
+type Props = ComponentProps<'svg'>;
+
+const EarlyBirdsIcon = (props: Props) => {
+ return (
+ <svg
+ role="img"
+ viewBox="0 0 50 50"
+ {...props}
+ fill="currentColor"
+ xmlns="http:https://www.w3.org/2000/svg"
+ >
+ <title>Early Birds</title>
+ <path d="M 33 1 C 30 1 28.352766 2.0466562 27.509766 3.5976562 C 26.017766 6.3446562 28.198094 10.217828 29.371094 12.298828 C 29.604094 12.713828 29.798531 13.049437 29.894531 13.273438 C 30.193531 13.962438 30.612547 15.270969 30.060547 16.292969 C 29.599547 17.145969 28.512078 17.725625 26.830078 18.015625 C 16.070078 19.871625 11.041 27.809047 11 42.998047 C 10.999 43.483047 11.346219 43.898375 11.824219 43.984375 C 11.883219 43.994375 11.942 44 12 44 C 12.413 44 12.792453 43.74375 12.939453 43.34375 C 12.954453 43.30175 14.102969 40.198766 16.167969 37.009766 C 16.026969 38.690766 16 40.493 16 42 C 16 42.454 16.304187 42.850797 16.742188 42.966797 C 17.183187 43.083797 17.642187 42.889094 17.867188 42.496094 L 18.080078 42.123047 C 19.849078 39.017047 21.910094 36.309688 26.371094 33.929688 C 33.000094 30.392688 35.474547 25.907828 35.935547 21.048828 C 36.293547 17.277828 34.675219 12.477 31.949219 9 C 30.471219 7.117 31.063234 5.8719062 31.490234 5.5039062 C 31.980126 5.0822393 32.714012 5.0479467 33.076172 5 L 41.5 5 C 41.776 5 42 4.776 42 4.5 C 42 4.224 41.776 4 41.5 4 L 35.974609 3.3496094 C 35.842609 1.4296094 34.569 1 33 1 z M 28.179688 35.199219 C 27.899688 35.369219 27.610547 35.529453 27.310547 35.689453 C 25.500547 36.659453 24.129766 37.669063 23.009766 38.789062 C 23.366304 39.311755 23.697151 39.823681 24 40.3125 L 24 50 L 26 50 L 26 40.197266 C 26.677913 38.709285 27.469636 36.958639 28.179688 35.199219 z"></path>
+ </svg>
+ );
+};
+
+export default EarlyBirdsIcon;