From 4f6219e53c0aafc2087772c55978e2ba0107581b Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Sun, 5 Feb 2023 18:55:03 +0530 Subject: [PATCH 01/21] build: configured typescript config --- tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 472728f..f858492 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -32,7 +32,8 @@ "**/*.ts", "**/*.tsx", "src/utils/mdx/rehype/withSyntaxHighlighting.js", - "src/lib/mdx/remark/withNextLinks.js" + "src/lib/mdx/remark/withNextLinks.js", + ".bin/Heading.tsx" ], "exclude": ["node_modules"] } From d8c717440d2ab878b3637e944a461aee762f24de Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Sun, 5 Feb 2023 18:57:14 +0530 Subject: [PATCH 02/21] style: added component style --- src/styles/components.css | 3 +++ tailwind.config.js | 1 + 2 files changed, 4 insertions(+) diff --git a/src/styles/components.css b/src/styles/components.css index d25e363..ef844fa 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -3,4 +3,7 @@ .rounded-btn { @apply rounded-full px-6 py-3 outline-none; } + .bg-squares { + @apply pointer-events-none absolute inset-0 -z-10 bg-square-slate-500/10 [mask-image:linear-gradient(-90deg,rgba(255,255,255,0),white,rgba(255,255,255,0),rgba(255,255,255,0))]; + } } diff --git a/tailwind.config.js b/tailwind.config.js index df30fa7..2daade2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -164,6 +164,7 @@ module.exports = { fontWeight: theme('fontWeight.semibold'), textDecoration: 'none', paddingBottom: '0.25rem', + color: 'inherit', }, 'h1 a': { fontWeight: theme('fontWeight.extrabold'), From e3c9227f77a7b11c8c76b6be0a2ac5143c1356e1 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:14:49 +0530 Subject: [PATCH 03/21] feat: removed contents as will come from local filesystem --- src/server/models/contributors.ts | 4 ---- src/server/models/validation/contributor.validation.ts | 1 - 2 files changed, 5 deletions(-) diff --git a/src/server/models/contributors.ts b/src/server/models/contributors.ts index 3372401..195b3e2 100644 --- a/src/server/models/contributors.ts +++ b/src/server/models/contributors.ts @@ -39,10 +39,6 @@ const contributorSchema = new mongoose.Schema( bio: { type: String, }, - content: { - type: String, - required: true, - }, followers: { type: Number, default: 0, diff --git a/src/server/models/validation/contributor.validation.ts b/src/server/models/validation/contributor.validation.ts index 002eb95..94d00db 100644 --- a/src/server/models/validation/contributor.validation.ts +++ b/src/server/models/validation/contributor.validation.ts @@ -10,7 +10,6 @@ const ContV = z.object({ location: z.string().nullable(), occupation: z.string(), bio: z.string().nullable(), - content: z.string(), profile_views: z.number().default(0), isDeleted: z.boolean().default(false), createdAt: z.date().optional().default(new Date(Date.now())), From c4adbe30d3f1d72d5e65cf04097d0017850f8056 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:16:32 +0530 Subject: [PATCH 04/21] feat: added respective types declarations --- src/types/client/Contributors.ts | 12 ++++++++++++ src/types/client/mdxComponents.ts | 6 ++++++ 2 files changed, 18 insertions(+) create mode 100644 src/types/client/Contributors.ts create mode 100644 src/types/client/mdxComponents.ts diff --git a/src/types/client/Contributors.ts b/src/types/client/Contributors.ts new file mode 100644 index 0000000..d4572f8 --- /dev/null +++ b/src/types/client/Contributors.ts @@ -0,0 +1,12 @@ +import type { MDXRemoteSerializeResult } from 'next-mdx-remote'; + +export type Contribution = { + source: MDXRemoteSerializeResult; + meta: { + [key: string]: string | number; + } & { + author: string; + github_username: string; + occupation: string; + }; +}; diff --git a/src/types/client/mdxComponents.ts b/src/types/client/mdxComponents.ts new file mode 100644 index 0000000..8ff5848 --- /dev/null +++ b/src/types/client/mdxComponents.ts @@ -0,0 +1,6 @@ +import type { MDXProvider } from '@mdx-js/react'; +import type { ComponentProps } from 'react'; + +export declare type MDXComponents = ComponentProps< + typeof MDXProvider +>['components']; From 1bbfa829e1e11bc3bb455651a7d1e2e4a527f9d9 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:17:28 +0530 Subject: [PATCH 05/21] feat: added custom rehype plugins --- src/lib/mdx/rehype/utils.ts | 10 ++++++++++ src/lib/mdx/rehype/withHobbyLi.ts | 29 +++++++++++++++++++++++++++++ src/lib/mdx/rehype/withStyledLi.ts | 15 +++++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 src/lib/mdx/rehype/utils.ts create mode 100644 src/lib/mdx/rehype/withHobbyLi.ts create mode 100644 src/lib/mdx/rehype/withStyledLi.ts diff --git a/src/lib/mdx/rehype/utils.ts b/src/lib/mdx/rehype/utils.ts new file mode 100644 index 0000000..0beff57 --- /dev/null +++ b/src/lib/mdx/rehype/utils.ts @@ -0,0 +1,10 @@ +export const findNextElementIndx = ( + children: any[], + currIndx: number, + element: string +): number => { + for (let i = currIndx; i < children.length; i++) { + if (children[i].tagName === element) return i; + } + return -1; +}; diff --git a/src/lib/mdx/rehype/withHobbyLi.ts b/src/lib/mdx/rehype/withHobbyLi.ts new file mode 100644 index 0000000..7dd1d5a --- /dev/null +++ b/src/lib/mdx/rehype/withHobbyLi.ts @@ -0,0 +1,29 @@ +import type { Root } from 'mdast'; +import { visit } from 'unist-util-visit'; +import { findNextElementIndx } from './utils'; + +const withHobbyLi = () => (tree: Root) => { + visit(tree, 'element', (node: any, i: any, parent: any) => { + if (node.tagName === 'h2' && node.children[0].value === 'Hobbies') { + const nextUlIndx = findNextElementIndx(parent.children, i, 'ul'); + if (nextUlIndx === -1) return; + const nextUlNode = parent.children[nextUlIndx]; + visit(nextUlNode, 'element', (node: any) => { + if (node.tagName === 'ul') { + const props = node.properties; + const className = + 'flex items-center gap-4 text-skin-inverted flex-wrap max-w-xl'; + props.className = className; + } + if (node.tagName === 'li') { + const props = node.properties; + const className = + 'bg-skin-inverted py-1 rounded-full px-4 text-lg font-semibold before:hidden my-0'; + props.className = className; + } + }); + } + }); +}; + +export default withHobbyLi; diff --git a/src/lib/mdx/rehype/withStyledLi.ts b/src/lib/mdx/rehype/withStyledLi.ts new file mode 100644 index 0000000..3034295 --- /dev/null +++ b/src/lib/mdx/rehype/withStyledLi.ts @@ -0,0 +1,15 @@ +import type { Root } from 'mdast'; +import { visit } from 'unist-util-visit'; + +const withStyledLi = () => (tree: Root) => { + visit(tree, 'element', (node: any) => { + if (node.tagName === 'li') { + const props = node.properties; + const className = + 'text-skin-muted marker:text-accent before:bg-accent prose-code:text-skin-base'; + props.className = className; + } + }); +}; + +export default withStyledLi; From 233c24e0d0e5a22c07778d9acc0fcbcf6c8ff8b4 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:18:23 +0530 Subject: [PATCH 06/21] feat: mdx content generator now accepts rehype plugins as a parameter --- src/lib/mdx/getMdxContent.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/lib/mdx/getMdxContent.ts b/src/lib/mdx/getMdxContent.ts index 3d2995d..576448f 100644 --- a/src/lib/mdx/getMdxContent.ts +++ b/src/lib/mdx/getMdxContent.ts @@ -1,3 +1,5 @@ +import type { PluggableList } from 'unified'; + import { serialize } from 'next-mdx-remote/serialize'; import rehypeAutolinkHeadings from 'rehype-autolink-headings'; import rehypePrism from 'rehype-prism-plus'; @@ -8,7 +10,10 @@ import withCodeBlocks from './rehype/withCodeBlocks'; import withNextLinks from './remark/withNextLinks'; // Get contents from slug -export const getMdxContent = async (content: string) => { +export const getMdxContent = async ( + content: string, + ...rehypePlugins: PluggableList +) => { const mdxSouce = await serialize(content, { mdxOptions: { remarkPlugins: [remarkGfm, withNextLinks], @@ -17,6 +22,7 @@ export const getMdxContent = async (content: string) => { withCodeBlocks, rehypePrism, rehypeSlug, + ...rehypePlugins, [rehypeAutolinkHeadings, { behavior: `wrap` }], ], }, From 034300cbfd10a964c40de06e3499f70f12b98d6d Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:19:49 +0530 Subject: [PATCH 07/21] feat: created mdx content generator libraries --- src/lib/contributors.ts | 68 +++++++++++++---------------------------- src/lib/readDocs.ts | 3 +- src/lib/utils.ts | 16 ++++++++++ 3 files changed, 40 insertions(+), 47 deletions(-) diff --git a/src/lib/contributors.ts b/src/lib/contributors.ts index 7614644..d2f1f46 100644 --- a/src/lib/contributors.ts +++ b/src/lib/contributors.ts @@ -1,20 +1,13 @@ import axios from '@/config/axios'; +import { getMdxContent } from '@/lib/mdx/getMdxContent'; import octokit from '@/server/config/octokit'; +import type { Contribution } from '@/types/client/Contributors'; import { TCont, TContributor } from '@/types/server/Contributors'; -import fs from 'fs'; +import { promises as fs } from 'fs'; import matter from 'gray-matter'; import path from 'path'; -import remarkGfm from 'remark-gfm'; -import remarkHtml from 'remark-html'; -import remarkParse from 'remark-parse'; -import { unified } from 'unified'; - -export type Contribution = { - content: string; - meta: { - [key: string]: string | number; - }; -}; +import withHobbyLi from './mdx/rehype/withHobbyLi'; +import { assertHasContributionProps } from './utils'; const fileDir = path.join(process.cwd() + '/contribution'); @@ -64,26 +57,18 @@ export const fetchPopularContributors = async ( }; export const fetchSingleContributor = async ( - contId: string, - contribution: Contribution -): Promise> => { - // authentication & automatically throws error if no file found - const file = fs.readFileSync(path.join(fileDir + `/${contId}.mdx`), 'utf8'); - const contFile = matter(file); - const userName = contFile.data.github_username; + meta: Contribution['meta'] +): Promise => { + const username = meta.github_username; // searching for the user if user is not found then create user try { - const { - // eslint-disable-next-line no-unused-vars - data: { isDeleted, ...contributor }, - } = await axios.get(`/contributors/${userName}`); - - return contributor; + const { data } = await axios.get(`/contributors/${username}`); + return data; // if not found } catch (error) { // fetching github user const { data: gh_user } = await octokit.request('GET /users/{username}', { - username: userName, + username, }); // creating payload for new contributor const contPayload: Omit< @@ -92,48 +77,39 @@ export const fetchSingleContributor = async ( > = { avatar_url: gh_user.avatar_url, bio: gh_user.bio, - content: contribution.content, email: gh_user.email, gh_username: gh_user.login, ghid: gh_user.id, html_url: gh_user.html_url, - name: contribution.meta.author as string, - occupation: contribution.meta.occupation as string, + name: meta.author, + occupation: meta.occupation, location: gh_user.location, followers: gh_user.followers, following: gh_user.following, }; - const { - // eslint-disable-next-line no-unused-vars - data: { isDeleted, ...contributor }, - } = await axios.post(`/contributors`, contPayload); - return contributor; + const { data } = await axios.post(`/contributors`, contPayload); + return data; } }; export const getContribution = async ( contId: string ): Promise => { - const file = fs.readFileSync(path.join(fileDir + `/${contId}.mdx`), 'utf8'); - - const matterResult = matter(file); - const content = await unified() - .use(remarkParse) - .use(remarkGfm) - .use(remarkHtml) - .process(matterResult.content); - + const file = await fs.readFile(path.join(fileDir + `/${contId}.mdx`), 'utf8'); + const { data, content } = matter(file); + assertHasContributionProps(data); + const source = await getMdxContent(content, withHobbyLi); return { - content: content.value as string, - meta: matterResult.data, + source, + meta: data, }; }; export const getDynamicPaths = async () => { const { data: { contributors }, - } = await axios.get('/contributors?select=gh_username&limit=5'); + } = await axios.get('/contributors?select=gh_username&limit=1'); asserHasPropertyArray(contributors); return contributors.map((obj) => { diff --git a/src/lib/readDocs.ts b/src/lib/readDocs.ts index 574fb7f..e46e59e 100644 --- a/src/lib/readDocs.ts +++ b/src/lib/readDocs.ts @@ -23,6 +23,7 @@ import remarkGfm from 'remark-gfm'; import remarkHtml from 'remark-html'; import remarkParse from 'remark-parse'; import { unified } from 'unified'; +import withStyledLi from './mdx/rehype/withStyledLi'; type TSuppordedFile = 'heading' | 'installation' | 'tech-stack'; @@ -89,7 +90,7 @@ export const getContentsFromSlug: GetContentsFromSlug = async (slug) => { const file = await fs.readFile(filePath); const { data, content } = matter(file); - const source = await getMdxContent(content); + const source = await getMdxContent(content, withStyledLi); // Extracting DirName and FileName from catch-all-params const meta = prepareMeta(data, slug); diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 554ef90..2689625 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,3 +1,4 @@ +import { Contribution } from '@/types/client/Contributors'; import { PrepareMeta } from '@/types/client/FileSystem'; import beautify from '@/utils/beautify'; import { promises as fs } from 'fs'; @@ -60,3 +61,18 @@ export const prepareMeta: PrepareMeta = (data, slug) => { return meta; }; + +interface StringKeyedObj { + [key: string]: any; +} +export function assertHasContributionProps( + data: StringKeyedObj +): asserts data is Contribution['meta'] { + const mustHaveProps = ['author', 'github_username', 'occupation']; + const dataKeys = Object.keys(data); + for (const prop of mustHaveProps) { + if (!dataKeys.includes(prop)) { + throw new Error(`Data does not contain ${prop} property`); + } + } +} From 0b616a214bce42d37f31b2e057dc4b44d61e1a28 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:21:33 +0530 Subject: [PATCH 08/21] perf: used clsx instead of manual conditions --- src/components/utilities/TypoComponent.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/utilities/TypoComponent.tsx b/src/components/utilities/TypoComponent.tsx index 59eae5d..7fc6f29 100644 --- a/src/components/utilities/TypoComponent.tsx +++ b/src/components/utilities/TypoComponent.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import type { ComponentProps, FC } from 'react'; type TypoCompType = ComponentProps<'div'>; @@ -5,9 +6,10 @@ type TypoCompType = ComponentProps<'div'>; const TypoComp: FC = ({ className, ...props }) => { return (
); From ac9bcf436c81dccac3d3b379575d40e8c133e93e Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:23:06 +0530 Subject: [PATCH 09/21] style: started designig contributor profile page --- src/pages/contributors/[contId].tsx | 38 ++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/src/pages/contributors/[contId].tsx b/src/pages/contributors/[contId].tsx index e3e60bc..51ad6b6 100644 --- a/src/pages/contributors/[contId].tsx +++ b/src/pages/contributors/[contId].tsx @@ -1,20 +1,40 @@ +import type { TContributor } from '@/types/server/Contributors'; +import type { GetStaticPaths, GetStaticProps } from 'next'; +import type { FC } from 'react'; + +import ContributorProfilePageLayout from '@/layouts/ContributorProfilePageLayout'; import { fetchSingleContributor, getContribution, getDynamicPaths, } from '@/lib/contributors'; -import type { TContributor } from '@/types/server/Contributors'; -import { GetStaticPaths, GetStaticProps } from 'next'; -import type { FC } from 'react'; + +import mdxComponents from '@/components/mdxcomponents'; +import TypoComp from '@/components/utilities/TypoComponent'; +import { Contribution } from '@/types/client/Contributors'; +import { MDXRemote } from 'next-mdx-remote'; type SingleContributorProps = { contributor: Omit & { createdAt?: Date; }; + contribution: Contribution; }; -const SingleContributor: FC = ({ contributor }) => { - return <>single contributor {contributor.name} ; +const SingleContributor: FC = ({ + contributor, + contribution, +}) => { + return ( + + + + + + ); }; export default SingleContributor; @@ -35,18 +55,18 @@ export const getStaticProps: GetStaticProps = async ({ if (!params?.contId || Array.isArray(params.contId)) throw new Error(`Please specify a single contributor id`); const contribution = await getContribution(params.contId); // autometically throws error if file not found - const contributor = await fetchSingleContributor( - contribution.meta.github_username as string, - contribution - ); + const contributor = await fetchSingleContributor(contribution.meta); return { props: { contributor, + contribution, }, revalidate: 15, }; } catch (error) { + console.log(error); + return { notFound: true, }; From 937103310657dc59ea248c9079917bfc0a8e5f9f Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:24:21 +0530 Subject: [PATCH 10/21] feat: created contributor profile page layout --- src/layouts/ContributorProfilePageLayout.tsx | 41 ++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/layouts/ContributorProfilePageLayout.tsx diff --git a/src/layouts/ContributorProfilePageLayout.tsx b/src/layouts/ContributorProfilePageLayout.tsx new file mode 100644 index 0000000..3ca4ab6 --- /dev/null +++ b/src/layouts/ContributorProfilePageLayout.tsx @@ -0,0 +1,41 @@ +import type { ProfileProps } from '@/components/contributorProfilePage/Profile'; +import type { NextPage } from 'next'; +import type { ComponentProps } from 'react'; + +import { Socials } from '@/components/contributorProfilePage'; +import Profile from '@/components/contributorProfilePage/Profile'; +import GradientBG from '@/components/utilities/GradientBg'; +import clsx from 'clsx'; +import colors from 'tailwindcss/colors'; +import Container from './Container'; + +type ContributorProfilePageLayoutProps = ComponentProps<'main'> & + ProfileProps & {}; + +const ContributorProfilePageLayout: NextPage< + ContributorProfilePageLayoutProps +> = ({ className, children, contributor, meta, ...props }) => { + return ( +
+ +
+
+ + + + {children} + +
+
+ ); +}; + +export default ContributorProfilePageLayout; From 0d562914198adc989a3c932d8b82d2c659bb214e Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:26:08 +0530 Subject: [PATCH 11/21] feat: added necessary components and removed unnecessary mdx components --- .../contributorProfilePage/Introduction.tsx | 16 ++++++ .../contributorProfilePage/Profile.tsx | 56 +++++++++++++++++++ .../contributorProfilePage/ProfileImage.tsx | 26 +++++++++ .../contributorProfilePage/Projects.tsx | 9 +++ .../contributorProfilePage/Skill.tsx | 44 +++++++++++++++ .../contributorProfilePage/Skills.tsx | 17 ++++++ .../contributorProfilePage/Socials.tsx | 21 +++++++ .../contributorProfilePage/index.ts | 6 ++ src/components/mdxcomponents/Code.tsx | 8 ++- src/components/mdxcomponents/index.tsx | 25 ++++++--- 10 files changed, 218 insertions(+), 10 deletions(-) create mode 100644 src/components/contributorProfilePage/Introduction.tsx create mode 100644 src/components/contributorProfilePage/Profile.tsx create mode 100644 src/components/contributorProfilePage/ProfileImage.tsx create mode 100644 src/components/contributorProfilePage/Projects.tsx create mode 100644 src/components/contributorProfilePage/Skill.tsx create mode 100644 src/components/contributorProfilePage/Skills.tsx create mode 100644 src/components/contributorProfilePage/Socials.tsx create mode 100644 src/components/contributorProfilePage/index.ts diff --git a/src/components/contributorProfilePage/Introduction.tsx b/src/components/contributorProfilePage/Introduction.tsx new file mode 100644 index 0000000..9972a28 --- /dev/null +++ b/src/components/contributorProfilePage/Introduction.tsx @@ -0,0 +1,16 @@ +import type { FC, ReactNode } from 'react'; + +type IntroductionProps = { + children: ReactNode; +}; + +const Introduction: FC = ({ children }) => { + return ( +
+

Introduction

+ {children} +
+ ); +}; + +export default Introduction; diff --git a/src/components/contributorProfilePage/Profile.tsx b/src/components/contributorProfilePage/Profile.tsx new file mode 100644 index 0000000..dc8e8f8 --- /dev/null +++ b/src/components/contributorProfilePage/Profile.tsx @@ -0,0 +1,56 @@ +import type { Contribution } from '@/types/client/Contributors'; +import type { TContributor } from '@/types/server/Contributors'; +import type { FC } from 'react'; + +import { BriefcaseIcon, MapPinIcon } from '@heroicons/react/24/outline'; +import TypoComp from '@utilities/TypoComponent'; +import ProfileImage from './ProfileImage'; + +export type ProfileProps = { + contributor: Omit; + meta: Contribution['meta']; +}; + +const Profile: FC = ({ meta, contributor }) => { + return ( +
+
+ {/* profile Image */} +
+ +
+ + {/* top */} + + {/* Name */} {/* occupation */} +

+ {meta.author}{' '} + + He | Him + +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos + asperiores fuga molestiae autem esse velit. +

+
+ {/* location */} +
+ +

{contributor.location}

+
+ {/* twitter */} +
+ +

{meta.occupation}

+
+
+ +
+ ); +}; + +export default Profile; diff --git a/src/components/contributorProfilePage/ProfileImage.tsx b/src/components/contributorProfilePage/ProfileImage.tsx new file mode 100644 index 0000000..dc7e619 --- /dev/null +++ b/src/components/contributorProfilePage/ProfileImage.tsx @@ -0,0 +1,26 @@ +import clsx from 'clsx'; +import Image from 'next/image'; +import type { FC } from 'react'; + +type ProfileImageProps = { + alt: string; + src: string; + className?: string; +}; + +const ProfileImage: FC = ({ alt, src, className }) => { + return ( + {alt} + ); +}; + +export default ProfileImage; diff --git a/src/components/contributorProfilePage/Projects.tsx b/src/components/contributorProfilePage/Projects.tsx new file mode 100644 index 0000000..9d0cfbc --- /dev/null +++ b/src/components/contributorProfilePage/Projects.tsx @@ -0,0 +1,9 @@ +import type { FC } from 'react'; + +type ProjectsProps = {}; + +const Projects: FC = () => { + return
Projects
; +}; + +export default Projects; diff --git a/src/components/contributorProfilePage/Skill.tsx b/src/components/contributorProfilePage/Skill.tsx new file mode 100644 index 0000000..1ce8dd2 --- /dev/null +++ b/src/components/contributorProfilePage/Skill.tsx @@ -0,0 +1,44 @@ +import Dot from '@utilities/Dot'; +import type { FC, ReactNode } from 'react'; + +type SkillProps = { + children?: ReactNode; + name: string; + level?: string; + icon?: ReactNode; + logoRef?: string; + href?: string; +}; + +const Skill: FC = ({ children, name, level, icon, logoRef }) => { + return ( +
+ {children} +
+ {icon ? ( +
{icon}
+ ) : logoRef ? ( + // eslint-disable-next-line @next/next/no-img-element + {name} + ) : null} +

+ {name} + {level && ( + <> + + + {level} + + + )} +

+
+
+ ); +}; + +export default Skill; diff --git a/src/components/contributorProfilePage/Skills.tsx b/src/components/contributorProfilePage/Skills.tsx new file mode 100644 index 0000000..203a76f --- /dev/null +++ b/src/components/contributorProfilePage/Skills.tsx @@ -0,0 +1,17 @@ +import type { FC, ReactNode } from 'react'; + +type SkillsProps = { + children: ReactNode; +}; + +const Skills: FC = ({ children }) => { + return ( + <> +
+ {children} +
+ + ); +}; + +export default Skills; diff --git a/src/components/contributorProfilePage/Socials.tsx b/src/components/contributorProfilePage/Socials.tsx new file mode 100644 index 0000000..bb2812a --- /dev/null +++ b/src/components/contributorProfilePage/Socials.tsx @@ -0,0 +1,21 @@ +import type { FC } from 'react'; + +import EarlyBirds from '@icons/EarlyBirds'; +import GithubIcon from '@icons/Github'; + +type SocialsProps = {}; + +const Socials: FC = () => { + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export default Socials; diff --git a/src/components/contributorProfilePage/index.ts b/src/components/contributorProfilePage/index.ts new file mode 100644 index 0000000..a3ef51c --- /dev/null +++ b/src/components/contributorProfilePage/index.ts @@ -0,0 +1,6 @@ +export { default as Introduction } from './Introduction'; +export { default as Profile } from './Profile'; +export { default as Projects } from './Projects'; +export { default as Skill } from './Skill'; +export { default as Skills } from './Skills'; +export { default as Socials } from './Socials'; diff --git a/src/components/mdxcomponents/Code.tsx b/src/components/mdxcomponents/Code.tsx index a64163e..647747e 100644 --- a/src/components/mdxcomponents/Code.tsx +++ b/src/components/mdxcomponents/Code.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import type { ComponentProps, FC } from 'react'; type CodeProps = ComponentProps<'code'>; @@ -5,9 +6,10 @@ type CodeProps = ComponentProps<'code'>; const Code: FC = ({ className, ...props }) => { return ( ); diff --git a/src/components/mdxcomponents/index.tsx b/src/components/mdxcomponents/index.tsx index eee35e8..a80d3c3 100644 --- a/src/components/mdxcomponents/index.tsx +++ b/src/components/mdxcomponents/index.tsx @@ -1,21 +1,27 @@ -import { MDXProvider } from '@mdx-js/react'; -import type { ComponentProps } from 'react'; +import type { MDXComponents } from '@/types/client/mdxComponents'; -import Anchor from './Anchor'; +import { + Introduction, + Projects, + Skill, + Skills, + Socials, +} from '@/components/contributorProfilePage'; import BlockQuote from './BlockQuote'; import Code from './Code'; import CodeBlock from './CodeBlock'; -import List from './List'; import ResponsiveImg from './ResponsiveImage'; -type MDXComponents = ComponentProps['components']; const mdxComponents: MDXComponents = { - a: Anchor, blockquote: BlockQuote, code: Code, - li: List, ResponsiveImg, CodeBlock, + Skill, + Skills, + Introduction, + Projects, + Socials, }; export default mdxComponents; @@ -23,6 +29,11 @@ export default mdxComponents; export const allowedComponents = [ 'CodeBlock', 'ResponsiveImage', + 'Skill', + 'Skills', + 'Introduction', + 'Projects', + 'Socials', 'a', 'b', 'br', From 65a680bbb1902576a48433e760d777723faf09ad Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 6 Feb 2023 15:27:15 +0530 Subject: [PATCH 12/21] contribution: added my profile --- contribution/sboy99.mdx | 61 ++++++++++++++++++++++++ src/components/mdxcomponents/Heading.tsx | 53 -------------------- 2 files changed, 61 insertions(+), 53 deletions(-) create mode 100644 contribution/sboy99.mdx delete mode 100644 src/components/mdxcomponents/Heading.tsx diff --git a/contribution/sboy99.mdx b/contribution/sboy99.mdx new file mode 100644 index 0000000..f993b03 --- /dev/null +++ b/contribution/sboy99.mdx @@ -0,0 +1,61 @@ +--- +author: Sagar Bera +github_username: sboy99 +occupation: Student +--- + +# Introduction + +Hi I'm Sagar Bera a fullstack develover from India, I love to learn and build +stuff from this learnings. I'm a active open source contributor, I support +community building. My primary focus is to make it happen, I belive in +collaboration rather than compitition as we all are developer together we can +make it big. + +## Skills + + + + React + + + } + level="Intermediate" + > + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! + + + Express + + + } + > + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! + + + Next.js + + + } + > + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! + + + +## Hobbies + +- Reading +- Meditation +- Writing +- Singing +- Public Speaking diff --git a/src/components/mdxcomponents/Heading.tsx b/src/components/mdxcomponents/Heading.tsx deleted file mode 100644 index 6be0f93..0000000 --- a/src/components/mdxcomponents/Heading.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import type { ComponentProps, FC } from 'react'; - -type HeadingProps = { - H1: FC>; - H2: FC>; - H3: FC>; - H4: FC>; -}; - -const Heading: HeadingProps = { - H1: ({ className, ...props }) => { - return ( -

- ); - }, - H2: ({ className, ...props }) => { - return ( -

- ); - }, - H3: ({ className, ...props }) => { - return ( -

- ); - }, - H4: ({ className, ...props }) => { - return ( -

- ); - }, -}; - -export default Heading; From 9f5e7f2f510dc3c67a7b01eca2592ed487eaece2 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 20 Feb 2023 23:39:57 +0530 Subject: [PATCH 13/21] build: added new image resouce domain --- next.config.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/next.config.js b/next.config.js index af2c071..d969a63 100644 --- a/next.config.js +++ b/next.config.js @@ -12,7 +12,10 @@ const nextConfig = withMdx({ reactStrictMode: true, pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], images: { - domains: ['avatars.githubusercontent.com'], + domains: [ + 'avatars.githubusercontent.com', + 'user-images.githubusercontent.com', + ], }, async redirects() { return [ From 289cbef3d81add6d506066cabb7c88d6d91240d0 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Mon, 20 Feb 2023 23:52:52 +0530 Subject: [PATCH 14/21] chore: updated contributor profile page components --- .../contributorProfilePage/Profile.tsx | 2 +- .../contributorProfilePage/Project.tsx | 35 ++++++++++ .../contributorProfilePage/ProjectDetails.tsx | 48 +++++++++++++ .../contributorProfilePage/ProjectList.tsx | 34 +++++++++ .../contributorProfilePage/Projects.tsx | 66 ++++++++++++++++-- .../contributorProfilePage/Skill.tsx | 69 +++++++++++-------- .../contributorProfilePage/Skills.tsx | 10 ++- .../contributorProfilePage/index.ts | 1 + 8 files changed, 230 insertions(+), 35 deletions(-) create mode 100644 src/components/contributorProfilePage/Project.tsx create mode 100644 src/components/contributorProfilePage/ProjectDetails.tsx create mode 100644 src/components/contributorProfilePage/ProjectList.tsx diff --git a/src/components/contributorProfilePage/Profile.tsx b/src/components/contributorProfilePage/Profile.tsx index dc8e8f8..eb7c694 100644 --- a/src/components/contributorProfilePage/Profile.tsx +++ b/src/components/contributorProfilePage/Profile.tsx @@ -13,7 +13,7 @@ export type ProfileProps = { const Profile: FC = ({ meta, contributor }) => { return ( -
+
{/* profile Image */}
diff --git a/src/components/contributorProfilePage/Project.tsx b/src/components/contributorProfilePage/Project.tsx new file mode 100644 index 0000000..b102380 --- /dev/null +++ b/src/components/contributorProfilePage/Project.tsx @@ -0,0 +1,35 @@ +import { ChevronRightIcon, WindowIcon } from '@heroicons/react/20/solid'; +import type { FC, ReactNode } from 'react'; + +type ProjectProps = { + icon?: string | ReactNode; + name: string; + livePreview?: string; + tldr?: string; + isActive: boolean; + forkLink?: string; +}; + +const Project: FC = ({ name, livePreview, tldr }) => { + return ( +
+ {/* icon section */} +
+
+ +
+ {/* name & tldr */} +
+

{name}

+

+ {(livePreview && livePreview.replace('https://', '')) ?? tldr} +

+
+
+ {/* chevron */} + +
+ ); +}; + +export default Project; diff --git a/src/components/contributorProfilePage/ProjectDetails.tsx b/src/components/contributorProfilePage/ProjectDetails.tsx new file mode 100644 index 0000000..a7adff8 --- /dev/null +++ b/src/components/contributorProfilePage/ProjectDetails.tsx @@ -0,0 +1,48 @@ +import { ChevronRightIcon } from '@heroicons/react/20/solid'; +import RepoIcon from '@icons/Repo'; +import type { FC, ReactElement } from 'react'; + +type ProjectDetailsProps = { + className: string; + children: ReactElement; +}; + +const ProjectDetails: FC = ({ children }) => { + const content = children.props.children; + const { name, tldr, livePreview, repository } = children.props; + return ( +
+
+ {tldr && {tldr}} +

+ {name} +

+ {content} +
+ {repository && ( + + Repository + + )} + {livePreview && ( + + Live Preview + + )} +
+
+
+ ); +}; + +export default ProjectDetails; diff --git a/src/components/contributorProfilePage/ProjectList.tsx b/src/components/contributorProfilePage/ProjectList.tsx new file mode 100644 index 0000000..06233f2 --- /dev/null +++ b/src/components/contributorProfilePage/ProjectList.tsx @@ -0,0 +1,34 @@ +import { CircleStackIcon } from '@heroicons/react/24/outline'; +import type { Dispatch, FC, ReactElement, SetStateAction } from 'react'; +import Project from './Project'; + +type ProjectListProps = { + children: ReactElement[]; + inFocus: number; + onSelect: Dispatch>; +}; + +const ProjectList: FC = ({ children, onSelect, inFocus }) => { + return ( +
    +
    + + Projects that beautifies my portfolio +
    +
    + {children.map((child: ReactElement, i: number) => ( +
  • onSelect(i)}> + +
    • + ))} +
    +
+ ); +}; + +export default ProjectList; diff --git a/src/components/contributorProfilePage/Projects.tsx b/src/components/contributorProfilePage/Projects.tsx index 9d0cfbc..2dd4054 100644 --- a/src/components/contributorProfilePage/Projects.tsx +++ b/src/components/contributorProfilePage/Projects.tsx @@ -1,9 +1,67 @@ -import type { FC } from 'react'; +import type { FC, ReactElement } from 'react'; -type ProjectsProps = {}; +import Image from 'next/image'; +import { Children, useState } from 'react'; +import ProjectDetails from './ProjectDetails'; +import ProjectList from './ProjectList'; -const Projects: FC = () => { - return
Projects
; +type ProjectsProps = { + children?: ReactElement[]; +}; + +const Projects: FC = ({ children }) => { + const [activePtojectIndex, setActivePtojectIndex] = useState(0); + const arrayChildren = Children.toArray(children) as ReactElement[]; + const activeChildren = arrayChildren[activePtojectIndex]; + const activePtojectProps = arrayChildren[activePtojectIndex]?.props; + + const hasImageProp: boolean = activePtojectProps && activePtojectProps?.image; + + const isUseNextImage: boolean = + hasImageProp && + activePtojectProps.image.startsWith( + 'https://user-images.githubusercontent.com' + ); + + return ( +
+
+
+ {/* Project Details */} +
+ {activeChildren} +
+
+ + {arrayChildren} + +
+ {/* canvas */} +
+
+ {hasImageProp ? ( + isUseNextImage ? ( + {activePtojectProps?.name} + ) : ( + // eslint-disable-next-line @next/next/no-img-element + {activePtojectProps?.name} + ) + ) : null} +
+
+
+ ); }; export default Projects; diff --git a/src/components/contributorProfilePage/Skill.tsx b/src/components/contributorProfilePage/Skill.tsx index 1ce8dd2..3ec3b10 100644 --- a/src/components/contributorProfilePage/Skill.tsx +++ b/src/components/contributorProfilePage/Skill.tsx @@ -1,43 +1,54 @@ import Dot from '@utilities/Dot'; -import type { FC, ReactNode } from 'react'; +import LinkComp from '@utilities/LinkComp'; +import { FC, ReactNode } from 'react'; type SkillProps = { children?: ReactNode; name: string; level?: string; - icon?: ReactNode; - logoRef?: string; + icon?: ReactNode | string; href?: string; }; -const Skill: FC = ({ children, name, level, icon, logoRef }) => { +const Skill: FC = ({ children, name, level, icon, href }) => { + let isImageLink = false; + + if (typeof icon === 'string') { + if (icon.startsWith('http://') || icon.startsWith('https://')) + isImageLink = true; + } + return ( -
- {children} -
- {icon ? ( -
{icon}
- ) : logoRef ? ( - // eslint-disable-next-line @next/next/no-img-element - {name} - ) : null} -

- {name} - {level && ( - <> - - - {level} - - - )} -

+ +
+ {children} +
+ {icon ? ( + isImageLink ? ( + // eslint-disable-next-line @next/next/no-img-element + {name} + ) : ( +
{icon}
+ ) + ) : null} +

+ {name} + {level && ( + <> + + + {level} + + + )} +

+
-
+ ); }; diff --git a/src/components/contributorProfilePage/Skills.tsx b/src/components/contributorProfilePage/Skills.tsx index 203a76f..44a0c61 100644 --- a/src/components/contributorProfilePage/Skills.tsx +++ b/src/components/contributorProfilePage/Skills.tsx @@ -2,11 +2,19 @@ import type { FC, ReactNode } from 'react'; type SkillsProps = { children: ReactNode; + title?: string; + desc?: string; }; -const Skills: FC = ({ children }) => { +const Skills: FC = ({ children, title, desc }) => { return ( <> + {title && ( +
+

{title}

+ {desc &&

{desc}

} +
+ )}
{children}
diff --git a/src/components/contributorProfilePage/index.ts b/src/components/contributorProfilePage/index.ts index a3ef51c..5b30336 100644 --- a/src/components/contributorProfilePage/index.ts +++ b/src/components/contributorProfilePage/index.ts @@ -1,5 +1,6 @@ export { default as Introduction } from './Introduction'; export { default as Profile } from './Profile'; +export { default as Project } from './Project'; export { default as Projects } from './Projects'; export { default as Skill } from './Skill'; export { default as Skills } from './Skills'; From 24107f4c3c10c8475819b35cbfbce4aab2232510 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Tue, 21 Feb 2023 01:33:30 +0530 Subject: [PATCH 15/21] chore: updated mdx components --- src/components/mdxcomponents/NextImage.tsx | 4 +-- src/components/mdxcomponents/Tab.tsx | 28 ++++++++++++++++ src/components/mdxcomponents/Tabs.tsx | 37 ++++++++++++++++++++++ src/components/mdxcomponents/index.tsx | 11 ++++++- 4 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 src/components/mdxcomponents/Tab.tsx create mode 100644 src/components/mdxcomponents/Tabs.tsx diff --git a/src/components/mdxcomponents/NextImage.tsx b/src/components/mdxcomponents/NextImage.tsx index 3d2075f..e31f523 100644 --- a/src/components/mdxcomponents/NextImage.tsx +++ b/src/components/mdxcomponents/NextImage.tsx @@ -1,7 +1,7 @@ import Image from 'next/image'; import type { FC } from 'react'; -const ResponsiveImg: FC<{ +const NextImage: FC<{ alt: string; src: string; }> = ({ alt, src }) => { @@ -16,4 +16,4 @@ const ResponsiveImg: FC<{ ); }; -export default ResponsiveImg; +export default NextImage; diff --git a/src/components/mdxcomponents/Tab.tsx b/src/components/mdxcomponents/Tab.tsx new file mode 100644 index 0000000..9b5d34c --- /dev/null +++ b/src/components/mdxcomponents/Tab.tsx @@ -0,0 +1,28 @@ +import clsx from 'clsx'; +import type { FC, ReactNode } from 'react'; + +type TabProps = { + title: string; + isActive?: boolean; + children?: ReactNode; +}; + +const Tab: FC = ({ title, children, isActive }) => { + return ( + <> +

+ {title} +

+ {children ?
{children}
: null} + + ); +}; + +export default Tab; diff --git a/src/components/mdxcomponents/Tabs.tsx b/src/components/mdxcomponents/Tabs.tsx new file mode 100644 index 0000000..6961896 --- /dev/null +++ b/src/components/mdxcomponents/Tabs.tsx @@ -0,0 +1,37 @@ +import TypoComp from '@utilities/TypoComponent'; +import type { FC, ReactElement } from 'react'; +import { Children, useState } from 'react'; +import Tab from './Tab'; + +type TabsProps = { + children?: ReactElement[]; +}; + +const Tabs: FC = ({ children }) => { + const [activeTabIndex, setActiveTabIndex] = useState(0); + const arrayChildren = Children.toArray(children) as ReactElement[]; + const activeTabContent = arrayChildren[activeTabIndex]?.props?.children; + return ( + <> +
    + {arrayChildren.map((child: ReactElement, i: number) => ( +
  • setActiveTabIndex(i)} + className="cursor-pointer" + > + +
    • + ))} +
+ + {activeTabContent} + + + ); +}; + +export default Tabs; diff --git a/src/components/mdxcomponents/index.tsx b/src/components/mdxcomponents/index.tsx index 066b6dd..906a444 100644 --- a/src/components/mdxcomponents/index.tsx +++ b/src/components/mdxcomponents/index.tsx @@ -2,6 +2,7 @@ import type { MDXComponents } from '@/types/client/mdxComponents'; import { Introduction, + Project, Projects, Skill, Skills, @@ -14,6 +15,8 @@ import Code from './Code'; import CodeBlock from './CodeBlock'; import Grid from './Grid'; import NextImage from './NextImage'; +import Tab from './Tab'; +import Tabs from './Tabs'; import Tip from './Tip'; import Github from './socialCards/GithubCard'; @@ -30,12 +33,15 @@ const mdxComponents: MDXComponents = { Grid, LinkedIn, NextImage, + Projects, + Project, + Tabs, + Tab, Tip, Twitter, Skill, Skills, Introduction, - Projects, Socials, }; @@ -49,11 +55,14 @@ export const allowedComponents = [ 'Grid', 'NextImage', 'LinkedIn', + 'Tabs', + 'Tab', 'Tip', 'Twitter', 'Skill', 'Skills', 'Introduction', + 'Project', 'Projects', 'Socials', 'a', From 8b429cb66869cab85c5f3e0a4bfaa8c3be403872 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Tue, 21 Feb 2023 01:37:23 +0530 Subject: [PATCH 16/21] chore: updated utility components --- src/components/utilities/LinkComp.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/utilities/LinkComp.tsx b/src/components/utilities/LinkComp.tsx index ae7792c..5235865 100644 --- a/src/components/utilities/LinkComp.tsx +++ b/src/components/utilities/LinkComp.tsx @@ -4,15 +4,28 @@ import type { FC, ReactNode } from 'react'; type LinkCompProps = { href?: string; children: ReactNode; + isCardComp?: boolean; }; -const LinkComp: FC = ({ href, children }) => { +const LinkComp: FC = ({ + href, + children, + isCardComp = false, +}) => { const isInternal = href?.startsWith('/') ?? false; return href ? ( isInternal ? ( {children} ) : ( - + {children} ) From caf3b76a090f4196b92b6244d2cf06604819455a Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Tue, 21 Feb 2023 01:39:20 +0530 Subject: [PATCH 17/21] refactor: updated contributors profile page --- src/layouts/ContributorProfilePageLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/ContributorProfilePageLayout.tsx b/src/layouts/ContributorProfilePageLayout.tsx index 3ca4ab6..5610aef 100644 --- a/src/layouts/ContributorProfilePageLayout.tsx +++ b/src/layouts/ContributorProfilePageLayout.tsx @@ -28,7 +28,7 @@ const ContributorProfilePageLayout: NextPage< />
- + {children} From 41e0ad06594e5717e651bdc02cfcb7c463041349 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Tue, 21 Feb 2023 01:40:44 +0530 Subject: [PATCH 18/21] feat: added more rehype plugins --- src/lib/mdx/getMdxContent.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/lib/mdx/getMdxContent.ts b/src/lib/mdx/getMdxContent.ts index 576448f..094eca4 100644 --- a/src/lib/mdx/getMdxContent.ts +++ b/src/lib/mdx/getMdxContent.ts @@ -7,6 +7,8 @@ import rehypeSlug from 'rehype-slug'; import remarkGfm from 'remark-gfm'; import withAllowedComponents from './rehype/withAllowedComponents'; import withCodeBlocks from './rehype/withCodeBlocks'; +import withNextImage from './rehype/withNextImage'; +import withStyledImage from './rehype/withStyledImg'; import withNextLinks from './remark/withNextLinks'; // Get contents from slug @@ -20,6 +22,8 @@ export const getMdxContent = async ( rehypePlugins: [ withAllowedComponents, withCodeBlocks, + withNextImage, + withStyledImage, rehypePrism, rehypeSlug, ...rehypePlugins, From 365eedf33e129dd48884c05cd56ee8bec623570b Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Tue, 21 Feb 2023 01:45:54 +0530 Subject: [PATCH 19/21] feat: added next image rehype plugin --- src/lib/mdx/rehype/withNextImage.ts | 38 +++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/lib/mdx/rehype/withNextImage.ts diff --git a/src/lib/mdx/rehype/withNextImage.ts b/src/lib/mdx/rehype/withNextImage.ts new file mode 100644 index 0000000..0d53ca4 --- /dev/null +++ b/src/lib/mdx/rehype/withNextImage.ts @@ -0,0 +1,38 @@ +import type { Root } from 'mdast'; +import { visit } from 'unist-util-visit'; + +const withNextImage = () => (tree: Root) => { + visit(tree, 'element', (node: any, i: any, parent: any) => { + if (node.tagName === 'img') { + const props = node.properties; + // console.log(props); + if ( + props.src.startsWith('https://avatars.githubusercontent.com') || + props.src.startsWith('https://user-images.githubusercontent.com') + ) { + const nextImgComp = { + type: 'mdxJsxFlowElement', + name: 'NextImage', + attributes: [ + { type: 'mdxJsxAttribute', name: 'src', value: `${props.src}` }, + { + type: 'mdxJsxAttribute', + name: 'alt', + value: `${props.alt}`, + }, + ], + data: { _mdxExplicitJsx: true }, + } as any; + nextImgComp.children = [node]; + parent.children[i] = nextImgComp; + } else { + props.className = + 'mb-16 aspect-video w-full rounded-md object-cover object-center'; + node.properties = props; + parent.children[i] = node; + } + } + }); + tree.children = [...tree.children]; +}; +export default withNextImage; From c21fb14c7d7cb1f8eb271e0479ce87e3953248e1 Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Tue, 21 Feb 2023 01:47:41 +0530 Subject: [PATCH 20/21] feat: added image styling plugin --- src/lib/mdx/rehype/withStyledImg.ts | 32 +++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/lib/mdx/rehype/withStyledImg.ts diff --git a/src/lib/mdx/rehype/withStyledImg.ts b/src/lib/mdx/rehype/withStyledImg.ts new file mode 100644 index 0000000..3541111 --- /dev/null +++ b/src/lib/mdx/rehype/withStyledImg.ts @@ -0,0 +1,32 @@ +import type { Root } from 'mdast'; +import { visit } from 'unist-util-visit'; + +const withStyledImage = () => (tree: Root) => { + visit(tree, 'mdxJsxFlowElement', (node: any, i: any, parent: any) => { + if (node.name === 'img') { + const attributes = node.attributes as any; + + const src = attributes.find((attr: any) => attr.name === 'src') + .value as string; + if ( + src.startsWith('/images') || + src.startsWith('https://avatars.githubusercontent.com') || + src.startsWith('https://user-images.githubusercontent.com') + ) { + node.name = 'NextImage'; + } + + const classAttribute = { + type: 'mdxJsxAttribute', + name: 'className', + value: + 'mb-16 aspect-video w-full rounded-md object-cover object-center', + }; + node.attributes = [...node.attributes, classAttribute]; + + parent.children[i] = node; + } + }); +}; + +export default withStyledImage; From cee95f4aa0380c7104e0220bc088d8414698efed Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Tue, 21 Feb 2023 01:48:25 +0530 Subject: [PATCH 21/21] chore: updated dummy data --- contribution/sboy99.mdx | 116 +++++++++++++++++++++++++++------------- 1 file changed, 79 insertions(+), 37 deletions(-) diff --git a/contribution/sboy99.mdx b/contribution/sboy99.mdx index f993b03..2926975 100644 --- a/contribution/sboy99.mdx +++ b/contribution/sboy99.mdx @@ -2,6 +2,9 @@ author: Sagar Bera github_username: sboy99 occupation: Student +github: https://github.com/sboy99 +twitter: https://twitter.com/Iamsagarbera +linkedin: https://www.linkedin.com/in/sagar-bera-5264b9214 --- # Introduction @@ -14,43 +17,54 @@ make it big. ## Skills - - - React - - - } - level="Intermediate" - > - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! - - - Express - - - } - > - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! - - - Next.js - - - } - > - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! - - + + + + + + React + + + } + level="Intermediate" + > + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! + + + Express + + + } + > + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! + + + Next.js + + + } + > + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, dicta! + + + + +Lorem ipsum dolor + +sit amet consectetur, adipisicing elit. Sed, dicta! + + ## Hobbies @@ -59,3 +73,31 @@ make it big. - Writing - Singing - Public Speaking + + + + Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Nemo adipisci quibusdam accusantium dolorum aliquam, similique itaque. + + + sit amet consectetur, adipisicing elit. Sed, dicta! + + + sit amet consectetur, adipisicing elit. Sed, dicta! + + + sit amet consectetur, adipisicing elit. Sed, dicta! + + + sit amet consectetur, adipisicing elit. Sed, dicta! + + + sit amet consectetur, adipisicing elit. Sed, dicta! + +