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

Create Blog component

Browse Source
This commit is contained in:
Ariful Alam 2022-03-19 00:52:17 +06:00
parent d47bbe079c
commit a3db9fddb3
1 changed files with 213 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
src/components/blog/index.jsx Normal file
View 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;