✨ Add SelectSkin and useSubtitle

src/App.js

@@ -1,22 +1,43 @@
-import React, {useState} from "react";
+import React, {Fragment, useState} from "react";
-import {Bluelib} from "bluelib/lib/components";
+import {BaseLink, Bluelib, Main} from "bluelib/lib/components";
-import {Router} from "@reach/router";
+import {Router, } from "@reach/router";
 import Home from "./routes/Home";
 import Error404 from "./routes/Error404";
 import Gestinfo from "./routes/Gestinfo";
 import style from "./App.module.css";
+import MainTitle from "./components/MainTitle";
+import ContextSetSubtitle from "./contexts/ContextSetSubtitle";
+import Footer from "./components/Footer";
+
 
 export default function App() {
     const [skin, setSkin] = useState("rygblue");
+    const [subtitle, setSubtitle] = useState(null);
 
     return (
-        <Bluelib skin={skin} className={style.app}>
+        <ContextSetSubtitle.Provider value={setSubtitle}>
-            <Router>
+
-                <Home path={"/"}/>
+            <Bluelib skin={skin} className={style.app}>
-                <Gestinfo path={"/gestinfo"}/>
+
-                <Error404 default/>
+                <Router primary={false}>
-            </Router>
+                    <MainTitle default={true} subtitle={subtitle}/>
-        </Bluelib>
+                </Router>
+
+                <Main>
+                    <Router primary={true}>
+                        <Home path={"/"} skin={skin} setSkin={setSkin}/>
+                        <Gestinfo path={"/gestinfo"}/>
+                        <Error404 default/>
+                    </Router>
+                </Main>
+
+                <Router primary={false}>
+                    <Footer default={true}/>
+                </Router>
+
+            </Bluelib>
+
+        </ContextSetSubtitle.Provider>
     );
 }
 

src/components/Page.js

@@ -1,24 +0,0 @@
-import React from "react";
-import {Main} from "bluelib/lib/components";
-import MainTitle from "./MainTitle";
-import PropTypes from "prop-types";
-import Footer from "./Footer";
-
-
-export default function Page({children, subtitle}) {
-    return (
-        <div>
-            <MainTitle subtitle={subtitle}/>
-            <Main>
-                {children}
-            </Main>
-            <Footer/>
-        </div>
-    )
-}
-
-
-Page.propTypes = {
-    children: PropTypes.node,
-    subtitle: PropTypes.node,
-}

src/components/SelectSkin.js

@@ -0,0 +1,14 @@
+import React, {useContext} from "react";
+import ContextBluelibSkin from "bluelib/lib/contexts/ContextBluelibSkin";
+
+
+export default function SelectSkin({skin, setSkin}) {
+    return (
+        <span>
+            <select value={skin} onChange={(event) => setSkin(event.target.value)}>
+                <option value={null}>Foglio di Carta</option>
+                <option value={"rygblue"}>Blu Reale</option>
+            </select>
+        </span>
+    );
+}

src/contexts/ContextSetSubtitle.js

@@ -0,0 +1,9 @@
+import {createContext} from "react";
+
+
+function defaultSetter() {
+    throw new Error("No subtitle setter found.")
+}
+
+
+export default createContext(defaultSetter);

src/hooks/useSubtitle.js

@@ -0,0 +1,11 @@
+import React, {useContext, useEffect} from "react";
+import ContextSetSubtitle from "../contexts/ContextSetSubtitle";
+
+
+export default function useSubtitle(node) {
+    const setSubtitle = useContext(ContextSetSubtitle);
+
+    useEffect(() => {
+        setSubtitle(node);
+    }, [])
+}

src/routes/Error404.js

@@ -1,23 +1,19 @@
 import React from "react";
-import {Paragraph, Box, Title, Color, BaseLink} from "bluelib/lib/components";
+import {Paragraph, Color} from "bluelib/lib/components";
-import Page from "../components/Page";
 import TitleBox from "../components/TitleBox";
