ilia/profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/csarnataro/gitprofile into add-skype-and-telegram-to-social-links

Browse Source
This commit is contained in:
Christian Sarnataro 2023-02-15 09:59:51 +01:00
commit 1b4a87b16f
11 changed files with 396 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
README.md
View File

@ -213,13 +213,14 @@ const config = {
social: {
linkedin: '',
twitter: '',
mastodon: '',
facebook: '',
instagram: '',
dribbble: '',
behance: '',
medium: '',
dev: '',
stackoverflow: '',
stackoverflow: '', // format: userid/username
website: '',
skype: '',
telegram: '',
@ -358,6 +359,9 @@ const config = {
'--rounded-btn': '3rem',
},
},
// Optional Footer. Supports plain text or HTML.
footer: `Copyright © 2023 John Doe`,
};
```
@ -369,7 +373,7 @@ The default theme can be specified.
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
themeConfig: {
defaultTheme: 'light',
@ -386,7 +390,7 @@ You can create your own custom theme by modifying these values. Theme `procyon`
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
themeConfig: {
customTheme: {
@ -409,7 +413,7 @@ module.exports = {
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
googleAnalytics: {
id: '',
@ -425,7 +429,7 @@ Besides tracking visitors, it will track `click events` on projects and blog pos
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
hotjar: {
id: '',
@ -444,15 +448,16 @@ Your avatar and bio will be fetched from GitHub automatically.
### Social Links
You can link your social media services you're using, including LinkedIn, Twitter, Facebook, Instagram, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
social: {
linkedin: 'ariful-alam',
twitter: 'arif_szn',
mastodon: '',
facebook: '',
instagram: '',
dribbble: '',
@ -475,7 +480,7 @@ To showcase your skills provide them here.
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
skills: ['JavaScript', 'React.js'],
};
@ -489,7 +494,7 @@ Provide your job history in `experiences`.
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
experiences: [
{
@ -518,7 +523,7 @@ Provide your education history in `education`.
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
education: [
{
@ -545,7 +550,7 @@ Provide your industry certifications in `certifications`.
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
certifications: [
{
@ -568,7 +573,7 @@ Your public repo from GitHub will be displayed in the `Github Projects` section
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
github: {
username: 'arifszn',
@ -588,7 +593,7 @@ In this section you can showcase your external/personal projects.
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
externalProjects: [
{
@ -607,7 +612,7 @@ If you have [medium](https://medium.com) or [dev](https://dev.to) account, you c
```js
// gitprofile.config.js
module.exports = {
const config = {
// ...
blog: {
source: 'dev',

11
gitprofile.config.js
View File

@ -13,6 +13,7 @@ const config = {
social: {
linkedin: 'ariful-alam',
twitter: 'arif_szn',
mastodon: '',
facebook: '',
instagram: '',
dribbble: '',
@ -102,7 +103,6 @@ const config = {
link: 'https://example.com',
},
],
// Display blog posts from your medium or dev account. (Optional)
blog: {
source: 'dev', // medium | dev
@ -118,7 +118,7 @@ const config = {
snippetVersion: 6,
},
themeConfig: {
defaultTheme: 'business',
defaultTheme: 'winter',
// Hides the switch in the navbar
// Useful if you want to support a single color mode
@ -176,6 +176,13 @@ const config = {
'--rounded-btn': '3rem',
},
},
// Optional Footer. Supports plain text or HTML.
footer: `Made with <a
class="text-primary" href="https://github.com/arifszn/gitprofile"
target="_blank"
rel="noreferrer"
>GitProfile</a> and ❤️`,
};
export default config;

562
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
src/components/GitProfile.jsx
View File

@ -11,6 +11,7 @@ import Certification from './certification';
import Education from './education';
import Project from './project';
import Blog from './blog';
import Footer from './footer';
import {
genericError,
getInitialTheme,
@ -19,7 +20,6 @@ import {
setupHotjar,
tooManyRequestError,
sanitizeConfig,
skeleton,
} from '../helpers/utils';
import { HelmetProvider } from 'react-helmet-async';
import PropTypes from 'prop-types';
@ -221,24 +221,7 @@ const GitProfile = ({ config }) => {
className={`p-4 footer ${bgColor} text-base-content footer-center`}
>
<div className="card compact bg-base-100 shadow">
<a
className="card-body"
href="https://github.com/arifszn/gitprofile"
target="_blank"
rel="noreferrer"
>
<div>
{loading ? (
skeleton({ width: 'w-52', height: 'h-6' })
) : (
<p className="font-mono text-sm">
Made with{' '}
<span className="text-primary">GitProfile</span> and
❤️
</p>
)}
</div>
</a>
<Footer content={sanitizedConfig.footer} loading={loading} />
</div>
</footer>
</Fragment>
@ -263,6 +246,7 @@ GitProfile.propTypes = {
social: PropTypes.shape({
linkedin: PropTypes.string,
twitter: PropTypes.string,
mastodon: PropTypes.string,
facebook: PropTypes.string,
instagram: PropTypes.string,
dribbble: PropTypes.string,
@ -274,6 +258,9 @@ GitProfile.propTypes = {
phone: PropTypes.string,
email: PropTypes.string,
}),
resume: PropTypes.shape({
fileUrl: PropTypes.string,
}),
skills: PropTypes.array,
externalProjects: PropTypes.arrayOf(
PropTypes.shape({
@ -335,6 +322,7 @@ GitProfile.propTypes = {
'--rounded-btn': PropTypes.string,
}),
}),
footer: PropTypes.string,
}).isRequired,
};

2
src/components/blog/index.jsx
View File

@ -183,7 +183,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
<div
className={`card compact bg-base-100 ${
loading || (articles && articles.length)
? 'card compact shadow bg-opacity-40'
? 'shadow bg-opacity-40'
: 'shadow-lg'
}`}
>

54
src/components/details/index.jsx
View File

@ -16,12 +16,39 @@ import {
FaFacebook,
FaGlobe,
FaSkype,
FaMastodon,
FaStackOverflow,
FaTelegram,
} from 'react-icons/fa';
import PropTypes from 'prop-types';
import { skeleton } from '../../helpers/utils';
const isCompanyMention = (company) => {
return company.startsWith('@') && !company.includes(' ');
};
const companyLink = (company) => {
return `https://github.com/${company.substring(1)}`;
};
const getMastodonValue = (mastodonURL) => {
const regex = /(https?:\/\/)?(www\.)?([^\s/]+)\/@(\w+)/;
const match = mastodonURL.match(regex);
if (match) {
const domain = match[3];
const username = match[4];
return `${domain}/@${username}`;
}
return mastodonURL;
};
const getMastodonLink = (mastodonURL) => {
return mastodonURL.replace(/^(https?:\/\/)?(www\.)?/, 'https://');
};
const ListItem = ({ icon, title, value, link, skeleton = false }) => {
return (
<a
@ -36,27 +63,16 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
className={`${
skeleton ? 'flex-grow' : ''
} text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
style={{
wordBreak: 'break-word',
}}
>
<div
style={{
wordBreak: 'break-word',
}}
>
{value}
</div>
{value}
</div>
</a>
);
};
const isCompanyMention = (company) => {
return company.startsWith('@') && !company.includes(' ');
};
const companyLink = (company) => {
return `https://github.com/${company.substring(1)}`;
};
const Details = ({ profile, loading, social, github }) => {
const renderSkeleton = () => {
let array = [];
@ -116,6 +132,14 @@ const Details = ({ profile, loading, social, github }) => {
link={`https://twitter.com/${social.twitter}`}
/>
)}
{social?.mastodon && (
<ListItem
icon={<FaMastodon className="mr-2" />}
title="Mastodon:"
value={getMastodonValue(social.mastodon)}
link={getMastodonLink(social.mastodon)}
/>
)}
{social?.linkedin && (
<ListItem
icon={<GrLinkedinOption className="mr-2" />}

2
src/components/external-project/index.jsx
View File

@ -134,7 +134,7 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
<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-gradient-to-br to-base-200 from-base-100 shadow">
<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">

24
src/components/footer/index.jsx Normal file
View File

@ -0,0 +1,24 @@
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;

4
src/components/project/index.jsx
View File

@ -96,7 +96,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
{item.description}
</p>
</div>
<div className="flex justify-between text-sm text-base-content text-opacity-60">
<div className="flex justify-between text-sm text-base-content text-opacity-60 truncate">
<div className="flex flex-grow">
<span className="mr-3 flex items-center">
<AiOutlineStar className="mr-0.5" />
@ -146,7 +146,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
href={`https://github.com/${github.username}?tab=repositories`}
target="_blank"
rel="noreferrer"
className="text-base-content opacity-50"
className="text-base-content opacity-50 hover:underline"
>
See All
</a>

4
src/helpers/utils.jsx
View File

@ -147,6 +147,7 @@ export const sanitizeConfig = (config) => {
social: {
linkedin: config?.social?.linkedin,
twitter: config?.social?.twitter,
mastodon: config?.social?.mastodon,
facebook: config?.social?.facebook,
instagram: config?.social?.instagram,
dribbble: config?.social?.dribbble,
@ -189,6 +190,7 @@ export const sanitizeConfig = (config) => {
themes: themes,
customTheme: customTheme,
},
footer: config?.footer,
};
};
@ -210,7 +212,7 @@ export const tooManyRequestError = (reset) => {
target="_blank"
rel="noopener noreferrer"
>
rate limit.
rate limit
</a>
! Try again later{` ${reset}`}.
</p>

10
types/index.d.ts vendored
View File

@ -49,6 +49,11 @@ export interface Social {
*/
twitter?: string;
/**
* Mastodon
*/
mastodon?: string;
/**
* Facebook
*/
@ -299,6 +304,11 @@ export interface Config {
* Theme config
*/
themeConfig?: ThemeConfig;
/**
* Custom footer
*/
footer?: string;
}
export interface GitProfileProps {