Replace moment with date-fns

package-lock.json

@@ -18,11 +18,11 @@
         "autoprefixer": "^10.4.4",
         "axios": "^0.26.1",
         "daisyui": "^2.11.0",
+        "date-fns": "^2.28.0",
         "eslint": "^8.11.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.29.4",
-        "moment": "^2.29.1",
         "postcss": "^8.4.12",
         "prettier": "^2.6.0",
         "prop-types": "^15.8.1",
@@ -1087,6 +1087,19 @@
         "postcss": "^8.1.6"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2757,15 +2770,6 @@
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
-    "node_modules/moment": {
-      "version": "2.29.3",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz",
-      "integrity": "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -4709,6 +4713,12 @@
         "tailwindcss": "^3.0"
       }
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "dev": true
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -5838,12 +5848,6 @@
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
-    "moment": {
-      "version": "2.29.3",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz",
-      "integrity": "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==",
-      "dev": true
-    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -47,11 +47,11 @@
     "autoprefixer": "^10.4.4",
     "axios": "^0.26.1",
     "daisyui": "^2.11.0",
+    "date-fns": "^2.28.0",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "moment": "^2.29.1",
     "postcss": "^8.4.12",
     "prettier": "^2.6.0",
     "prop-types": "^15.8.1",

src/components/GitProfile.jsx

@@ -1,6 +1,5 @@
 import axios from 'axios';
 import { Fragment, useCallback, useEffect, useState } from 'react';
-import moment from 'moment';
 import HeadTagEditor from './head-tag-editor';
 import ErrorPage from './error-page';
 import ThemeChanger from './theme-changer';
@@ -23,6 +22,7 @@ import {
 import { HelmetProvider } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 import '../assets/index.css';
+import { formatDistance } from 'date-fns';
 
 const GitProfile = ({ config }) => {
   const [error, setError] = useState(
@@ -103,9 +103,13 @@ const GitProfile = ({ config }) => {
   const handleError = (error) => {
     console.error('Error:', error);
     try {
-      let reset = moment(
-        new Date(error.response.headers['x-ratelimit-reset'] * 1000)
-      ).fromNow();
+      let reset = formatDistance(
+        new Date(error.response.headers['x-ratelimit-reset'] * 1000),
+        new Date(),
+        {
+          addSuffix: true,
+        }
+      );
 
       if (error.response.status === 403) {
         setError(tooManyRequestError(reset));
@@ -129,7 +133,7 @@ const GitProfile = ({ config }) => {
           social={sanitizedConfig.social}
         />
       )}
-      <div className="fade-in h-screen">
+      <div className="fade-in">
         {error ? (
           <ErrorPage
             status={`${error.status}`}

src/components/blog/index.jsx

@@ -1,10 +1,10 @@
-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 { AiOutlineContainer } from 'react-icons/ai';
 import { getDevPost, getMediumPost } from '@arifszn/blog-js';
+import { formatDistance } from 'date-fns';
 
 const displaySection = (blog) => {
   if (
@@ -147,7 +147,9 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
                       {article.title}
                     </h2>
                     <p className="opacity-50 text-xs">
-                      {moment(article.publishedAt).fromNow()}
+                      {formatDistance(article.publishedAt, new Date(), {
+                        addSuffix: true,
+                      })}
                     </p>
                     <p className="mt-3 text-base-content text-opacity-60 text-sm">
                       {article.description}