Update Release

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: pacholoamit

package.json

@@ -15,14 +15,17 @@
     "@mantine/form": "^6.0.10",
     "@mantine/hooks": "^6.0.10",
     "@mantine/notifications": "^6.0.10",
+    "@mdx-js/mdx": "next",
+    "@mdx-js/react": "^2.3.0",
+    "@mdx-js/rollup": "^2.3.0",
     "@tabler/icons-react": "^2.17.0",
     "@tauri-apps/api": "^1.3.0",
     "apexcharts": "^3.40.0",
     "chartjs-adapter-luxon": "^1.3.1",
     "highcharts": "^11.0.1",
     "highcharts-react-official": "^3.2.0",
     "lodash.sortby": "^4.7.0",
-    "mantine-datatable": "^2.4.15",
+    "mantine-datatable": "^2.4.18",
     "pocketbase": "^0.14.4",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.0",
@@ -36,7 +39,7 @@
     "@tauri-apps/cli": "^1.3.0",
     "@types/lodash.sortby": "^4.7.7",
     "@types/node": "^20.1.0",
-    "@types/react": "^18.2.5",
+    "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@vitejs/plugin-react": "^4.0.0",
     "typescript": "^5.0.4",

src/features/settings/mdx/about.mdx

@@ -0,0 +1,3 @@
+# 💯 Motivation
+
+The inspiration for Pachtop stems mainly from using [Stacer](https://oguzhaninan.github.io/Stacer-Web/) which is a comprehensive System optimizer and monitoring solution. Although, Pachtop does not implement any system optimizer functionality (yet!), It provides more in-depth metrics and information about your system. I wanted to create a similar application to Stacer but with a more modern UI and a more robust codebase. I also wanted to learn Rust and this seemed like a good opportunity to do so. If you hadn't guessed, Pachtop is named after the legendary [top](<https://en.wikipedia.org/wiki/Top_(software)>) linux program that displays information about CPU and memory utilization. Pachtop will always remain open-source and free to use.

src/features/settings/pages/settings.page.tsx

@@ -1,13 +1,21 @@
 import React from "react";
 import AutoStartSettingsView from "@/features/settings/views/autostart.view";
+import AboutView from "@/features/settings/views/about.view";
 import PageWrapper from "@/components/page-wrapper";
 import Card from "@/components/card";
 
-import { Icon24Hours } from "@tabler/icons-react";
+import { Icon24Hours, IconGitBranch } from "@tabler/icons-react";
 import { Center, Grid, NavLink } from "@mantine/core";
 import { useState } from "react";
 
-const settings = [{ icon: Icon24Hours, label: "Auto Start", view: <AutoStartSettingsView /> }];
+const settings = [
+  { icon: Icon24Hours, label: "Auto Start", view: <AutoStartSettingsView /> },
+  {
+    icon: IconGitBranch,
+    label: "About",
+    view: <AboutView />,
+  },
+];
 
 const SettingsPage = () => {
   const [active, setActive] = useState(0);

src/features/settings/views/about.view.tsx

@@ -0,0 +1,7 @@
+import About from "@/features/settings/mdx/about.mdx";
+
+const AboutView = () => {
+  return <About />;
+};
+
+export default AboutView;

vite.config.ts

@@ -1,10 +1,20 @@
-import { defineConfig } from "vite";
+import { defineConfig, optimizeDeps } from "vite";
 import react from "@vitejs/plugin-react";
+import mdx from "@mdx-js/rollup";
 import * as path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  optimizeDeps: {
+    include: ["react/jsx-runtime"],
+  },
+  plugins: [
+    react(),
+
+    mdx({
+      remarkPlugins: [],
+    }),
+  ],
   resolve: {
     alias: { "@": path.resolve(__dirname, "src") },
   },