v0.5.3 - Moving away from moment and compressing images

app/components/monitor/updateInfo.jsx

@@ -1,8 +1,7 @@
 import './uptime.scss';
 
 // import dependencies
-import 'moment-timezone';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import classNames from 'classnames';
 
 // import local files
@@ -21,9 +20,11 @@ const UptimeInfo = ({ heartbeat = {} }) => {
     <div className="monitor-uptime-content">
       <div className={classes}>{heartbeat?.isDown ? 'DOWN' : 'UP'}</div>
       <div className="monitor-uptime-info">
-        {moment(heartbeat.date)
-          .tz(timezone)
-          .format(`${dateformat} ${timeformat}`)}
+        {dayjs(
+          new Date(heartbeat.date).toLocaleString('en-US', {
+            timeZone: timezone,
+          })
+        ).format(`${dateformat} ${timeformat}`)}
       </div>
       <div className="monitor-uptime-info">
         {heartbeat.message || 'Unknown'}

app/components/monitor/uptime.jsx

@@ -1,7 +1,6 @@
 import './uptime.scss';
 
 // import dependencies
-import 'moment-timezone';
 import PropTypes from 'prop-types';
 
 // import local files

app/components/settings/manage/member/row.jsx

@@ -1,7 +1,7 @@
 import './row.scss';
 
 // import dependencies
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { observer } from 'mobx-react-lite';
 
 // import local files
@@ -36,8 +36,8 @@ const MemberTableRow = ({ member = {} }) => {
     ? 'Unverified'
     : positions[member.permission];
 
-  const date = moment(member.createdAt).format('MMM DD, YYYY');
-  const time = moment(member.createdAt).format('hh:mm A');
+  const date = dayjs(member.createdAt).format('MMM DD, YYYY');
+  const time = dayjs(member.createdAt).format('hh:mm A');
 
   const avatarUrl = isImageUrl(member.avatar)
     ? member.avatar

docs/internals/changelog.md

@@ -1,5 +1,18 @@
 # Previous updates
 
+## v0.5.3
+
+### Moving away from moment and compressing images
+
+### Summary
+
+Realised that moment wasn't the best library for date/time manipulation and that it was bloating the bundle size. I've decided to move away from moment and use dayjs instead. Along with that I've also compressed and resized all the default avatars. Each avatar was taking up around 1.5MB, they are now taking all nearly under 100KB. Along with that I've also changed the size from 1024x1024 to 512x512. Planning on compressing/resizing further possibly in the future.
+
+### Updates
+
+- Moved from moment to dayjs
+- Compressed images
+
 ## v0.5.2
 
 ### Moves to router and finally adds error page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lunalytics",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Open source Node.js server/website monitoring tool",
   "private": true,
   "author": "KSJaay <ksjaay@gmail.com>",
@@ -50,8 +50,6 @@
     "knex": "^3.0.1",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.5.44",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",