mobile-friendly view and scss->sass

src/router/Link.tsx

@@ -1,4 +1,4 @@
-import "./link.scss";
+import "./link.sass";
 
 import React, {HTMLProps, ReactNode} from "react";
 import {useRouter} from "./RouterContext";
@@ -7,7 +7,7 @@ import {Path} from "./router";
 export function Link(props: {href: Path, children : ReactNode, target?: '_blank' } & HTMLProps<HTMLAnchorElement>) {
   let {children, className, href} = props;
   const router = useRouter();
-  className = `${className} link`;
+  className = `${className ?? ""} link`.trim();
 
    function onClick(event: React.MouseEvent) {
      // perform the default action if _blank

src/router/Route.tsx

@@ -1,31 +1,40 @@
 import React, {PropsWithChildren} from "react";
 import {useRouter} from "./RouterContext";
 import {Path} from "./router";
+import {ArticlesList} from "../articles/ArticlesList";
 
-const Canvas = React.lazy(() => import("../index/Canvas"));
-const About = React.lazy(() => import("../about/AboutPage"));
-
-export const ROUTES: [Path, string][] = [
+type Route = [Path, string];
+type Routes = [Route, Route, Route];
+export const ROUTES: Routes = [
   ["/", "Home"],
   ["/about", "About"],
   ["/articles", "Articles"]
 ];
 
-function Route(props: PropsWithChildren & {path: Path}) {
-  const {path, children} = props;
+function Route(props: PropsWithChildren & {route: Route}) {
+  const {route: [path], children} = props;
   const router = useRouter();
 
   return <>{router.current === path && children}</>
 }
 
 
+const Canvas = React.lazy(() => import("../index/Canvas"));
+const About = React.lazy(() => import("../about/AboutPage"));
+
+
 export function Routes() {
+  const [index, about, articles] = ROUTES;
+
   return <>
-    <Route path={ROUTES[0]![0]}>
+    <Route route={index}>
       <Canvas/>
     </Route>
-    <Route path={ROUTES[1]![0]}>
+    <Route route={about}>
       <About/>
     </Route>
+    <Route route={articles}>
+      <ArticlesList/>
+    </Route>
   </>
 }

src/router/RouterContext.tsx

@@ -22,11 +22,11 @@ export function RouterProvider(props : PropsWithChildren) {
   }, []);
 
   return <RouterContext.Provider value={{
-    pushPage: function(newPath: Path) {
+    pushPage(newPath: Path) {
       window.history.pushState(newPath,"", newPath);
       setPath(newPath as Path);
     },
-    replacePage: function(newPath: Path) {
+   replacePage(newPath: Path) {
         window.history.replaceState(newPath, "", newPath);
         setPath(newPath as Path);
     },

src/router/link.sass

@@ -0,0 +1,8 @@
+.link
+  color: white
+  text-decoration: none
+  text-align: center
+  &:hover
+    opacity: 90%
+  &:active
+    opacity: 80%

src/router/link.scss

@@ -1,13 +0,0 @@
-.link {
-  color: white;
-  text-decoration: none;
-  text-align: center;
-}
-
-.link:hover {
-  opacity: 90%;
-}
-
-.link:active {
-  opacity: 80%;
-}