✨ Everything works!

package.json

@@ -3,10 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reach/router": "^1.3.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
-    "bluelib": "^0.21.1",
+    "bluelib": "^0.24.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
@@ -19,12 +20,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

public/index.html

@@ -4,12 +4,11 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#1c2b4f" />
     <meta
       name="description"
       content="Gli appunti di Steffo, disponibili per tutti!"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,12 +1,16 @@
 import React from "react";
-import Title from "bluelib/src/components/Title";
-import Bluelib from "bluelib/src/components/Bluelib";
+import {Bluelib, Main} from "bluelib/lib/components";
+import {Router} from "@reach/router";
+import Home from "./routes/Home";
+import Error404 from "./routes/Error404";
 
 export default function App() {
     return (
         <Bluelib skin={"rygblue"}>
-            <Title size={"xxl"}>Unisteffo</Title>
-            <Title size={"xl"}>Gli appunti open source di <a href={"https://steffo.eu"}>Steffo</a></Title>
+            <Router>
+                <Home path={"/"}/>
+                <Error404 default/>
+            </Router>
         </Bluelib>
     );
 }

src/components/MainTitle.js

@@ -0,0 +1,10 @@
+import React from "react";
+import {BaseLink, Bluelib, Title} from "bluelib/lib/components";
+
+
+export default function Home() {
+    return (
+        <div>
+        </div>
+    )
+}

src/components/Page.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {BaseLink, Title, Main} from "bluelib/lib/components";
+
+
+export default function Page({children}) {
+    return (
+        <div>
+            <Title size={"xxl"}><BaseLink href={"/"}>Unisteffo</BaseLink></Title>
+            <Title size={"xl"}>Gli appunti open source di <BaseLink href={"https://steffo.eu"}>Steffo</BaseLink></Title>
+            <Main>
+                {children}
+            </Main>
+        </div>
+    )
+}

src/index.css

@@ -1,5 +1,4 @@
 body {
-  margin: 0;
   background-color: #0d193b;
   color: #a0ccff;
 }

src/routes/Error404.js

@@ -0,0 +1,17 @@
+import React from "react";
+import {Paragraph, Box, Title, Color} from "bluelib/lib/components";
+import Page from "../components/Page";
+
+
+export default function Error404() {
+    return (
+        <Page>
+            <Box>
+                <Title size={"l"}><Color value={"red"}>Non trovato</Color></Title>
+                <Paragraph>
+                    Mi spiace, ma la pagina che hai richiesto non sembra esistere :(
+                </Paragraph>
+            </Box>
+        </Page>
+    )
+}

src/routes/Home.js

@@ -0,0 +1,14 @@
+import React from "react";
+import {Box} from "bluelib/lib/components";
+import Page from "../components/Page";
+
+
+export default function Home() {
+    return (
+        <Page>
+            <Box>
+                Benvenuto a Unisteffo!
+            </Box>
+        </Page>
+    )
+}