mirror of
https://github.com/NohamR/gitprofile.git
synced 2026-05-25 04:17:13 +00:00
Create Blog component
This commit is contained in:
Ariful Alam
213
src/components/blog/index.jsx
Normal file
213
src/components/blog/index.jsx
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
import { getDevtoArticle, getMediumArticle } from 'article-api';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { Fragment, useContext, useEffect, useState } from 'react';
|
||||||
|
import { CgHashtag } from 'react-icons/cg';
|
||||||
|
import { LoadingContext } from '../../contexts/LoadingContext';
|
||||||
|
import config from '../../ezprofile.config';
|
||||||
|
import { ga, skeleton } from '../../helpers/utils';
|
||||||
|
import LazyImage from '../lazy-image';
|
||||||
|
|
||||||
|
const displaySection = () => {
|
||||||
|
if (
|
||||||
|
typeof config.blog !== 'undefined' &&
|
||||||
|
typeof config.blog.source !== 'undefined' &&
|
||||||
|
typeof config.blog.username !== 'undefined' &&
|
||||||
|
config.blog.source &&
|
||||||
|
config.blog.username
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const Blog = () => {
|
||||||
|
const [articles, setArticles] = useState(null);
|
||||||
|
const [loading] = useContext(LoadingContext);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (displaySection()) {
|
||||||
|
if (config.blog.source === 'medium') {
|
||||||
|
getMediumArticle({
|
||||||
|
user: config.blog.username,
|
||||||
|
}).then((res) => {
|
||||||
|
setArticles(res);
|
||||||
|
});
|
||||||
|
} else if (config.blog.source === 'dev.to') {
|
||||||
|
getDevtoArticle({
|
||||||
|
user: config.blog.username,
|
||||||
|
}).then((res) => {
|
||||||
|
setArticles(res);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const renderSkeleton = () => {
|
||||||
|
let array = [];
|
||||||
|
for (let index = 0; index < config.blog.limit; index++) {
|
||||||
|
array.push(
|
||||||
|
<div className="card shadow-lg compact bg-base-100" key={index}>
|
||||||
|
<div className="p-8 h-full w-full">
|
||||||
|
<div className="flex items-center flex-col md:flex-row">
|
||||||
|
<div className="avatar mb-5 md:mb-0">
|
||||||
|
<div className="w-24 h-24 mask mask-squircle">
|
||||||
|
{skeleton({
|
||||||
|
width: 'w-full',
|
||||||
|
height: 'h-full',
|
||||||
|
shape: '',
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="flex items-start px-4">
|
||||||
|
<div className="w-full">
|
||||||
|
<h2>
|
||||||
|
{skeleton({
|
||||||
|
width: 'w-full',
|
||||||
|
height: 'h-8',
|
||||||
|
className: 'mb-2 mx-auto md:mx-0',
|
||||||
|
})}
|
||||||
|
</h2>
|
||||||
|
{skeleton({
|
||||||
|
width: 'w-24',
|
||||||
|
height: 'h-3',
|
||||||
|
className: 'mx-auto md:mx-0',
|
||||||
|
})}
|
||||||
|
<div className="mt-3">
|
||||||
|
{skeleton({
|
||||||
|
width: 'w-full',
|
||||||
|
height: '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',
|
||||||
|
className: 'md:mr-2 mx-auto md:mx-0',
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return array;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderArticles = () => {
|
||||||
|
return (
|
||||||
|
articles &&
|
||||||
|
articles.slice(0, config.blog.limit).map((article, index) => (
|
||||||
|
<div
|
||||||
|
className="card shadow-lg compact bg-base-100 cursor-pointer"
|
||||||
|
key={index}
|
||||||
|
onClick={() => {
|
||||||
|
try {
|
||||||
|
if (config.googleAnalytics?.id) {
|
||||||
|
ga.event({
|
||||||
|
action: 'Click Blog Post',
|
||||||
|
params: {
|
||||||
|
post: article.title,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.open(article.link, '_blank');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="p-8 h-full w-full">
|
||||||
|
<div className="flex items-center flex-col md:flex-row">
|
||||||
|
<div className="avatar mb-5 md:mb-0 opacity-90">
|
||||||
|
<div className="w-24 h-24 mask mask-squircle">
|
||||||
|
<LazyImage
|
||||||
|
src={article.thumbnail}
|
||||||
|
alt={'thumbnail'}
|
||||||
|
placeholder={skeleton({
|
||||||
|
width: 'w-full',
|
||||||
|
height: 'h-full',
|
||||||
|
shape: '',
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="flex items-start px-4">
|
||||||
|
<div className="text-center md:text-left w-full">
|
||||||
|
<h2 className="font-semibold text-base-content opacity-60">
|
||||||
|
{article.title}
|
||||||
|
</h2>
|
||||||
|
<p className="opacity-50 text-xs">
|
||||||
|
{moment(article.publishedAt).fromNow()}
|
||||||
|
</p>
|
||||||
|
<p className="mt-3 text-base-content text-opacity-60 text-sm">
|
||||||
|
{article.description}
|
||||||
|
</p>
|
||||||
|
<div className="mt-4 flex items-center flex-wrap justify-center md:justify-start">
|
||||||
|
{article.categories.map((category, index2) => (
|
||||||
|
<div
|
||||||
|
key={index2}
|
||||||
|
className="flex text-sm mr-3 items-center opacity-50 font-bold font-mono"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<CgHashtag />
|
||||||
|
</span>
|
||||||
|
<span>{category}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
{displaySection() && (
|
||||||
|
<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-sm">
|
||||||
|
<div className="card-body">
|
||||||
|
<ul className="menu row-span-3 bg-base-100 text-base-content">
|
||||||
|
<li>
|
||||||
|
<div className="pb-0-important mx-4 flex items-center justify-between">
|
||||||
|
<h5 className="card-title">
|
||||||
|
{loading || !articles ? (
|
||||||
|
skeleton({ width: 'w-28', height: 'h-8' })
|
||||||
|
) : (
|
||||||
|
<span className="opacity-70">Recent Posts</span>
|
||||||
|
)}
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<div className="grid grid-cols-1 gap-6">
|
||||||
|
{loading || !articles ? renderSkeleton() : renderArticles()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Blog;
|
||||||
Reference in New Issue
Block a user