add mdx

package.json

@@ -15,6 +15,9 @@
     "@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",

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") },
   },