Migrate to TypeScript
This commit is contained in:
Ariful Alam
parent
fdf75dabeb
commit
aa4c6928d6
@ -1,4 +1,3 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
@ -12,7 +11,6 @@ dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
|
||||
19
.eslintrc.cjs
Normal file
19
.eslintrc.cjs
Normal file
@ -0,0 +1,19 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true, node: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
29
.eslintrc.js
29
.eslintrc.js
@ -1,29 +0,0 @@
|
||||
// .eslintrc.js
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
},
|
||||
plugins: ['react'],
|
||||
rules: {
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
},
|
||||
};
|
||||
14
.npmignore
14
.npmignore
@ -1,14 +0,0 @@
|
||||
public
|
||||
src
|
||||
.eslintignore
|
||||
.eslintrc.js
|
||||
.prettierignore
|
||||
.prettierrc
|
||||
CODE_OF_CONDUCT.md
|
||||
CONTRIBUTING.md
|
||||
gitprofile.config.js
|
||||
index.html
|
||||
library.config.js
|
||||
tailwind.config.mjs
|
||||
vite.config.js
|
||||
stats.html
|
||||
@ -1,4 +1,3 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
@ -12,7 +11,6 @@ dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
|
||||
@ -1,14 +1,60 @@
|
||||
// gitprofile.config.js
|
||||
// gitprofile.config.ts
|
||||
|
||||
const config = {
|
||||
const CONFIG = {
|
||||
github: {
|
||||
username: 'arifszn', // Your GitHub org/user name. (Required)
|
||||
sortBy: 'stars', // stars | updated
|
||||
limit: 10, // How many projects to display.
|
||||
exclude: {
|
||||
forks: false, // Forked projects will not be displayed if set to true.
|
||||
projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']
|
||||
username: 'arifszn', // Your GitHub org/user name. (This is the only required config)
|
||||
},
|
||||
/**
|
||||
* If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/arifszn, set base to '/'.
|
||||
* If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/,
|
||||
* for example your repository is at https://github.com/arifszn/example, then set base to '/example/'.
|
||||
*/
|
||||
base: '/gitprofile/',
|
||||
projects: {
|
||||
github: {
|
||||
display: true, // Display GitHub projects?
|
||||
header: 'Github Projects',
|
||||
mode: 'automatic', // Mode can be: 'automatic' or 'manual'
|
||||
automatic: {
|
||||
sortBy: 'stars', // Sort projects by 'stars' or 'updated'
|
||||
limit: 8, // How many projects to display.
|
||||
exclude: {
|
||||
forks: false, // Forked projects will not be displayed if set to true.
|
||||
projects: [], // These projects will not be displayed. example: ['arifszn/my-project1', 'arifszn/my-project2']
|
||||
},
|
||||
},
|
||||
manual: {
|
||||
// Properties for manually specifying projects
|
||||
projects: ['arifszn/gitprofile'], // List of repository names to display. example: ['arifszn/my-project1', 'arifszn/my-project2']
|
||||
},
|
||||
},
|
||||
external: {
|
||||
header: 'My Projects',
|
||||
// To hide the `External Projects` section, keep it empty.
|
||||
projects: [
|
||||
{
|
||||
title: 'Project Name',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
|
||||
imageUrl:
|
||||
'https://img.freepik.com/free-vector/illustration-gallery-icon_53876-27002.jpg',
|
||||
link: 'https://example.com',
|
||||
},
|
||||
{
|
||||
title: 'Project Name',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
|
||||
imageUrl:
|
||||
'https://img.freepik.com/free-vector/illustration-gallery-icon_53876-27002.jpg',
|
||||
link: 'https://example.com',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
seo: {
|
||||
title: 'Portfolio of Ariful Alam',
|
||||
description: '',
|
||||
imageURL: '',
|
||||
},
|
||||
social: {
|
||||
linkedin: 'ariful-alam',
|
||||
@ -24,7 +70,7 @@ const config = {
|
||||
stackoverflow: '', // example: '1/jeff-atwood'
|
||||
skype: '',
|
||||
telegram: '',
|
||||
website: 'https://arifszn.com',
|
||||
website: 'https://www.arifszn.com',
|
||||
phone: '',
|
||||
email: 'arifulalamszn@gmail.com',
|
||||
},
|
||||
@ -64,15 +110,15 @@ const config = {
|
||||
companyLink: 'https://example.com',
|
||||
},
|
||||
],
|
||||
/* certifications: [
|
||||
certifications: [
|
||||
{
|
||||
name: 'Lorem ipsum',
|
||||
body: 'Lorem ipsum dolor sit amet',
|
||||
year: 'March 2022',
|
||||
link: 'https://example.com'
|
||||
link: 'https://example.com',
|
||||
},
|
||||
], */
|
||||
education: [
|
||||
],
|
||||
educations: [
|
||||
{
|
||||
institution: 'Institution Name',
|
||||
degree: 'Degree',
|
||||
@ -86,29 +132,11 @@ const config = {
|
||||
to: '2014',
|
||||
},
|
||||
],
|
||||
|
||||
// To hide the `My Projects` section, keep it empty.
|
||||
externalProjects: [
|
||||
{
|
||||
title: 'Project Name',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
|
||||
imageUrl: 'https://via.placeholder.com/250x250',
|
||||
link: 'https://example.com',
|
||||
},
|
||||
{
|
||||
title: 'Project Name',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
|
||||
imageUrl: 'https://via.placeholder.com/250x250',
|
||||
link: 'https://example.com',
|
||||
},
|
||||
],
|
||||
// Display blog posts from your medium or dev account. (Optional)
|
||||
// Display articles from your medium or dev account. (Optional)
|
||||
blog: {
|
||||
source: 'dev', // medium | dev
|
||||
username: 'arifszn', // to hide blog section, keep it empty
|
||||
limit: 2, // How many posts to display. Max is 10.
|
||||
limit: 3, // How many articles to display. Max is 10.
|
||||
},
|
||||
googleAnalytics: {
|
||||
id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
|
||||
@ -129,8 +157,8 @@ const config = {
|
||||
// using user system preferences, instead of the hardcoded defaultTheme
|
||||
respectPrefersColorScheme: false,
|
||||
|
||||
// Hide the ring in Profile picture
|
||||
hideAvatarRing: false,
|
||||
// Display the ring in Profile picture
|
||||
displayAvatarRing: true,
|
||||
|
||||
// Available themes. To remove any theme, exclude from here.
|
||||
themes: [
|
||||
@ -166,7 +194,7 @@ const config = {
|
||||
'procyon',
|
||||
],
|
||||
|
||||
// Custom theme
|
||||
// Custom theme, applied to `procyon` theme
|
||||
customTheme: {
|
||||
primary: '#fc055b',
|
||||
secondary: '#219aaf',
|
||||
@ -184,6 +212,8 @@ const config = {
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>GitProfile</a> and ❤️`,
|
||||
|
||||
enablePWA: true,
|
||||
};
|
||||
|
||||
export default config;
|
||||
export default CONFIG;
|
||||
257
types/index.d.ts → global.d.ts
vendored
257
types/index.d.ts → global.d.ts
vendored
@ -1,36 +1,64 @@
|
||||
// Type definitions for GitProfile
|
||||
// Project https://github.com/arifszn/gitprofile
|
||||
// Author: Ariful Alam <arifulalamszn@gmail.com>
|
||||
|
||||
import { Component } from 'react';
|
||||
|
||||
export interface Github {
|
||||
interface Github {
|
||||
/**
|
||||
* GitHub org/user name
|
||||
*/
|
||||
username: string;
|
||||
}
|
||||
|
||||
interface GitHubProjects {
|
||||
/**
|
||||
* Display GitHub projects?
|
||||
*/
|
||||
display?: boolean;
|
||||
|
||||
/**
|
||||
* stars | updated
|
||||
* Header
|
||||
*/
|
||||
sortBy?: string;
|
||||
header?: string;
|
||||
|
||||
/**
|
||||
* How many projects to display
|
||||
* 'automatic' | 'manual'
|
||||
*/
|
||||
limit?: number;
|
||||
mode?: string;
|
||||
|
||||
/**
|
||||
* Exclude projects option
|
||||
* Config of automatic mode
|
||||
*/
|
||||
exclude?: {
|
||||
automatic?: {
|
||||
/**
|
||||
* Forked projects will not be displayed if set to true
|
||||
* 'stars' | 'updated'
|
||||
*/
|
||||
forks?: boolean;
|
||||
sortBy?: string;
|
||||
|
||||
/**
|
||||
* These projects will not be displayed
|
||||
* How many projects to display
|
||||
*/
|
||||
limit?: number;
|
||||
|
||||
/**
|
||||
* Exclude projects option
|
||||
*/
|
||||
exclude?: {
|
||||
/**
|
||||
* Forked projects will not be displayed if set to true
|
||||
*/
|
||||
forks?: boolean;
|
||||
|
||||
/**
|
||||
* These projects will not be displayed
|
||||
*
|
||||
* example: ['my-project1', 'my-project2']
|
||||
*/
|
||||
projects?: Array<string>;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Config of manual mode
|
||||
*/
|
||||
manual?: {
|
||||
/**
|
||||
* These projects will be displayed
|
||||
*
|
||||
* example: ['my-project1', 'my-project2']
|
||||
*/
|
||||
@ -38,7 +66,47 @@ export interface Github {
|
||||
};
|
||||
}
|
||||
|
||||
export interface Social {
|
||||
interface ExternalProjects {
|
||||
/**
|
||||
* Header
|
||||
*/
|
||||
header?: string;
|
||||
|
||||
/**
|
||||
* Project list
|
||||
*/
|
||||
projects?: {
|
||||
title: string;
|
||||
description?: string;
|
||||
imageUrl?: string;
|
||||
link: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
interface Projects {
|
||||
github?: GitHubProjects;
|
||||
|
||||
external?: ExternalProjects;
|
||||
}
|
||||
|
||||
interface SEO {
|
||||
/**
|
||||
* Meta title
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Meta description
|
||||
*/
|
||||
description?: string;
|
||||
|
||||
/**
|
||||
* Meta image
|
||||
*/
|
||||
imageURL?: string;
|
||||
}
|
||||
|
||||
interface Social {
|
||||
/**
|
||||
* LinkedIn
|
||||
*/
|
||||
@ -120,33 +188,43 @@ export interface Social {
|
||||
email?: string;
|
||||
}
|
||||
|
||||
export interface Blog {
|
||||
interface Resume {
|
||||
/**
|
||||
* medium | dev
|
||||
* Resume file urlm
|
||||
*/
|
||||
source?: string;
|
||||
|
||||
/**
|
||||
* Username
|
||||
*/
|
||||
username?: string;
|
||||
|
||||
/**
|
||||
* How many posts to display
|
||||
*
|
||||
* Max is 10
|
||||
*/
|
||||
limit?: number;
|
||||
fileUrl?: string;
|
||||
}
|
||||
|
||||
export interface GoogleAnalytics {
|
||||
interface Experience {
|
||||
company?: string;
|
||||
position?: string;
|
||||
from: string;
|
||||
to: string;
|
||||
companyLink?: string;
|
||||
}
|
||||
|
||||
interface Certification {
|
||||
body?: string;
|
||||
name?: string;
|
||||
year?: string;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
interface Education {
|
||||
institution?: string;
|
||||
degree?: string;
|
||||
from: string;
|
||||
to: string;
|
||||
}
|
||||
|
||||
interface GoogleAnalytics {
|
||||
/**
|
||||
* GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
|
||||
*/
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export interface Hotjar {
|
||||
interface Hotjar {
|
||||
/**
|
||||
* Hotjar id
|
||||
*/
|
||||
@ -158,7 +236,26 @@ export interface Hotjar {
|
||||
snippetVersion?: number;
|
||||
}
|
||||
|
||||
export interface CustomTheme {
|
||||
interface Blog {
|
||||
/**
|
||||
* medium | dev
|
||||
*/
|
||||
source?: string;
|
||||
|
||||
/**
|
||||
* Username
|
||||
*/
|
||||
username?: string;
|
||||
|
||||
/**
|
||||
* How many articles to display
|
||||
*
|
||||
* Max is 10
|
||||
*/
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
interface CustomTheme {
|
||||
/**
|
||||
* Primary color
|
||||
*/
|
||||
@ -195,7 +292,7 @@ export interface CustomTheme {
|
||||
'--rounded-btn'?: string;
|
||||
}
|
||||
|
||||
export interface ThemeConfig {
|
||||
interface ThemeConfig {
|
||||
/**
|
||||
* Default theme
|
||||
*/
|
||||
@ -214,7 +311,7 @@ export interface ThemeConfig {
|
||||
/**
|
||||
* Hide the ring in Profile picture
|
||||
*/
|
||||
hideAvatarRing?: boolean;
|
||||
displayAvatarRing?: boolean;
|
||||
|
||||
/**
|
||||
* Available themes
|
||||
@ -227,54 +324,34 @@ export interface ThemeConfig {
|
||||
customTheme?: CustomTheme;
|
||||
}
|
||||
|
||||
export interface Experience {
|
||||
company?: string;
|
||||
position?: string;
|
||||
from?: string;
|
||||
to?: string;
|
||||
companyLink?: string;
|
||||
}
|
||||
export interface Certifications {
|
||||
body?: string;
|
||||
name?: string;
|
||||
year?: string;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export interface ExternalProjects {
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl?: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export interface Education {
|
||||
institution?: string;
|
||||
degree?: string;
|
||||
from?: string;
|
||||
to?: string;
|
||||
}
|
||||
|
||||
export interface Resume {
|
||||
fileUrl?: string;
|
||||
}
|
||||
|
||||
export interface Config {
|
||||
interface Config {
|
||||
/**
|
||||
* GitHub Config
|
||||
* GitHub config
|
||||
*/
|
||||
github: Github;
|
||||
|
||||
/**
|
||||
* If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/arifszn, set base to '/'.
|
||||
* If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/,
|
||||
* for example your repository is at https://github.com/arifszn/example, then set base to '/example/'.
|
||||
*/
|
||||
base?: string;
|
||||
|
||||
/**
|
||||
* Projects config
|
||||
*/
|
||||
projects?: Projects;
|
||||
|
||||
/**
|
||||
* SEO config
|
||||
*/
|
||||
seo?: SEO;
|
||||
|
||||
/**
|
||||
* Social links
|
||||
*/
|
||||
social?: Social;
|
||||
|
||||
/**
|
||||
* Resume
|
||||
*/
|
||||
resume?: Resume;
|
||||
|
||||
/**
|
||||
* Skill list
|
||||
*/
|
||||
@ -285,25 +362,20 @@ export interface Config {
|
||||
*/
|
||||
experiences?: Array<Experience>;
|
||||
|
||||
/**
|
||||
* External Projects
|
||||
*/
|
||||
externalProjects?: Array<ExternalProjects>;
|
||||
|
||||
/**
|
||||
* Certifications list
|
||||
*/
|
||||
certifications?: Array<Certifications>;
|
||||
certifications?: Array<Certification>;
|
||||
|
||||
/**
|
||||
* Education list
|
||||
*/
|
||||
education?: Array<Education>;
|
||||
educations?: Array<Education>;
|
||||
|
||||
/**
|
||||
* Blog config
|
||||
* Resume
|
||||
*/
|
||||
blog?: Blog;
|
||||
resume?: Resume;
|
||||
|
||||
/**
|
||||
* Google Analytics config
|
||||
@ -315,6 +387,11 @@ export interface Config {
|
||||
*/
|
||||
hotjar?: Hotjar;
|
||||
|
||||
/**
|
||||
* Blog config
|
||||
*/
|
||||
blog?: Blog;
|
||||
|
||||
/**
|
||||
* Theme config
|
||||
*/
|
||||
@ -324,15 +401,11 @@ export interface Config {
|
||||
* Custom footer
|
||||
*/
|
||||
footer?: string;
|
||||
}
|
||||
|
||||
export interface GitProfileProps {
|
||||
/**
|
||||
* Config values
|
||||
* Enable PWA
|
||||
*/
|
||||
config: Config;
|
||||
enablePWA?: boolean;
|
||||
}
|
||||
|
||||
declare class GitProfile extends Component<GitProfileProps> {}
|
||||
|
||||
export default GitProfile;
|
||||
declare const CONFIG: Config;
|
||||
24
index.html
24
index.html
@ -1,15 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Portfolio</title>
|
||||
<title><%- metaTitle %></title>
|
||||
|
||||
<meta property="title" content="<%- metaTitle %>" />
|
||||
<meta name="description" content="<%- metaDescription %>" />
|
||||
|
||||
<meta itemprop="name" content="<%- metaTitle %>" />
|
||||
<meta itemprop="description" content="<%- metaDescription %>" />
|
||||
<meta itemprop="image" content="<%- metaImageURL %>" />
|
||||
|
||||
<meta property="og:title" content="<%- metaTitle %>" />
|
||||
<meta property="og:description" content="<%- metaDescription %>" />
|
||||
<meta property="og:image" content="<%- metaImageURL %>" />
|
||||
<meta property="og:image:secure_url" content="<%- metaImageURL %>" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="<%- metaTitle %>" />
|
||||
<meta name="twitter:description" content="<%- metaDescription %>" />
|
||||
<meta name="twitter:image" content="<%- metaImageURL %>" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import tailwind from 'tailwindcss';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import tailwindConfig from './tailwind.config.mjs';
|
||||
import path from 'path';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwind(tailwindConfig), autoprefixer],
|
||||
},
|
||||
},
|
||||
build: {
|
||||
lib: {
|
||||
entry: path.resolve(__dirname, 'src/components/GitProfile.jsx'),
|
||||
name: 'GitProfile',
|
||||
fileName: (format) => `gitprofile.${format}.js`,
|
||||
},
|
||||
rollupOptions: {
|
||||
external: ['react', 'react-dom'],
|
||||
output: {
|
||||
globals: {
|
||||
react: 'React',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
3943
package-lock.json
generated
3943
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
74
package.json
74
package.json
@ -1,7 +1,8 @@
|
||||
{
|
||||
"name": "@arifszn/gitprofile",
|
||||
"description": "Create an automatic portfolio based on GitHub profile",
|
||||
"version": "2.6.0",
|
||||
"version": "3.0.0",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"author": "arifszn",
|
||||
"repository": {
|
||||
@ -11,56 +12,45 @@
|
||||
"bugs": {
|
||||
"url": "https://github.com/arifszn/gitprofile/issues"
|
||||
},
|
||||
"files": [
|
||||
"dist/gitprofile.es.js",
|
||||
"dist/gitprofile.umd.js",
|
||||
"dist/style.css",
|
||||
"types"
|
||||
],
|
||||
"main": "./dist/gitprofile.umd.js",
|
||||
"module": "./dist/gitprofile.es.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/gitprofile.es.js",
|
||||
"require": "./dist/gitprofile.umd.js"
|
||||
},
|
||||
"./dist/style.css": "./dist/style.css"
|
||||
},
|
||||
"typings": "./types/index.d.ts",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"build:library": "vite build --config library.config.js",
|
||||
"lint": "eslint --ext .js,.jsx .",
|
||||
"lint:fix": "eslint --ext .js,.jsx --fix .",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"prettier": "prettier --check \"./**/*.{js,jsx,ts,tsx,css,md,json}\"",
|
||||
"prettier:fix": "prettier --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\""
|
||||
"prettier:fix": "prettier --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\"",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@arifszn/blog-js": "^2.0.4",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"autoprefixer": "^10.4.4",
|
||||
"axios": "^1.1.3",
|
||||
"daisyui": "^3.0.3",
|
||||
"date-fns": "^2.28.0",
|
||||
"eslint": "^8.11.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
"postcss": "^8.4.12",
|
||||
"prettier": "^2.6.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-helmet-async": "^1.2.3",
|
||||
"react-hotjar": "^6.1.0",
|
||||
"react-icons": "^4.3.1",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"vite": "^4.0.3",
|
||||
"vite-plugin-pwa": "^0.16.3"
|
||||
"@arifszn/blog-js": "^2.0.5",
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
||||
"@typescript-eslint/parser": "^6.14.0",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"axios": "^1.6.5",
|
||||
"daisyui": "^4.6.0",
|
||||
"date-fns": "^3.2.0",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.1.3",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.5",
|
||||
"postcss": "^8.4.33",
|
||||
"prettier": "^3.2.4",
|
||||
"react-helmet-async": "^2.0.4",
|
||||
"react-hotjar": "^6.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.8",
|
||||
"vite-plugin-html": "^3.2.2",
|
||||
"vite-plugin-pwa": "^0.17.4"
|
||||
},
|
||||
"keywords": [
|
||||
"git-profile",
|
||||
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
{
|
||||
"short_name": "GitProfile",
|
||||
"name": "Personal Portfolio",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#7a44ee",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@ -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" />
|
||||
17
tailwind.config.js
Normal file
17
tailwind.config.js
Normal file
@ -0,0 +1,17 @@
|
||||
import CONFIG from './gitprofile.config';
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require('daisyui')],
|
||||
daisyui: {
|
||||
logs: false,
|
||||
themes: [
|
||||
...CONFIG.themeConfig.themes,
|
||||
{ procyon: CONFIG.themeConfig.customTheme },
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
import config from './gitprofile.config';
|
||||
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require('daisyui')],
|
||||
daisyui: {
|
||||
logs: false,
|
||||
themes: [
|
||||
...config.themeConfig.themes,
|
||||
{ procyon: config.themeConfig.customTheme },
|
||||
],
|
||||
},
|
||||
};
|
||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
},
|
||||
"include": ["src", "global.d.ts"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }],
|
||||
}
|
||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["gitprofile.config.ts", "vite.config.ts"]
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import tailwind from 'tailwindcss';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import tailwindConfig from './tailwind.config.mjs';
|
||||
import { VitePWA } from 'vite-plugin-pwa';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
// If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/<USERNAME>, set base to '/'.
|
||||
|
||||
// If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/, for example your repository is at https://github.com/<USERNAME>/<REPO_NAME>, then set base to '/<REPO_NAME>/'.
|
||||
|
||||
base: '/gitprofile/',
|
||||
plugins: [
|
||||
react(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
workbox: {
|
||||
navigateFallback: undefined,
|
||||
},
|
||||
includeAssets: ['logo.png'],
|
||||
manifest: {
|
||||
name: 'Portfolio',
|
||||
short_name: 'Portfolio',
|
||||
description: 'Personal Portfolio',
|
||||
icons: [
|
||||
{
|
||||
src: 'logo.png',
|
||||
sizes: '64x64 32x32 24x24 16x16 192x192 512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwind(tailwindConfig), autoprefixer],
|
||||
},
|
||||
},
|
||||
});
|
||||
48
vite.config.ts
Normal file
48
vite.config.ts
Normal file
@ -0,0 +1,48 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { VitePWA } from 'vite-plugin-pwa';
|
||||
import CONFIG from './gitprofile.config';
|
||||
import { createHtmlPlugin } from 'vite-plugin-html';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: CONFIG.base || '/',
|
||||
plugins: [
|
||||
react(),
|
||||
createHtmlPlugin({
|
||||
inject: {
|
||||
data: {
|
||||
metaTitle: CONFIG.seo.title,
|
||||
metaDescription: CONFIG.seo.description,
|
||||
metaImageURL: CONFIG.seo.imageURL,
|
||||
},
|
||||
},
|
||||
}),
|
||||
...(CONFIG.enablePWA
|
||||
? [
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
workbox: {
|
||||
navigateFallback: undefined,
|
||||
},
|
||||
includeAssets: ['logo.png'],
|
||||
manifest: {
|
||||
name: 'Portfolio',
|
||||
short_name: 'Portfolio',
|
||||
description: 'Personal Portfolio',
|
||||
icons: [
|
||||
{
|
||||
src: 'logo.png',
|
||||
sizes: '64x64 32x32 24x24 16x16 192x192 512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
]
|
||||
: []),
|
||||
],
|
||||
define: {
|
||||
CONFIG: CONFIG,
|
||||
},
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user