Merge pull request #59 from arifszn/update-dependencies

feat: use `blog-js` for fetching blog posts

README.md

@@ -44,6 +44,8 @@ What if you could create your portfolio in 5 minutes just by providing your GitH
 
 To view a live example, **[click here](https://arifszn.github.io/gitprofile)**.
 
+Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
+
 ![Preview](https://arifszn.github.io/assets/img/hosted/gitprofile/preview.png)
 
 ## 🛠 Installation & Set Up
@@ -142,7 +144,7 @@ const config = {
     dribbble: '',
     behance: '',
     medium: '',
-    devto: '',
+    dev: '',
     website: '',
     phone: '',
     email: '',
@@ -176,9 +178,9 @@ const config = {
       to: '2014',
     },
   ],
-  // Display blog posts from your medium or dev.to account. (Optional)
+  // Display blog posts from your medium or dev account. (Optional)
   blog: {
-    source: 'dev.to', // medium | dev.to
+    source: 'dev', // medium | dev
     username: 'arifszn',
     limit: 5, // How many posts to display. Max is 10.
   },
@@ -336,7 +338,7 @@ 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, Dribbble, Behance, Medium, dev.to, personal website, phone and email.
+You can link your social media services you're using, including LinkedIn, Twitter, Facebook, Dribbble, Behance, Medium, dev, personal website, phone and email.
 
 ```js
 // gitprofile.config.js
@@ -349,7 +351,7 @@ module.exports = {
     dribbble: '',
     behance: '',
     medium: '',
-    devto: '',
+    dev: '',
     website: 'https://arifszn.github.io',
     phone: '',
     email: '',
@@ -447,14 +449,14 @@ module.exports = {
 
 ### Blog Posts
 
-If you have [medium](https://medium.com) or [dev.to](https://dev.to) account, you can show your recent blog posts in here just by providing your medium/dev.to username. You can limit how many posts to display (Max is `10`).
+If you have [medium](https://medium.com) or [dev](https://dev.to) account, you can show your recent blog posts in here just by providing your medium/dev username. You can limit how many posts to display (Max is `10`).
 
 ```js
 // gitprofile.config.js
 module.exports = {
   // ...
   blog: {
-    source: 'dev.to',
+    source: 'dev',
     username: 'arifszn',
     limit: 5,
   },
@@ -463,7 +465,7 @@ module.exports = {
 
 ![Blog](https://arifszn.github.io/assets/img/hosted/gitprofile/blog.png)
 
-The posts are fetched by [Article-api](https://github.com/arifszn/article-api).
+The posts are fetched by [Blog-js](https://github.com/arifszn/blog-js).
 
 ## 💖 Support
 

gitprofile.config.js

@@ -17,7 +17,7 @@ const config = {
     dribbble: '',
     behance: '',
     medium: '',
-    devto: 'arifszn',
+    dev: 'arifszn',
     website: 'https://arifszn.github.io',
     phone: '',
     email: 'arifulalamszn@gmail.com',
@@ -76,9 +76,9 @@ const config = {
       to: '2012',
     },
   ],
-  // Display blog posts from your medium or dev.to account. (Optional)
+  // Display blog posts from your medium or dev account. (Optional)
   blog: {
-    source: 'dev.to', // medium | dev.to
+    source: 'dev', // medium | dev
     username: 'arifszn',
     limit: 3, // How many posts to display. Max is 10.
   },

package-lock.json

@@ -1,20 +1,20 @@
 {
   "name": "@arifszn/gitprofile",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@arifszn/gitprofile",
-      "version": "2.0.1",
+      "version": "2.0.2",
       "license": "Apache-2.0",
       "dependencies": {
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
       },
       "devDependencies": {
+        "@arifszn/blog-js": "^2.0.0",
         "@vitejs/plugin-react": "^1.0.7",
-        "article-api": "^1.0.8",
         "autoprefixer": "^10.4.4",
         "axios": "^0.26.1",
         "daisyui": "^2.11.0",
@@ -45,6 +45,25 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@arifszn/blog-js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@arifszn/blog-js/-/blog-js-2.0.0.tgz",
+      "integrity": "sha512-UMeWt/aaxeF4GLpj16olA+V7300SbFn28hQJ1XcQd9XKanMOayTx5dZ6iUEnO5l+7460+1qG33eVIJsP7CZeaw==",
+      "dev": true,
+      "dependencies": {
+        "axios": "^0.21.1",
+        "string-strip-html": "^8.3.0"
+      }
+    },
+    "node_modules/@arifszn/blog-js/node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -755,25 +774,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/article-api": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/article-api/-/article-api-1.0.8.tgz",
-      "integrity": "sha512-3F6dhLeSbFMGD+8kFDrbddgJUx8zply5rlKMijuEsHdiuSIATaiHAhFwwgPyXcrjJcQxqmI25anFqPGno5NjDg==",
-      "dev": true,
-      "dependencies": {
-        "axios": "^0.21.1",
-        "string-strip-html": "^8.3.0"
-      }
-    },
-    "node_modules/article-api/node_modules/axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-      "dev": true,
-      "dependencies": {
-        "follow-redirects": "^1.14.0"
-      }
-    },
     "node_modules/autoprefixer": {
       "version": "10.4.4",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz",
@@ -4047,6 +4047,27 @@
         "@jridgewell/trace-mapping": "^0.3.0"
       }
     },
+    "@arifszn/blog-js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@arifszn/blog-js/-/blog-js-2.0.0.tgz",
+      "integrity": "sha512-UMeWt/aaxeF4GLpj16olA+V7300SbFn28hQJ1XcQd9XKanMOayTx5dZ6iUEnO5l+7460+1qG33eVIJsP7CZeaw==",
+      "dev": true,
+      "requires": {
+        "axios": "^0.21.1",
+        "string-strip-html": "^8.3.0"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.21.4",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+          "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+          "dev": true,
+          "requires": {
+            "follow-redirects": "^1.14.0"
+          }
+        }
+      }
+    },
     "@babel/code-frame": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -4577,27 +4598,6 @@
         "es-abstract": "^1.19.0"
       }
     },
-    "article-api": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/article-api/-/article-api-1.0.8.tgz",
-      "integrity": "sha512-3F6dhLeSbFMGD+8kFDrbddgJUx8zply5rlKMijuEsHdiuSIATaiHAhFwwgPyXcrjJcQxqmI25anFqPGno5NjDg==",
-      "dev": true,
-      "requires": {
-        "axios": "^0.21.1",
-        "string-strip-html": "^8.3.0"
-      },
-      "dependencies": {
-        "axios": {
-          "version": "0.21.4",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-          "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-          "dev": true,
-          "requires": {
-            "follow-redirects": "^1.14.0"
-          }
-        }
-      }
-    },
     "autoprefixer": {
       "version": "10.4.4",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arifszn/gitprofile",
   "description": "Create an automatic portfolio based on GitHub profile",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "license": "Apache-2.0",
   "author": "arifszn",
   "repository": {
@@ -42,8 +42,8 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@arifszn/blog-js": "^2.0.0",
     "@vitejs/plugin-react": "^1.0.7",
-    "article-api": "^1.0.8",
     "autoprefixer": "^10.4.4",
     "axios": "^0.26.1",
     "daisyui": "^2.11.0",

src/components/GitProfile.jsx

@@ -238,7 +238,7 @@ GitProfile.propTypes = {
       dribbble: PropTypes.string,
       behance: PropTypes.string,
       medium: PropTypes.string,
-      devto: PropTypes.string,
+      dev: PropTypes.string,
       website: PropTypes.string,
       phone: PropTypes.string,
       email: PropTypes.string,

src/components/blog/index.jsx

@@ -1,9 +1,9 @@
-import { getDevtoArticle, getMediumArticle } from 'article-api';
 import moment from 'moment';
 import { Fragment, useEffect, useState } from 'react';
 import { ga, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 import PropTypes from 'prop-types';
+import { getDevPost, getMediumPost } from '@arifszn/blog-js';
 
 const displaySection = (blog) => {
   if (
@@ -25,13 +25,13 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
   useEffect(() => {
     if (displaySection(blog)) {
       if (blog.source === 'medium') {
-        getMediumArticle({
+        getMediumPost({
           user: blog.username,
         }).then((res) => {
           setArticles(res);
         });
-      } else if (blog.source === 'dev.to') {
+      } else if (blog.source === 'dev') {
-        getDevtoArticle({
+        getDevPost({
           user: blog.username,
         }).then((res) => {
           setArticles(res);

src/components/details/index.jsx

@@ -136,12 +136,12 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://medium.com/@${social.medium}`}
                 />
               )}
-              {typeof social.devto !== 'undefined' && social.devto && (
+              {typeof social.dev !== 'undefined' && social.dev && (
                 <ListItem
                   icon={<FaDev className="mr-2" />}
                   title="Dev:"
-                  value={social.devto}
+                  value={social.dev}
-                  link={`https://dev.to/${social.devto}`}
+                  link={`https://dev.to/${social.dev}`}
                 />
               )}
               {typeof social.website !== 'undefined' && social.website && (

src/helpers/utils.jsx

@@ -206,10 +206,10 @@ export const sanitizeConfig = (config) => {
         typeof config.social.medium !== 'undefined'
           ? config.social.medium
           : '',
-      devto:
+      dev:
         typeof config.social !== 'undefined' &&
-        typeof config.social.devto !== 'undefined'
+        typeof config.social.dev !== 'undefined'
-          ? config.social.devto
+          ? config.social.dev
           : '',
       website:
         typeof config.social !== 'undefined' &&

types/index.d.ts

@@ -70,9 +70,9 @@ export interface Social {
   medium?: string;
 
   /**
-   * dev.to
+   * dev
    */
-  devto?: string;
+  dev?: string;
 
   /**
    * Website
@@ -92,7 +92,7 @@ export interface Social {
 
 export interface Blog {
   /**
-   * medium | dev.to
+   * medium | dev
    */
   source?: string;