steffo/steffoweb
steffo/steffoweb
1
Fork 0
mirror of https://github.com/Steffo99/steffoweb.git synced 2024-10-16 07:17:28 +00:00
Code Activity

Migrate to Next.js

Browse source
This commit is contained in:
Steffo 2022-02-19 03:29:14 +01:00
parent ccca7b8eb3
commit 3bd4238621
Signed by: steffo
GPG key ID: 6965406171929D01
20 changed files with 314 additions and 11260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

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

0
src/components/Account.module.css → components/Account.module.css
View file

0
src/components/Account.tsx → components/Account.tsx
View file

0
src/components/MoreProjects.jsx → components/MoreProjects.jsx
View file

0
src/components/MoreProjects.module.css → components/MoreProjects.module.css
View file

2
src/components/Project.jsx → components/Project.jsx
View file

@ -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)

0
src/components/Project.module.css → components/Project.module.css
View file

5
components/ThemeContext.ts Normal file
View file

@ -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]);

5
next-env.d.ts vendored Normal file
View file

@ -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.

9
package.json
View file

@ -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",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"eslintConfig": {
"extends": [

0
src/index.css → pages/_app.css
View file

38
pages/_app.tsx Normal file
View file

@ -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;

84
pages/index.tsx Normal file
View file

@ -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;

20
public/index.html
View file

@ -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>

92
src/App.tsx
View file

@ -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;

15
src/index.tsx
View file

@ -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();

1
src/react-app-env.d.ts vendored
View file

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

15
src/reportWebVitals.ts
View file

@ -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;

18
tsconfig.json
View file

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

11268
yarn.lock
View file

File diff suppressed because it is too large Load diff