- {
+
+
+
+
+ { loading ? ( skeleton({ width: 'w-48', height: 'h-8' }) - ) : profile.name + ) : {profile.name} } -
{
loading ? (
diff --git a/src/components/Blog.js b/src/components/Blog.js
index 8554cc4..99d9ee4 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -1,24 +1,163 @@
-import { useSelector } from "react-redux";
+import { getDevtoArticle, getMediumArticle } from "article-api";
+import moment from "moment";
+import { Fragment, memo, useEffect, useState } from "react";
+import { CgHashtag } from 'react-icons/cg';
+import config from "../config";
import { skeleton } from "../helpers/utils";
-const { Fragment } = require("react")
-
const Blog = () => {
- const loading = useSelector(state => state.loading);
+ const [articles, setArticles] = useState(null);
+
+ useEffect(() => {
+ if (
+ typeof config.blog !== 'undefined' &&
+ typeof config.blog.source !== 'undefined' &&
+ typeof config.blog.username !== 'undefined' &&
+ config.blog.source &&
+ config.blog.username
+ ) {
+ 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);
+ });
+ }
+ }
+ }, [])
return (
-
-
-
-
-
+
+ {/* - {loading ? skeleton({width: 'w-20', height: 'h-8'}) : 'Blog'} -
+ <> +
+
-
+
+
+
+
+
+
+ -
+
-
+ ++
+ {!articles ? skeleton({width: 'w-28', height: 'h-8'}) : 'Recent Posts'} +
+ { + !articles ? skeleton({width: 'w-8', height: 'h-8'}) : ( + + ) + } +
+
+
*/}
+
)
}
-export default Blog;
\ No newline at end of file
+export default memo(Blog);
\ No newline at end of file
diff --git a/src/components/Project.js b/src/components/Project.js
index 7044d5d..287601b 100644
--- a/src/components/Project.js
+++ b/src/components/Project.js
@@ -95,8 +95,8 @@ const Project = () => {
+
+
+
+
+
+
+ + Recent Posts +
+ +
+ {
+ articles && articles.slice(0, 5).map((article, index) => (
+
+ ))
+ }
+
+
- {/*
-
+
+
-
*/}
+ - @@ -116,7 +116,7 @@ const Project = () => {
{(loading || !repo) ? renderSkeleton() : renderProjects()}
diff --git a/src/config.js b/src/config.js
index a69466f..a20c84f 100644
--- a/src/config.js
+++ b/src/config.js
@@ -3,6 +3,10 @@ module.exports = {
email: 'contact@arifszn.com', // optional
linkedinUsername: 'ariful-alam', // optional
dribbbleUsername: '', // optional
+ blog: {
+ source: 'dev.to', // medium | dev.to
+ username: 'arifszn',
+ },
skills: [
'PHP',
'Laravel',