-import TitleSplit from "../components/TitleSplit";
+import useSubtitle from "../hooks/useSubtitle";
 
 
 export default function Error404() {
+    useSubtitle(<Color value={"red"}>Errore 404</Color>);
+
     return (
-        <Page>
+        <article>
-            <TitleSplit title={<Color value={"red"}>Non trovato</Color>}>
+            <TitleBox title={<Color value={"red"}>Pagina non trovata</Color>}>
-                <TitleBox title={<Color value={"red"}>404</Color>}>
+                <Paragraph>
-                    <Paragraph>
+                    Mi spiace, ma la pagina che hai richiesto non sembra esistere :(
-                        Mi spiace, ma la pagina che hai richiesto non sembra esistere :(
+                </Paragraph>
-                    </Paragraph>
+            </TitleBox>
-                    <Paragraph>
+        </article>
-                        <BaseLink href={"/"}>← Torna alla home</BaseLink>
-                    </Paragraph>
-                </TitleBox>
-            </TitleSplit>
-        </Page>
     )
 }

src/routes/Gestinfo/index.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {Split, Aside, Anchor, Help, Blockquote, Title, Separator, Code, Color, Underline as U, BaseLink as A, Paragraph as P, Bold as B, Italic as I, ListItem as LI, Table} from "bluelib/lib/components";
 import LatexMath from "bluelib/lib/components/LatexMath";
-import Page from "../../components/Page";
 import TitleSplit from "../../components/TitleSplit";
 import TitleBox from "../../components/TitleBox";
 import IR from "./abbr/IR";
@@ -12,19 +11,20 @@ import Ononimi from "./abbr/Ononimi";
 import UIN from "./abbr/UIN";
 import Regex from "./abbr/Regex";
 import Glob from "./abbr/Glob";
-import PlusLI from "../../components/PlusLI";
-import MinusLI from "../../components/MinusLI";
 import Predicato from "./abbr/Predicato";
 import Todo from "../../components/Todo";
 import IDF from "./abbr/IDF";
 import TF from "./abbr/TF";
 import TFIDF from "./abbr/TFIDF";
 import RSV from "./abbr/RSV";
+import useSubtitle from "../../hooks/useSubtitle";
 
 
 export default function Gestinfo() {
+    useSubtitle("Gestione dell'informazione");
+
     return (
-        <Page subtitle={"Gestione dell'informazione"}>
+        <article>
             <Split>
                 <TitleBox title={"Di cosa si tratta?"}>
                     <P>
@@ -892,6 +892,6 @@ export default function Gestinfo() {
 
                 </P>
             </TitleBox>
-        </Page>
+        </article>
     )
 }

src/routes/Home.js

@@ -1,14 +1,16 @@
 import React from "react";
 import {Split, Size, Color, Anchor, BaseLink as A, Paragraph as P, Bold as B, Italic as I, ListItem as LI} from "bluelib/lib/components";
-import Page from "../components/Page";
 import TitleSplit from "../components/TitleSplit";
 import TitleBox from "../components/TitleBox";
-import Todo from "../components/Todo";
+import useSubtitle from "../hooks/useSubtitle";
+import SelectSkin from "../components/SelectSkin";
 
 
-export default function Home() {
+export default function Home({skin, setSkin}) {
+    useSubtitle(<span>Appunti open source di <A href={"https://steffo.eu"}>Steffo</A></span>);
+
     return (
-        <Page subtitle={<span>Appunti open source di <A href={"https://steffo.eu"}>Steffo</A></span>}>
+        <article>
             <Split>
                 <TitleBox title={"Unisteffo"}>
                     <P>
@@ -17,27 +19,35 @@ export default function Home() {
                     <P>
                         Se trovi un errore negli appunti, o un bug del sito, per favore <Anchor href={"https://github.com/Steffo99/appuntiweb/issues/new"}>segnalamelo su GitHub</Anchor>!
                     </P>
+                </TitleBox>
+                <TitleBox title={"Tema"}>
                     <P>
-                        <Todo>Molte pagine non sono disponibili in quanto il sito è in fase di rinnovo.</Todo>
+                        Se i colori ti deconcentrano, non ti piacciono, o vuoi stampare alcune di queste pagine, puoi cambiare tema del sito qui:
+                    </P>
+                    <P>
+                        <SelectSkin skin={skin} setSkin={setSkin}/>
                     </P>
                 </TitleBox>
             </Split>
             <TitleSplit title={"Università"}>
                 <TitleBox title={"Primo anno"}>
                     <ul>
-                        <LI><Size value={"l"}><A href={"/analisi"} disabled={true}>Analisi matematica</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2018_Analisi1"}>Analisi matematica</Anchor></Size></LI>
-                        <LI><Size value={"l"}><A href={"/algebra"} disabled={true}>Algebra lineare</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2018_AlgebraLineare"}>Algebra lineare</Anchor></Size></LI>
-                        <LI><Size value={"l"}><A href={"/algoritmi"} disabled={true}>Algoritmi e strutture dati</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/blob/master/2018_ArchitetturaDeiCalcolatori/08_AppuntiEDeduzioni.md"}>Architettura dei calcolatori</Anchor></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2018_AlgoritmiEStruttureDati"}>Algoritmi e strutture dati</Anchor></Size></LI>
                     </ul>
                 </TitleBox>
                 <TitleBox title={"Secondo anno"}>
                     <ul>
-                        <LI><Size value={"l"}><A href={"/fisica"} disabled={true}>Fisica</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://old.uni.steffo.eu/#/fisica"}>Fisica</Anchor></Size></LI>
-                        <LI><Size value={"l"}><A href={"/statistica"} disabled={true}>Statistica ed elementi di probabilità</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2019_ProgrammazioneAdOggetti"}>Programmazione ad oggetti</Anchor></Size></LI>
-                        <LI><Size value={"l"}><A href={"/apprendimento"} disabled={true}>Apprendimento ed evoluzione in sistemi artificiali</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://old.uni.steffo.eu/#/statistica"}>Statistica ed elementi di probabilità</Anchor></Size></LI>
-                        <LI><Size value={"l"}><A href={"/basididati"} disabled={true}>Basi di dati</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2019_SistemiOperativi"}>Sistemi operativi</Anchor></Size></LI>
-                        <LI><Size value={"l"}><A href={"/calcolo"} disabled={true}>Calcolo numerico</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://old.uni.steffo.eu/#/apprendimento"}>Apprendimento ed evoluzione in sistemi artificiali</Anchor></Size></LI>
-                        <LI><Size value={"l"}><A href={"/oli"} disabled={true}>Ottimizzazione lineare intera</A></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://old.uni.steffo.eu/#/basididati"}>Basi di dati</Anchor></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://old.uni.steffo.eu/#/calcolonumerico"}>Calcolo numerico</Anchor></Size></LI>
+                        <LI><Size value={"l"}><Anchor href={"https://old.uni.steffo.eu/#/ottimizzazionelineare"}>Ottimizzazione lineare intera</Anchor></Size></LI>
                     </ul>
                 </TitleBox>
                 <TitleBox title={"Terzo anno"}>
@@ -46,6 +56,6 @@ export default function Home() {
                     </ul>
                 </TitleBox>
             </TitleSplit>
-        </Page>
+        </article>
     )
 }