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

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>
-    <div className="edge">
-
-    </div>
+  return <main className="about-page">
+    <div className="edge"/>
     <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>
+    <div className="edge"/>
   </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();
-        if(replace) {
+        event.preventDefault();
+        if(window.location.pathname === href) {
           router.replacePage(props.href);
         } else {
           router.pushPage(props.href);