mirror of
https://github.com/NohamR/gitprofile.git
synced 2026-05-24 20:00:22 +00:00
Migrate to TypeScript
This commit is contained in:
Ariful Alam
@@ -1,8 +0,0 @@
|
||||
import config from '../gitprofile.config';
|
||||
import GitProfile from './components/GitProfile';
|
||||
|
||||
function App() {
|
||||
return <GitProfile config={config} />;
|
||||
}
|
||||
|
||||
export default App;
|
||||
7
src/App.tsx
Normal file
7
src/App.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import GitProfile from './components/gitprofile';
|
||||
|
||||
function App() {
|
||||
return <GitProfile config={CONFIG} />;
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,332 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import { Fragment, useCallback, useEffect, useState } from 'react';
|
||||
import HeadTagEditor from './head-tag-editor';
|
||||
import ErrorPage from './error-page';
|
||||
import ThemeChanger from './theme-changer';
|
||||
import AvatarCard from './avatar-card';
|
||||
import Details from './details';
|
||||
import Skill from './skill';
|
||||
import Experience from './experience';
|
||||
import Certification from './certification';
|
||||
import Education from './education';
|
||||
import Project from './project';
|
||||
import Blog from './blog';
|
||||
import Footer from './footer';
|
||||
import {
|
||||
genericError,
|
||||
getInitialTheme,
|
||||
noConfigError,
|
||||
notFoundError,
|
||||
setupHotjar,
|
||||
tooManyRequestError,
|
||||
sanitizeConfig,
|
||||
} from '../helpers/utils';
|
||||
import { HelmetProvider } from 'react-helmet-async';
|
||||
import PropTypes from 'prop-types';
|
||||
import '../assets/index.css';
|
||||
import { formatDistance } from 'date-fns';
|
||||
import ExternalProject from './external-project';
|
||||
|
||||
const bgColor = 'bg-base-300';
|
||||
|
||||
const GitProfile = ({ config }) => {
|
||||
const [error, setError] = useState(
|
||||
typeof config === 'undefined' && !config ? noConfigError : null
|
||||
);
|
||||
const [sanitizedConfig] = useState(
|
||||
typeof config === 'undefined' && !config ? null : sanitizeConfig(config)
|
||||
);
|
||||
const [theme, setTheme] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [profile, setProfile] = useState(null);
|
||||
const [repo, setRepo] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (sanitizedConfig) {
|
||||
setTheme(getInitialTheme(sanitizedConfig.themeConfig));
|
||||
setupHotjar(sanitizedConfig.hotjar);
|
||||
loadData();
|
||||
}
|
||||
}, [sanitizedConfig]);
|
||||
|
||||
useEffect(() => {
|
||||
theme && document.documentElement.setAttribute('data-theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
const loadData = useCallback(() => {
|
||||
axios
|
||||
.get(`https://api.github.com/users/${sanitizedConfig.github.username}`)
|
||||
.then((response) => {
|
||||
let data = response.data;
|
||||
|
||||
let profileData = {
|
||||
avatar: data.avatar_url,
|
||||
name: data.name ? data.name : '',
|
||||
bio: data.bio ? data.bio : '',
|
||||
location: data.location ? data.location : '',
|
||||
company: data.company ? data.company : '',
|
||||
};
|
||||
|
||||
setProfile(profileData);
|
||||
return data;
|
||||
})
|
||||
.then((userData) => {
|
||||
let excludeRepo = ``;
|
||||
if (userData.public_repos === 0) {
|
||||
setRepo([]);
|
||||
return;
|
||||
}
|
||||
|
||||
sanitizedConfig.github.exclude.projects.forEach((project) => {
|
||||
excludeRepo += `+-repo:${sanitizedConfig.github.username}/${project}`;
|
||||
});
|
||||
|
||||
let query = `user:${
|
||||
sanitizedConfig.github.username
|
||||
}+fork:${!sanitizedConfig.github.exclude.forks}${excludeRepo}`;
|
||||
|
||||
let url = `https://api.github.com/search/repositories?q=${query}&sort=${sanitizedConfig.github.sortBy}&per_page=${sanitizedConfig.github.limit}&type=Repositories`;
|
||||
|
||||
axios
|
||||
.get(url, {
|
||||
headers: {
|
||||
'Content-Type': 'application/vnd.github.v3+json',
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
let data = response.data;
|
||||
|
||||
setRepo(data.items);
|
||||
})
|
||||
.catch((error) => {
|
||||
handleError(error);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
handleError(error);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}, [setLoading]);
|
||||
|
||||
const handleError = (error) => {
|
||||
console.error('Error:', error);
|
||||
try {
|
||||
let reset = formatDistance(
|
||||
new Date(error.response.headers['x-ratelimit-reset'] * 1000),
|
||||
new Date(),
|
||||
{
|
||||
addSuffix: true,
|
||||
}
|
||||
);
|
||||
|
||||
if (error.response.status === 403) {
|
||||
setError(tooManyRequestError(reset));
|
||||
} else if (error.response.status === 404) {
|
||||
setError(notFoundError);
|
||||
} else {
|
||||
setError(genericError);
|
||||
}
|
||||
} catch (error2) {
|
||||
setError(genericError);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<HelmetProvider>
|
||||
{sanitizedConfig && (
|
||||
<HeadTagEditor
|
||||
profile={profile}
|
||||
theme={theme}
|
||||
googleAnalytics={sanitizedConfig.googleAnalytics}
|
||||
social={sanitizedConfig.social}
|
||||
/>
|
||||
)}
|
||||
<div className="fade-in h-screen">
|
||||
{error ? (
|
||||
<ErrorPage
|
||||
status={`${error.status}`}
|
||||
title={error.title}
|
||||
subTitle={error.subTitle}
|
||||
/>
|
||||
) : (
|
||||
sanitizedConfig && (
|
||||
<Fragment>
|
||||
<div className={`p-4 lg:p-10 min-h-full ${bgColor}`}>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 rounded-box">
|
||||
<div className="col-span-1">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{!sanitizedConfig.themeConfig.disableSwitch && (
|
||||
<ThemeChanger
|
||||
theme={theme}
|
||||
setTheme={setTheme}
|
||||
loading={loading}
|
||||
themeConfig={sanitizedConfig.themeConfig}
|
||||
/>
|
||||
)}
|
||||
<AvatarCard
|
||||
profile={profile}
|
||||
loading={loading}
|
||||
avatarRing={!sanitizedConfig.themeConfig.hideAvatarRing}
|
||||
resume={sanitizedConfig.resume}
|
||||
/>
|
||||
<Details
|
||||
profile={profile}
|
||||
loading={loading}
|
||||
github={sanitizedConfig.github}
|
||||
social={sanitizedConfig.social}
|
||||
/>
|
||||
<Skill
|
||||
loading={loading}
|
||||
skills={sanitizedConfig.skills}
|
||||
/>
|
||||
<Experience
|
||||
loading={loading}
|
||||
experiences={sanitizedConfig.experiences}
|
||||
/>
|
||||
<Education
|
||||
loading={loading}
|
||||
education={sanitizedConfig.education}
|
||||
/>
|
||||
<Certification
|
||||
loading={loading}
|
||||
certifications={sanitizedConfig.certifications}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-2 col-span-1">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<Project
|
||||
repo={repo}
|
||||
loading={loading}
|
||||
github={sanitizedConfig.github}
|
||||
googleAnalytics={sanitizedConfig.googleAnalytics}
|
||||
/>
|
||||
<ExternalProject
|
||||
loading={loading}
|
||||
externalProjects={sanitizedConfig.externalProjects}
|
||||
googleAnalytics={sanitizedConfig.googleAnalytics}
|
||||
/>
|
||||
<Blog
|
||||
loading={loading}
|
||||
googleAnalytics={sanitizedConfig.googleAnalytics}
|
||||
blog={sanitizedConfig.blog}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer
|
||||
className={`p-4 footer ${bgColor} text-base-content footer-center`}
|
||||
>
|
||||
<div className="card compact bg-base-100 shadow">
|
||||
<Footer content={sanitizedConfig.footer} loading={loading} />
|
||||
</div>
|
||||
</footer>
|
||||
</Fragment>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</HelmetProvider>
|
||||
);
|
||||
};
|
||||
|
||||
GitProfile.propTypes = {
|
||||
config: PropTypes.shape({
|
||||
github: PropTypes.shape({
|
||||
username: PropTypes.string.isRequired,
|
||||
sortBy: PropTypes.oneOf(['stars', 'updated']),
|
||||
limit: PropTypes.number,
|
||||
exclude: PropTypes.shape({
|
||||
forks: PropTypes.bool,
|
||||
projects: PropTypes.array,
|
||||
}),
|
||||
}).isRequired,
|
||||
social: PropTypes.shape({
|
||||
linkedin: PropTypes.string,
|
||||
twitter: PropTypes.string,
|
||||
mastodon: PropTypes.string,
|
||||
facebook: PropTypes.string,
|
||||
instagram: PropTypes.string,
|
||||
youtube: PropTypes.string,
|
||||
dribbble: PropTypes.string,
|
||||
behance: PropTypes.string,
|
||||
medium: PropTypes.string,
|
||||
dev: PropTypes.string,
|
||||
stackoverflow: PropTypes.string,
|
||||
website: PropTypes.string,
|
||||
skype: PropTypes.string,
|
||||
telegram: PropTypes.string,
|
||||
phone: PropTypes.string,
|
||||
email: PropTypes.string,
|
||||
}),
|
||||
resume: PropTypes.shape({
|
||||
fileUrl: PropTypes.string,
|
||||
}),
|
||||
skills: PropTypes.array,
|
||||
externalProjects: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
title: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
link: PropTypes.string.isRequired,
|
||||
imageUrl: PropTypes.string,
|
||||
})
|
||||
),
|
||||
experiences: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
company: PropTypes.string,
|
||||
position: PropTypes.string,
|
||||
from: PropTypes.string,
|
||||
to: PropTypes.string,
|
||||
})
|
||||
),
|
||||
certifications: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
body: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
year: PropTypes.string,
|
||||
link: PropTypes.string,
|
||||
})
|
||||
),
|
||||
education: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
institution: PropTypes.string,
|
||||
degree: PropTypes.string,
|
||||
from: PropTypes.string,
|
||||
to: PropTypes.string,
|
||||
})
|
||||
),
|
||||
blog: PropTypes.shape({
|
||||
source: PropTypes.string,
|
||||
username: PropTypes.string,
|
||||
limit: PropTypes.number,
|
||||
}),
|
||||
googleAnalytics: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
}),
|
||||
hotjar: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
snippetVersion: PropTypes.number,
|
||||
}),
|
||||
themeConfig: PropTypes.shape({
|
||||
defaultTheme: PropTypes.string,
|
||||
disableSwitch: PropTypes.bool,
|
||||
respectPrefersColorScheme: PropTypes.bool,
|
||||
hideAvatarRing: PropTypes.bool,
|
||||
themes: PropTypes.array,
|
||||
customTheme: PropTypes.shape({
|
||||
primary: PropTypes.string,
|
||||
secondary: PropTypes.string,
|
||||
accent: PropTypes.string,
|
||||
neutral: PropTypes.string,
|
||||
'base-100': PropTypes.string,
|
||||
'--rounded-box': PropTypes.string,
|
||||
'--rounded-btn': PropTypes.string,
|
||||
}),
|
||||
}),
|
||||
footer: PropTypes.string,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
export default GitProfile;
|
||||
@@ -1,8 +1,29 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { fallbackImage, skeleton } from '../../helpers/utils';
|
||||
import { FALLBACK_IMAGE } from '../../constants';
|
||||
import { Profile } from '../../interfaces/profile';
|
||||
import { skeleton } from '../../utils';
|
||||
import LazyImage from '../lazy-image';
|
||||
|
||||
const AvatarCard = ({ profile, loading, avatarRing, resume }) => {
|
||||
interface AvatarCardProps {
|
||||
profile: Profile | null;
|
||||
loading: boolean;
|
||||
avatarRing: boolean;
|
||||
resumeFileUrl?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders an AvatarCard component.
|
||||
* @param profile - The profile object.
|
||||
* @param loading - A boolean indicating if the profile is loading.
|
||||
* @param avatarRing - A boolean indicating if the avatar should have a ring.
|
||||
* @param resumeFileUrl - The URL of the resume file.
|
||||
* @returns JSX element representing the AvatarCard.
|
||||
*/
|
||||
const AvatarCard: React.FC<AvatarCardProps> = ({
|
||||
profile,
|
||||
loading,
|
||||
avatarRing,
|
||||
resumeFileUrl,
|
||||
}): JSX.Element => {
|
||||
return (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="grid place-items-center py-8">
|
||||
@@ -10,8 +31,8 @@ const AvatarCard = ({ profile, loading, avatarRing, resume }) => {
|
||||
<div className="avatar opacity-90">
|
||||
<div className="mb-8 rounded-full w-32 h-32">
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-full',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-full',
|
||||
shape: '',
|
||||
})}
|
||||
</div>
|
||||
@@ -27,11 +48,11 @@ const AvatarCard = ({ profile, loading, avatarRing, resume }) => {
|
||||
>
|
||||
{
|
||||
<LazyImage
|
||||
src={profile.avatar ? profile.avatar : fallbackImage}
|
||||
src={profile.avatar ? profile.avatar : FALLBACK_IMAGE}
|
||||
alt={profile.name}
|
||||
placeholder={skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-full',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-full',
|
||||
shape: '',
|
||||
})}
|
||||
/>
|
||||
@@ -42,7 +63,7 @@ const AvatarCard = ({ profile, loading, avatarRing, resume }) => {
|
||||
<div className="text-center mx-auto px-8">
|
||||
<h5 className="font-bold text-2xl">
|
||||
{loading || !profile ? (
|
||||
skeleton({ width: 'w-48', height: 'h-8' })
|
||||
skeleton({ widthCls: 'w-48', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
{profile.name}
|
||||
@@ -51,18 +72,18 @@ const AvatarCard = ({ profile, loading, avatarRing, resume }) => {
|
||||
</h5>
|
||||
<div className="mt-3 text-base-content text-opacity-60 font-mono">
|
||||
{loading || !profile
|
||||
? skeleton({ width: 'w-48', height: 'h-5' })
|
||||
? skeleton({ widthCls: 'w-48', heightCls: 'h-5' })
|
||||
: profile.bio}
|
||||
</div>
|
||||
</div>
|
||||
{resume?.fileUrl &&
|
||||
{resumeFileUrl &&
|
||||
(loading ? (
|
||||
<div className="mt-6">
|
||||
{skeleton({ width: 'w-40', height: 'h-8' })}
|
||||
{skeleton({ widthCls: 'w-40', heightCls: 'h-8' })}
|
||||
</div>
|
||||
) : (
|
||||
<a
|
||||
href={resume.fileUrl}
|
||||
href={resumeFileUrl}
|
||||
target="_blank"
|
||||
className="btn btn-outline btn-sm text-xs mt-6 opacity-50"
|
||||
download
|
||||
@@ -76,13 +97,4 @@ const AvatarCard = ({ profile, loading, avatarRing, resume }) => {
|
||||
);
|
||||
};
|
||||
|
||||
AvatarCard.propTypes = {
|
||||
profile: PropTypes.object,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
avatarRing: PropTypes.bool.isRequired,
|
||||
resume: PropTypes.shape({
|
||||
fileUrl: PropTypes.string,
|
||||
}),
|
||||
};
|
||||
|
||||
export default AvatarCard;
|
||||
@@ -1,42 +1,41 @@
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { ga, skeleton } from '../../helpers/utils';
|
||||
import { useEffect, useState } from 'react';
|
||||
import LazyImage from '../lazy-image';
|
||||
import PropTypes from 'prop-types';
|
||||
import { AiOutlineContainer } from 'react-icons/ai';
|
||||
import { getDevPost, getMediumPost } from '@arifszn/blog-js';
|
||||
import { formatDistance } from 'date-fns';
|
||||
import { SanitizedBlog } from '../../interfaces/sanitized-config';
|
||||
import { ga, skeleton } from '../../utils';
|
||||
import { Article } from '../../interfaces/article';
|
||||
|
||||
const displaySection = (blog) => {
|
||||
if (blog?.source && blog?.username) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const Blog = ({ loading, blog, googleAnalytics }) => {
|
||||
const [articles, setArticles] = useState(null);
|
||||
const BlogCard = ({
|
||||
loading,
|
||||
blog,
|
||||
googleAnalyticsId,
|
||||
}: {
|
||||
loading: boolean;
|
||||
blog: SanitizedBlog;
|
||||
googleAnalyticsId?: string;
|
||||
}) => {
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (displaySection(blog)) {
|
||||
if (blog.source === 'medium') {
|
||||
getMediumPost({
|
||||
user: blog.username,
|
||||
}).then((res) => {
|
||||
setArticles(res);
|
||||
});
|
||||
} else if (blog.source === 'dev') {
|
||||
getDevPost({
|
||||
user: blog.username,
|
||||
}).then((res) => {
|
||||
setArticles(res);
|
||||
});
|
||||
}
|
||||
if (blog.source === 'medium') {
|
||||
getMediumPost({
|
||||
user: blog.username,
|
||||
}).then((res) => {
|
||||
setArticles(res);
|
||||
});
|
||||
} else if (blog.source === 'dev') {
|
||||
getDevPost({
|
||||
user: blog.username,
|
||||
}).then((res) => {
|
||||
setArticles(res);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
}, [blog.source, blog.username]);
|
||||
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
const array = [];
|
||||
for (let index = 0; index < blog.limit; index++) {
|
||||
array.push(
|
||||
<div className="card shadow-lg compact bg-base-100" key={index}>
|
||||
@@ -45,8 +44,8 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
|
||||
<div className="avatar mb-5 md:mb-0">
|
||||
<div className="w-24 h-24 mask mask-squircle">
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-full',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-full',
|
||||
shape: '',
|
||||
})}
|
||||
</div>
|
||||
@@ -56,27 +55,27 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
|
||||
<div className="w-full">
|
||||
<h2>
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-8',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-8',
|
||||
className: 'mb-2 mx-auto md:mx-0',
|
||||
})}
|
||||
</h2>
|
||||
{skeleton({
|
||||
width: 'w-24',
|
||||
height: 'h-3',
|
||||
widthCls: 'w-24',
|
||||
heightCls: 'h-3',
|
||||
className: 'mx-auto md:mx-0',
|
||||
})}
|
||||
<div className="mt-3">
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-4',
|
||||
className: 'mx-auto md:mx-0',
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-4 flex items-center flex-wrap justify-center md:justify-start">
|
||||
{skeleton({
|
||||
width: 'w-32',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-32',
|
||||
heightCls: 'h-4',
|
||||
className: 'md:mr-2 mx-auto md:mx-0',
|
||||
})}
|
||||
</div>
|
||||
@@ -85,7 +84,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -103,12 +102,9 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
if (googleAnalytics?.id) {
|
||||
ga.event({
|
||||
action: 'Click Blog Post',
|
||||
params: {
|
||||
post: article.title,
|
||||
},
|
||||
if (googleAnalyticsId) {
|
||||
ga.event('Click Blog Post', {
|
||||
post: article.title,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -126,8 +122,8 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
|
||||
src={article.thumbnail}
|
||||
alt={'thumbnail'}
|
||||
placeholder={skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-full',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-full',
|
||||
shape: '',
|
||||
})}
|
||||
/>
|
||||
@@ -175,51 +171,39 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{displaySection(blog) && (
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="col-span-2">
|
||||
<div
|
||||
className={`card compact bg-base-100 ${
|
||||
loading || (articles && articles.length)
|
||||
? 'shadow bg-opacity-40'
|
||||
: 'shadow-lg'
|
||||
}`}
|
||||
>
|
||||
<div className="card-body">
|
||||
<div className="mx-3 mb-2">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-28', height: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Recent Posts
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{loading || !articles
|
||||
? renderSkeleton()
|
||||
: renderArticles()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="col-span-2">
|
||||
<div
|
||||
className={`card compact bg-base-100 ${
|
||||
loading || (articles && articles.length)
|
||||
? 'shadow bg-opacity-40'
|
||||
: 'shadow-lg'
|
||||
}`}
|
||||
>
|
||||
<div className="card-body">
|
||||
<div className="mx-3 mb-2">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-28', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
My Articles
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{loading || !articles ? renderSkeleton() : renderArticles()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Fragment>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Blog.propTypes = {
|
||||
loading: PropTypes.bool.isRequired,
|
||||
blog: PropTypes.object.isRequired,
|
||||
googleAnalytics: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
export default BlogCard;
|
||||
@@ -1,8 +1,18 @@
|
||||
import { skeleton } from '../../helpers/utils';
|
||||
import { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { SanitizedCertification } from '../../interfaces/sanitized-config';
|
||||
import { skeleton } from '../../utils';
|
||||
|
||||
const ListItem = ({ year, name, body, link }) => (
|
||||
const ListItem = ({
|
||||
year,
|
||||
name,
|
||||
body,
|
||||
link,
|
||||
}: {
|
||||
year?: React.ReactNode;
|
||||
name?: React.ReactNode;
|
||||
body?: React.ReactNode;
|
||||
link?: string;
|
||||
}) => (
|
||||
<li className="mb-5 ml-4">
|
||||
<div
|
||||
className="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
|
||||
@@ -18,24 +28,30 @@ const ListItem = ({ year, name, body, link }) => (
|
||||
</li>
|
||||
);
|
||||
|
||||
const Certification = ({ certifications, loading }) => {
|
||||
const CertificationCard = ({
|
||||
certifications,
|
||||
loading,
|
||||
}: {
|
||||
certifications: SanitizedCertification[];
|
||||
loading: boolean;
|
||||
}) => {
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
const array = [];
|
||||
for (let index = 0; index < 2; index++) {
|
||||
array.push(
|
||||
<ListItem
|
||||
key={index}
|
||||
year={skeleton({
|
||||
width: 'w-5/12',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-5/12',
|
||||
heightCls: 'h-4',
|
||||
})}
|
||||
name={skeleton({
|
||||
width: 'w-6/12',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-6/12',
|
||||
heightCls: 'h-4',
|
||||
className: 'my-1.5',
|
||||
})}
|
||||
body={skeleton({ width: 'w-6/12', height: 'h-3' })}
|
||||
/>
|
||||
body={skeleton({ widthCls: 'w-6/12', heightCls: 'h-3' })}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -50,7 +66,7 @@ const Certification = ({ certifications, loading }) => {
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-32', height: 'h-8' })
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Certification
|
||||
@@ -63,17 +79,19 @@ const Certification = ({ certifications, loading }) => {
|
||||
{loading ? (
|
||||
renderSkeleton()
|
||||
) : (
|
||||
<Fragment>
|
||||
<>
|
||||
{certifications.map((certification, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
year={`${certification.year}`}
|
||||
name={certification.name}
|
||||
body={certification.body}
|
||||
link={certification.link ? certification.link : null}
|
||||
link={
|
||||
certification.link ? certification.link : undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
@@ -84,16 +102,4 @@ const Certification = ({ certifications, loading }) => {
|
||||
);
|
||||
};
|
||||
|
||||
ListItem.propTypes = {
|
||||
year: PropTypes.node,
|
||||
name: PropTypes.node,
|
||||
body: PropTypes.node,
|
||||
link: PropTypes.string,
|
||||
};
|
||||
|
||||
Certification.propTypes = {
|
||||
certifications: PropTypes.array.isRequired,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
export default Certification;
|
||||
export default CertificationCard;
|
||||
@@ -21,18 +21,32 @@ import {
|
||||
FaLinkedin,
|
||||
FaYoutube,
|
||||
} from 'react-icons/fa';
|
||||
import PropTypes from 'prop-types';
|
||||
import { skeleton } from '../../helpers/utils';
|
||||
import { skeleton } from '../../utils';
|
||||
import { Profile } from '../../interfaces/profile';
|
||||
import {
|
||||
SanitizedGithub,
|
||||
SanitizedSocial,
|
||||
} from '../../interfaces/sanitized-config';
|
||||
|
||||
const isCompanyMention = (company) => {
|
||||
type Props = {
|
||||
profile: Profile | null;
|
||||
loading: boolean;
|
||||
social: SanitizedSocial;
|
||||
github: SanitizedGithub;
|
||||
};
|
||||
|
||||
const isCompanyMention = (company: string): boolean => {
|
||||
return company.startsWith('@') && !company.includes(' ');
|
||||
};
|
||||
|
||||
const companyLink = (company) => {
|
||||
const companyLink = (company: string): string => {
|
||||
return `https://github.com/${company.substring(1)}`;
|
||||
};
|
||||
|
||||
const getFormattedMastodonValue = (mastodonValue, isLink) => {
|
||||
const getFormattedMastodonValue = (
|
||||
mastodonValue: string,
|
||||
isLink: boolean,
|
||||
): string => {
|
||||
const [username, server] = mastodonValue.split('@');
|
||||
|
||||
if (isLink) {
|
||||
@@ -42,7 +56,13 @@ const getFormattedMastodonValue = (mastodonValue, isLink) => {
|
||||
}
|
||||
};
|
||||
|
||||
const ListItem = ({ icon, title, value, link, skeleton = false }) => {
|
||||
const ListItem: React.FC<{
|
||||
icon: React.ReactNode;
|
||||
title: React.ReactNode;
|
||||
value: React.ReactNode;
|
||||
link?: string;
|
||||
skeleton?: boolean;
|
||||
}> = ({ icon, title, value, link, skeleton = false }) => {
|
||||
return (
|
||||
<a
|
||||
href={link}
|
||||
@@ -67,18 +87,27 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const Details = ({ profile, loading, social, github }) => {
|
||||
/**
|
||||
* Renders the details card component.
|
||||
*
|
||||
* @param {Object} profile - The profile object.
|
||||
* @param {boolean} loading - Indicates whether the data is loading.
|
||||
* @param {Object} social - The social object.
|
||||
* @param {Object} github - The GitHub object.
|
||||
* @return {JSX.Element} The details card component.
|
||||
*/
|
||||
const DetailsCard = ({ profile, loading, social, github }: Props) => {
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
const array = [];
|
||||
for (let index = 0; index < 4; index++) {
|
||||
array.push(
|
||||
<ListItem
|
||||
key={index}
|
||||
skeleton={true}
|
||||
icon={skeleton({ width: 'w-4', height: 'h-4' })}
|
||||
title={skeleton({ width: 'w-24', height: 'h-4' })}
|
||||
value={skeleton({ width: 'w-full', height: 'h-4' })}
|
||||
/>
|
||||
icon={skeleton({ widthCls: 'w-4', heightCls: 'h-4' })}
|
||||
title={skeleton({ widthCls: 'w-24', heightCls: 'h-4' })}
|
||||
value={skeleton({ widthCls: 'w-full', heightCls: 'h-4' })}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -108,7 +137,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
link={
|
||||
isCompanyMention(profile.company.trim())
|
||||
? companyLink(profile.company.trim())
|
||||
: null
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
@@ -210,8 +239,14 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
<ListItem
|
||||
icon={<FaGlobe />}
|
||||
title="Website:"
|
||||
value={social.website}
|
||||
link={social.website}
|
||||
value={social.website
|
||||
.replace('https://', '')
|
||||
.replace('http://', '')}
|
||||
link={
|
||||
!social.website.startsWith('http')
|
||||
? `http://${social.website}`
|
||||
: social.website
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{social?.skype && (
|
||||
@@ -255,19 +290,4 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
);
|
||||
};
|
||||
|
||||
Details.propTypes = {
|
||||
profile: PropTypes.object,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
social: PropTypes.object.isRequired,
|
||||
github: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
ListItem.propTypes = {
|
||||
icon: PropTypes.node,
|
||||
title: PropTypes.node,
|
||||
value: PropTypes.node,
|
||||
link: PropTypes.string,
|
||||
skeleton: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Details;
|
||||
export default DetailsCard;
|
||||
@@ -1,8 +1,16 @@
|
||||
import { skeleton } from '../../helpers/utils';
|
||||
import { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { SanitizedEducation } from '../../interfaces/sanitized-config';
|
||||
import { skeleton } from '../../utils';
|
||||
|
||||
const ListItem = ({ time, degree, institution }) => (
|
||||
const ListItem = ({
|
||||
time,
|
||||
degree,
|
||||
institution,
|
||||
}: {
|
||||
time: React.ReactNode;
|
||||
degree?: React.ReactNode;
|
||||
institution?: React.ReactNode;
|
||||
}) => (
|
||||
<li className="mb-5 ml-4">
|
||||
<div
|
||||
className="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
|
||||
@@ -14,24 +22,30 @@ const ListItem = ({ time, degree, institution }) => (
|
||||
</li>
|
||||
);
|
||||
|
||||
const Education = ({ loading, education }) => {
|
||||
const EducationCard = ({
|
||||
loading,
|
||||
educations,
|
||||
}: {
|
||||
loading: boolean;
|
||||
educations: SanitizedEducation[];
|
||||
}) => {
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
const array = [];
|
||||
for (let index = 0; index < 2; index++) {
|
||||
array.push(
|
||||
<ListItem
|
||||
key={index}
|
||||
time={skeleton({
|
||||
width: 'w-5/12',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-5/12',
|
||||
heightCls: 'h-4',
|
||||
})}
|
||||
degree={skeleton({
|
||||
width: 'w-6/12',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-6/12',
|
||||
heightCls: 'h-4',
|
||||
className: 'my-1.5',
|
||||
})}
|
||||
institution={skeleton({ width: 'w-6/12', height: 'h-3' })}
|
||||
/>
|
||||
institution={skeleton({ widthCls: 'w-6/12', heightCls: 'h-3' })}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -40,13 +54,13 @@ const Education = ({ loading, education }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{education?.length !== 0 && (
|
||||
{educations?.length !== 0 && (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-32', height: 'h-8' })
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Education
|
||||
@@ -59,8 +73,8 @@ const Education = ({ loading, education }) => {
|
||||
{loading ? (
|
||||
renderSkeleton()
|
||||
) : (
|
||||
<Fragment>
|
||||
{education.map((item, index) => (
|
||||
<>
|
||||
{educations.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
time={`${item.from} - ${item.to}`}
|
||||
@@ -68,7 +82,7 @@ const Education = ({ loading, education }) => {
|
||||
institution={item.institution}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
@@ -79,15 +93,4 @@ const Education = ({ loading, education }) => {
|
||||
);
|
||||
};
|
||||
|
||||
Education.propTypes = {
|
||||
loading: PropTypes.bool.isRequired,
|
||||
education: PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
ListItem.propTypes = {
|
||||
time: PropTypes.node,
|
||||
degree: PropTypes.node,
|
||||
institution: PropTypes.node,
|
||||
};
|
||||
|
||||
export default Education;
|
||||
export default EducationCard;
|
||||
@@ -1,13 +1,19 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { CustomError } from '../../constants/errors';
|
||||
|
||||
const ErrorPage = (props) => {
|
||||
/**
|
||||
* Render the ErrorPage component.
|
||||
*
|
||||
* @param props - The props for the ErrorPage component.
|
||||
* @returns The rendered ErrorPage component.
|
||||
*/
|
||||
const ErrorPage: React.FC<CustomError> = (props) => {
|
||||
return (
|
||||
<div className="min-w-screen min-h-screen bg-base-200 flex items-center p-5 lg:p-20 overflow-hidden relative">
|
||||
<div className="flex-1 min-h-full min-w-full rounded-3xl bg-base-100 shadow-xl p-10 lg:p-20 text-gray-800 relative md:flex items-center text-center md:text-left">
|
||||
<div className="w-full">
|
||||
<div className="mb-10 md:mb-20 mt-10 md:mt-20 text-gray-600 font-light">
|
||||
<h1 className="font-black uppercase text-3xl lg:text-5xl text-primary mb-10">
|
||||
{props.status}
|
||||
{`${props.status}`}
|
||||
</h1>
|
||||
<p className="text-lg pb-2 text-base-content">{props.title}</p>
|
||||
<div className="text-base-content text-opacity-60">
|
||||
@@ -22,10 +28,4 @@ const ErrorPage = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
ErrorPage.propTypes = {
|
||||
status: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
subTitle: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
||||
@@ -1,8 +1,18 @@
|
||||
import { skeleton } from '../../helpers/utils';
|
||||
import { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Fragment } from 'react';
|
||||
import { SanitizedExperience } from '../../interfaces/sanitized-config';
|
||||
import { skeleton } from '../../utils';
|
||||
|
||||
const ListItem = ({ time, position, company, companyLink }) => (
|
||||
const ListItem = ({
|
||||
time,
|
||||
position,
|
||||
company,
|
||||
companyLink,
|
||||
}: {
|
||||
time: React.ReactNode;
|
||||
position?: React.ReactNode;
|
||||
company?: React.ReactNode;
|
||||
companyLink?: string;
|
||||
}) => (
|
||||
<li className="mb-5 ml-4">
|
||||
<div
|
||||
className="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
|
||||
@@ -18,24 +28,30 @@ const ListItem = ({ time, position, company, companyLink }) => (
|
||||
</li>
|
||||
);
|
||||
|
||||
const Experience = ({ experiences, loading }) => {
|
||||
const ExperienceCard = ({
|
||||
experiences,
|
||||
loading,
|
||||
}: {
|
||||
experiences: SanitizedExperience[];
|
||||
loading: boolean;
|
||||
}) => {
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
const array = [];
|
||||
for (let index = 0; index < 2; index++) {
|
||||
array.push(
|
||||
<ListItem
|
||||
key={index}
|
||||
time={skeleton({
|
||||
width: 'w-5/12',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-5/12',
|
||||
heightCls: 'h-4',
|
||||
})}
|
||||
position={skeleton({
|
||||
width: 'w-6/12',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-6/12',
|
||||
heightCls: 'h-4',
|
||||
className: 'my-1.5',
|
||||
})}
|
||||
company={skeleton({ width: 'w-6/12', height: 'h-3' })}
|
||||
/>
|
||||
company={skeleton({ widthCls: 'w-6/12', heightCls: 'h-3' })}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -49,7 +65,7 @@ const Experience = ({ experiences, loading }) => {
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-32', height: 'h-8' })
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Experience
|
||||
@@ -70,7 +86,9 @@ const Experience = ({ experiences, loading }) => {
|
||||
position={experience.position}
|
||||
company={experience.company}
|
||||
companyLink={
|
||||
experience.companyLink ? experience.companyLink : null
|
||||
experience.companyLink
|
||||
? experience.companyLink
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
@@ -85,16 +103,4 @@ const Experience = ({ experiences, loading }) => {
|
||||
);
|
||||
};
|
||||
|
||||
ListItem.propTypes = {
|
||||
time: PropTypes.node,
|
||||
position: PropTypes.node,
|
||||
company: PropTypes.node,
|
||||
companyLink: PropTypes.string,
|
||||
};
|
||||
|
||||
Experience.propTypes = {
|
||||
experiences: PropTypes.array.isRequired,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
export default Experience;
|
||||
export default ExperienceCard;
|
||||
@@ -1,23 +1,21 @@
|
||||
import { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ga, skeleton } from '../../helpers/utils';
|
||||
import LazyImage from '../lazy-image';
|
||||
import { ga, skeleton } from '../../utils';
|
||||
import { SanitizedExternalProject } from '../../interfaces/sanitized-config';
|
||||
|
||||
const displaySection = (externalProjects) => {
|
||||
if (
|
||||
externalProjects &&
|
||||
Array.isArray(externalProjects) &&
|
||||
externalProjects.length
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
|
||||
const ExternalProjectCard = ({
|
||||
externalProjects,
|
||||
header,
|
||||
loading,
|
||||
googleAnalyticId,
|
||||
}: {
|
||||
externalProjects: SanitizedExternalProject[];
|
||||
header: string;
|
||||
loading: boolean;
|
||||
googleAnalyticId?: string;
|
||||
}) => {
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
const array = [];
|
||||
for (let index = 0; index < externalProjects.length; index++) {
|
||||
array.push(
|
||||
<div className="card shadow-lg compact bg-base-100" key={index}>
|
||||
@@ -28,31 +26,31 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
|
||||
<div className="w-full">
|
||||
<h2>
|
||||
{skeleton({
|
||||
width: 'w-32',
|
||||
height: 'h-8',
|
||||
widthCls: 'w-32',
|
||||
heightCls: 'h-8',
|
||||
className: 'mb-2 mx-auto',
|
||||
})}
|
||||
</h2>
|
||||
<div className="avatar w-full h-full">
|
||||
<div className="w-20 h-20 mask mask-squircle mx-auto">
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-full',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-full',
|
||||
shape: '',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-4',
|
||||
className: 'mx-auto',
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center flex-wrap justify-center">
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-4',
|
||||
className: 'mx-auto',
|
||||
})}
|
||||
</div>
|
||||
@@ -61,7 +59,7 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -78,12 +76,9 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
if (googleAnalytics?.id) {
|
||||
ga.event({
|
||||
action: 'Click External Project',
|
||||
params: {
|
||||
post: item.title,
|
||||
},
|
||||
if (googleAnalyticId) {
|
||||
ga.event('Click External Project', {
|
||||
post: item.title,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -108,8 +103,8 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
|
||||
src={item.imageUrl}
|
||||
alt={'thumbnail'}
|
||||
placeholder={skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-full',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-full',
|
||||
shape: '',
|
||||
})}
|
||||
/>
|
||||
@@ -130,42 +125,34 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{displaySection(externalProjects) && (
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="col-span-2">
|
||||
<div className="card compact bg-base-100 shadow bg-opacity-40">
|
||||
<div className="card-body">
|
||||
<div className="mx-3 flex items-center justify-between mb-2">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-40', height: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
My Projects
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{loading ? renderSkeleton() : renderExternalProjects()}
|
||||
</div>
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="col-span-2">
|
||||
<div className="card compact bg-base-100 shadow bg-opacity-40">
|
||||
<div className="card-body">
|
||||
<div className="mx-3 flex items-center justify-between mb-2">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-40', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
{header}
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{loading ? renderSkeleton() : renderExternalProjects()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
ExternalProject.propTypes = {
|
||||
externalProjects: PropTypes.array,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
googleAnalytics: PropTypes.object,
|
||||
};
|
||||
|
||||
export default ExternalProject;
|
||||
export default ExternalProjectCard;
|
||||
@@ -1,24 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { skeleton } from '../../helpers/utils';
|
||||
|
||||
const Footer = ({ content, loading }) => {
|
||||
if (!content) return null;
|
||||
|
||||
return (
|
||||
<div className="card-body">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-52', height: 'h-6' })
|
||||
) : (
|
||||
<div dangerouslySetInnerHTML={{ __html: content }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Footer.propTypes = {
|
||||
content: PropTypes.string,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
23
src/components/footer/index.tsx
Normal file
23
src/components/footer/index.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { skeleton } from '../../utils';
|
||||
|
||||
const Footer = ({
|
||||
content,
|
||||
loading,
|
||||
}: {
|
||||
content: string | null;
|
||||
loading: boolean;
|
||||
}) => {
|
||||
if (!content) return null;
|
||||
|
||||
return (
|
||||
<div className="card-body">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-52', heightCls: 'h-6' })
|
||||
) : (
|
||||
<div dangerouslySetInnerHTML={{ __html: content }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -1,17 +1,31 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Fragment } from 'react';
|
||||
import { AiOutlineFork, AiOutlineStar } from 'react-icons/ai';
|
||||
import { MdInsertLink } from 'react-icons/md';
|
||||
import { ga, languageColor, skeleton } from '../../helpers/utils';
|
||||
import { ga, getLanguageColor, skeleton } from '../../utils';
|
||||
import { GithubProject } from '../../interfaces/github-project';
|
||||
|
||||
const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
if (!loading && Array.isArray(repo) && repo.length === 0) {
|
||||
return <></>;
|
||||
const GithubProjectCard = ({
|
||||
header,
|
||||
githubProjects,
|
||||
loading,
|
||||
limit,
|
||||
username,
|
||||
googleAnalyticsId,
|
||||
}: {
|
||||
header: string;
|
||||
githubProjects: GithubProject[];
|
||||
loading: boolean;
|
||||
limit: number;
|
||||
username: string;
|
||||
googleAnalyticsId?: string;
|
||||
}) => {
|
||||
if (!loading && githubProjects.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
for (let index = 0; index < github.limit; index++) {
|
||||
const array = [];
|
||||
for (let index = 0; index < limit; index++) {
|
||||
array.push(
|
||||
<div className="card shadow-lg compact bg-base-100" key={index}>
|
||||
<div className="flex justify-between flex-col p-8 h-full w-full">
|
||||
@@ -20,8 +34,8 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
<span>
|
||||
<h5 className="card-title text-lg">
|
||||
{skeleton({
|
||||
width: 'w-32',
|
||||
height: 'h-8',
|
||||
widthCls: 'w-32',
|
||||
heightCls: 'h-8',
|
||||
className: 'mb-1',
|
||||
})}
|
||||
</h5>
|
||||
@@ -29,30 +43,30 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
</div>
|
||||
<div className="mb-5 mt-1">
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-4',
|
||||
widthCls: 'w-full',
|
||||
heightCls: 'h-4',
|
||||
className: 'mb-2',
|
||||
})}
|
||||
{skeleton({ width: 'w-full', height: 'h-4' })}
|
||||
{skeleton({ widthCls: 'w-full', heightCls: 'h-4' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-grow">
|
||||
<span className="mr-3 flex items-center">
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
{skeleton({ widthCls: 'w-12', heightCls: 'h-4' })}
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
{skeleton({ widthCls: 'w-12', heightCls: 'h-4' })}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="flex items-center">
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
{skeleton({ widthCls: 'w-12', heightCls: 'h-4' })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -60,7 +74,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
};
|
||||
|
||||
const renderProjects = () => {
|
||||
return repo.map((item, index) => (
|
||||
return githubProjects.map((item, index) => (
|
||||
<a
|
||||
className="card shadow-lg compact bg-base-100 cursor-pointer"
|
||||
href={item.html_url}
|
||||
@@ -69,12 +83,9 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
if (googleAnalytics?.id) {
|
||||
ga.event({
|
||||
action: 'Click project',
|
||||
params: {
|
||||
project: item.name,
|
||||
},
|
||||
if (googleAnalyticsId) {
|
||||
ga.event('Click project', {
|
||||
project: item.name,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -111,7 +122,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
<span className="flex items-center">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full mr-1 opacity-60"
|
||||
style={{ backgroundColor: languageColor(item.language) }}
|
||||
style={{ backgroundColor: getLanguageColor(item.language) }}
|
||||
/>
|
||||
<span>{item.language}</span>
|
||||
</span>
|
||||
@@ -132,18 +143,18 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
<div className="mx-3 flex items-center justify-between mb-2">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-40', height: 'h-8' })
|
||||
skeleton({ widthCls: 'w-40', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
GitHub Projects
|
||||
{header}
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-10', height: 'h-5' })
|
||||
skeleton({ widthCls: 'w-10', heightCls: 'h-5' })
|
||||
) : (
|
||||
<a
|
||||
href={`https://github.com/${github.username}?tab=repositories`}
|
||||
href={`https://github.com/${username}?tab=repositories`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content opacity-50 hover:underline"
|
||||
@@ -154,7 +165,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{loading || !repo ? renderSkeleton() : renderProjects()}
|
||||
{loading ? renderSkeleton() : renderProjects()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -166,11 +177,4 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
|
||||
);
|
||||
};
|
||||
|
||||
Project.propTypes = {
|
||||
repo: PropTypes.array,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
github: PropTypes.object.isRequired,
|
||||
googleAnalytics: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default Project;
|
||||
export default GithubProjectCard;
|
||||
288
src/components/gitprofile.tsx
Normal file
288
src/components/gitprofile.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import axios, { AxiosError } from 'axios';
|
||||
import { formatDistance } from 'date-fns';
|
||||
import {
|
||||
CustomError,
|
||||
GENERIC_ERROR,
|
||||
INVALID_CONFIG_ERROR,
|
||||
INVALID_GITHUB_USERNAME_ERROR,
|
||||
setTooManyRequestError,
|
||||
} from '../constants/errors';
|
||||
import { HelmetProvider } from 'react-helmet-async';
|
||||
import '../assets/index.css';
|
||||
import { getInitialTheme, getSanitizedConfig, setupHotjar } from '../utils';
|
||||
import { SanitizedConfig } from '../interfaces/sanitized-config';
|
||||
import ErrorPage from './error-page';
|
||||
import HeadTagEditor from './head-tag-editor';
|
||||
import { DEFAULT_THEMES } from '../constants/default-themes';
|
||||
import ThemeChanger from './theme-changer';
|
||||
import { BG_COLOR } from '../constants';
|
||||
import AvatarCard from './avatar-card';
|
||||
import { Profile } from '../interfaces/profile';
|
||||
import DetailsCard from './details-card';
|
||||
import SkillCard from './skill-card';
|
||||
import ExperienceCard from './experience-card';
|
||||
import EducationCard from './education-card';
|
||||
import CertificationCard from './certification-card';
|
||||
import { GithubProject } from '../interfaces/github-project';
|
||||
import GithubProjectCard from './github-project-card';
|
||||
import ExternalProjectCard from './external-project-card';
|
||||
import BlogCard from './blog-card';
|
||||
import Footer from './footer';
|
||||
|
||||
/**
|
||||
* Renders the GitProfile component.
|
||||
*
|
||||
* @param {Object} config - the configuration object
|
||||
* @return {JSX.Element} the rendered GitProfile component
|
||||
*/
|
||||
const GitProfile = ({ config }: { config: Config }) => {
|
||||
const [sanitizedConfig] = useState<SanitizedConfig | Record<string, never>>(
|
||||
getSanitizedConfig(config),
|
||||
);
|
||||
const [theme, setTheme] = useState<string>(DEFAULT_THEMES[0]);
|
||||
const [error, setError] = useState<CustomError | null>(null);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [profile, setProfile] = useState<Profile | null>(null);
|
||||
const [githubProjects, setGithubProjects] = useState<GithubProject[]>([]);
|
||||
|
||||
const getGithubProjects = useCallback(
|
||||
async (publicRepoCount: number): Promise<GithubProject[]> => {
|
||||
if (sanitizedConfig.projects.github.mode === 'automatic') {
|
||||
if (publicRepoCount === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const excludeRepo =
|
||||
sanitizedConfig.projects.github.automatic.exclude.projects
|
||||
.map((project) => `+-repo:${project}`)
|
||||
.join('');
|
||||
|
||||
const query = `user:${sanitizedConfig.github.username}+fork:${!sanitizedConfig.projects.github.automatic.exclude.forks}${excludeRepo}`;
|
||||
const url = `https://api.github.com/search/repositories?q=${query}&sort=${sanitizedConfig.projects.github.automatic.sortBy}&per_page=${sanitizedConfig.projects.github.automatic.limit}&type=Repositories`;
|
||||
|
||||
const repoResponse = await axios.get(url, {
|
||||
headers: { 'Content-Type': 'application/vnd.github.v3+json' },
|
||||
});
|
||||
const repoData = repoResponse.data;
|
||||
|
||||
return repoData.items;
|
||||
} else {
|
||||
if (sanitizedConfig.projects.github.manual.projects.length === 0) {
|
||||
return [];
|
||||
}
|
||||
const repos = sanitizedConfig.projects.github.manual.projects
|
||||
.map((project) => `+repo:${project}`)
|
||||
.join('');
|
||||
|
||||
const url = `https://api.github.com/search/repositories?q=${repos}&type=Repositories`;
|
||||
|
||||
const repoResponse = await axios.get(url, {
|
||||
headers: { 'Content-Type': 'application/vnd.github.v3+json' },
|
||||
});
|
||||
const repoData = repoResponse.data;
|
||||
|
||||
return repoData.items;
|
||||
}
|
||||
},
|
||||
[
|
||||
sanitizedConfig.github.username,
|
||||
sanitizedConfig.projects.github.mode,
|
||||
sanitizedConfig.projects.github.manual.projects,
|
||||
sanitizedConfig.projects.github.automatic.sortBy,
|
||||
sanitizedConfig.projects.github.automatic.limit,
|
||||
sanitizedConfig.projects.github.automatic.exclude.forks,
|
||||
sanitizedConfig.projects.github.automatic.exclude.projects,
|
||||
],
|
||||
);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const response = await axios.get(
|
||||
`https://api.github.com/users/${sanitizedConfig.github.username}`,
|
||||
);
|
||||
const data = response.data;
|
||||
|
||||
setProfile({
|
||||
avatar: data.avatar_url,
|
||||
name: data.name || ' ',
|
||||
bio: data.bio || '',
|
||||
location: data.location || '',
|
||||
company: data.company || '',
|
||||
});
|
||||
|
||||
if (!sanitizedConfig.projects.github.display) {
|
||||
return;
|
||||
}
|
||||
|
||||
setGithubProjects(await getGithubProjects(data.public_repos));
|
||||
} catch (error) {
|
||||
handleError(error as AxiosError | Error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [
|
||||
sanitizedConfig.github.username,
|
||||
sanitizedConfig.projects.github.display,
|
||||
getGithubProjects,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (Object.keys(sanitizedConfig).length === 0) {
|
||||
setError(INVALID_CONFIG_ERROR);
|
||||
} else {
|
||||
setError(null);
|
||||
setTheme(getInitialTheme(sanitizedConfig.themeConfig));
|
||||
setupHotjar(sanitizedConfig.hotjar);
|
||||
loadData();
|
||||
}
|
||||
}, [sanitizedConfig, loadData]);
|
||||
|
||||
useEffect(() => {
|
||||
theme && document.documentElement.setAttribute('data-theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
const handleError = (error: AxiosError | Error): void => {
|
||||
console.error('Error:', error);
|
||||
|
||||
if (error instanceof AxiosError) {
|
||||
try {
|
||||
const reset = formatDistance(
|
||||
new Date(error.response?.headers?.['x-ratelimit-reset'] * 1000),
|
||||
new Date(),
|
||||
{ addSuffix: true },
|
||||
);
|
||||
|
||||
if (typeof error.response?.status === 'number') {
|
||||
switch (error.response.status) {
|
||||
case 403:
|
||||
setError(setTooManyRequestError(reset));
|
||||
break;
|
||||
case 404:
|
||||
setError(INVALID_GITHUB_USERNAME_ERROR);
|
||||
break;
|
||||
default:
|
||||
setError(GENERIC_ERROR);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
setError(GENERIC_ERROR);
|
||||
}
|
||||
} catch (innerError) {
|
||||
setError(GENERIC_ERROR);
|
||||
}
|
||||
} else {
|
||||
setError(GENERIC_ERROR);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<div className="fade-in h-screen">
|
||||
{error ? (
|
||||
<ErrorPage
|
||||
status={error.status}
|
||||
title={error.title}
|
||||
subTitle={error.subTitle}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<HeadTagEditor
|
||||
googleAnalyticsId={sanitizedConfig.googleAnalytics.id}
|
||||
appliedTheme={theme}
|
||||
/>
|
||||
<div className={`p-4 lg:p-10 min-h-full ${BG_COLOR}`}>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 rounded-box">
|
||||
<div className="col-span-1">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{!sanitizedConfig.themeConfig.disableSwitch && (
|
||||
<ThemeChanger
|
||||
theme={theme}
|
||||
setTheme={setTheme}
|
||||
loading={loading}
|
||||
themeConfig={sanitizedConfig.themeConfig}
|
||||
/>
|
||||
)}
|
||||
<AvatarCard
|
||||
profile={profile}
|
||||
loading={loading}
|
||||
avatarRing={sanitizedConfig.themeConfig.displayAvatarRing}
|
||||
resumeFileUrl={sanitizedConfig.resume.fileUrl}
|
||||
/>
|
||||
<DetailsCard
|
||||
profile={profile}
|
||||
loading={loading}
|
||||
github={sanitizedConfig.github}
|
||||
social={sanitizedConfig.social}
|
||||
/>
|
||||
<SkillCard
|
||||
loading={loading}
|
||||
skills={sanitizedConfig.skills}
|
||||
/>
|
||||
<ExperienceCard
|
||||
loading={loading}
|
||||
experiences={sanitizedConfig.experiences}
|
||||
/>
|
||||
<CertificationCard
|
||||
loading={loading}
|
||||
certifications={sanitizedConfig.certifications}
|
||||
/>
|
||||
<EducationCard
|
||||
loading={loading}
|
||||
educations={sanitizedConfig.educations}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-2 col-span-1">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{sanitizedConfig.projects.github.display && (
|
||||
<GithubProjectCard
|
||||
header={sanitizedConfig.projects.github.header}
|
||||
limit={sanitizedConfig.projects.github.automatic.limit}
|
||||
githubProjects={githubProjects}
|
||||
loading={loading}
|
||||
username={sanitizedConfig.github.username}
|
||||
googleAnalyticsId={sanitizedConfig.googleAnalytics.id}
|
||||
/>
|
||||
)}
|
||||
{sanitizedConfig.projects.external.projects.length !==
|
||||
0 && (
|
||||
<ExternalProjectCard
|
||||
loading={loading}
|
||||
header={sanitizedConfig.projects.external.header}
|
||||
externalProjects={
|
||||
sanitizedConfig.projects.external.projects
|
||||
}
|
||||
googleAnalyticId={sanitizedConfig.googleAnalytics.id}
|
||||
/>
|
||||
)}
|
||||
{sanitizedConfig.blog.display && (
|
||||
<BlogCard
|
||||
loading={loading}
|
||||
googleAnalyticsId={sanitizedConfig.googleAnalytics.id}
|
||||
blog={sanitizedConfig.blog}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{sanitizedConfig.footer && (
|
||||
<footer
|
||||
className={`p-4 footer ${BG_COLOR} text-base-content footer-center`}
|
||||
>
|
||||
<div className="card compact bg-base-100 shadow">
|
||||
<Footer content={sanitizedConfig.footer} loading={loading} />
|
||||
</div>
|
||||
</footer>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</HelmetProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default GitProfile;
|
||||
@@ -1,69 +0,0 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isDarkishTheme } from '../../helpers/utils';
|
||||
|
||||
const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
|
||||
return (
|
||||
<Fragment>
|
||||
{profile && (
|
||||
<Helmet>
|
||||
{googleAnalytics?.id && (
|
||||
<script
|
||||
async
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalytics.id}`}
|
||||
></script>
|
||||
)}
|
||||
{googleAnalytics?.id && (
|
||||
<script>
|
||||
{`window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '${googleAnalytics.id}');`}
|
||||
</script>
|
||||
)}
|
||||
<title>Portfolio{profile.name && ` of ${profile.name}`}</title>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content={isDarkishTheme(theme) ? '#000000' : '#ffffff'}
|
||||
/>
|
||||
|
||||
<meta name="description" content={profile.bio} />
|
||||
|
||||
<meta
|
||||
itemProp="name"
|
||||
content={`Portfolio${profile.name && ` of ${profile.name}`}`}
|
||||
/>
|
||||
<meta itemProp="description" content={profile.bio} />
|
||||
<meta itemProp="image" content={profile.avatar} />
|
||||
|
||||
<meta property="og:url" content={social?.website || ''} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`Portfolio${profile.name && ` of ${profile.name}`}`}
|
||||
/>
|
||||
<meta property="og:description" content={profile.bio} />
|
||||
<meta property="og:image" content={profile.avatar} />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`Portfolio${profile.name && ` of ${profile.name}`}`}
|
||||
/>
|
||||
<meta name="twitter:description" content={profile.bio} />
|
||||
<meta name="twitter:image" content={profile.avatar} />
|
||||
</Helmet>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
HeadTagEditor.propTypes = {
|
||||
profile: PropTypes.object,
|
||||
theme: PropTypes.string,
|
||||
googleAnalytics: PropTypes.object.isRequired,
|
||||
social: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default HeadTagEditor;
|
||||
47
src/components/head-tag-editor/index.tsx
Normal file
47
src/components/head-tag-editor/index.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { isDarkishTheme } from '../../utils';
|
||||
|
||||
type HeadTagEditorProps = {
|
||||
googleAnalyticsId?: string;
|
||||
appliedTheme: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the head tag editor component.
|
||||
*
|
||||
* @param {HeadTagEditorProps} googleAnalyticsId - The Google Analytics ID.
|
||||
* @param {HeadTagEditorProps} appliedTheme - The applied theme.
|
||||
* @return {React.ReactElement} The head tag editor component.
|
||||
*/
|
||||
const HeadTagEditor: React.FC<HeadTagEditorProps> = ({
|
||||
googleAnalyticsId,
|
||||
appliedTheme,
|
||||
}) => {
|
||||
return (
|
||||
<Helmet>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content={isDarkishTheme(appliedTheme) ? '#000000' : '#ffffff'}
|
||||
/>
|
||||
{googleAnalyticsId && (
|
||||
<>
|
||||
<script
|
||||
async
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}
|
||||
></script>
|
||||
<script>
|
||||
{`window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '${googleAnalyticsId}');
|
||||
`}
|
||||
</script>
|
||||
</>
|
||||
)}
|
||||
</Helmet>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeadTagEditor;
|
||||
@@ -1,29 +0,0 @@
|
||||
import { useState, Fragment, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const LazyImage = ({ placeholder, src, alt, ...rest }) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const imageToLoad = new Image();
|
||||
imageToLoad.src = src;
|
||||
|
||||
imageToLoad.onload = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
}, [src]);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{loading ? placeholder : <img src={src} alt={alt} {...rest} />}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
LazyImage.propTypes = {
|
||||
placeholder: PropTypes.node,
|
||||
alt: PropTypes.string,
|
||||
src: PropTypes.string,
|
||||
};
|
||||
|
||||
export default LazyImage;
|
||||
38
src/components/lazy-image/index.tsx
Normal file
38
src/components/lazy-image/index.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { useState, Fragment, useEffect } from 'react';
|
||||
|
||||
/**
|
||||
* LazyImage component.
|
||||
*
|
||||
* @param {string} placeholder The placeholder image URL.
|
||||
* @param {string} src The image URL.
|
||||
* @param {string} alt The alt text for the image.
|
||||
* @param {object} rest Additional props for the image element.
|
||||
*
|
||||
* @returns {ReactElement} The LazyImage component.
|
||||
*/
|
||||
const LazyImage: React.FC<{
|
||||
placeholder: React.ReactElement;
|
||||
src: string;
|
||||
alt: string;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
[key: string]: any;
|
||||
}> = ({ placeholder, src, alt, ...rest }): React.ReactElement => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const imageToLoad = new Image();
|
||||
imageToLoad.src = src;
|
||||
|
||||
imageToLoad.onload = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
}, [src]);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{loading ? placeholder : <img src={src} alt={alt} {...rest} />}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default LazyImage;
|
||||
@@ -1,14 +1,19 @@
|
||||
import { skeleton } from '../../helpers/utils';
|
||||
import PropTypes from 'prop-types';
|
||||
import { skeleton } from '../../utils';
|
||||
|
||||
const Skill = ({ loading, skills }) => {
|
||||
const SkillCard = ({
|
||||
loading,
|
||||
skills,
|
||||
}: {
|
||||
loading: boolean;
|
||||
skills: string[];
|
||||
}) => {
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
const array = [];
|
||||
for (let index = 0; index < 12; index++) {
|
||||
array.push(
|
||||
<div key={index}>
|
||||
{skeleton({ width: 'w-16', height: 'h-4', className: 'm-1' })}
|
||||
</div>
|
||||
{skeleton({ widthCls: 'w-16', heightCls: 'h-4', className: 'm-1' })}
|
||||
</div>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -23,7 +28,7 @@ const Skill = ({ loading, skills }) => {
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-32', height: 'h-8' })
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Tech Stack
|
||||
@@ -52,9 +57,4 @@ const Skill = ({ loading, skills }) => {
|
||||
);
|
||||
};
|
||||
|
||||
Skill.propTypes = {
|
||||
loading: PropTypes.bool.isRequired,
|
||||
skills: PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
export default Skill;
|
||||
export default SkillCard;
|
||||
@@ -1,14 +1,40 @@
|
||||
import { AiOutlineControl } from 'react-icons/ai';
|
||||
import { skeleton } from '../../helpers/utils';
|
||||
import PropTypes from 'prop-types';
|
||||
import { SanitizedThemeConfig } from '../../interfaces/sanitized-config';
|
||||
import { LOCAL_STORAGE_KEY_NAME } from '../../constants';
|
||||
import { skeleton } from '../../utils';
|
||||
import { MouseEvent } from 'react';
|
||||
|
||||
const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
|
||||
const changeTheme = (e, selectedTheme) => {
|
||||
/**
|
||||
* Renders a theme changer component.
|
||||
*
|
||||
* @param {Object} props - The props object.
|
||||
* @param {string} props.theme - The current theme.
|
||||
* @param {function} props.setTheme - A function to set the theme.
|
||||
* @param {boolean} props.loading - Whether the component is in a loading state.
|
||||
* @param {SanitizedThemeConfig} props.themeConfig - The theme configuration object.
|
||||
* @return {JSX.Element} The rendered theme changer component.
|
||||
*/
|
||||
const ThemeChanger = ({
|
||||
theme,
|
||||
setTheme,
|
||||
loading,
|
||||
themeConfig,
|
||||
}: {
|
||||
theme: string;
|
||||
setTheme: (theme: string) => void;
|
||||
loading: boolean;
|
||||
themeConfig: SanitizedThemeConfig;
|
||||
}) => {
|
||||
const changeTheme = (
|
||||
e: MouseEvent<HTMLAnchorElement>,
|
||||
selectedTheme: string,
|
||||
) => {
|
||||
e.preventDefault();
|
||||
document.querySelector('html').setAttribute('data-theme', selectedTheme);
|
||||
|
||||
document.querySelector('html')?.setAttribute('data-theme', selectedTheme);
|
||||
|
||||
typeof window !== 'undefined' &&
|
||||
localStorage.setItem('gitprofile-theme', selectedTheme);
|
||||
localStorage.setItem(LOCAL_STORAGE_KEY_NAME, selectedTheme);
|
||||
|
||||
setTheme(selectedTheme);
|
||||
};
|
||||
@@ -19,24 +45,28 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
|
||||
<div className="flex-1">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-20', height: 'h-8', className: 'mb-1' })
|
||||
skeleton({
|
||||
widthCls: 'w-20',
|
||||
heightCls: 'h-8',
|
||||
className: 'mb-1',
|
||||
})
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">Theme</span>
|
||||
)}
|
||||
</h5>
|
||||
<span className="text-base-content text-opacity-40 capitalize text-sm">
|
||||
{loading
|
||||
? skeleton({ width: 'w-16', height: 'h-5' })
|
||||
? skeleton({ widthCls: 'w-16', heightCls: 'h-5' })
|
||||
: theme === themeConfig.defaultTheme
|
||||
? 'Default'
|
||||
: theme}
|
||||
? 'Default'
|
||||
: theme}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
{loading ? (
|
||||
skeleton({
|
||||
width: 'w-14 md:w-28',
|
||||
height: 'h-10',
|
||||
widthCls: 'w-14 md:w-28',
|
||||
heightCls: 'h-10',
|
||||
className: 'mr-6',
|
||||
})
|
||||
) : (
|
||||
@@ -63,11 +93,11 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
|
||||
{[
|
||||
themeConfig.defaultTheme,
|
||||
...themeConfig.themes.filter(
|
||||
(item) => item !== themeConfig.defaultTheme
|
||||
(item) => item !== themeConfig.defaultTheme,
|
||||
),
|
||||
].map((item, index) => (
|
||||
<li key={index}>
|
||||
{/* eslint-disable-next-line */}
|
||||
{}
|
||||
<a
|
||||
onClick={(e) => changeTheme(e, item)}
|
||||
className={`${theme === item ? 'active' : ''}`}
|
||||
@@ -88,11 +118,4 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
|
||||
);
|
||||
};
|
||||
|
||||
ThemeChanger.propTypes = {
|
||||
theme: PropTypes.string,
|
||||
setTheme: PropTypes.func.isRequired,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
themeConfig: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default ThemeChanger;
|
||||
9
src/constants/default-custom-theme.tsx
Normal file
9
src/constants/default-custom-theme.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
export const DEFAULT_CUSTOM_THEME = {
|
||||
primary: '#fc055b',
|
||||
secondary: '#219aaf',
|
||||
accent: '#e8d03a',
|
||||
neutral: '#2A2730',
|
||||
'base-100': '#E3E3ED',
|
||||
'--rounded-box': '3rem',
|
||||
'--rounded-btn': '3rem',
|
||||
};
|
||||
32
src/constants/default-themes.tsx
Normal file
32
src/constants/default-themes.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
export const DEFAULT_THEMES = [
|
||||
'light',
|
||||
'dark',
|
||||
'cupcake',
|
||||
'bumblebee',
|
||||
'emerald',
|
||||
'corporate',
|
||||
'synthwave',
|
||||
'retro',
|
||||
'cyberpunk',
|
||||
'valentine',
|
||||
'halloween',
|
||||
'garden',
|
||||
'forest',
|
||||
'aqua',
|
||||
'lofi',
|
||||
'pastel',
|
||||
'fantasy',
|
||||
'wireframe',
|
||||
'black',
|
||||
'luxury',
|
||||
'dracula',
|
||||
'cmyk',
|
||||
'autumn',
|
||||
'business',
|
||||
'acid',
|
||||
'lemonade',
|
||||
'night',
|
||||
'coffee',
|
||||
'winter',
|
||||
'procyon',
|
||||
];
|
||||
55
src/constants/errors.tsx
Normal file
55
src/constants/errors.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
export interface CustomError {
|
||||
status: number;
|
||||
title: string;
|
||||
subTitle: string | ReactElement;
|
||||
}
|
||||
|
||||
export const INVALID_CONFIG_ERROR: CustomError = {
|
||||
status: 500,
|
||||
title: 'Invalid Config!',
|
||||
subTitle: (
|
||||
<p>
|
||||
Please provide correct config in <code>gitprofile.config.ts</code>.
|
||||
</p>
|
||||
),
|
||||
};
|
||||
|
||||
export const setTooManyRequestError = (resetTime: string): CustomError => {
|
||||
return {
|
||||
status: 429,
|
||||
title: 'Too Many Requests!',
|
||||
subTitle: (
|
||||
<p>
|
||||
Oh no, you hit the{' '}
|
||||
<a
|
||||
href="https://developer.github.com/v3/rate_limit/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
rate limit
|
||||
</a>
|
||||
! Try again later{` ${resetTime}`}.
|
||||
</p>
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
export const INVALID_GITHUB_USERNAME_ERROR: CustomError = {
|
||||
status: 404,
|
||||
title: 'Invalid GitHub Username!',
|
||||
subTitle: (
|
||||
<p>
|
||||
Please provide correct github username in{' '}
|
||||
<code>gitprofile.config.ts</code>.
|
||||
</p>
|
||||
),
|
||||
};
|
||||
|
||||
export const GENERIC_ERROR: CustomError = {
|
||||
status: 500,
|
||||
title: 'Ops!!',
|
||||
subTitle: 'Something went wrong.',
|
||||
};
|
||||
6
src/constants/index.tsx
Normal file
6
src/constants/index.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
export const LOCAL_STORAGE_KEY_NAME = 'gitprofile-theme';
|
||||
|
||||
export const BG_COLOR = 'bg-base-300';
|
||||
|
||||
export const FALLBACK_IMAGE =
|
||||
'data:image/png;base64,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';
|
||||
@@ -1,239 +0,0 @@
|
||||
import colors from '../data/colors.json';
|
||||
import { hotjar } from 'react-hotjar';
|
||||
|
||||
export const getInitialTheme = (themeConfig) => {
|
||||
if (themeConfig.disableSwitch) {
|
||||
return themeConfig.defaultTheme;
|
||||
}
|
||||
|
||||
if (
|
||||
typeof window !== 'undefined' &&
|
||||
!(localStorage.getItem('gitprofile-theme') === null) &&
|
||||
themeConfig.themes.includes(localStorage.getItem('gitprofile-theme'))
|
||||
) {
|
||||
let theme = localStorage.getItem('gitprofile-theme');
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
if (themeConfig.respectPrefersColorScheme && !themeConfig.disableSwitch) {
|
||||
return typeof window !== 'undefined' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: themeConfig.defaultTheme;
|
||||
}
|
||||
|
||||
return themeConfig.defaultTheme;
|
||||
};
|
||||
|
||||
export const skeleton = ({
|
||||
width = null,
|
||||
height = null,
|
||||
style = {},
|
||||
shape = 'rounded-full',
|
||||
className = null,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`bg-base-300 animate-pulse ${shape}${
|
||||
className ? ` ${className}` : ''
|
||||
}${width ? ` ${width}` : ''}${height ? ` ${height}` : ''}`}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const languageColor = (language) => {
|
||||
if (typeof colors[language] !== 'undefined') {
|
||||
return colors[language].color;
|
||||
} else {
|
||||
return 'gray';
|
||||
}
|
||||
};
|
||||
|
||||
export const fallbackImage =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==';
|
||||
|
||||
export const ga = {
|
||||
// initialize google analytic
|
||||
initialize: (id) => {
|
||||
try {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.gtag('js', new Date());
|
||||
window.gtag('config', id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
// log specific events happening
|
||||
event: ({ action, params }) => {
|
||||
try {
|
||||
window?.gtag('event', action, params);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const isDarkishTheme = (theme) => {
|
||||
return ['dark', 'halloween', 'forest', 'black', 'luxury', 'dracula'].includes(
|
||||
theme
|
||||
);
|
||||
};
|
||||
|
||||
export const setupHotjar = (hotjarConfig) => {
|
||||
if (hotjarConfig?.id) {
|
||||
let snippetVersion = hotjarConfig?.snippetVersion || 6;
|
||||
|
||||
hotjar.initialize(hotjarConfig.id, snippetVersion);
|
||||
}
|
||||
};
|
||||
|
||||
export const sanitizeConfig = (config) => {
|
||||
const customTheme = config?.themeConfig?.customTheme || {
|
||||
primary: '#fc055b',
|
||||
secondary: '#219aaf',
|
||||
accent: '#e8d03a',
|
||||
neutral: '#2A2730',
|
||||
'base-100': '#E3E3ED',
|
||||
'--rounded-box': '3rem',
|
||||
'--rounded-btn': '3rem',
|
||||
};
|
||||
|
||||
const themes = config?.themeConfig?.themes || [
|
||||
'light',
|
||||
'dark',
|
||||
'cupcake',
|
||||
'bumblebee',
|
||||
'emerald',
|
||||
'corporate',
|
||||
'synthwave',
|
||||
'retro',
|
||||
'cyberpunk',
|
||||
'valentine',
|
||||
'halloween',
|
||||
'garden',
|
||||
'forest',
|
||||
'aqua',
|
||||
'lofi',
|
||||
'pastel',
|
||||
'fantasy',
|
||||
'wireframe',
|
||||
'black',
|
||||
'luxury',
|
||||
'dracula',
|
||||
'cmyk',
|
||||
'autumn',
|
||||
'business',
|
||||
'acid',
|
||||
'lemonade',
|
||||
'night',
|
||||
'coffee',
|
||||
'winter',
|
||||
'procyon',
|
||||
];
|
||||
|
||||
return {
|
||||
github: {
|
||||
username: config?.github?.username || '',
|
||||
sortBy: config?.github?.sortBy || 'stars',
|
||||
limit: config?.github?.limit || 8,
|
||||
exclude: {
|
||||
forks: config?.github?.exclude?.forks || false,
|
||||
projects: config?.github?.exclude?.projects || [],
|
||||
},
|
||||
},
|
||||
social: {
|
||||
linkedin: config?.social?.linkedin,
|
||||
twitter: config?.social?.twitter,
|
||||
mastodon: config?.social?.mastodon,
|
||||
facebook: config?.social?.facebook,
|
||||
instagram: config?.social?.instagram,
|
||||
youtube: config?.social?.youtube,
|
||||
dribbble: config?.social?.dribbble,
|
||||
behance: config?.social?.behance,
|
||||
medium: config?.social?.medium,
|
||||
dev: config?.social?.dev,
|
||||
stackoverflow: config?.social?.stackoverflow,
|
||||
website: config?.social?.website,
|
||||
phone: config?.social?.phone,
|
||||
email: config?.social?.email,
|
||||
skype: config?.social?.skype,
|
||||
telegram: config?.social?.telegram,
|
||||
},
|
||||
resume: {
|
||||
fileUrl: config?.resume?.fileUrl || '',
|
||||
},
|
||||
skills: config?.skills || [],
|
||||
externalProjects: config?.externalProjects || [],
|
||||
experiences: config?.experiences || [],
|
||||
certifications: config?.certifications || [],
|
||||
education: config?.education || [],
|
||||
blog: {
|
||||
source: config?.blog?.source,
|
||||
username: config?.blog?.username,
|
||||
limit: config?.blog?.limit || 5,
|
||||
},
|
||||
googleAnalytics: {
|
||||
id: config?.googleAnalytics?.id,
|
||||
},
|
||||
hotjar: {
|
||||
id: config?.hotjar?.id,
|
||||
snippetVersion: config?.hotjar?.snippetVersion || 6,
|
||||
},
|
||||
themeConfig: {
|
||||
defaultTheme: config?.themeConfig?.defaultTheme || themes[0],
|
||||
disableSwitch: config?.themeConfig?.disableSwitch || false,
|
||||
respectPrefersColorScheme:
|
||||
config?.themeConfig?.respectPrefersColorScheme || false,
|
||||
hideAvatarRing: config?.themeConfig?.hideAvatarRing || false,
|
||||
themes: themes,
|
||||
customTheme: customTheme,
|
||||
},
|
||||
footer: config?.footer,
|
||||
};
|
||||
};
|
||||
|
||||
export const noConfigError = {
|
||||
status: 500,
|
||||
title: 'No Config is provided.',
|
||||
subTitle: 'Pass the required config as prop.',
|
||||
};
|
||||
|
||||
export const tooManyRequestError = (reset) => {
|
||||
return {
|
||||
status: 429,
|
||||
title: 'Too Many Requests.',
|
||||
subTitle: (
|
||||
<p>
|
||||
Oh no, you hit the{' '}
|
||||
<a
|
||||
href="https://developer.github.com/v3/rate_limit/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
rate limit
|
||||
</a>
|
||||
! Try again later{` ${reset}`}.
|
||||
</p>
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
export const notFoundError = {
|
||||
status: 404,
|
||||
title: 'The Github Username is Incorrect.',
|
||||
subTitle: (
|
||||
<p>
|
||||
Please provide correct github username in{' '}
|
||||
<code>gitprofile.config.js</code>.
|
||||
</p>
|
||||
),
|
||||
};
|
||||
|
||||
export const genericError = {
|
||||
status: 500,
|
||||
title: 'Ops!!',
|
||||
subTitle: 'Something went wrong.',
|
||||
};
|
||||
8
src/interfaces/article.tsx
Normal file
8
src/interfaces/article.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export interface Article {
|
||||
title: string;
|
||||
thumbnail: string;
|
||||
link: string;
|
||||
publishedAt: Date;
|
||||
description: string;
|
||||
categories: string[];
|
||||
}
|
||||
8
src/interfaces/github-project.tsx
Normal file
8
src/interfaces/github-project.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export interface GithubProject {
|
||||
name: string;
|
||||
html_url: string;
|
||||
description: string;
|
||||
stargazers_count: string;
|
||||
forks_count: string;
|
||||
language: string;
|
||||
}
|
||||
7
src/interfaces/profile.tsx
Normal file
7
src/interfaces/profile.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export interface Profile {
|
||||
avatar: string;
|
||||
name: string;
|
||||
bio?: string;
|
||||
location?: string;
|
||||
company?: string;
|
||||
}
|
||||
141
src/interfaces/sanitized-config.tsx
Normal file
141
src/interfaces/sanitized-config.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
export interface SanitizedGithub {
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface SanitizedGitHubProjects {
|
||||
display: boolean;
|
||||
header: string;
|
||||
mode: string;
|
||||
automatic: {
|
||||
sortBy: string;
|
||||
limit: number;
|
||||
exclude: {
|
||||
forks: boolean;
|
||||
projects: Array<string>;
|
||||
};
|
||||
};
|
||||
manual: {
|
||||
projects: Array<string>;
|
||||
};
|
||||
}
|
||||
|
||||
export interface SanitizedExternalProject {
|
||||
title: string;
|
||||
description?: string;
|
||||
imageUrl?: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export interface SanitizedExternalProjects {
|
||||
header: string;
|
||||
projects: SanitizedExternalProject[];
|
||||
}
|
||||
|
||||
export interface SanitizedProjects {
|
||||
github: SanitizedGitHubProjects;
|
||||
external: SanitizedExternalProjects;
|
||||
}
|
||||
|
||||
export interface SanitizedSEO {
|
||||
title?: string;
|
||||
description?: string;
|
||||
imageURL?: string;
|
||||
}
|
||||
|
||||
export interface SanitizedSocial {
|
||||
linkedin?: string;
|
||||
twitter?: string;
|
||||
mastodon?: string;
|
||||
facebook?: string;
|
||||
instagram?: string;
|
||||
youtube?: string;
|
||||
dribbble?: string;
|
||||
behance?: string;
|
||||
medium?: string;
|
||||
dev?: string;
|
||||
stackoverflow?: string;
|
||||
website?: string;
|
||||
skype?: string;
|
||||
telegram?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
}
|
||||
|
||||
export interface SanitizedResume {
|
||||
fileUrl?: string;
|
||||
}
|
||||
|
||||
export interface SanitizedExperience {
|
||||
company?: string;
|
||||
position?: string;
|
||||
from: string;
|
||||
to: string;
|
||||
companyLink?: string;
|
||||
}
|
||||
|
||||
export interface SanitizedCertification {
|
||||
body?: string;
|
||||
name?: string;
|
||||
year?: string;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export interface SanitizedEducation {
|
||||
institution?: string;
|
||||
degree?: string;
|
||||
from: string;
|
||||
to: string;
|
||||
}
|
||||
|
||||
export interface SanitizedGoogleAnalytics {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export interface SanitizedHotjar {
|
||||
id?: string;
|
||||
snippetVersion: number;
|
||||
}
|
||||
|
||||
export interface SanitizedBlog {
|
||||
display: boolean;
|
||||
source: string;
|
||||
username: string;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
export interface SanitizedCustomTheme {
|
||||
primary: string;
|
||||
secondary: string;
|
||||
accent: string;
|
||||
neutral: string;
|
||||
'base-100': string;
|
||||
'--rounded-box': string;
|
||||
'--rounded-btn': string;
|
||||
}
|
||||
|
||||
export interface SanitizedThemeConfig {
|
||||
defaultTheme: string;
|
||||
disableSwitch: boolean;
|
||||
respectPrefersColorScheme: boolean;
|
||||
displayAvatarRing: boolean;
|
||||
themes: Array<string>;
|
||||
customTheme: SanitizedCustomTheme;
|
||||
}
|
||||
|
||||
export interface SanitizedConfig {
|
||||
github: SanitizedGithub;
|
||||
projects: SanitizedProjects;
|
||||
seo: SanitizedSEO;
|
||||
social: SanitizedSocial;
|
||||
resume: SanitizedResume;
|
||||
skills: Array<string>;
|
||||
experiences: Array<SanitizedExperience>;
|
||||
educations: Array<SanitizedEducation>;
|
||||
certifications: Array<SanitizedCertification>;
|
||||
googleAnalytics: SanitizedGoogleAnalytics;
|
||||
hotjar: SanitizedHotjar;
|
||||
blog: SanitizedBlog;
|
||||
themeConfig: SanitizedThemeConfig;
|
||||
footer?: string;
|
||||
enablePWA: boolean;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
9
src/main.tsx
Normal file
9
src/main.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
218
src/utils/index.tsx
Normal file
218
src/utils/index.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import { LOCAL_STORAGE_KEY_NAME } from '../constants';
|
||||
import { DEFAULT_CUSTOM_THEME } from '../constants/default-custom-theme';
|
||||
import { DEFAULT_THEMES } from '../constants/default-themes';
|
||||
import {
|
||||
SanitizedConfig,
|
||||
SanitizedHotjar,
|
||||
SanitizedThemeConfig,
|
||||
} from '../interfaces/sanitized-config';
|
||||
import { hotjar } from 'react-hotjar';
|
||||
import colors from '../data/colors.json';
|
||||
|
||||
export const isDarkishTheme = (appliedTheme: string): boolean => {
|
||||
return ['dark', 'halloween', 'forest', 'black', 'luxury', 'dracula'].includes(
|
||||
appliedTheme,
|
||||
);
|
||||
};
|
||||
|
||||
type EventParams = {
|
||||
[key: string]: string;
|
||||
};
|
||||
|
||||
type Colors = {
|
||||
[key: string]: { color: string | null; url: string };
|
||||
};
|
||||
|
||||
export const getSanitizedConfig = (
|
||||
config: Config,
|
||||
): SanitizedConfig | Record<string, never> => {
|
||||
try {
|
||||
return {
|
||||
github: {
|
||||
username: config.github.username,
|
||||
},
|
||||
projects: {
|
||||
github: {
|
||||
display: config?.projects?.github?.display ?? true,
|
||||
header: config?.projects?.github?.header || 'Github Projects',
|
||||
mode: config?.projects?.github?.mode || 'automatic',
|
||||
automatic: {
|
||||
sortBy: config?.projects?.github?.automatic?.sortBy || 'stars',
|
||||
limit: config?.projects?.github?.automatic?.limit || 8,
|
||||
exclude: {
|
||||
forks:
|
||||
config?.projects?.github?.automatic?.exclude?.forks || false,
|
||||
projects:
|
||||
config?.projects?.github?.automatic?.exclude?.projects || [],
|
||||
},
|
||||
},
|
||||
manual: {
|
||||
projects: config?.projects?.github?.manual?.projects || [],
|
||||
},
|
||||
},
|
||||
external: {
|
||||
header: config?.projects?.external?.header || 'My Projects',
|
||||
projects: config?.projects?.external?.projects || [],
|
||||
},
|
||||
},
|
||||
seo: {
|
||||
title: config?.seo?.title,
|
||||
description: config?.seo?.description,
|
||||
imageURL: config?.seo?.imageURL,
|
||||
},
|
||||
social: {
|
||||
linkedin: config?.social?.linkedin,
|
||||
twitter: config?.social?.twitter,
|
||||
mastodon: config?.social?.mastodon,
|
||||
facebook: config?.social?.facebook,
|
||||
instagram: config?.social?.instagram,
|
||||
youtube: config?.social?.youtube,
|
||||
dribbble: config?.social?.dribbble,
|
||||
behance: config?.social?.behance,
|
||||
medium: config?.social?.medium,
|
||||
dev: config?.social?.dev,
|
||||
stackoverflow: config?.social?.stackoverflow,
|
||||
website: config?.social?.website,
|
||||
phone: config?.social?.phone,
|
||||
email: config?.social?.email,
|
||||
skype: config?.social?.skype,
|
||||
telegram: config?.social?.telegram,
|
||||
},
|
||||
resume: {
|
||||
fileUrl: config?.resume?.fileUrl || '',
|
||||
},
|
||||
skills: config?.skills || [],
|
||||
experiences: config?.experiences || [],
|
||||
certifications: config?.certifications || [],
|
||||
educations: config?.educations || [],
|
||||
googleAnalytics: {
|
||||
id: config?.googleAnalytics?.id,
|
||||
},
|
||||
hotjar: {
|
||||
id: config?.hotjar?.id,
|
||||
snippetVersion: config?.hotjar?.snippetVersion || 6,
|
||||
},
|
||||
blog: {
|
||||
username: config?.blog?.username || '',
|
||||
source: config?.blog?.source || 'dev',
|
||||
limit: config?.blog?.limit || 5,
|
||||
display: !!config?.blog?.username && !!config?.blog?.source,
|
||||
},
|
||||
themeConfig: {
|
||||
defaultTheme: config?.themeConfig?.defaultTheme || DEFAULT_THEMES[0],
|
||||
disableSwitch: config?.themeConfig?.disableSwitch || false,
|
||||
respectPrefersColorScheme:
|
||||
config?.themeConfig?.respectPrefersColorScheme || false,
|
||||
displayAvatarRing: config?.themeConfig?.displayAvatarRing ?? true,
|
||||
themes: config?.themeConfig?.themes || DEFAULT_THEMES,
|
||||
customTheme: {
|
||||
primary:
|
||||
config?.themeConfig?.customTheme?.primary ||
|
||||
DEFAULT_CUSTOM_THEME.primary,
|
||||
secondary:
|
||||
config?.themeConfig?.customTheme?.secondary ||
|
||||
DEFAULT_CUSTOM_THEME.secondary,
|
||||
accent:
|
||||
config?.themeConfig?.customTheme?.accent ||
|
||||
DEFAULT_CUSTOM_THEME.accent,
|
||||
neutral:
|
||||
config?.themeConfig?.customTheme?.neutral ||
|
||||
DEFAULT_CUSTOM_THEME.neutral,
|
||||
'base-100':
|
||||
config?.themeConfig?.customTheme?.['base-100'] ||
|
||||
DEFAULT_CUSTOM_THEME['base-100'],
|
||||
'--rounded-box':
|
||||
config?.themeConfig?.customTheme?.['--rounded-box'] ||
|
||||
DEFAULT_CUSTOM_THEME['--rounded-box'],
|
||||
'--rounded-btn':
|
||||
config?.themeConfig?.customTheme?.['--rounded-btn'] ||
|
||||
DEFAULT_CUSTOM_THEME['--rounded-btn'],
|
||||
},
|
||||
},
|
||||
footer: config?.footer,
|
||||
enablePWA: config?.enablePWA ?? true,
|
||||
};
|
||||
} catch (error) {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
export const getInitialTheme = (themeConfig: SanitizedThemeConfig): string => {
|
||||
if (themeConfig.disableSwitch) {
|
||||
return themeConfig.defaultTheme;
|
||||
}
|
||||
|
||||
if (
|
||||
typeof window !== 'undefined' &&
|
||||
!(localStorage.getItem(LOCAL_STORAGE_KEY_NAME) === null)
|
||||
) {
|
||||
const savedTheme = localStorage.getItem(LOCAL_STORAGE_KEY_NAME);
|
||||
|
||||
if (savedTheme && themeConfig.themes.includes(savedTheme)) {
|
||||
return savedTheme;
|
||||
}
|
||||
}
|
||||
|
||||
if (themeConfig.respectPrefersColorScheme && !themeConfig.disableSwitch) {
|
||||
return typeof window !== 'undefined' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: themeConfig.defaultTheme;
|
||||
}
|
||||
|
||||
return themeConfig.defaultTheme;
|
||||
};
|
||||
|
||||
export const skeleton = ({
|
||||
widthCls = null,
|
||||
heightCls = null,
|
||||
style = {} as React.CSSProperties,
|
||||
shape = 'rounded-full',
|
||||
className = null,
|
||||
}: {
|
||||
widthCls?: string | null;
|
||||
heightCls?: string | null;
|
||||
style?: React.CSSProperties;
|
||||
shape?: string;
|
||||
className?: string | null;
|
||||
}): JSX.Element => {
|
||||
const classNames = ['bg-base-300', 'animate-pulse', shape];
|
||||
if (className) {
|
||||
classNames.push(className);
|
||||
}
|
||||
if (widthCls) {
|
||||
classNames.push(widthCls);
|
||||
}
|
||||
if (heightCls) {
|
||||
classNames.push(heightCls);
|
||||
}
|
||||
|
||||
return <div className={classNames.join(' ')} style={style} />;
|
||||
};
|
||||
|
||||
export const setupHotjar = (hotjarConfig: SanitizedHotjar): void => {
|
||||
if (hotjarConfig?.id) {
|
||||
const snippetVersion = hotjarConfig?.snippetVersion || 6;
|
||||
hotjar.initialize(parseInt(hotjarConfig.id), snippetVersion);
|
||||
}
|
||||
};
|
||||
|
||||
export const ga = {
|
||||
event(action: string, params: EventParams): void {
|
||||
try {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(window as any)?.gtag('event', action, params);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const getLanguageColor = (language: string): string => {
|
||||
const languageColors: Colors = colors;
|
||||
if (typeof languageColors[language] !== 'undefined') {
|
||||
return languageColors[language].color || 'gray';
|
||||
} else {
|
||||
return 'gray';
|
||||
}
|
||||
};
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user