Migrate to Next.js

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.next

components/Project.jsx

@@ -5,7 +5,7 @@ import Style from "./Project.module.css"
 import { faStar } from "@fortawesome/free-solid-svg-icons"
 
 
-export function Project({user, repo}) {
+export function Project({user, repo, lang}) {
     const [data, setData] = React.useState(null)
     const [error, setError] = React.useState(null)
 

components/ThemeContext.ts

@@ -0,0 +1,5 @@
+import * as React from "react"
+import { BluelibTheme } from "@steffo/bluelib-react/dist/types"
+
+
+export const ThemeContext = React.createContext<[BluelibTheme, React.Dispatch<React.SetStateAction<BluelibTheme>>]>(["royalblue", undefined]);

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -9,9 +9,9 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
     "@steffo/bluelib-react": "^4.2.0",
+    "next": "^12.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
@@ -22,10 +22,9 @@
     "@types/react-dom": "^17.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "dev": "next dev",
-    "build": "react-scripts build",
+    "build": "next build",
-    "test": "react-scripts test",
+    "start": "next start"
-    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [

pages/_app.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import type {AppProps} from "next/app"
+import "./_app.css"
+import {LayoutThreeCol, Heading, BringAttention as B, Footer, Anchor as A, useBluelibInBody } from "@steffo/bluelib-react"
+import {BluelibTheme} from "@steffo/bluelib-react/dist/types"
+import { ThemeContext } from '../components/ThemeContext'
+
+
+function App({Component, pageProps}: AppProps) {
+    const [theme, setTheme] = React.useState<BluelibTheme>("royalblue")
+    useBluelibInBody(theme)
+
+    return (
+        <ThemeContext.Provider value={[theme, setTheme]}>
+            <LayoutThreeCol>
+                <LayoutThreeCol.Center>
+                    <Heading level={1}>
+                        <B>Steffo</B>'s website
+                    </Heading>
+                    <Component {...pageProps}/>
+                    <Footer>
+                        <p>
+                            © {new Date().getFullYear()} Stefano Pigozzi
+                        </p>
+                        <p>
+                            <A href="https://github.com/Steffo99/steffoweb">Open source</A> website based on <A href="https://github.com/Steffo99/bluelib">Bluelib</A> and <A href="https://github.com/Steffo99/bluelib-react">Bluelib React</A>
+                        </p>
+                        <p>
+                            Please do not use the source code of this website to impersonate me!
+                        </p>
+                    </Footer>
+                </LayoutThreeCol.Center>
+            </LayoutThreeCol>
+        </ThemeContext.Provider>
+    );
+}
+
+export default App;

pages/index.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import type {NextPage} from "next"
+import {Heading, Chapter, Box, BringAttention as B, Anchor, Form} from "@steffo/bluelib-react";
+import {BluelibTheme} from "@steffo/bluelib-react/dist/types"
+import {faEnvelope} from "@fortawesome/free-solid-svg-icons"
+import {faDiscord, faGithub, faReddit, faTelegram} from "@fortawesome/free-brands-svg-icons"
+import {Project} from "../components/Project"
+import {MoreProjects} from "../components/MoreProjects"
+import {Account} from "../components/Account"
+import {ThemeContext} from '../components/ThemeContext';
+
+
+type ThemeMap = {
+    [fullname: string]: BluelibTheme;
+};
+const FULL_THEME_NAMES: ThemeMap = {
+    "Royal Blue": "royalblue",
+    "The Sophonity": "sophon",
+    "Sheet of Paper": "paper",
+    "Hacker Terminal": "hacker",
+    "Gestione Amber": "amber",
+}
+
+
+const Index: NextPage = () => {
+    const [_theme, setTheme] = React.useContext(ThemeContext);
+
+    return <>
+        <Chapter>
+            <Box>
+                <Heading level={3}>
+                    About me
+                </Heading>
+                <p>
+                    I'm <B>Stefano Pigozzi</B>, a Computer Science student at <Anchor href={"https://www.unimore.it"}>Unimore</Anchor>!
+                </p>
+                <p>
+                    I develop and maintain many <B>open source</B> software projects, such as websites, chat bots, libraries, videogames and mods.
+                </p>
+            </Box>
+        </Chapter>
+        <Chapter>
+            <Box>
+                <Heading level={3}>
+                    My software projects
+                </Heading>
+                <Project user={"Steffo99"} repo={"sophon"} lang={"Multilanguage"}/>
+                <Project user={"Steffo99"} repo={"greed"} lang={"Python"}/>
+                <Project user={"Steffo99"} repo={"bluelib"} lang={"Less"}/>
+                <Project user={"RYGhub"} repo={"bobbot"} lang={"Rust"}/>
+                <Project user={"RYGhub"} repo={"impressive-strawberry"} lang={"Python"}/>
+                <Project user={"Steffo99"} repo={"flyingsnake"} lang={"Python"}/>
+                <Project user={"pds-nest"} repo={"nest"} lang={"JavaScript"}/>
+                <Project user={"Steffo99"} repo={"keep-everything-alive"} lang={"C#"}/>
+                <MoreProjects user={"Steffo99"} minus={7}/>
+            </Box>
+        </Chapter>
+        <Chapter>
+            <Box>
+                <Heading level={3}>
+                    Me on the web
+                </Heading>
+                <Chapter>
+                    <Account icon={faReddit} url={"https://www.reddit.com/u/Steffo99/"} name={"/u/Steffo99"}/>
+                    <Account icon={faGithub} url={"https://github.com/Steffo99"} name={"Steffo99"}/>
+                    <Account icon={faDiscord} url={""} name={"Steffo#4036"}/>
+                    <Account icon={faTelegram} url={"https://t.me/Steffo"} name={"Steffo"}/>
+                    <Account icon={faEnvelope} url={"mailto:ste.pigozzi@gmail.com"} name={"ste.pigozzi@gmail.com"}/>
+                    <Account icon={faEnvelope} url={"mailto:me@steffo.eu"} name={"me@steffo.eu"}/>
+                </Chapter>
+            </Box>
+            <Box>
+                <Heading level={3}>
+                    Other stuff
+                </Heading>
+                <Form>
+                    <Form.Select label={"Theme"} onChange={event => setTheme(FULL_THEME_NAMES[event.target.value])} options={FULL_THEME_NAMES}/>
+                </Form>
+            </Box>
+        </Chapter>
+    </>
+}
+
+export default Index;

public/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#0D193B" />
-    <meta
-      name="description"
-      content="Steffo's personal website"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Steffo's website</title>
-  </head>
-  <body>
-    <noscript>This website requires JavaScript. I'm sorry :(</noscript>
-    <div id="root"></div>
-  </body>
-</html>

src/App.tsx

@@ -1,92 +0,0 @@
-import {BluelibTheme} from "@steffo/bluelib-react/dist/types"
-import React from 'react'
-import {Bluelib, LayoutThreeCol, Heading, Chapter, Box, BringAttention as B, Anchor, Form} from "@steffo/bluelib-react";
-import {Project} from "./components/Project"
-import {MoreProjects} from "./components/MoreProjects"
-import {faDiscord, faGithub, faReddit, faTelegram} from "@fortawesome/free-brands-svg-icons"
-import {Account} from "./components/Account"
-import {faEnvelope} from "@fortawesome/free-solid-svg-icons"
-
-
-type ThemeMap = {
-    [fullname: string]: BluelibTheme;
-};
-
-
-const FULL_THEME_NAMES: ThemeMap = {
-    "Royal Blue": "royalblue",
-    "The Sophonity": "sophon",
-    "Sheet of Paper": "paper",
-    "Hacker Terminal": "hacker",
-    "Gestione Amber": "amber",
-}
-
-
-function App() {
-    const [theme, setTheme] = React.useState<BluelibTheme>("royalblue")
-
-    return (
-        <Bluelib theme={theme}>
-            <LayoutThreeCol>
-                <LayoutThreeCol.Center>
-                    <Heading level={1}>
-                        <B>Steffo</B>'s website
-                    </Heading>
-                    <Chapter>
-                        <Box>
-                            <Heading level={3}>
-                                About me
-                            </Heading>
-                            <p>
-                                I'm <B>Stefano Pigozzi</B>, a Computer Science student at <Anchor href={"https://www.unimore.it"}>Unimore</Anchor>!
-                            </p>
-                            <p>
-                                I develop and maintain many <B>open source</B> software projects, such as websites, chat bots, libraries, videogames and mods.
-                            </p>
-                        </Box>
-                    </Chapter>
-                    <Chapter>
-                        <Box>
-                            <Heading level={3}>
-                                My software projects
-                            </Heading>
-                            <Project user={"Steffo99"} repo={"sophon"}/>
-                            <Project user={"Steffo99"} repo={"greed"}/>
-                            <Project user={"Steffo99"} repo={"bluelib"}/>
-                            <Project user={"RYGhub"} repo={"bobbot"}/>
-                            <Project user={"Steffo99"} repo={"flyingsnake"}/>
-                            <Project user={"pds-nest"} repo={"nest"}/>
-                            <Project user={"Steffo99"} repo={"keep-everything-alive"}/>
-                            <MoreProjects user={"Steffo99"} minus={7}/>
-                        </Box>
-                    </Chapter>
-                    <Chapter>
-                        <Box>
-                            <Heading level={3}>
-                                Me on the web
-                            </Heading>
-                            <Chapter>
-                                <Account icon={faReddit} url={"https://www.reddit.com/u/Steffo99/"} name={"/u/Steffo99"}/>
-                                <Account icon={faGithub} url={"https://github.com/Steffo99"} name={"Steffo99"}/>
-                                <Account icon={faDiscord} url={""} name={"Steffo#4036"}/>
-                                <Account icon={faTelegram} url={"https://t.me/Steffo"} name={"Steffo"}/>
-                                <Account icon={faEnvelope} url={"mailto:ste.pigozzi@gmail.com"} name={"ste.pigozzi@gmail.com"}/>
-                                <Account icon={faEnvelope} url={"mailto:me@steffo.eu"} name={"me@steffo.eu"}/>
-                            </Chapter>
-                        </Box>
-                        <Box>
-                            <Heading level={3}>
-                                Other stuff
-                            </Heading>
-                            <Form>
-                                <Form.Select label={"Theme"} onChange={event => setTheme(FULL_THEME_NAMES[event.target.value])} options={FULL_THEME_NAMES}/>
-                            </Form>
-                        </Box>
-                    </Chapter>
-                </LayoutThreeCol.Center>
-            </LayoutThreeCol>
-        </Bluelib>
-    );
-}
-
-export default App;

src/index.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-
-reportWebVitals();

src/react-app-env.d.ts

@@ -1 +0,0 @@
-declare module '*.css'

src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  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;

tsconfig.json

@@ -8,19 +8,23 @@
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "strict": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
+    "jsx": "preserve"
-    "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }