From 2cf36f46e5bbb1e5e0a67c4efe1c92ccc65eb98c Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 24 Mar 2021 16:14:15 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Reformat=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/codeStyles/codeStyleConfig.xml    |   5 +
 src/App.js                              |  22 +-
 src/components/Box.js                   |  10 +-
 src/components/Footer.js                |  10 +-
 src/components/SelectSkin.js            |   7 +-
 src/components/Split.js                 |  18 +-
 src/components/Todo.js                  |  10 +-
 src/index.css                           |   6 +-
 src/index.js                            |  21 +-
 src/reportWebVitals.js                  |  22 +-
 src/routes/Error404.js                  |   4 +-
 src/routes/Fisica/index.js              |  16 +-
 src/routes/Gestinfo/abbr/API.js         |   4 +-
 src/routes/Gestinfo/abbr/Glob.js        |   7 +-
 src/routes/Gestinfo/abbr/IC.js          |   4 +-
 src/routes/Gestinfo/abbr/IDF.js         |   9 +-
 src/routes/Gestinfo/abbr/IR.js          |   4 +-
 src/routes/Gestinfo/abbr/Locuzione.js   |   7 +-
 src/routes/Gestinfo/abbr/Ononimi.js     |   4 +-
 src/routes/Gestinfo/abbr/Predicato.js   |   7 +-
 src/routes/Gestinfo/abbr/RSV.js         |   4 +-
 src/routes/Gestinfo/abbr/Regex.js       |   4 +-
 src/routes/Gestinfo/abbr/TF.js          |   6 +-
 src/routes/Gestinfo/abbr/TFIDF.js       |   6 +-
 src/routes/Gestinfo/abbr/UIN.js         |   7 +-
 src/routes/Gestinfo/components/Token.js |  10 +-
 src/routes/Gestinfo/index.js            | 700 +++++++++++++++---------
 src/routes/Home.js                      |  60 +-
 28 files changed, 617 insertions(+), 377 deletions(-)
 create mode 100644 .idea/codeStyles/codeStyleConfig.xml

diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..a55e7a1
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index daea67e..e8fb4dd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,16 @@
-import React, {useState} from "react";
-import {BaseLink, Bluelib, Main, Title} from "bluelib/lib/components"
-import {Switch, Route} from "react-router-dom";
-import Home from "./routes/Home";
-import Error404 from "./routes/Error404";
-import Gestinfo from "./routes/Gestinfo";
-import style from "./App.module.css";
-import Footer from "./components/Footer";
+import React, { useState } from "react"
+import { BaseLink, Bluelib, Main, Title } from "bluelib/lib/components"
+import { Route, Switch } from "react-router-dom"
+import Home from "./routes/Home"
+import Error404 from "./routes/Error404"
+import Gestinfo from "./routes/Gestinfo"
+import style from "./App.module.css"
+import Footer from "./components/Footer"
 import Fisica from "./routes/Fisica"
 
 
 export default function App() {
-    const [skin, setSkin] = useState("rygblue");
+    const [skin, setSkin] = useState("rygblue")
 
     return (
         <Bluelib skin={skin} className={style.app}>
@@ -29,7 +29,7 @@ export default function App() {
                         <Fisica/>
                     </Route>
                     <Route path={"*"}>
-                        <Error404 />
+                        <Error404/>
                     </Route>
                 </Switch>
             </Main>
@@ -37,6 +37,6 @@ export default function App() {
             <Footer default={true}/>
 
         </Bluelib>
-    );
+    )
 }
 
diff --git a/src/components/Box.js b/src/components/Box.js
index e6d4279..c84d7ea 100644
--- a/src/components/Box.js
+++ b/src/components/Box.js
@@ -1,11 +1,11 @@
-import React from "react";
-import {Box as BluelibBox, Title} from "bluelib/lib/components";
-import PropTypes from "prop-types";
+import React from "react"
+import { Box as BluelibBox, Title } from "bluelib/lib/components"
+import PropTypes from "prop-types"
 import classNames from "classnames"
 import Style from "./Box.module.css"
 
 
-export default function Box({children, className, title, Type = BluelibBox, ...props}) {
+export default function Box({ children, className, title, Type = BluelibBox, ...props }) {
     return (
         <Type className={classNames(Style.Panel, className)} {...props}>
             <Title size={"l"}>
@@ -18,5 +18,5 @@ export default function Box({children, className, title, Type = BluelibBox, ...p
 
 Box.propTypes = {
     children: PropTypes.node,
-    title: PropTypes.node
+    title: PropTypes.node,
 }
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 35a6293..f10ffa4 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,5 +1,6 @@
-import style from './Footer.module.css';
-import {Anchor, Title} from "bluelib/lib/components";
+import style from "./Footer.module.css"
+import { Anchor, Title } from "bluelib/lib/components"
+
 
 export default function Footer() {
     return (
@@ -11,10 +12,11 @@ export default function Footer() {
                 &nbsp;-&nbsp;
                 <Anchor href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</Anchor>
                 &nbsp;-&nbsp;
-                <Anchor href="https://github.com/Steffo99/uni.steffo.eu">{process.env.REACT_APP_NAME} {process.env.REACT_APP_VERSION} ({process.env.NODE_ENV})</Anchor>
+                <Anchor
+                    href="https://github.com/Steffo99/uni.steffo.eu">{process.env.REACT_APP_NAME} {process.env.REACT_APP_VERSION} ({process.env.NODE_ENV})</Anchor>
                 &nbsp;-&nbsp;
                 <Anchor href="https://ko-fi.com/steffo">Supportami</Anchor>
             </Title>
         </div>
-    );
+    )
 }
diff --git a/src/components/SelectSkin.js b/src/components/SelectSkin.js
index fc1ada1..289fd6d 100644
--- a/src/components/SelectSkin.js
+++ b/src/components/SelectSkin.js
@@ -1,8 +1,7 @@
-import React, {useContext} from "react";
-import ContextBluelibSkin from "bluelib/lib/contexts/ContextBluelibSkin";
+import React from "react"
 
 
-export default function SelectSkin({skin, setSkin}) {
+export default function SelectSkin({ skin, setSkin }) {
     return (
         <span>
             <select value={skin} onChange={(event) => setSkin(event.target.value)}>
@@ -10,5 +9,5 @@ export default function SelectSkin({skin, setSkin}) {
                 <option value={"rygblue"}>Blu reale</option>
             </select>
         </span>
-    );
+    )
 }
diff --git a/src/components/Split.js b/src/components/Split.js
index 390ca50..03bad33 100644
--- a/src/components/Split.js
+++ b/src/components/Split.js
@@ -1,16 +1,16 @@
-import React from "react";
-import {Split as BluelibSplit, Title} from "bluelib/lib/components";
-import PropTypes from "prop-types";
+import React from "react"
+import { Split as BluelibSplit, Title } from "bluelib/lib/components"
+import PropTypes from "prop-types"
 
 
-export default function Split({children, title, ...props}) {
+export default function Split({ children, title, ...props }) {
     return (
         <div {...props}>
             {title ?
-                <Title size={"xl"}>
-                    {title}
-                </Title>
-            : null}
+             <Title size={"xl"}>
+                 {title}
+             </Title>
+                   : null}
             <BluelibSplit>
                 {children}
             </BluelibSplit>
@@ -21,5 +21,5 @@ export default function Split({children, title, ...props}) {
 Split.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    title: PropTypes.node
+    title: PropTypes.node,
 }
diff --git a/src/components/Todo.js b/src/components/Todo.js
index fffd1f1..33828d6 100644
--- a/src/components/Todo.js
+++ b/src/components/Todo.js
@@ -1,11 +1,11 @@
-import React, {useEffect} from "react";
-import PropTypes from "prop-types";
-import style from "./Todo.module.css";
+import React, { useEffect } from "react"
+import PropTypes from "prop-types"
+import style from "./Todo.module.css"
 
 
-export default function Todo({children}) {
+export default function Todo({ children }) {
     useEffect(() => {
-        console.info("TODO:", {children})
+        console.info("TODO:", { children })
     }, [])
 
     return (
diff --git a/src/index.css b/src/index.css
index fa3b54f..f9efb6d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,8 @@
 body {
-  margin: 0;
+    margin: 0;
 }
 
 #root {
-  max-width: 100vw;
-  min-height: 100vh;
+    max-width: 100vw;
+    min-height: 100vh;
 }
diff --git a/src/index.js b/src/index.js
index 4fcff31..8af545c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,20 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import {BrowserRouter} from "react-router-dom"
+import React from "react"
+import ReactDOM from "react-dom"
+import "./index.css"
+import App from "./App"
+import reportWebVitals from "./reportWebVitals"
+import { BrowserRouter } from "react-router-dom"
+
 
 ReactDOM.render(
     <React.StrictMode>
         <BrowserRouter primary={true}>
-            <App />
+            <App/>
         </BrowserRouter>
     </React.StrictMode>,
-    document.getElementById('root')
-);
+    document.getElementById("root"),
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
index 5253d3a..08bd3d9 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -1,13 +1,13 @@
 const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
+    if(onPerfEntry && onPerfEntry instanceof Function) {
+        import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+            getCLS(onPerfEntry)
+            getFID(onPerfEntry)
+            getFCP(onPerfEntry)
+            getLCP(onPerfEntry)
+            getTTFB(onPerfEntry)
+        })
+    }
+}
 
-export default reportWebVitals;
+export default reportWebVitals
diff --git a/src/routes/Error404.js b/src/routes/Error404.js
index 478d035..9eac27f 100644
--- a/src/routes/Error404.js
+++ b/src/routes/Error404.js
@@ -1,5 +1,5 @@
-import React from "react";
-import {Paragraph, Color, Box, Title} from "bluelib/lib/components";
+import React from "react"
+import { Box, Color, Paragraph, Title } from "bluelib/lib/components"
 import Split from "../components/Split"
 
 
diff --git a/src/routes/Fisica/index.js b/src/routes/Fisica/index.js
index 995bd6f..3f98bdf 100644
--- a/src/routes/Fisica/index.js
+++ b/src/routes/Fisica/index.js
@@ -1,22 +1,22 @@
-import {Anchor, BaseLink, Bold as B, Color, ListItem as LI, Paragraph as P} from "bluelib/lib/components"
-import {default as Latex} from "bluelib/lib/components/LatexMath"
+import { Anchor, BaseLink, Bold as B, Color, ListItem as LI, Paragraph as P } from "bluelib/lib/components"
+import { default as Latex } from "bluelib/lib/components/LatexMath"
 
 import Todo from "../../components/Todo"
 import Split from "../../components/Split"
 import Box from "../../components/Box"
 
 
-const r = String.raw;
+const r = String.raw
 
 
-function Plus({children}) {
+function Plus({ children }) {
     return (
         <Color builtin={"red"}>{children}</Color>
     )
 }
 
 
-function Minus({children}) {
+function Minus({ children }) {
     return (
         <Color builtin={"blue"}>{children}</Color>
     )
@@ -34,7 +34,8 @@ export default function Fisica() {
                 </Box>
                 <Box title={"Il corso all'Unimore"}>
                     <P>
-                        🎓 Il corso è stato tenuto dalla <Anchor href={"mailto:rossella.brunetti@unimore.it"}>Prof.ssa Rossella Brunetti</Anchor>.
+                        🎓 Il corso è stato tenuto dalla <Anchor href={"mailto:rossella.brunetti@unimore.it"}>Prof.ssa
+                        Rossella Brunetti</Anchor>.
                     </P>
                     <P>
                         📘 Le dispense <Color builtin={"red"}>non sono più disponibili</Color>.
@@ -563,7 +564,8 @@ export default function Fisica() {
                 </Box>
                 <Box title="Conduttori e isolanti">
                     <P>
-                        Più <Anchor href="https://it.wikipedia.org/wiki/Ione">ioni</Anchor> ha un corpo, meglio la carica
+                        Più <Anchor href="https://it.wikipedia.org/wiki/Ione">ioni</Anchor> ha un corpo, meglio la
+                        carica
                         si muove attraverso di esso.
                     </P>
                     <P>
diff --git a/src/routes/Gestinfo/abbr/API.js b/src/routes/Gestinfo/abbr/API.js
index 2633392..e9e4099 100644
--- a/src/routes/Gestinfo/abbr/API.js
+++ b/src/routes/Gestinfo/abbr/API.js
@@ -1,5 +1,5 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function API() {
diff --git a/src/routes/Gestinfo/abbr/Glob.js b/src/routes/Gestinfo/abbr/Glob.js
index c98e163..aaccc88 100644
--- a/src/routes/Gestinfo/abbr/Glob.js
+++ b/src/routes/Gestinfo/abbr/Glob.js
@@ -1,10 +1,11 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function Glob() {
     return (
-        <Help text={`La sintassi della ricerca tra file, dove ? sostituisce un singolo carattere, * un qualsiasi numero e ** include le sottocartelle.`}>Glob</Help>
+        <Help
+            text={`La sintassi della ricerca tra file, dove ? sostituisce un singolo carattere, * un qualsiasi numero e ** include le sottocartelle.`}>Glob</Help>
     )
 }
 
diff --git a/src/routes/Gestinfo/abbr/IC.js b/src/routes/Gestinfo/abbr/IC.js
index 3a6b4db..581bd1b 100644
--- a/src/routes/Gestinfo/abbr/IC.js
+++ b/src/routes/Gestinfo/abbr/IC.js
@@ -1,5 +1,5 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function IC() {
diff --git a/src/routes/Gestinfo/abbr/IDF.js b/src/routes/Gestinfo/abbr/IDF.js
index 5b4aa05..ffcd744 100644
--- a/src/routes/Gestinfo/abbr/IDF.js
+++ b/src/routes/Gestinfo/abbr/IDF.js
@@ -1,11 +1,12 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
-import LatexMath from "bluelib/lib/components/LatexMath";
+import React from "react"
+import { Help } from "bluelib/lib/components"
+import LatexMath from "bluelib/lib/components/LatexMath"
 
 
 export default function IDF() {
     return (
-        <Help text={"Inverse document frequency, quanto un termine è raro all'interno della collezione di documenti"}><LatexMath>{`idf`}</LatexMath></Help>
+        <Help
+            text={"Inverse document frequency, quanto un termine è raro all'interno della collezione di documenti"}><LatexMath>{`idf`}</LatexMath></Help>
     )
 }
 
diff --git a/src/routes/Gestinfo/abbr/IR.js b/src/routes/Gestinfo/abbr/IR.js
index 36cbb76..9c917a1 100644
--- a/src/routes/Gestinfo/abbr/IR.js
+++ b/src/routes/Gestinfo/abbr/IR.js
@@ -1,5 +1,5 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function IR() {
diff --git a/src/routes/Gestinfo/abbr/Locuzione.js b/src/routes/Gestinfo/abbr/Locuzione.js
index 6468bee..46d34ab 100644
--- a/src/routes/Gestinfo/abbr/Locuzione.js
+++ b/src/routes/Gestinfo/abbr/Locuzione.js
@@ -1,10 +1,11 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function Locuzione() {
     return (
-        <Help text={`Gruppo di parole che funzionano come una unica: a cavallo, forze dell'ordine, etc.`}>locuzione</Help>
+        <Help
+            text={`Gruppo di parole che funzionano come una unica: a cavallo, forze dell'ordine, etc.`}>locuzione</Help>
     )
 };
 
diff --git a/src/routes/Gestinfo/abbr/Ononimi.js b/src/routes/Gestinfo/abbr/Ononimi.js
index 080eb0e..281c1b7 100644
--- a/src/routes/Gestinfo/abbr/Ononimi.js
+++ b/src/routes/Gestinfo/abbr/Ononimi.js
@@ -1,5 +1,5 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function Ononimi() {
diff --git a/src/routes/Gestinfo/abbr/Predicato.js b/src/routes/Gestinfo/abbr/Predicato.js
index d926685..238c7d2 100644
--- a/src/routes/Gestinfo/abbr/Predicato.js
+++ b/src/routes/Gestinfo/abbr/Predicato.js
@@ -1,10 +1,11 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function Predicato() {
     return (
-        <Help text={"La minima unità booleana valutabile. `A`, `B`, etc. Equivalente a un evento in statistica, e a una variabile in matematica."}>predicato</Help>
+        <Help
+            text={"La minima unità booleana valutabile. `A`, `B`, etc. Equivalente a un evento in statistica, e a una variabile in matematica."}>predicato</Help>
     )
 }
 
diff --git a/src/routes/Gestinfo/abbr/RSV.js b/src/routes/Gestinfo/abbr/RSV.js
index a198fbb..935ac86 100644
--- a/src/routes/Gestinfo/abbr/RSV.js
+++ b/src/routes/Gestinfo/abbr/RSV.js
@@ -1,5 +1,5 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function RSV() {
diff --git a/src/routes/Gestinfo/abbr/Regex.js b/src/routes/Gestinfo/abbr/Regex.js
index 27a2dca..fb99e2b 100644
--- a/src/routes/Gestinfo/abbr/Regex.js
+++ b/src/routes/Gestinfo/abbr/Regex.js
@@ -1,5 +1,5 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function Regex() {
diff --git a/src/routes/Gestinfo/abbr/TF.js b/src/routes/Gestinfo/abbr/TF.js
index a5edcb5..8a9ae8b 100644
--- a/src/routes/Gestinfo/abbr/TF.js
+++ b/src/routes/Gestinfo/abbr/TF.js
@@ -1,6 +1,6 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
-import LatexMath from "bluelib/lib/components/LatexMath";
+import React from "react"
+import { Help } from "bluelib/lib/components"
+import LatexMath from "bluelib/lib/components/LatexMath"
 
 
 export default function TF() {
diff --git a/src/routes/Gestinfo/abbr/TFIDF.js b/src/routes/Gestinfo/abbr/TFIDF.js
index 0e16de6..766eb10 100644
--- a/src/routes/Gestinfo/abbr/TFIDF.js
+++ b/src/routes/Gestinfo/abbr/TFIDF.js
@@ -1,11 +1,11 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function TFIDF() {
     return (
         <Help text={"Metodo per calcolare i pesi che moltiplica il peso tf per il peso idf."}>tf-idf</Help>
-    );
+    )
 }
 
 TFIDF.propTypes = {}
diff --git a/src/routes/Gestinfo/abbr/UIN.js b/src/routes/Gestinfo/abbr/UIN.js
index 819d851..28145de 100644
--- a/src/routes/Gestinfo/abbr/UIN.js
+++ b/src/routes/Gestinfo/abbr/UIN.js
@@ -1,10 +1,11 @@
-import React from "react";
-import {Help} from "bluelib/lib/components";
+import React from "react"
+import { Help } from "bluelib/lib/components"
 
 
 export default function UIN() {
     return (
-        <Help text={`User Information Need, una descrizione in linguaggio naturale delle informazioni di cui ha bisogno l'utente`}>UIN</Help>
+        <Help
+            text={`User Information Need, una descrizione in linguaggio naturale delle informazioni di cui ha bisogno l'utente`}>UIN</Help>
     )
 }
 
diff --git a/src/routes/Gestinfo/components/Token.js b/src/routes/Gestinfo/components/Token.js
index f93ad47..ce5fec4 100644
--- a/src/routes/Gestinfo/components/Token.js
+++ b/src/routes/Gestinfo/components/Token.js
@@ -1,10 +1,10 @@
-import React from "react";
-import PropTypes from "prop-types";
-import style from "./Token.module.css";
-import {Bold, Strike, Color} from "bluelib/lib/components";
+import React from "react"
+import PropTypes from "prop-types"
+import style from "./Token.module.css"
+import { Bold, Color, Strike } from "bluelib/lib/components"
 
 
-export default function Token({children, indexTerm, stopword}) {
+export default function Token({ children, indexTerm, stopword }) {
     if(indexTerm) {
         return (
             <Bold><Color builtin={"yellow"}><span className={style.token}>{children}</span></Color></Bold>
diff --git a/src/routes/Gestinfo/index.js b/src/routes/Gestinfo/index.js
index 30ba199..ad27e14 100644
--- a/src/routes/Gestinfo/index.js
+++ b/src/routes/Gestinfo/index.js
@@ -1,35 +1,36 @@
-import React from "react";
+import React from "react"
 import {
-    Aside,
     Anchor,
-    Help,
+    Aside,
+    BaseLink,
+    Bold as B,
     Code,
     Color,
-    Underline as U,
-    Paragraph as P,
-    Bold as B,
+    Help,
     Italic as I,
     ListItem as LI,
-    BaseLink,
-} from "bluelib/lib/components";
-import LatexMath from "bluelib/lib/components/LatexMath";
-import Split from "../../components/Split";
-import Box from "../../components/Box";
-import IR from "./abbr/IR";
-import API from "./abbr/API";
-import Token from "./components/Token";
-import IC from "./abbr/IC";
-import Ononimi from "./abbr/Ononimi";
-import UIN from "./abbr/UIN";
-import Regex from "./abbr/Regex";
-import Glob from "./abbr/Glob";
-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 Locuzione from "./abbr/Locuzione";
+    Paragraph as P,
+    Underline as U,
+} from "bluelib/lib/components"
+import LatexMath from "bluelib/lib/components/LatexMath"
+import Split from "../../components/Split"
+import Box from "../../components/Box"
+import IR from "./abbr/IR"
+import API from "./abbr/API"
+import Token from "./components/Token"
+import IC from "./abbr/IC"
+import Ononimi from "./abbr/Ononimi"
+import UIN from "./abbr/UIN"
+import Regex from "./abbr/Regex"
+import Glob from "./abbr/Glob"
+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 Locuzione from "./abbr/Locuzione"
+
 
 const r = String.raw
 
@@ -40,7 +41,8 @@ export default function Gestinfo() {
             <Split title={"Gestione dell'informazione"}>
                 <Box title={"Di cosa si tratta?"}>
                     <P>
-                        Si parla di <B>come processare enormi quantità di testo</B> al fine di <B>effettuarvi ricerche</B>.
+                        Si parla di <B>come processare enormi quantità di testo</B> al fine di <B>effettuarvi
+                        ricerche</B>.
                     </P>
                     <Aside>
                         Praticamente, si parla di come funzionano i motori di ricerca!
@@ -48,7 +50,8 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"Il corso all'Unimore"}>
                     <P>
-                        🎓 Il corso è stato tenuto dalla <Anchor href={"mailto:federica.mandreoli@unimore.it"}>Prof.ssa Federica Mandreoli</Anchor>.
+                        🎓 Il corso è stato tenuto dalla <Anchor href={"mailto:federica.mandreoli@unimore.it"}>Prof.ssa
+                        Federica Mandreoli</Anchor>.
                     </P>
                     <P>
                         📘 Le dispense <Color builtin={"red"}><span>non sono più disponibili</span></Color>.
@@ -61,14 +64,16 @@ export default function Gestinfo() {
                     <ul>
                         <LI><BaseLink disabled={true}>📄 Dispense su Dolly</BaseLink></LI>
                         <LI><Anchor href={"https://www.wikipedia.org/"}>📰 Wikipedia</Anchor></LI>
-                        <LI><Anchor href={"https://gitlab.com/2429571/gestione-informazione"}>🗒️ Appunti open-source di Sharon Guerzoni</Anchor></LI>
+                        <LI><Anchor href={"https://gitlab.com/2429571/gestione-informazione"}>🗒️ Appunti open-source di
+                            Sharon Guerzoni</Anchor></LI>
                     </ul>
                 </Box>
             </Split>
             <Split title={"Information Retrieval"}>
                 <Box title={"Cos'è?"}>
                     <P>
-                        È il <B>processo</B> di <B>raccolta documenti</B>, <B>elaborazione query</B> e <B>richiamo di più risposte</B>.
+                        È il <B>processo</B> di <B>raccolta documenti</B>, <B>elaborazione query</B> e <B>richiamo di
+                        più risposte</B>.
                     </P>
                     <P>
                         Un'applicazione che effettua <IR/> si chiama <B>motore di ricerca</B>.
@@ -81,16 +86,22 @@ export default function Gestinfo() {
                         Sono le unità con cui lavora il motore di ricerca.
                     </P>
                     <P>
-                        Possono essere di vario tipo: <B>pagine web</B>, <B>metadati di file</B>, <B>paper accademici</B>...
+                        Possono essere di vario tipo: <B>pagine web</B>, <B>metadati di file</B>, <B>paper
+                        accademici</B>...
                     </P>
                     <Aside>
-                        Ad esempio, i documenti di <Anchor href={"https://google.com"}>Google Search</Anchor> sono le <B>pagine web</B>.
+                        Ad esempio, i documenti di <Anchor href={"https://google.com"}>Google Search</Anchor> sono
+                        le <B>pagine web</B>.
                     </Aside>
                     <P>
-                        Vengono raccolti in svariati modi: possono provenire da <B><API/></B>, essere forniti manualmente e poi processati con un <B>parser</B>, essere scoperti tramite <B>web crawling</B> e processati tramite <B>web scraping</B>...
+                        Vengono raccolti in svariati modi: possono provenire da <B><API/></B>, essere forniti
+                        manualmente e poi processati con un <B>parser</B>, essere scoperti tramite <B>web crawling</B> e
+                        processati tramite <B>web scraping</B>...
                     </P>
                     <Aside>
-                        Il web crawler più famoso è <Anchor href={"https://it.wikipedia.org/wiki/Googlebot"}>Googlebot</Anchor>, che visita ricorsivamente tutti i collegamenti presenti su ogni pagina.
+                        Il web crawler più famoso è <Anchor
+                        href={"https://it.wikipedia.org/wiki/Googlebot"}>Googlebot</Anchor>, che visita ricorsivamente
+                        tutti i collegamenti presenti su ogni pagina.
                     </Aside>
                     <P>
                         Un insieme di documenti è detto <B><I>collezione</I></B>.
@@ -98,27 +109,33 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"Query"}>
                     <P>
-                        La <B>richiesta di informazioni</B> effettuata da un utente, in un <B>linguaggio</B> che il motore di ricerca è <B>in grado di capire</B>.
+                        La <B>richiesta di informazioni</B> effettuata da un utente, in un <B>linguaggio</B> che il
+                        motore di ricerca è <B>in grado di capire</B>.
                     </P>
                     <Aside>
                         In pratica, è quello che scrivi sulla casella di ricerca di Google!
                     </Aside>
                     <P>
-                        Solitamente vi è possibile inserire <B>parole chiave</B> e <B>operatori</B> per specificare cosa si desidera trovare.
+                        Solitamente vi è possibile inserire <B>parole chiave</B> e <B>operatori</B> per specificare cosa
+                        si desidera trovare.
                     </P>
                     <Aside>
-                        È possibile vedere tutti gli operatori supportati da Google nella pagina <Anchor href={"https://www.google.it/advanced_search"}>Advanced Search</Anchor>.
+                        È possibile vedere tutti gli operatori supportati da Google nella pagina <Anchor
+                        href={"https://www.google.it/advanced_search"}>Advanced Search</Anchor>.
                     </Aside>
                 </Box>
                 <Box title={"Risposte"}>
                     <P>
-                        I <B>documenti</B> che il motore di ricerca sceglie di mostrare all'utente in quanto li ha ritenuti <B>rilevanti alla query effettuata</B>.
+                        I <B>documenti</B> che il motore di ricerca sceglie di mostrare all'utente in quanto li ha
+                        ritenuti <B>rilevanti alla query effettuata</B>.
                     </P>
                     <P>
-                        Spesso sono composte da <B>metadati del documento</B> e da un <B>breve estratto</B> della sezione del documento più rilevante.
+                        Spesso sono composte da <B>metadati del documento</B> e da un <B>breve estratto</B> della
+                        sezione del documento più rilevante.
                     </P>
                     <Aside>
-                        Google Search mostra <B>URL</B>, <B>titolo</B> e <B>descrizione</B> della pagina (o un suo <B>estratto</B> se una descrizione non è disponibile).
+                        Google Search mostra <B>URL</B>, <B>titolo</B> e <B>descrizione</B> della pagina (o un
+                        suo <B>estratto</B> se una descrizione non è disponibile).
                     </Aside>
                 </Box>
             </Split>
@@ -145,7 +162,8 @@ export default function Gestinfo() {
                     </P>
                     <Aside>
                         <P>
-                            I <LatexMath>{`q`}</LatexMath>-grammi assumono vari nomi in base al valore di <LatexMath>{`q`}</LatexMath>:
+                            I <LatexMath>{`q`}</LatexMath>-grammi assumono vari nomi in base al valore
+                            di <LatexMath>{`q`}</LatexMath>:
                         </P>
                         <ul>
                             <LI><U>Bigrammi</U>: <LatexMath>{`q = 2`}</LatexMath></LI>
@@ -159,7 +177,8 @@ export default function Gestinfo() {
                             I trigrammi del token <Token>ciao</Token> sono:
                         </P>
                         <P>
-                            <Token>░░c</Token> <Token>░ci</Token> <Token>cia</Token> <Token>iao</Token> <Token>ao░</Token> <Token>o░░</Token>
+                            <Token>░░c</Token> <Token>░ci</Token> <Token>cia</Token> <Token>iao</Token>
+                            <Token>ao░</Token> <Token>o░░</Token>
                         </P>
                     </Aside>
                 </Box>
@@ -167,7 +186,8 @@ export default function Gestinfo() {
             <Split title={"Preprocessing dei documenti"}>
                 <Box title={"Cos'è?"}>
                     <P>
-                        Una <B>procedura</B> svolta quando un documento viene <B>aggiunto</B> al motore di ricerca, permettendone l'indicizzazione e in seguito il richiamo.
+                        Una <B>procedura</B> svolta quando un documento viene <B>aggiunto</B> al motore di ricerca,
+                        permettendone l'indicizzazione e in seguito il richiamo.
                     </P>
                     <P>
                         È suddivisa in varie fasi, generalmente 5 o 6.
@@ -183,7 +203,9 @@ export default function Gestinfo() {
                         Treno per Modena → <Token>Treno</Token> <Token>per</Token> <Token>Modena</Token>
                     </Aside>
                     <P>
-                        Spesso si decide di <B>distinguere</B> tra gli <B><Ononimi/></B> attraverso algoritmi di <B><I>word sense disambiguation</I></B>, in grado di dedurre il contesto analizzando i significati delle parole circostanti.
+                        Spesso si decide di <B>distinguere</B> tra gli <B><Ononimi/></B> attraverso algoritmi di <B><I>word
+                        sense disambiguation</I></B>, in grado di dedurre il contesto analizzando i significati delle
+                        parole circostanti.
                     </P>
                     <Aside>
                         <Token>Sale 🧂</Token> oppure <Token>Sale 🪜</Token>?
@@ -191,7 +213,9 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"2. Normalizzazione dei token"}>
                     <P>
-                        Il motore di ricerca decide come trattare i <B>simboli</B> tipografici, la <B><Help text={"Quello che in inglese si chiama 'case'. Sono grafie il maiuscolo, il minuscolo, il corsivo..."}>grafia</Help></B> delle lettere, le <B>cifre</B>, modificando l'insieme di token come ritiene necessario.
+                        Il motore di ricerca decide come trattare i <B>simboli</B> tipografici, la <B><Help
+                        text={"Quello che in inglese si chiama 'case'. Sono grafie il maiuscolo, il minuscolo, il corsivo..."}>grafia</Help></B> delle
+                        lettere, le <B>cifre</B>, modificando l'insieme di token come ritiene necessario.
                     </P>
                     <Aside>
                         <P>
@@ -207,13 +231,15 @@ export default function Gestinfo() {
                             <LI>
                                 Rimozione maiuscole non-significative:
                                 <Aside>
-                                    <Token>Treno</Token> <Token>per</Token> <Token>Modena</Token> → <Token>treno</Token> <Token>per</Token> <Token>Modena</Token>
+                                    <Token>Treno</Token> <Token>per</Token> <Token>Modena</Token> → <Token>treno</Token>
+                                    <Token>per</Token> <Token>Modena</Token>
                                 </Aside>
                             </LI>
                             <LI>
                                 Separazione dei trattini
                                 <Aside>
-                                    <Token>state-of-the-art</Token> → <Token>state</Token> <Token>of</Token> <Token>the</Token> <Token>art</Token>
+                                    <Token>state-of-the-art</Token> → <Token>state</Token> <Token>of</Token>
+                                    <Token>the</Token> <Token>art</Token>
                                 </Aside>
                             </LI>
                             <LI>
@@ -227,19 +253,25 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"3. Eliminazione delle stopwords"}>
                     <P>
-                        Le <I>stopwords</I>, i token ritenuti <B>inutili</B> ai fini delle ricerche, vengono <B>eliminate</B> dall'insieme di token ottenuto nel passo precedente.
+                        Le <I>stopwords</I>, i token ritenuti <B>inutili</B> ai fini delle ricerche,
+                        vengono <B>eliminate</B> dall'insieme di token ottenuto nel passo precedente.
                     </P>
                     <P>
-                        Stopwords comuni sono gli <B><Help text={"Il, lo, la, un, una..."}>articoli</Help></B>, le <B><Help text={"E, perchè, ma, così..."}>congiunzioni</Help></B> e, in generale, tutte le <B>parole più frequenti</B> di una lingua.
+                        Stopwords comuni sono gli <B><Help text={"Il, lo, la, un, una..."}>articoli</Help></B>,
+                        le <B><Help text={"E, perchè, ma, così..."}>congiunzioni</Help></B> e, in generale, tutte le <B>parole
+                        più frequenti</B> di una lingua.
                     </P>
                     <Aside>
                         <Token>basi</Token> <Token stopword={true}>di</Token> <Token>dati</Token>
                     </Aside>
                     <P>
-                        Talvolta capita di dover <B>distinguere</B> tra stopwords e <B>nomi propri</B>, soprattutto nell'inglese; per risolvere il problema ci si affida alla disambiguazione degli ononimi effettuata durante l'analisi lessicale.
+                        Talvolta capita di dover <B>distinguere</B> tra stopwords e <B>nomi propri</B>, soprattutto
+                        nell'inglese; per risolvere il problema ci si affida alla disambiguazione degli ononimi
+                        effettuata durante l'analisi lessicale.
                     </P>
                     <Aside>
-                        La band <Anchor href={"https://en.wikipedia.org/wiki/The_Who"}>The Who</Anchor> è l'incubo dei motori di ricerca che eliminano indiscriminatamente le stopwords:
+                        La band <Anchor href={"https://en.wikipedia.org/wiki/The_Who"}>The Who</Anchor> è l'incubo dei
+                        motori di ricerca che eliminano indiscriminatamente le stopwords:
                         <Aside>
                             <Token stopword={true}>The</Token> <Token stopword={true}>Who</Token>
                         </Aside>
@@ -249,7 +281,8 @@ export default function Gestinfo() {
             <Split>
                 <Box title={"4. Stemming / Lemmatizzazione"}>
                     <P>
-                        Ai token del passo precedente vengono sostituite le <B>radici</B> (<I>stems</I>) oppure le <B>forme base</B> (<I>lemmas</I>) delle parole.
+                        Ai token del passo precedente vengono sostituite le <B>radici</B> (<I>stems</I>) oppure le <B>forme
+                        base</B> (<I>lemmas</I>) delle parole.
                     </P>
                     <Aside>
                         <P>
@@ -280,26 +313,34 @@ export default function Gestinfo() {
                         Gli algoritmi che realizzano questo passo sono detti rispettivamente <B><I>stemmer</I></B> o <B><I>lemmatizer</I></B>.
                     </P>
                     <Aside>
-                        Generalmente sono implementati tramite <Help text={"Dizionari che associano ogni parola alla sua forma base."}>lookup tables</Help>, ma i motori di ricerca più avanzati <Anchor href={"https://en.wikipedia.org/wiki/Stemming#Algorithms"}>possono avere implementazioni anche più complesse</Anchor>.
+                        Generalmente sono implementati tramite <Help
+                        text={"Dizionari che associano ogni parola alla sua forma base."}>lookup tables</Help>, ma i
+                        motori di ricerca più avanzati <Anchor
+                        href={"https://en.wikipedia.org/wiki/Stemming#Algorithms"}>possono avere implementazioni anche
+                        più complesse</Anchor>.
                     </Aside>
                 </Box>
                 <Box title={"5. Selezione degli index term"}>
                     <P>
-                        Il motore di ricerca stabilisce la <B>relativa importanza</B> di ciascun token dell'insieme, in modo da determinare più facilmente in seguito la rilevanza del documento in cui si trovano.
+                        Il motore di ricerca stabilisce la <B>relativa importanza</B> di ciascun token dell'insieme, in
+                        modo da determinare più facilmente in seguito la rilevanza del documento in cui si trovano.
                     </P>
                     <P>
                         I termini più importanti di un documento sono detti <B><I>index term</I></B>.
                     </P>
                     <Aside>
-                        <Token>appunti</Token> <Token>universitari</Token> → <Token indexTerm={true}>appunti</Token> <Token>universitari</Token>
+                        <Token>appunti</Token> <Token>universitari</Token> → <Token indexTerm={true}>appunti</Token>
+                        <Token>universitari</Token>
                     </Aside>
                     <P>
-                        Essi solitamente sono individuati da <B><I>parser</I></B> e <B><I>scanner</I></B>, che analizzano la semantica di ciascun token.
+                        Essi solitamente sono individuati da <B><I>parser</I></B> e <B><I>scanner</I></B>, che
+                        analizzano la semantica di ciascun token.
                     </P>
                 </Box>
                 <Box title={"6. Categorizzazione"}>
                     <P>
-                        Opzionalmente, l'intero documento può essere inserito in una o più <B>categorie</B> di un <B><I>thesaurus</I></B>, una gerarchia predeterminata di categorie di documenti.
+                        Opzionalmente, l'intero documento può essere inserito in una o più <B>categorie</B> di
+                        un <B><I>thesaurus</I></B>, una gerarchia predeterminata di categorie di documenti.
                     </P>
                     <Aside>
                         Un esempio di thesaurus per delle sculture:
@@ -331,7 +372,9 @@ export default function Gestinfo() {
                         </ul>
                     </Aside>
                     <Aside>
-                        Un (simil-)thesaurus generale per l'inglese è <Anchor href={"https://wordnet.princeton.edu/"}>WordNet</Anchor>, mentre uno per l'italiano è <Anchor href={"https://thes.bncf.firenze.sbn.it/thes-dati.htm"}>Nuovo soggettario</Anchor>.
+                        Un (simil-)thesaurus generale per l'inglese è <Anchor
+                        href={"https://wordnet.princeton.edu/"}>WordNet</Anchor>, mentre uno per l'italiano è <Anchor
+                        href={"https://thes.bncf.firenze.sbn.it/thes-dati.htm"}>Nuovo soggettario</Anchor>.
                     </Aside>
                 </Box>
             </Split>
@@ -358,30 +401,35 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"A cosa serve?"}>
                     <P>
-                        La <B><I>word sense disambiguation</I></B> sfrutta la <B>similitudine</B> tra l'ononimo e i <B>token circostanti</B> per stabilire il significato corretto.
+                        La <B><I>word sense disambiguation</I></B> sfrutta la <B>similitudine</B> tra l'ononimo e i <B>token
+                        circostanti</B> per stabilire il significato corretto.
                     </P>
                     <P>
-                        Talvolta alla similitudine sono aggiunte anche altre informazioni, come la <B>distanza</B> tra i token e dati provenienti da <B>sorgenti esterne</B>.
+                        Talvolta alla similitudine sono aggiunte anche altre informazioni, come la <B>distanza</B> tra i
+                        token e dati provenienti da <B>sorgenti esterne</B>.
                     </P>
                 </Box>
             </Split>
             <Split>
                 <Box title={"Similitudine path-based"}>
                     <P>
-                        Un modo di misurare la similitudine tra due token basato sulla loro <B>posizione</B> all'interno del <B>thesaurus</B>.
+                        Un modo di misurare la similitudine tra due token basato sulla loro <B>posizione</B> all'interno
+                        del <B>thesaurus</B>.
                     </P>
                     <Split>
                         <Box title={"Path-distance"}>
                             <P>
                                 Si basa sull'<B>inverso della distanza</B> tra i due token all'interno dell'albero:
                             </P>
-                            <B><LatexMath block={true}>{`sim_{pd}(t_1, t_2) = \\frac{1}{dist(t_1, t_2) + 1}`}</LatexMath></B>
+                            <B><LatexMath
+                                block={true}>{`sim_{pd}(t_1, t_2) = \\frac{1}{dist(t_1, t_2) + 1}`}</LatexMath></B>
                         </Box>
                         <Box title={"Wu-Palmer"}>
                             <P>
                                 Si basa sulla <B>profondità</B> del <B>minimo antenato comune</B> tra i due token:
                             </P>
-                            <B><LatexMath block={true}>{`sim_{wp}(t_1, t_2) = 2 \\cdot \\frac{depth(mac_{\\ t_1,t_2})}{depth(t_1) + depth(t_2)}`}</LatexMath></B>
+                            <B><LatexMath
+                                block={true}>{`sim_{wp}(t_1, t_2) = 2 \\cdot \\frac{depth(mac_{\\ t_1,t_2})}{depth(t_1) + depth(t_2)}`}</LatexMath></B>
                             <Aside>
                                 Varia più lentamente rispetto alla Path-distance.
                             </Aside>
@@ -390,14 +438,17 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={<span>Similitudine <IC/>-based</span>}>
                     <P>
-                        L'<IC/> è una misura <B>probabilistica</B> di quanto un token sia inaspettato all'interno di un documento.
+                        L'<IC/> è una misura <B>probabilistica</B> di quanto un token sia inaspettato all'interno di un
+                        documento.
                     </P>
                     <P>
-                        Definendo <LatexMath>{`P(t)`}</LatexMath> come la probabilità che un <B>token scelto a caso</B> sia <LatexMath>{`t`}</LatexMath>, l'<IC/> sarà:
+                        Definendo <LatexMath>{`P(t)`}</LatexMath> come la probabilità che un <B>token scelto a
+                        caso</B> sia <LatexMath>{`t`}</LatexMath>, l'<IC/> sarà:
                     </P>
                     <B><LatexMath block={true}>{`ic(t) = - \\log \\left( P(t) \\right)`}</LatexMath></B>
                     <P>
-                        La <I>similitudine <IC/>-based</I> è quindi un modo di misurare la similitudine basato sull'<B><IC/></B>.
+                        La <I>similitudine <IC/>-based</I> è quindi un modo di misurare la similitudine basato
+                        sull'<B><IC/></B>.
                     </P>
                     <Aside>
                         Le misure <IC/>-based tengono quindi conto della frequenza dei vari token nella collezione.
@@ -406,19 +457,22 @@ export default function Gestinfo() {
                         <P>
                             Si basa sull'<B><IC/></B> del <B>minimo antenato comune</B>:
                         </P>
-                        <B><LatexMath block={true}>{`sim_{r} (t_1,t_2) = ic \\left( mac_{\\ t_1,t_2} \\right)`}</LatexMath></B>
+                        <B><LatexMath
+                            block={true}>{`sim_{r} (t_1,t_2) = ic \\left( mac_{\\ t_1,t_2} \\right)`}</LatexMath></B>
                     </Box>
                 </Box>
             </Split>
             <Split title={"Correzione dei typo"}>
                 <Box title={"Cos'è?"}>
                     <P>
-                        Una parte della <B>normalizzazione dei token</B> che corregge gli errori ortografici commessi durante l'inserimento della query.
+                        Una parte della <B>normalizzazione dei token</B> che corregge gli errori ortografici commessi
+                        durante l'inserimento della query.
                     </P>
                 </Box>
                 <Box title={"A cosa serve?"}>
                     <P>
-                        Aumenta la <B>soddisfazione</B> dell'utente e gli consente di effettuare ricerche per termini di cui <B>non conosce lo spelling</B>.
+                        Aumenta la <B>soddisfazione</B> dell'utente e gli consente di effettuare ricerche per termini di
+                        cui <B>non conosce lo spelling</B>.
                     </P>
                 </Box>
             </Split>
@@ -449,10 +503,13 @@ export default function Gestinfo() {
                                 </Aside>
                                 <Box title={"Matrice di distanza"}>
                                     <P>
-                                        Matrice costruita per calcolare la distanza di Levenshtein con un algoritmo greedy:
+                                        Matrice costruita per calcolare la distanza di Levenshtein con un algoritmo
+                                        greedy:
                                     </P>
                                     <Aside>
-                                        <Anchor href={"https://gist.github.com/Steffo99/ceeb7ed61a7b6a12a783232c0230ce70"}>Guarda un esempio documentato in Python qui!</Anchor>
+                                        <Anchor
+                                            href={"https://gist.github.com/Steffo99/ceeb7ed61a7b6a12a783232c0230ce70"}>Guarda
+                                            un esempio documentato in Python qui!</Anchor>
                                     </Aside>
                                 </Box>
                             </Box>
@@ -464,29 +521,35 @@ export default function Gestinfo() {
                                     <LI><B>Trasposizione</B> di un singolo carattere</LI>
                                 </ul>
                                 <Aside>
-                                    La distanza di Damerau-Levenshtein tra <Token>pierta</Token> e <Token>pietra</Token> è 1.
+                                    La distanza di Damerau-Levenshtein
+                                    tra <Token>pierta</Token> e <Token>pietra</Token> è 1.
                                 </Aside>
                             </Box>
                             <Box title={"Weighted distance"}>
                                 <P>
-                                    Differenzia i costi delle varie operazioni, diffenenziando ad esempio in base al carattere sostituito.
+                                    Differenzia i costi delle varie operazioni, diffenenziando ad esempio in base al
+                                    carattere sostituito.
                                 </P>
                                 <Aside>
-                                    <code>m</code> ed <code>n</code> sono vicini sulla tastiera e quindi la loro sostituzione "costa" meno, rispetto a <code>q</code> e <code>p</code>.
+                                    <code>m</code> ed <code>n</code> sono vicini sulla tastiera e quindi la loro
+                                    sostituzione "costa" meno, rispetto a <code>q</code> e <code>p</code>.
                                 </Aside>
                             </Box>
                         </Split>
                         <P>
-                            Calcolare l'edit distance <LatexMath>{`E`}</LatexMath> tra due token è un processo computazionalmente <B>molto costoso <LatexMath>{`O(n^2)`}</LatexMath></B>.
+                            Calcolare l'edit distance <LatexMath>{`E`}</LatexMath> tra due token è un processo
+                            computazionalmente <B>molto costoso <LatexMath>{`O(n^2)`}</LatexMath></B>.
                         </P>
                         <Box title={"Filtraggio"}>
                             <P>
-                                È possibile evitare di calcolare l'edit distance per la maggior parte dei termini del vocabolario <I>filtrandoli</I> su <B>criteri più veloci</B>.
+                                È possibile evitare di calcolare l'edit distance per la maggior parte dei termini del
+                                vocabolario <I>filtrandoli</I> su <B>criteri più veloci</B>.
                             </P>
                             <Split>
                                 <Box title={"Lunghezza"}>
                                     <Aside>
-                                        L'edit distance come minimo è la differenza tra il numero di caratteri dei due token.
+                                        L'edit distance come minimo è la differenza tra il numero di caratteri dei due
+                                        token.
                                     </Aside>
                                     <B><LatexMath block={true}>{r`\left| size(X) - size(Y) \right| \leq k`}</LatexMath></B>
                                     <LatexMath block={true}>{r`\Updownarrow`}</LatexMath>
@@ -494,19 +557,25 @@ export default function Gestinfo() {
                                 </Box>
                                 <Box title={"Conteggio"}>
                                     <Aside>
-                                        Meno <LatexMath>{r`q`}</LatexMath>-grammi hanno in comune due token, più sarà alta la loro edit distance.
+                                        Meno <LatexMath>{r`q`}</LatexMath>-grammi hanno in comune due token, più sarà
+                                        alta la loro edit distance.
                                     </Aside>
-                                    <B><LatexMath block={true}>{r`size(X \cap Y) = \max(size(X),\ size(Y)) + q - 1 - (k \cdot q)`}</LatexMath></B>
+                                    <B><LatexMath
+                                        block={true}>{r`size(X \cap Y) = \max(size(X),\ size(Y)) + q - 1 - (k \cdot q)`}</LatexMath></B>
                                     <LatexMath block={true}>{r`\Updownarrow`}</LatexMath>
                                     <LatexMath block={true}>{r`E \leq k`}</LatexMath>
                                 </Box>
                             </Split>
                             <Box title={"Posizione"}>
                                 <Aside>
-                                    Token i cui <LatexMath>{`q`}</LatexMath>-grammi si trovano in posizioni diverse avranno edit distance più alte.
+                                    Token i cui <LatexMath>{`q`}</LatexMath>-grammi si trovano in posizioni diverse
+                                    avranno edit distance più alte.
                                 </Aside>
                                 <P>
-                                    Richiede che venga tenuto traccia delle posizione dei <LatexMath>{`q`}</LatexMath>-grammi, e prevede che i <LatexMath>{`q`}</LatexMath>-grammi a <B>più di <LatexMath>{`k`}</LatexMath> posizioni di distanza</B> non vengano considerati uguali.
+                                    Richiede che venga tenuto traccia delle posizione dei <LatexMath>{`q`}</LatexMath>-grammi,
+                                    e prevede che i <LatexMath>{`q`}</LatexMath>-grammi a <B>più
+                                    di <LatexMath>{`k`}</LatexMath> posizioni di distanza</B> non vengano considerati
+                                    uguali.
                                 </P>
                             </Box>
                         </Box>
@@ -514,16 +583,19 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={<span>Tramite overlap dei <LatexMath>{`q`}</LatexMath>-grammi</span>}>
                     <P>
-                        Dato un token, si <B>ordinano</B> i token del vocabolario in base al numero di <LatexMath>{`q`}</LatexMath>-grammi in comune.
+                        Dato un token, si <B>ordinano</B> i token del vocabolario in base al numero
+                        di <LatexMath>{`q`}</LatexMath>-grammi in comune.
                     </P>
                     <Box title={"Coefficiente di Jaccard"}>
                         <P>
-                            <B>Misura di overlap</B> tra due insiemi di <LatexMath>{`q`}</LatexMath>-grammi <LatexMath>{`X`}</LatexMath> e <LatexMath>{`Y`}</LatexMath>:
+                            <B>Misura di overlap</B> tra due insiemi
+                            di <LatexMath>{`q`}</LatexMath>-grammi <LatexMath>{`X`}</LatexMath> e <LatexMath>{`Y`}</LatexMath>:
                         </P>
                         <B><LatexMath block={true}>{r`Jaccard = \frac{size(X \cap Y)}{size(X \cup Y)}`}</LatexMath></B>
                         <Aside>
                             <P>
-                                Usando trigrammi, il <I>coefficiente di Jaccard</I> tra <Token>novembre</Token> e <Token>dicembre</Token> è:
+                                Usando trigrammi, il <I>coefficiente di
+                                Jaccard</I> tra <Token>novembre</Token> e <Token>dicembre</Token> è:
                             </P>
                             <ul>
                                 <LI>
@@ -561,10 +633,13 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"Tramite algoritmi fonetici"}>
                     <P>
-                        Esistono motori di ricerca che usano un algoritmo per convertire i token nella loro corrispondente <B>pronuncia</B> ed effettuano match sulla base di quest'ultima.
+                        Esistono motori di ricerca che usano un algoritmo per convertire i token nella loro
+                        corrispondente <B>pronuncia</B> ed effettuano match sulla base di quest'ultima.
                     </P>
                     <Aside>
-                        Un metodo usato per correggere errori tipografici durante confronto di nomi propri è il <Anchor href={"https://en.wikipedia.org/wiki/Soundex"}>Soundex</Anchor>, un algoritmo che converte le parole in codici rappresentanti i loro suoni.
+                        Un metodo usato per correggere errori tipografici durante confronto di nomi propri è il <Anchor
+                        href={"https://en.wikipedia.org/wiki/Soundex"}>Soundex</Anchor>, un algoritmo che converte le
+                        parole in codici rappresentanti i loro suoni.
                     </Aside>
                 </Box>
                 <P>
@@ -593,17 +668,20 @@ export default function Gestinfo() {
             </Box>
             <Box title={"Correzione contestualizzata"}>
                 <P>
-                    È possibile confrontare ogni token con il contesto dei termini circostanti per rilevare ulteriori errori.
+                    È possibile confrontare ogni token con il contesto dei termini circostanti per rilevare ulteriori
+                    errori.
                 </P>
                 <Split>
                     <Box title={"Conteggio dei risultati"}>
                         <P>
-                            Un metodo che prevede di <B>enumerare</B> varie alternative aventi contesti concordi e di restituire quella con il <B>maggior numero di risultati</B>.
+                            Un metodo che prevede di <B>enumerare</B> varie alternative aventi contesti concordi e di
+                            restituire quella con il <B>maggior numero di risultati</B>.
                         </P>
                     </Box>
                     <Box title={"Conteggio delle ricerche"}>
                         <P>
-                            Un metodo che prevede di <B>enumerare</B> varie alternative aventi contesti concordi e di restituire quella che <B>è stata ricercata più volte</B>.
+                            Un metodo che prevede di <B>enumerare</B> varie alternative aventi contesti concordi e di
+                            restituire quella che <B>è stata ricercata più volte</B>.
                         </P>
                     </Box>
                 </Split>
@@ -611,21 +689,25 @@ export default function Gestinfo() {
             <Split title={"Indici"}>
                 <Box title={"Cosa sono?"}>
                     <P>
-                        Gli indici sono <B>strutture dati</B> in cui vengono inseriti i documenti e i loro token dopo essere stati preparati.
+                        Gli indici sono <B>strutture dati</B> in cui vengono inseriti i documenti e i loro token dopo
+                        essere stati preparati.
                     </P>
                     <P>
-                        L'<B><I>indicizzazione</I></B> è la procedura che crea e mantiene aggiornati uno o più <B><I>indici</I></B>.
+                        L'<B><I>indicizzazione</I></B> è la procedura che crea e mantiene aggiornati uno o
+                        più <B><I>indici</I></B>.
                     </P>
                 </Box>
                 <Box title={"A cosa servono?"}>
                     <P>
-                        Sono fondamentali per <B>velocizzare notevolmente</B> le ricerche e per permettere certi tipi di operazioni sulle query.
+                        Sono fondamentali per <B>velocizzare notevolmente</B> le ricerche e per permettere certi tipi di
+                        operazioni sulle query.
                     </P>
                 </Box>
             </Split>
             <Box title={"Matrice di incidenza"}>
                 <P>
-                    Un indice basato sulla costruzione di una matrice in cui le righe sono i <B>documenti</B>, le colonne i <B>token</B> e le celle valori booleani che descrivono se il token compare nel documento.
+                    Un indice basato sulla costruzione di una matrice in cui le righe sono i <B>documenti</B>, le
+                    colonne i <B>token</B> e le celle valori booleani che descrivono se il token compare nel documento.
                 </P>
                 <P>
                     È terribilmente <B>inefficiente</B> in termini di spazio, perchè la matrice è <B>sparsa</B>.
@@ -636,7 +718,8 @@ export default function Gestinfo() {
             </Box>
             <Box title={"Inverted index"}>
                 <P>
-                    L'<B>indice</B> più comune, costituito da tante <B><I>posting list</I></B> raggiungibili attraverso un <B><I>vocabolario</I></B>.
+                    L'<B>indice</B> più comune, costituito da tante <B><I>posting list</I></B> raggiungibili attraverso
+                    un <B><I>vocabolario</I></B>.
                 </P>
                 <Split>
                     <Box title={"Posting list"}>
@@ -647,11 +730,15 @@ export default function Gestinfo() {
                             Può essere realizzata in due modi:
                         </P>
                         <ul>
-                            <LI><U>Document-based</U>: lista ordinata di documenti con la <B>frequenza del token</B> in essi</LI>
-                            <LI><U>Word-based</U>: lista ordinata di documenti che punta a una lista ordinata delle <B>posizioni</B> del token in essi</LI>
+                            <LI><U>Document-based</U>: lista ordinata di documenti con la <B>frequenza del token</B> in
+                                essi</LI>
+                            <LI><U>Word-based</U>: lista ordinata di documenti che punta a una lista ordinata
+                                delle <B>posizioni</B> del token in essi</LI>
                         </ul>
                         <P>
-                            Essendo le liste <B>ordinate</B>, vi è possibile effettuare operazioni di <B>unione</B> e <B>intersezione</B> in <B>tempo lineare</B> utilizzando dei <B>cursori</B>.
+                            Essendo le liste <B>ordinate</B>, vi è possibile effettuare operazioni
+                            di <B>unione</B> e <B>intersezione</B> in <B>tempo lineare</B> utilizzando
+                            dei <B>cursori</B>.
                         </P>
                         <P>
                             Non è però altrettanto efficiente in operazioni di <B>negazione</B>.
@@ -665,17 +752,21 @@ export default function Gestinfo() {
                             Ci sono tanti modi diversi di implementarlo:
                         </P>
                         <ul>
-                            <LI><U>Doppia lista ordinata</U>: <B>lista di token</B> che punta a una <B>lista di occorrenze</B></LI>
+                            <LI><U>Doppia lista ordinata</U>: <B>lista di token</B> che punta a una <B>lista di
+                                occorrenze</B></LI>
                             <LI>
-                                <U>Trie</U>: <B>albero</B> in cui ogni arco rappresenta una <B>stringa</B> e ogni nodo una <B>concatenazione</B> delle stringhe tra sè e la radice
+                                <U>Trie</U>: <B>albero</B> in cui ogni arco rappresenta una <B>stringa</B> e ogni nodo
+                                una <B>concatenazione</B> delle stringhe tra sè e la radice
                                 <ul>
                                     <LI><U>Prefix tree</U>: <B>trie</B> che usa i <B>prefissi</B> dei token</LI>
                                     <LI><U>Suffix tree</U>: <B>trie</B> che usa i <B>suffissi</B> dei token</LI>
                                 </ul>
 
                             </LI>
-                            <LI><U>B+ tree</U>: <B>albero</B> particolarmente ottimizzato, in cui le foglie sono le occorrenze</LI>
-                            <LI><U>Dizionario</U>: <B>hashmap</B> che usa come chiave il <B>token</B> stesso, e una lista di occorrenze come <B>valore</B></LI>
+                            <LI><U>B+ tree</U>: <B>albero</B> particolarmente ottimizzato, in cui le foglie sono le
+                                occorrenze</LI>
+                            <LI><U>Dizionario</U>: <B>hashmap</B> che usa come chiave il <B>token</B> stesso, e una
+                                lista di occorrenze come <B>valore</B></LI>
                         </ul>
                         <P>
                             Generalmente, occupano <B>spazio logaritmico</B> rispetto al numero di token.
@@ -686,25 +777,33 @@ export default function Gestinfo() {
             <Split title={"Query languages"}>
                 <Box title={"Cosa sono?"}>
                     <P>
-                        Ogni motore di ricerca implementa un diverso <B><I>query language</I></B>, un'<B>interfaccia</B> per l'utente che gli permette di effettuare ricerche in base alla sua necessità di informazioni <I><UIN/></I>.
+                        Ogni motore di ricerca implementa un diverso <B><I>query language</I></B>,
+                        un'<B>interfaccia</B> per l'utente che gli permette di effettuare ricerche in base alla sua
+                        necessità di informazioni <I><UIN/></I>.
                     </P>
                     <Aside>
-                        Su Google puoi scrivere la tua domanda in linguaggio naturale e ricevere una risposta, ma ci puoi anche aggiungere qualche operatore come <code>site:stackoverflow.com</code> per restringere la ricerca!
+                        Su Google puoi scrivere la tua domanda in linguaggio naturale e ricevere una risposta, ma ci
+                        puoi anche aggiungere qualche operatore come <code>site:stackoverflow.com</code> per restringere
+                        la ricerca!
                     </Aside>
                     <P>
-                        Ogni query language può poi implementare diverse <B>funzionalità</B> in base al tipo di documento indicizzato.
+                        Ogni query language può poi implementare diverse <B>funzionalità</B> in base al tipo di
+                        documento indicizzato.
                     </P>
                 </Box>
                 <Box title={"A cosa servono?"}>
                     <P>
-                        Essendo una <B>via di mezzo</B> tra linguaggio naturale e linguaggio di programmazione, permettono a un <B>utente qualunque</B> di fruire del motore di ricerca, senza bisogno di conoscenze approfondite sul suo funzionamento.
+                        Essendo una <B>via di mezzo</B> tra linguaggio naturale e linguaggio di programmazione,
+                        permettono a un <B>utente qualunque</B> di fruire del motore di ricerca, senza bisogno di
+                        conoscenze approfondite sul suo funzionamento.
                     </P>
                 </Box>
             </Split>
             <Split>
                 <Box title={"Keywords semplici"}>
                     <P>
-                        All'interno della query vengono inserite <B>una o più keywords</B> da ricercare all'interno dei documenti.
+                        All'interno della query vengono inserite <B>una o più keywords</B> da ricercare all'interno dei
+                        documenti.
                     </P>
                     <Aside>
                         <P>
@@ -730,14 +829,17 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"Keyword distanziate"}>
                     <P>
-                        Prevedono la possibilità di richiedere che due o più keyword siano a una certa <B><I>distanza</I></B> una dall'altra.
+                        Prevedono la possibilità di richiedere che due o più keyword siano a una
+                        certa <B><I>distanza</I></B> una dall'altra.
                     </P>
                     <Aside>
                         <P>
-                            È molto raro al giorno d'oggi che un motore di ricerca permetta di ricercare la distanza tra le keyword.
+                            È molto raro al giorno d'oggi che un motore di ricerca permetta di ricercare la distanza tra
+                            le keyword.
                         </P>
                         <P>
-                            Uno dei pochi motori di ricerca che lo permette ancora è <Anchor href={"https://en.wikipedia.org/wiki/Westlaw"}>Westlaw</Anchor>.
+                            Uno dei pochi motori di ricerca che lo permette ancora è <Anchor
+                            href={"https://en.wikipedia.org/wiki/Westlaw"}>Westlaw</Anchor>.
                         </P>
                         <Code language={"text"}>
                             Dante /3 Beatrice
@@ -748,7 +850,8 @@ export default function Gestinfo() {
             <Split>
                 <Box title={"Patterns"}>
                     <P>
-                        Prevedono la possibilità di cercare <B>prefissi</B>, <B>suffissi</B>, <B>sottostringhe</B> e <B>intervalli</B> di keyword.
+                        Prevedono la possibilità di
+                        cercare <B>prefissi</B>, <B>suffissi</B>, <B>sottostringhe</B> e <B>intervalli</B> di keyword.
                     </P>
                     <Aside>
                         <P>
@@ -764,11 +867,14 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"Concetti"}>
                     <P>
-                        Prevedono la possibilità di usare tag provenienti da un <B>thesaurus limitato</B> di cui è <B>garantita</B> la precisione.
+                        Prevedono la possibilità di usare tag provenienti da un <B>thesaurus limitato</B> di cui
+                        è <B>garantita</B> la precisione.
                     </P>
                     <Aside>
                         <P>
-                            Il più famoso motore di ricerca a concetti è <Anchor href={"https://pubmed.ncbi.nlm.nih.gov/"}>PubMed</Anchor>, e i concetti ricercabili possono essere trovati su <Anchor href={"https://www.ncbi.nlm.nih.gov/mesh/"}>MeSH</Anchor>.
+                            Il più famoso motore di ricerca a concetti è <Anchor
+                            href={"https://pubmed.ncbi.nlm.nih.gov/"}>PubMed</Anchor>, e i concetti ricercabili possono
+                            essere trovati su <Anchor href={"https://www.ncbi.nlm.nih.gov/mesh/"}>MeSH</Anchor>.
                         </P>
                         <Code language={"text"}>
                             "Plague"[Mesh]
@@ -783,7 +889,8 @@ export default function Gestinfo() {
                     </P>
                     <Aside>
                         <P>
-                            Un esempio di query strutturali è <Anchor href={"https://books.google.it/advanced_book_search?hl=it"}>Google Books</Anchor>.
+                            Un esempio di query strutturali è <Anchor
+                            href={"https://books.google.it/advanced_book_search?hl=it"}>Google Books</Anchor>.
                         </P>
                         <Code language={"text"}>
                             inauthor:Dante inauthor:Alighieri
@@ -792,11 +899,14 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"Operatori booleani"}>
                     <P>
-                        Prevedono la possibilità di effettuare più query e applicare le operazioni di <B>intersezione</B>, <B>unione</B> e <B>negazione</B> sui risultati.
+                        Prevedono la possibilità di effettuare più query e applicare le operazioni
+                        di <B>intersezione</B>, <B>unione</B> e <B>negazione</B> sui risultati.
                     </P>
                     <Aside>
                         <P>
-                            Moltissimi motori di ricerca permettono boolean query, inclusa la <Anchor href={"https://www.postgresql.org/docs/current/textsearch.html"}>Full Text Search di PostgreSQL</Anchor>.
+                            Moltissimi motori di ricerca permettono boolean query, inclusa la <Anchor
+                            href={"https://www.postgresql.org/docs/current/textsearch.html"}>Full Text Search di
+                            PostgreSQL</Anchor>.
                         </P>
                         <Code language={"python"}>
                             "Dante" and "Vergil" and ("Devil May Cry" or "DMC") and not "Divina Commedia"
@@ -814,7 +924,8 @@ export default function Gestinfo() {
                             </Aside>
                         </LI>
                         <LI>
-                            Trova i risultati delle due parti attraverso un doppio vocabolario implementato con sia prefix sia suffix tree:
+                            Trova i risultati delle due parti attraverso un doppio vocabolario implementato con sia
+                            prefix sia suffix tree:
                             <Aside>
                                 <ul>
                                     <LI><Token>ca*</Token> → 1:1, 1:8, 2:113, 4:231</LI>
@@ -830,20 +941,24 @@ export default function Gestinfo() {
                         </LI>
                     </ol>
                     <P>
-                        È costoso in termini di tempo: ci saranno tanti risultati che andranno processati, e l'intersezione è <LatexMath>{`O(n + m)`}</LatexMath>.
+                        È costoso in termini di tempo: ci saranno tanti risultati che andranno processati, e
+                        l'intersezione è <LatexMath>{`O(n + m)`}</LatexMath>.
                     </P>
                 </Box>
                 <Box title={"Tramite permuterm tree"}>
                     <Box title={"Permuterm tree"}>
                         <P>
-                            Un particolare vocabolario in cui vengono inserite tutte le possibili permutazioni di wildcard per ogni token:
+                            Un particolare vocabolario in cui vengono inserite tutte le possibili permutazioni di
+                            wildcard per ogni token:
                         </P>
                         <Aside>
-                            <Token>ciao</Token> → <Token>ciao░</Token> <Token>iao░c</Token> <Token>ao░ci</Token> <Token>iao░c</Token>
+                            <Token>ciao</Token> → <Token>ciao░</Token> <Token>iao░c</Token> <Token>ao░ci</Token>
+                            <Token>iao░c</Token>
                         </Aside>
                     </Box>
                     <P>
-                        È possibile effettuare ricerche wildcard <B>ruotando la wildcard a destra</B>, trasformando tutti i pattern in <B>prefissi</B>:
+                        È possibile effettuare ricerche wildcard <B>ruotando la wildcard a destra</B>, trasformando
+                        tutti i pattern in <B>prefissi</B>:
                     </P>
                     <Aside>
                         <ul>
@@ -880,16 +995,19 @@ export default function Gestinfo() {
                         </ul>
                     </Aside>
                     <P>
-                        È costoso in termini di spazio: ogni termine va salvato molte volte nel vocabolario (<I>permuterm problem</I>).
+                        È costoso in termini di spazio: ogni termine va salvato molte volte nel vocabolario (<I>permuterm
+                        problem</I>).
                     </P>
                     <Aside>
-                        In inglese, questo porta a una quadruplicazione <LatexMath>{r`\times 4`}</LatexMath> dello spazio usato.
+                        In inglese, questo porta a una quadruplicazione <LatexMath>{r`\times 4`}</LatexMath> dello
+                        spazio usato.
                     </Aside>
                 </Box>
                 <Box title={<span>Tramite <LatexMath>{`q`}</LatexMath>-gram indexes</span>}>
                     <Box title={<span><LatexMath>{`q`}</LatexMath>-gram index</span>}>
                         <P>
-                            <B>Vocabolario aggiuntivo</B> che associa <LatexMath>{`q`}</LatexMath>-grammi ai token corrispondenti del vocabolario principale.
+                            <B>Vocabolario aggiuntivo</B> che associa <LatexMath>{`q`}</LatexMath>-grammi ai token
+                            corrispondenti del vocabolario principale.
                         </P>
                         <Aside>
                             <Token>░ci</Token> → <Token>ciao</Token> <Token>cibo</Token> <Token>cinefilo</Token>
@@ -903,23 +1021,27 @@ export default function Gestinfo() {
                             Utilizzando dei bigrammi:
                         </P>
                         <Aside>
-                            <Token>lun*</Token> → <Token>░l</Token> <code>AND</code> <Token>lu</Token> <code>AND</code> <Token>un</Token>
+                            <Token>lun*</Token> → <Token>░l</Token> <code>AND</code> <Token>lu</Token> <code>AND</code>
+                            <Token>un</Token>
                         </Aside>
                     </Aside>
                     <P>
-                        I risultati della ricerca andranno <B>post-filtrati</B>, in quanto ci potrebbero essere dei <B>falsi positivi</B>:
+                        I risultati della ricerca andranno <B>post-filtrati</B>, in quanto ci potrebbero essere dei <B>falsi
+                        positivi</B>:
                     </P>
                     <Aside>
                         <P>
                             Utilizzando dei bigrammi:
                         </P>
                         <Aside>
-                            <Token>mon*</Token> → <Token>░m</Token> <code>AND</code> <Token>mo</Token> <code>AND</code> <Token>on</Token> → <Token stopword={true}>moon</Token> <Token>monday</Token>
+                            <Token>mon*</Token> → <Token>░m</Token> <code>AND</code> <Token>mo</Token> <code>AND</code>
+                            <Token>on</Token> → <Token stopword={true}>moon</Token> <Token>monday</Token>
                         </Aside>
                     </Aside>
                     <Aside>
                         <P>
-                            È un'ottima via di mezzo tra prefix-suffix tree e permuterm tree sia per il tempo impiegato sia per lo spazio richiesto.
+                            È un'ottima via di mezzo tra prefix-suffix tree e permuterm tree sia per il tempo impiegato
+                            sia per lo spazio richiesto.
                         </P>
                     </Aside>
                 </Box>
@@ -927,30 +1049,35 @@ export default function Gestinfo() {
             <Split title={<span>Modelli di <IR/></span>}>
                 <Box title={"Cosa sono?"}>
                     <P>
-                        Sono <B>modelli matematici</B> in grado di <B>selezionare</B> e <B>ordinare</B> i documenti in base alla loro <B>rilevanza</B> rispetto alla query.
+                        Sono <B>modelli matematici</B> in grado di <B>selezionare</B> e <B>ordinare</B> i documenti in
+                        base alla loro <B>rilevanza</B> rispetto alla query.
                     </P>
                 </Box>
                 <Box title={"A cosa servono?"}>
                     <P>
-                        Stabiliscono i <B>risultati richiamati</B> dal motore di ricerca e l'<B>ordine con cui vengono visualizzati</B>.
+                        Stabiliscono i <B>risultati richiamati</B> dal motore di ricerca e l'<B>ordine con cui vengono
+                        visualizzati</B>.
                     </P>
                 </Box>
             </Split>
             <Box title={"Modelli classici"}>
                 <P>
-                    Rappresentano la query come un <B>insieme di index term</B>, e assegnano le rilevanze confrontando l'insieme con gli index term dei documenti.
+                    Rappresentano la query come un <B>insieme di index term</B>, e assegnano le rilevanze confrontando
+                    l'insieme con gli index term dei documenti.
                 </P>
                 <Aside>
                     Sono usati solitamente dai motori di ricerca web.
                 </Aside>
                 <P>
-                    Ad ogni index term del documento viene <B>indipendentemente</B> assegnato un <B><I>peso</I></B> in base alla sua rilevanza nella query.
+                    Ad ogni index term del documento viene <B>indipendentemente</B> assegnato un <B><I>peso</I></B> in
+                    base alla sua rilevanza nella query.
                 </P>
             </Box>
             <Split>
                 <Box title={"Modello booleano"}>
                     <P>
-                        <B>Modello classico</B> che rappresenta la query come un <B><Predicato/> <I>booleano</I></B>, e genera la rilevanza valutandolo su ogni documento:
+                        <B>Modello classico</B> che rappresenta la query come un <B><Predicato/> <I>booleano</I></B>, e
+                        genera la rilevanza valutandolo su ogni documento:
                     </P>
                     <ul>
                         <LI><B><code>1</code></B> se il <Predicato/> è <B>vero</B></LI>
@@ -959,7 +1086,8 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"Modello fuzzy"}>
                     <P>
-                        Variante del <B>modello booleano</B> che permette ai documenti di <B>soddisfare parzialmente</B> il <Predicato/>:
+                        Variante del <B>modello booleano</B> che permette ai documenti di <B>soddisfare
+                        parzialmente</B> il <Predicato/>:
                     </P>
                     <ul>
                         <LI><B><code>1.00</code></B> se il <Predicato/> è <B>vero</B></LI>
@@ -979,54 +1107,68 @@ export default function Gestinfo() {
             <Split>
                 <Box title={"Modello vettoriale"}>
                     <P>
-                        Modello classico che rappresenta il vocabolario come uno <B>spazio vettoriale</B>, in cui ogni dimensione rappresenta un token.
+                        Modello classico che rappresenta il vocabolario come uno <B>spazio vettoriale</B>, in cui ogni
+                        dimensione rappresenta un token.
                     </P>
                     <P>
-                        Ogni documento viene rappresentato come un <B>vettore <LatexMath>{`d`}</LatexMath></B>, i cui valori sono <B>pesi <LatexMath>{`d_i`}</LatexMath></B> assegnati in base a quanto il token è signficativo all'interno del documento.
+                        Ogni documento viene rappresentato come un <B>vettore <LatexMath>{`d`}</LatexMath></B>, i cui
+                        valori sono <B>pesi <LatexMath>{`d_i`}</LatexMath></B> assegnati in base a quanto il token è
+                        signficativo all'interno del documento.
                     </P>
                     <Aside>
                         Il metodo più comunemente usato per assegnare i pesi è il <TFIDF/>, descritto successivamente.
                     </Aside>
                     <Aside>
-                        La matrice della collezione <LatexMath>{`\\mathbf{D}`}</LatexMath> è estremamente sparsa: viene implementata <B>per colonne</B> attraverso un <B>inverted index</B>.
+                        La matrice della collezione <LatexMath>{`\\mathbf{D}`}</LatexMath> è estremamente sparsa: viene
+                        implementata <B>per colonne</B> attraverso un <B>inverted index</B>.
                     </Aside>
                     <P>
-                        Le query vengono anch'esse trasformate in <B>vettori <LatexMath>{`q`}</LatexMath></B>, e le rilevanze vengono ottenute dalla <B>similitudine vettoriale</B> tra i vettore query e i vettori documenti.
+                        Le query vengono anch'esse trasformate in <B>vettori <LatexMath>{`q`}</LatexMath></B>, e le
+                        rilevanze vengono ottenute dalla <B>similitudine vettoriale</B> tra i vettore query e i vettori
+                        documenti.
                     </P>
                     <Split>
                         <Box title={<span>Peso <TFIDF/></span>}>
                             <P>
-                                Un metodo di assegnamento peso che si basa sul <B>prodotto</B> dei fattori <B><TF/></B> e <B><IDF/></B>:
+                                Un metodo di assegnamento peso che si basa sul <B>prodotto</B> dei
+                                fattori <B><TF/></B> e <B><IDF/></B>:
                             </P>
                             <B><LatexMath block={true}>{`d_i = tf_{norm}(i) \\cdot idf_{log}(i)`}</LatexMath></B>
                             <Box title={<span><TF/>: Term frequency</span>}>
                                 <P>
                                     Misura quanto un token è <B>frequente</B> nel <B>singolo documento</B>:
                                 </P>
-                                <B><LatexMath block={true}>{`tf(i) = \\frac{occorrenze}{totale\\ token}`}</LatexMath></B>
+                                <B><LatexMath
+                                    block={true}>{`tf(i) = \\frac{occorrenze}{totale\\ token}`}</LatexMath></B>
                                 <P>
-                                    Nella formula principale, viene <B>normalizzato</B> dividendolo per il <TF/> più alto del documento, limitandolo così a valori tra 0 e 1:
+                                    Nella formula principale, viene <B>normalizzato</B> dividendolo per il <TF/> più
+                                    alto del documento, limitandolo così a valori tra 0 e 1:
                                 </P>
-                                <B><LatexMath block={true}>{`tf_{norm}(i) = \\frac{tf(i)}{\\max_{j:\\ docs}\\ tf(j)}`}</LatexMath></B>
+                                <B><LatexMath
+                                    block={true}>{`tf_{norm}(i) = \\frac{tf(i)}{\\max_{j:\\ docs}\\ tf(j)}`}</LatexMath></B>
                             </Box>
                             <Box title={<span><IDF/>: Inverse document freq.</span>}>
                                 <P>
                                     Misura quanto un token è <B>raro</B> nella <B>collezione di documenti</B>:
                                 </P>
-                                <B><LatexMath block={true}>{`idf(i) = \\frac{totale\\ documenti}{documenti\\ con\\ occ.}`}</LatexMath></B>
+                                <B><LatexMath
+                                    block={true}>{`idf(i) = \\frac{totale\\ documenti}{documenti\\ con\\ occ.}`}</LatexMath></B>
                                 <P>
-                                    Nella formula principale, viene <B>logaritmizzato</B>, al fine di ridurre significativamente il suo impatto:
+                                    Nella formula principale, viene <B>logaritmizzato</B>, al fine di ridurre
+                                    significativamente il suo impatto:
                                 </P>
                                 <B><LatexMath block={true}>{`idf_{log}(i) = \\log(idf(i))`}</LatexMath></B>
                             </Box>
                         </Box>
                         <Box title={"Similitudine vettoriale"}>
                             <P>
-                                Un modo di misurare la similitudine tra <B>insiemi di token</B> rappresentati come <B>dimensioni vettoriali</B>.
+                                Un modo di misurare la similitudine tra <B>insiemi di token</B> rappresentati come <B>dimensioni
+                                vettoriali</B>.
                             </P>
                             <Box title={"Coseno di similitudine"}>
                                 <P>
-                                    Si basa sulla <B>norma a 2</B>, e corrisponde a cercare l'angolo centrato all'origine tra i due vettori:
+                                    Si basa sulla <B>norma a 2</B>, e corrisponde a cercare l'angolo centrato
+                                    all'origine tra i due vettori:
                                 </P>
                                 <B><LatexMath block={true}>{`
                                     sim_{\\cos} (d, q) = 
@@ -1050,10 +1192,15 @@ export default function Gestinfo() {
                                     Altre misure comuni di similitudine vettoriale sono:
                                 </P>
                                 <ul>
-                                    <LI>La <Anchor href={"https://it.wikipedia.org/wiki/Distanza_euclidea"}>distanza euclidea</Anchor></LI>
-                                    <LI>Il <Anchor href={"https://en.wikipedia.org/wiki/S%C3%B8rensen%E2%80%93Dice_coefficient"}>Sørensen–Dice coefficient</Anchor></LI>
-                                    <LI>Il <Anchor href={"https://en.wikipedia.org/wiki/Jaccard_index"}>Jaccard Index</Anchor></LI>
-                                    <LI>La <Anchor href={"https://it.wikipedia.org/wiki/Distanza_di_Minkowski"}>distanza di Minkowski</Anchor></LI>
+                                    <LI>La <Anchor href={"https://it.wikipedia.org/wiki/Distanza_euclidea"}>distanza
+                                        euclidea</Anchor></LI>
+                                    <LI>Il <Anchor
+                                        href={"https://en.wikipedia.org/wiki/S%C3%B8rensen%E2%80%93Dice_coefficient"}>Sørensen–Dice
+                                        coefficient</Anchor></LI>
+                                    <LI>Il <Anchor href={"https://en.wikipedia.org/wiki/Jaccard_index"}>Jaccard
+                                        Index</Anchor></LI>
+                                    <LI>La <Anchor href={"https://it.wikipedia.org/wiki/Distanza_di_Minkowski"}>distanza
+                                        di Minkowski</Anchor></LI>
                                 </ul>
                             </Aside>
                         </Box>
@@ -1062,11 +1209,16 @@ export default function Gestinfo() {
             </Split>
             <Box title={"Modello probabilistico"}>
                 <P>
-                    Modello classico che ordina i documenti <LatexMath>{`d`}</LatexMath> in base alla <B>probabilità</B> che siano <B>rilevanti <LatexMath>{`R`}</LatexMath></B> per la query <LatexMath>{`q`}</LatexMath>:
+                    Modello classico che ordina i documenti <LatexMath>{`d`}</LatexMath> in base
+                    alla <B>probabilità</B> che siano <B>rilevanti <LatexMath>{`R`}</LatexMath></B> per la
+                    query <LatexMath>{`q`}</LatexMath>:
                 </P>
-                <B><LatexMath block={true}>{`sim_{prob} = \\frac{P(R\\ |\\ d, q)}{P(\\overline{R}\\ |\\ d, q)}`}</LatexMath></B>
+                <B><LatexMath
+                    block={true}>{`sim_{prob} = \\frac{P(R\\ |\\ d, q)}{P(\\overline{R}\\ |\\ d, q)}`}</LatexMath></B>
                 <P>
-                    <Todo>Si dimostra che</Todo> è possibile capire quanto la presenza di un dato token <LatexMath>{`k_i`}</LatexMath> in un documento <LatexMath>{r`d`}</LatexMath> ne <B>contribuisca alla rilevanza</B> per la query <LatexMath>{r`\vec{q}`}</LatexMath>:
+                    <Todo>Si dimostra che</Todo> è possibile capire quanto la presenza di un dato
+                    token <LatexMath>{`k_i`}</LatexMath> in un documento <LatexMath>{r`d`}</LatexMath> ne <B>contribuisca
+                    alla rilevanza</B> per la query <LatexMath>{r`\vec{q}`}</LatexMath>:
                 </P>
                 <B><LatexMath block={true}>{`
                     c_i = 
@@ -1096,42 +1248,55 @@ export default function Gestinfo() {
                     </Box>
                     <Box title={<span>Fattore <LatexMath>{`y`}</LatexMath></span>}>
                         <P>
-                            Deriva dal <B>peso <TF/></B>, dalla <B>lunghezza media dei documenti <LatexMath>{`L_{avg}`}</LatexMath></B>, la <B>lunghezza del documento specifico <LatexMath>{`L_d`}</LatexMath></B> e da due parametri di configurazione <LatexMath>{`k_1`}</LatexMath> e <LatexMath>{`b`}</LatexMath>:
+                            Deriva dal <B>peso <TF/></B>, dalla <B>lunghezza media dei
+                            documenti <LatexMath>{`L_{avg}`}</LatexMath></B>, la <B>lunghezza del documento
+                            specifico <LatexMath>{`L_d`}</LatexMath></B> e da due parametri di
+                            configurazione <LatexMath>{`k_1`}</LatexMath> e <LatexMath>{`b`}</LatexMath>:
                         </P>
-                        <B><LatexMath block={true}>{`y = \\frac{(k_1 + 1) \\cdot tf_{td}}{k_1 \\cdot \\left( 1 - b + \\left( b \\cdot \\frac{L_d}{L_{avg}} \\right) \\right) + tf_{td}}`}</LatexMath></B>
+                        <B><LatexMath
+                            block={true}>{`y = \\frac{(k_1 + 1) \\cdot tf_{td}}{k_1 \\cdot \\left( 1 - b + \\left( b \\cdot \\frac{L_d}{L_{avg}} \\right) \\right) + tf_{td}}`}</LatexMath></B>
                         <Aside>
-                            Attribuisce rispettivamente un bonus o una penalità (regolabile con <LatexMath>{`b`}</LatexMath>) a ogni documento in base a se questo sia <B>più corto</B> o <B>più lungo della media</B>.
+                            Attribuisce rispettivamente un bonus o una penalità (regolabile
+                            con <LatexMath>{`b`}</LatexMath>) a ogni documento in base a se questo sia <B>più
+                            corto</B> o <B>più lungo della media</B>.
                         </Aside>
                         <Aside>
-                            <LatexMath>{r`k_1`}</LatexMath> regola la priorità data alla <TF/>. <Todo>All'interno del fattore o dell'intero RSV?</Todo>
+                            <LatexMath>{r`k_1`}</LatexMath> regola la priorità data alla <TF/>. <Todo>All'interno del
+                            fattore o dell'intero RSV?</Todo>
                         </Aside>
                     </Box>
                     <Box title={<span>Fattore <LatexMath>{`z`}</LatexMath></span>}>
                         <P>
-                            Deriva dal <B>peso <TF/> dei termini della query</B> e da un parametro di configurazione <LatexMath>{`k_3`}</LatexMath>:
+                            Deriva dal <B>peso <TF/> dei termini della query</B> e da un parametro di
+                            configurazione <LatexMath>{`k_3`}</LatexMath>:
                         </P>
-                        <B><LatexMath block={true}>{`z = \\frac{(k_3 + 1) \\cdot tf_{tq}}{k_3 + tf_{tq}}`}</LatexMath></B>
+                        <B><LatexMath
+                            block={true}>{`z = \\frac{(k_3 + 1) \\cdot tf_{tq}}{k_3 + tf_{tq}}`}</LatexMath></B>
                     </Box>
                 </Split>
             </Box>
             <Box title={"Link Analysis Model"}>
                 <P>
-                    Modello per classificare documenti intercollegati in base a <B>come essi sono collegati</B> tra loro.
+                    Modello per classificare documenti intercollegati in base a <B>come essi sono collegati</B> tra
+                    loro.
                 </P>
                 <Aside>
-                    Una pagina non è importante in base a quanto dice di esserlo, ma in base a quanto le altre pagine dicono che lo è.
+                    Una pagina non è importante in base a quanto dice di esserlo, ma in base a quanto le altre pagine
+                    dicono che lo è.
                 </Aside>
                 <Split>
                     <Box title={"PageRank"}>
                         <P>
-                            Algoritmo di <I>Link Analysis Ranking</I> <B>query-independent</B> che assegna un <B>grado</B> a ogni pagina indicizzata.
+                            Algoritmo di <I>Link Analysis Ranking</I> <B>query-independent</B> che assegna
+                            un <B>grado</B> a ogni pagina indicizzata.
                         </P>
                         <Aside>
                             È il primo algoritmo utilizzato da Google.
                         </Aside>
                         <Box title={"Rank"}>
                             <P>
-                                Misura <B>iterativa</B> di quanto una pagina è importante rispetto a tutte le altre indicizzate.
+                                Misura <B>iterativa</B> di quanto una pagina è importante rispetto a tutte le altre
+                                indicizzate.
                             </P>
                             <B><LatexMath block={true}>{r`
                                 R'_i(p) = (1 - \alpha) \cdot \sum_{q:\ parents} \left( \frac{R_{i-1}(q)}{N_q} \right) + \alpha \cdot E(p)
@@ -1140,11 +1305,15 @@ export default function Gestinfo() {
                                 In cui:
                             </P>
                             <ul>
-                                <LI><B><LatexMath>{`q`}</LatexMath></B> è una pagina che <B>referenzia</B> quella in questione;</LI>
-                                <LI><B><LatexMath>{`R_{i-1}(q)`}</LatexMath></B> è il <B>rank normalizzato</B> della pagina <LatexMath>{r`q`}</LatexMath>;</LI>
-                                <LI><B><LatexMath>{`N_q`}</LatexMath></B> è il numero <B>totale di link</B> presenti nella pagina <LatexMath>q</LatexMath>;</LI>
+                                <LI><B><LatexMath>{`q`}</LatexMath></B> è una pagina che <B>referenzia</B> quella in
+                                    questione;</LI>
+                                <LI><B><LatexMath>{`R_{i-1}(q)`}</LatexMath></B> è il <B>rank normalizzato</B> della
+                                    pagina <LatexMath>{r`q`}</LatexMath>;</LI>
+                                <LI><B><LatexMath>{`N_q`}</LatexMath></B> è il numero <B>totale di link</B> presenti
+                                    nella pagina <LatexMath>q</LatexMath>;</LI>
                                 <LI><B><LatexMath>{`E(p)`}</LatexMath></B> è una <B><I>sorgente di rank</I></B>;</LI>
-                                <LI><B><LatexMath>{`\\alpha`}</LatexMath></B> è un parametro che regola l'<B>emissione della sorgente</B> di rank e la <B>dissipazione</B> del rank preesistente.</LI>
+                                <LI><B><LatexMath>{`\\alpha`}</LatexMath></B> è un parametro che regola l'<B>emissione
+                                    della sorgente</B> di rank e la <B>dissipazione</B> del rank preesistente.</LI>
                             </ul>
                             <Aside>
                                 Converge molto in fretta: <LatexMath>{`O(log\\ n)`}</LatexMath>!
@@ -1154,13 +1323,17 @@ export default function Gestinfo() {
                                     Funzione che introduce nuovo rank nel sistema ad ogni iterazione.
                                 </P>
                                 <Aside>
-                                    Se non venisse introdotto nuovo rank nel sistema, si formerebbero lentamente dei <B>pozzi</B> in presenza di cicli o pagine senza nessun collegamento uscente.
+                                    Se non venisse introdotto nuovo rank nel sistema, si formerebbero lentamente
+                                    dei <B>pozzi</B> in presenza di cicli o pagine senza nessun collegamento uscente.
                                 </Aside>
                                 <P>
-                                    PageRank normale prevede che questa funzione sia costante; è possibile però <B>personalizzarlo</B> rendendo la funzione variabile, facendo in modo che vengano assegnati rank più alti a certi tipi di pagine.
+                                    PageRank normale prevede che questa funzione sia costante; è possibile
+                                    però <B>personalizzarlo</B> rendendo la funzione variabile, facendo in modo che
+                                    vengano assegnati rank più alti a certi tipi di pagine.
                                 </P>
                                 <Aside>
-                                    Ad esempio, per prioritizzare le homepage rispetto alle sottopagine è possibile fare che:
+                                    Ad esempio, per prioritizzare le homepage rispetto alle sottopagine è possibile fare
+                                    che:
                                     <LatexMath block={true}>{r`
                                         E(p) = \begin{cases}
                                             1 \qquad pagina\ principale\\
@@ -1184,18 +1357,21 @@ export default function Gestinfo() {
                     </Box>
                     <Box title={"HITS"}>
                         <P>
-                            Algoritmo di <I>Link Analysis Ranking</I> <B>query-dependent</B> che attribuisce <B>due diversi valori</B> ad ogni pagina: <B><I>autorità</I></B> e <B><I>hubness</I></B>.
+                            Algoritmo di <I>Link Analysis Ranking</I> <B>query-dependent</B> che attribuisce <B>due
+                            diversi valori</B> ad ogni pagina: <B><I>autorità</I></B> e <B><I>hubness</I></B>.
                         </P>
                         <Aside>
                             Viene utilizzato per determinare l'importanza delle <B>riviste scientifiche</B>.
                         </Aside>
                         <P>
-                            Viene applicato solo a un <I>base set</I>, ovvero all'unione del <I>root set</I> (i match della query) con tutti i nodi ad essi <B>direttamente connessi</B>.
+                            Viene applicato solo a un <I>base set</I>, ovvero all'unione del <I>root set</I> (i match
+                            della query) con tutti i nodi ad essi <B>direttamente connessi</B>.
                         </P>
                         <Split>
                             <Box title={"Autorità"}>
                                 <P>
-                                    Misura di quanto la pagina in questione <B>viene referenziata</B> da altri siti autoritativi.
+                                    Misura di quanto la pagina in questione <B>viene referenziata</B> da altri siti
+                                    autoritativi.
                                 </P>
                                 <Aside>
                                     Quanto una pagina riceve collegamenti "importanti" in entrata.
@@ -1237,7 +1413,8 @@ export default function Gestinfo() {
                             </Box>
                         </Split>
                         <Aside>
-                            Purtroppo, è facile da manipolare, quindi non si applica molto bene ad ambienti non-regolati come il web.
+                            Purtroppo, è facile da manipolare, quindi non si applica molto bene ad ambienti non-regolati
+                            come il web.
                         </Aside>
                     </Box>
                 </Split>
@@ -1248,7 +1425,8 @@ export default function Gestinfo() {
                         <B>Misurazioni</B> che vengono effettuate sui sistemi di <IR/>.
                     </P>
                     <Aside>
-                        Solitamente trattano la <B>velocità di indicizzazione</B>, la <B>velocità di ricerca</B>, l'efficacia del <B>query language</B>, l'<B>user interface</B>, il <B>prezzo</B>...
+                        Solitamente trattano la <B>velocità di indicizzazione</B>, la <B>velocità di ricerca</B>,
+                        l'efficacia del <B>query language</B>, l'<B>user interface</B>, il <B>prezzo</B>...
                     </Aside>
                 </Box>
                 <Box title={"A cosa serve?"}>
@@ -1256,21 +1434,26 @@ export default function Gestinfo() {
                         Per vedere <B>quanto funziona bene</B> un sistema di <IR/>!
                     </P>
                     <Aside>
-                        Solitamente, la misura più importante è la <B>soddisfazione dell'utente</B>, che generalmente coincide con la <B>rilevanza dei risultati di ricerca</B>.
+                        Solitamente, la misura più importante è la <B>soddisfazione dell'utente</B>, che generalmente
+                        coincide con la <B>rilevanza dei risultati di ricerca</B>.
                     </Aside>
                 </Box>
             </Split>
             <Box title={"Benchmark"}>
                 <P>
-                    Per ottenere delle misure, solitamente si preparano in anticipo delle <B>query</B> dette <I>benchmark</I> delle quali si è <B>già a conoscenza dei documenti rilevanti</B>.
+                    Per ottenere delle misure, solitamente si preparano in anticipo
+                    delle <B>query</B> dette <I>benchmark</I> delle quali si è <B>già a conoscenza dei documenti
+                    rilevanti</B>.
                 </P>
                 <Aside>
-                    I documenti rilevanti possono essere selezionati a mano, o ricavati dai dati di utilizzo degli utenti (link cliccati o ignorati).
+                    I documenti rilevanti possono essere selezionati a mano, o ricavati dai dati di utilizzo degli
+                    utenti (link cliccati o ignorati).
                 </Aside>
             </Box>
             <Box title={"Misure comuni"}>
                 <P>
-                    Le due misure usate più di frequente per misurare l'utilità dei risultati sono <B><I>recall</I></B> e <B><I>precision</I></B>.
+                    Le due misure usate più di frequente per misurare l'utilità dei risultati
+                    sono <B><I>recall</I></B> e <B><I>precision</I></B>.
                 </P>
                 <Split>
                     <Box title={"Recall"}>
@@ -1306,7 +1489,8 @@ export default function Gestinfo() {
                 <Split>
                     <Box title={"Curva di richiamo"}>
                         <P>
-                            Curva che associa <B>percentili di richiamo</B> ai corrispondenti valori di <B>R-Precision</B>.
+                            Curva che associa <B>percentili di richiamo</B> ai corrispondenti valori
+                            di <B>R-Precision</B>.
                         </P>
                         <Aside>
                             <P>
@@ -1315,32 +1499,32 @@ export default function Gestinfo() {
                             <Aside>
                                 <table>
                                     <thead>
-                                        <tr>
-                                            <th>Richiamo</th>
-                                            <th>R-Precision</th>
-                                        </tr>
+                                    <tr>
+                                        <th>Richiamo</th>
+                                        <th>R-Precision</th>
+                                    </tr>
                                     </thead>
                                     <tbody>
-                                        <tr>
-                                            <td>10%</td>
-                                            <td>90%</td>
-                                        </tr>
-                                        <tr>
-                                            <td>20%</td>
-                                            <td>60%</td>
-                                        </tr>
-                                        <tr>
-                                            <td>30%</td>
-                                            <td>10%</td>
-                                        </tr>
-                                        <tr>
-                                            <td>...</td>
-                                            <td>...</td>
-                                        </tr>
-                                        <tr>
-                                            <td>100%</td>
-                                            <td>2%</td>
-                                        </tr>
+                                    <tr>
+                                        <td>10%</td>
+                                        <td>90%</td>
+                                    </tr>
+                                    <tr>
+                                        <td>20%</td>
+                                        <td>60%</td>
+                                    </tr>
+                                    <tr>
+                                        <td>30%</td>
+                                        <td>10%</td>
+                                    </tr>
+                                    <tr>
+                                        <td>...</td>
+                                        <td>...</td>
+                                    </tr>
+                                    <tr>
+                                        <td>100%</td>
+                                        <td>2%</td>
+                                    </tr>
                                     </tbody>
                                 </table>
                             </Aside>
@@ -1354,7 +1538,8 @@ export default function Gestinfo() {
                     </Box>
                     <Box title={"Curva di richiamo interpolata"}>
                         <P>
-                            Mostra il <B>valore massimo di precisione</B> per valori di richiamo <B>maggiori o uguali</B> a quelli del punto.
+                            Mostra il <B>valore massimo di precisione</B> per valori di richiamo <B>maggiori o
+                            uguali</B> a quelli del punto.
                         </P>
                         <Aside>
                             <P>
@@ -1417,7 +1602,9 @@ export default function Gestinfo() {
                 <Split>
                     <Box title={"Curva di precisione media"}>
                         <P>
-                            Se si hanno più benchmark, corrispondenti a <B>più curve di richiamo</B>, si possono ottenere le <B>medie</B> dei valori ai vari livelli, ottenendo così una <B><I>curva di precisione media</I></B>.
+                            Se si hanno più benchmark, corrispondenti a <B>più curve di richiamo</B>, si possono
+                            ottenere le <B>medie</B> dei valori ai vari livelli, ottenendo così una <B><I>curva di
+                            precisione media</I></B>.
                         </P>
                     </Box>
                     <Box title={"Mean average precision"}>
@@ -1437,7 +1624,9 @@ export default function Gestinfo() {
                     </Box>
                     <Box title={"Misura E"}>
                         <P>
-                            Complemento della <B>media armonica</B> configurabile che permette di selezionare se dare <B>priorità <LatexMath>{`b`}</LatexMath></B> alla precisione (<LatexMath>{`b > 1`}</LatexMath>) oppure al richiamo (<LatexMath>{`b < 1`}</LatexMath>):
+                            Complemento della <B>media armonica</B> configurabile che permette di selezionare se
+                            dare <B>priorità <LatexMath>{`b`}</LatexMath></B> alla precisione
+                            (<LatexMath>{`b > 1`}</LatexMath>) oppure al richiamo (<LatexMath>{`b < 1`}</LatexMath>):
                         </P>
                         <B><LatexMath block={true}>{r`
                             E = 1 - \frac{1 + b^2}{\frac{b^2}{Recall} + \frac{1}{Precision}}
@@ -1445,56 +1634,64 @@ export default function Gestinfo() {
                     </Box>
                 </Split>
                 <Aside>
-                    Attenzione: non è sufficiente confrontare le misure medie per determinare l'efficacia di un motore di ricerca, perchè esse potrebbero <B>nascondere problemi</B> di <B>tipi specifici di query</B>!
+                    Attenzione: non è sufficiente confrontare le misure medie per determinare l'efficacia di un motore
+                    di ricerca, perchè esse potrebbero <B>nascondere problemi</B> di <B>tipi specifici di query</B>!
                 </Aside>
                 <Split>
                     <Box title={"Discounted Cumulative Gain"}>
                         <P>
-                            Misura che attribuisce <B><I>guadagni</I> decrescenti</B> in base alla precisione di ogni documento richiamato.
+                            Misura che attribuisce <B><I>guadagni</I> decrescenti</B> in base alla precisione di ogni
+                            documento richiamato.
                         </P>
                         <Aside>
                             <P>
                                 Una formula per il DCG potrebbe essere:
                             </P>
-                            <LatexMath block={true}>{r`DCG = \sum_{Docs} \left( Stars \cdot 2^{- Position} \right)`}</LatexMath>
+                            <LatexMath
+                                block={true}>{r`DCG = \sum_{Docs} \left( Stars \cdot 2^{- Position} \right)`}</LatexMath>
                             <P>
                                 Applicata, sarebbe:
                             </P>
                             <Aside>
                                 <table>
                                     <thead>
-                                        <tr>
-                                            <th>Posizione</th>
-                                            <th>Stelle</th>
-                                            <th>Punti</th>
-                                        </tr>
+                                    <tr>
+                                        <th>Posizione</th>
+                                        <th>Stelle</th>
+                                        <th>Punti</th>
+                                    </tr>
                                     </thead>
                                     <tbody>
-                                        <tr>
-                                            <td>0</td>
-                                            <td>★★★★☆</td>
-                                            <td><LatexMath>{r`4 \cdot 2^{0} =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+4.00`}</LatexMath></Color></td>
-                                        </tr>
-                                        <tr>
-                                            <td>1</td>
-                                            <td>★★☆☆☆</td>
-                                            <td><LatexMath>{r`2 \cdot 2^{-1} =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+1.00`}</LatexMath></Color></td>
-                                        </tr>
-                                        <tr>
-                                            <td>2</td>
-                                            <td>★★★☆☆</td>
-                                            <td><LatexMath>{r`3 \cdot 2^{-2} =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+0.75`}</LatexMath></Color></td>
-                                        </tr>
-                                        <tr>
-                                            <td>3</td>
-                                            <td>★★★★★</td>
-                                            <td><LatexMath>{r`5 \cdot 2^{-3} =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+0.63`}</LatexMath></Color></td>
-                                        </tr>
-                                        <tr>
-                                            <td><B>Tot</B></td>
-                                            <td><B>-----</B></td>
-                                            <td><B><LatexMath>{r`4 + 1 + 0.75 + 0.63 =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+6.38`}</LatexMath></Color></B></td>
-                                        </tr>
+                                    <tr>
+                                        <td>0</td>
+                                        <td>★★★★☆</td>
+                                        <td><LatexMath>{r`4 \cdot 2^{0} =\ `}</LatexMath><Color
+                                            builtin={"lime"}><LatexMath>{`+4.00`}</LatexMath></Color></td>
+                                    </tr>
+                                    <tr>
+                                        <td>1</td>
+                                        <td>★★☆☆☆</td>
+                                        <td><LatexMath>{r`2 \cdot 2^{-1} =\ `}</LatexMath><Color
+                                            builtin={"lime"}><LatexMath>{`+1.00`}</LatexMath></Color></td>
+                                    </tr>
+                                    <tr>
+                                        <td>2</td>
+                                        <td>★★★☆☆</td>
+                                        <td><LatexMath>{r`3 \cdot 2^{-2} =\ `}</LatexMath><Color
+                                            builtin={"lime"}><LatexMath>{`+0.75`}</LatexMath></Color></td>
+                                    </tr>
+                                    <tr>
+                                        <td>3</td>
+                                        <td>★★★★★</td>
+                                        <td><LatexMath>{r`5 \cdot 2^{-3} =\ `}</LatexMath><Color
+                                            builtin={"lime"}><LatexMath>{`+0.63`}</LatexMath></Color></td>
+                                    </tr>
+                                    <tr>
+                                        <td><B>Tot</B></td>
+                                        <td><B>-----</B></td>
+                                        <td><B><LatexMath>{r`4 + 1 + 0.75 + 0.63 =\ `}</LatexMath><Color
+                                            builtin={"lime"}><LatexMath>{`+6.38`}</LatexMath></Color></B></td>
+                                    </tr>
                                     </tbody>
                                 </table>
                             </Aside>
@@ -1502,13 +1699,15 @@ export default function Gestinfo() {
                     </Box>
                     <Box title={"Normalized DCG"}>
                         <P>
-                            Variante del <B>Discounted Cumulative Gain</B> che <B>divide</B> il punteggio finale per il valore <B>perfetto</B> ottenibile.
+                            Variante del <B>Discounted Cumulative Gain</B> che <B>divide</B> il punteggio finale per il
+                            valore <B>perfetto</B> ottenibile.
                         </P>
                         <Aside>
                             <P>
                                 Normalizzando la formula precedente si ottiene:
                             </P>
-                            <LatexMath block={true}>{r`NDCG = \frac{\sum_{Docs} \left( Stars \cdot 2^{- Position} \right)}{\sum_{Docs} \left( 5 \cdot 2^{- Position} \right)}`}</LatexMath>
+                            <LatexMath
+                                block={true}>{r`NDCG = \frac{\sum_{Docs} \left( Stars \cdot 2^{- Position} \right)}{\sum_{Docs} \left( 5 \cdot 2^{- Position} \right)}`}</LatexMath>
                         </Aside>
                     </Box>
                 </Split>
@@ -1521,13 +1720,15 @@ export default function Gestinfo() {
                 </Box>
                 <Box title={"A cosa serve?"}>
                     <P>
-                        Permettere all'utente di <B>vedere velocemente</B> tutti i risultati e di <B>scegliere</B> il risultato a lui più utile.
+                        Permettere all'utente di <B>vedere velocemente</B> tutti i risultati e di <B>scegliere</B> il
+                        risultato a lui più utile.
                     </P>
                 </Box>
             </Split>
             <Box title={"Elenco di collegamenti"}>
                 <P>
-                    Il motore di ricerca web mostra all'utente un <B><I>elenco di collegamenti</I></B> ai documenti richiamati.
+                    Il motore di ricerca web mostra all'utente un <B><I>elenco di collegamenti</I></B> ai documenti
+                    richiamati.
                 </P>
                 <P>
                     Solitamente include alcuni dati del documento, come <B>titolo</B>, <B>sommario</B> e <B>url</B>.
@@ -1539,18 +1740,23 @@ export default function Gestinfo() {
                     <Split>
                         <Box title={"Sommario statico"}>
                             <P>
-                                Un sommario i cui contenuti dipendono solo dal <B>documento</B>, e non dalla query immessa.
+                                Un sommario i cui contenuti dipendono solo dal <B>documento</B>, e non dalla query
+                                immessa.
                             </P>
                             <Aside>
-                                Sono sommari statici quelli ottenuti dai <B><code>manifest.json</code></B>, dai tag <B>OpenGraph</B>, dalle <B>prime righe</B> del documento e quelli che Google genera dalle <B>applicazioni web</B> (Web 3.0).
+                                Sono sommari statici quelli ottenuti dai <B><code>manifest.json</code></B>, dai
+                                tag <B>OpenGraph</B>, dalle <B>prime righe</B> del documento e quelli che Google genera
+                                dalle <B>applicazioni web</B> (Web 3.0).
                             </Aside>
                         </Box>
                         <Box title={"Sommario dinamico"}>
                             <P>
-                                Un sommario che <B>varia da query a query</B>, evidenziando le parti rilevanti del documento.
+                                Un sommario che <B>varia da query a query</B>, evidenziando le parti rilevanti del
+                                documento.
                             </P>
                             <Aside>
-                                Sono sommari dinamici quelli che Google genera dalle <B>pagine web statiche</B> (Web 1.0) e <B>dinamiche</B> (Web 2.0).
+                                Sono sommari dinamici quelli che Google genera dalle <B>pagine web statiche</B> (Web
+                                1.0) e <B>dinamiche</B> (Web 2.0).
                             </Aside>
                         </Box>
                     </Split>
diff --git a/src/routes/Home.js b/src/routes/Home.js
index 44bcbd8..48c3025 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -1,25 +1,28 @@
-import React from "react";
-import {Size, Anchor, BaseLink as A, Paragraph as P, Bold as B, ListItem as LI} from "bluelib/lib/components";
-import Split from "../components/Split";
-import Box from "../components/Box";
-import SelectSkin from "../components/SelectSkin";
+import React from "react"
+import { Anchor, BaseLink as A, Bold as B, ListItem as LI, Paragraph as P, Size } from "bluelib/lib/components"
+import Split from "../components/Split"
+import Box from "../components/Box"
+import SelectSkin from "../components/SelectSkin"
 
 
-export default function Home({skin, setSkin}) {
+export default function Home({ skin, setSkin }) {
     return (
         <article>
             <Split title={<span>Appunti open source di <A href={"https://steffo.eu"}>Steffo</A></span>}>
                 <Box title={"Unisteffo"}>
                     <P>
-                        Ciao! Benvenuto a <B>Unisteffo</B>, il sito in cui carico tutto il materiale che uso per studiare!
+                        Ciao! Benvenuto a <B>Unisteffo</B>, il sito in cui carico tutto il materiale che uso per
+                        studiare!
                     </P>
                     <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>!
+                        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>
                 </Box>
                 <Box title={"Tema"}>
                     <P>
-                        Se i colori ti deconcentrano, non ti piacciono, o vuoi stampare alcune di queste pagine, puoi cambiare tema del sito qui:
+                        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}/>
@@ -29,22 +32,39 @@ export default function Home({skin, setSkin}) {
             <Split title={"Università"}>
                 <Box title={"Primo anno"}>
                     <ul>
-                        <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"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2018_AlgebraLineare"}>Algebra lineare</Anchor></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>
+                        <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"}><Anchor
+                            href={"https://github.com/Steffo99/appunti-universitari/tree/master/2018_AlgebraLineare"}>Algebra
+                            lineare</Anchor></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>
                 </Box>
                 <Box title={"Secondo anno"}>
                     <ul>
                         <LI><Size value={"l"}><A href={"/fisica"}>Fisica</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"}><Anchor href={"https://old.uni.steffo.eu/#/statistica"}>Statistica ed elementi di probabilità</Anchor></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"}><Anchor href={"https://old.uni.steffo.eu/#/apprendimento"}>Apprendimento ed evoluzione in sistemi artificiali</Anchor></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>
+                        <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"}><Anchor href={"https://old.uni.steffo.eu/#/statistica"}>Statistica ed
+                            elementi di probabilità</Anchor></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"}><Anchor href={"https://old.uni.steffo.eu/#/apprendimento"}>Apprendimento
+                            ed evoluzione in sistemi artificiali</Anchor></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>
                 </Box>
                 <Box title={"Terzo anno"}>