Replace moment with date-fns

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}