cleanup package.json, update sass, fix router (css class issue)

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.16.0",
     "@fontsource/inter": "^5.2.8",
     "@fontsource/neuton": "^5.2.7",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
@@ -11,32 +10,10 @@
     "@fortawesome/free-regular-svg-icons": "^7.2.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0",
     "@fortawesome/react-fontawesome": "^3.2.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@react-three/fiber": "^9.5.0",
-    "browserslist": "^4.18.1",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^27.4.3",
-    "jest-resolve": "^27.4.2",
-    "jest-watch-typeahead": "^1.0.0",
-    "mini-css-extract-plugin": "^2.4.5",
     "motion": "^12.34.3",
-    "postcss": "^8.4.4",
-    "postcss-loader": "^6.2.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
     "react": "^19.2.4",
-    "react-dev-utils": "^12.0.1",
     "react-dom": "^19.2.4",
-    "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^4.0.0",
-    "sass-loader": "^12.3.0",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.2.5",
     "three": "^0.183.2"
   },
   "scripts": {
@@ -57,9 +34,11 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -72,8 +51,23 @@
     "@types/three": "^0.183.1",
     "babel-loader": "^10.0.0",
     "babel-preset-react-app": "^10.1.0",
+    "browserslist": "^4.28.1",
+    "css-loader": "^7.1.4",
+    "css-minimizer-webpack-plugin": "^8.0.0",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "html-webpack-plugin": "^5.6.6",
+    "mini-css-extract-plugin": "^2.10.0",
+    "postcss": "^8.5.8",
+    "postcss-loader": "^8.2.1",
+    "postcss-normalize": "^13.0.1",
+    "postcss-preset-env": "^11.2.0",
     "sass": "^1.97.3",
+    "sass-loader": "^16.0.7",
+    "sass-migrator": "^2.5.7",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.17",
     "ts-loader": "^9.5.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",

src/about/AboutPage.tsx

@@ -5,10 +5,8 @@ import japanese from "../img/IMG_20230531_000224_01.jpg";
 import {PropsWithChildren} from "react";
 
 export default function AboutPage() {
-  return <main>
+  return <main className="about-page">
-    <div className="edge">
+    <div className="edge"/>
-
-    </div>
     <section className="about-container">
       <img src={openingImage} alt="Tymur Arsentiev" className="self"/>
       <h1 className="title">Welcome to my blog and personal website!</h1>
@@ -16,7 +14,7 @@ export default function AboutPage() {
         For the longest time, I never had a personal website to show my skills.
         I'm a longtime coder, project after project, but have never considered making a place to share my thoughts.
         After a while, I was inspired by my <ExternalLink href="https://medium.com/@tymur.arsent">Medium</ExternalLink> and
-        &nbsp;<ExternalLink  href="https://substack.com/@timsnodocmartins">Substack</ExternalLink> account to begin journaling my thoughts on my own.
+        &nbsp;<ExternalLink href="https://substack.com/@timsnodocmartins">Substack</ExternalLink> account to begin journaling my thoughts on my own.
       </p>
       <p>
         I like to take pride in my uniqueness as a web developer.
@@ -38,9 +36,7 @@ export default function AboutPage() {
         My favorite thing about Ebay is that they have almost every clothing brand, typically at reduced prices due to use.
       </p>
     </section>
-    <div className="edge">
+    <div className="edge"/>
-
-    </div>
   </main>
 }
 

src/about/about.scss

@@ -1,6 +1,6 @@
-@import "../nav/nav.scss";
+@use "../nav/nav.scss";
 
-main {
+.about-page {
   color: white;
   display: flex;
   justify-content: center;
@@ -8,7 +8,7 @@ main {
 
 .title {
   text-align: center;
-  margin: $padding;
+  margin: nav.$padding;
 }
 
 .self {
@@ -17,7 +17,7 @@ main {
 }
 
 .about-container {
-  margin-top: 2 * $padding;
+  margin-top: 2 * nav.$padding;
   flex-shrink: 1;
   max-width: 75%;
   display: flex;
@@ -30,7 +30,7 @@ main {
   }
 
   p {
-    text-indent: 2 * $padding;
+    text-indent: 2 * nav.$padding;
     margin: 10px;
     max-width: 600px;
     line-height: 40px;

src/index.tsx

@@ -4,11 +4,7 @@ import './index.scss';
 import {RouterProvider} from "./router/RouterContext";
 import {Route} from "./router/Route";
 import "@fontsource/inter"; // Defaults to weight 400
-import "@fontsource/inter/400.css"; // Specify weight
-import "@fontsource/inter/400-italic.css"; // Specify weight and style
 import "@fontsource/neuton"; // Defaults to weight 400
-import "@fontsource/neuton/400.css"; // Specify weight
-import "@fontsource/neuton/400-italic.css"; // Specify weight and style
 
 const Canvas = React.lazy(() => import("./index/Canvas"));
 const About = React.lazy(() => import("./about/AboutPage"));
@@ -28,6 +24,9 @@ root.render(
       <Route path="/about">
         <About/>
       </Route>
+      <Route path="/articles">
+        <div>Test</div>
+      </Route>
     </RouterProvider>
   </React.StrictMode>
 );

src/index/Canvas.tsx

@@ -9,7 +9,7 @@ import {Stars} from "./Stars";
 export default function Canvas() {
 
   return (
-    <main>
+    <main className="canvas">
         <ThreeCanvas gl={{antialias: true, alpha: true}} >
           <Sphere/>
           <Moon radius={8} color="pink" step={0.01}/>

src/index/canvas.scss

@@ -1,4 +1,4 @@
-main {
+.canvas {
   width: 100vw;
   height: 100vh;
   display: flex;

src/nav/menu.scss

@@ -1,16 +1,16 @@
-@import "./nav";
+@use "./nav";
 
 .menu {
   position: absolute;
   display: flex;
   flex-direction: column;
-  background: $menu;
+  background: nav.$menu;
   z-index: 10;
   color: white;
   width: 25%;
   height: 100vh;
 
   div {
-    padding: $padding;
+    padding: nav.$padding;
   }
 }

src/router/Link.tsx

@@ -5,12 +5,12 @@ import {useRouter} from "./RouterContext";
 import {Path} from "./router";
 
 export function Link(props: {className?: string, href: Path, replace?: boolean } & PropsWithChildren) {
-  const {children, className, href, replace} = props;
+  const {children, className, href} = props;
   const router = useRouter();
 
    function onClick(event: React.MouseEvent) {
-//        event.preventDefault();
+        event.preventDefault();
-        if(replace) {
+        if(window.location.pathname === href) {
           router.replacePage(props.href);
         } else {
           router.pushPage(props.href);