chagned Home component name to PostList, organized import statements to be more readable, separated langauge context so there's one export in App.tsx, removed component={<Component>} format from Route Switch in App.tsx

source/src/App.tsx

@@ -1,16 +1,17 @@
-import React, { createContext } from "react"
+import React from "react"
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
+import { Switch, Route } from "react-router-dom"
 import { ThemeProvider, createGlobalStyle } from "styled-components"
 import { HelmetProvider } from "react-helmet-async"
 import storage from "local-storage-fallback"
 
 import theming from "./theming"
+import { LanguageContext } from "./LangaugeContext"
 
 import Spinner from "./components/Spinner"
 import Navbar from "./components/Navbar"
 import Footer from "./components/Footer"
 
-import Home from "./pages/home"
+import PostList from "./pages/postList"
 import Page from "./pages/page"
 import NotFound from "./pages/notfound"
 import Portfolio from "./pages/portfolio"
@@ -134,12 +135,6 @@ interface AppState {
 	currentLanguage: string
 }
 
-export const LanguageContext = createContext({
-	language: "",
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	toggleLanguage: () => {},
-})
-
 export default class App extends React.Component<AppProps, AppState> {
 	constructor(props) {
 		super(props)
@@ -183,7 +178,6 @@ export default class App extends React.Component<AppProps, AppState> {
 				<ThemeProvider
 					theme={{
 						currentTheme: this.state.currentTheme,
-						// eslint-disable-next-line @typescript-eslint/no-unused-vars
 						setTheme: (setThemeTo) =>
 							this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components
 					}}
@@ -203,50 +197,44 @@ export default class App extends React.Component<AppProps, AppState> {
 						}}
 					>
 						<GlobalStyle />
-						<Router>
 						<Navbar />
 						<div id="content">
 							{this.state.isLoading ? (
 								<Spinner size={200} />
 							) : (
 								<Switch>
-										<Route
+									<Route exact path="/">
-											exact
+										<PostList
-											path="/"
+											key="home"
-											component={() => (
-												<Home
 											howMany={4}
 											title="Home"
 										/>
+									</Route>
+
+									<Route exact path="/archives">
+										<PostList
+											key="archives"
+											title="Archives"
+										/>
+									</Route>
+
+									<Route exact path="/portfolio">
+										<Portfolio />
+									</Route>
+
+									<Route exact path="/404">
+										<NotFound />
+									</Route>
+
+									<Route exact path="/:path">
+										{({ match }) => (
+											<Page key={match.params.path} />
 										)}
-										/>
+									</Route>
-										<Route
-											exact
-											path="/archives"
-											component={() => (
-												<Home title="Archives" />
-											)}
-										/>
-										<Route
-											exact
-											path="/portfolio"
-											component={Portfolio}
-										/>
-										<Route
-											exact
-											path="/404"
-											component={NotFound}
-										/>
-										<Route
-											exact
-											path="/:path*"
-											component={Page}
-										/>
 								</Switch>
 							)}
 						</div>
 						<Footer />
-						</Router>
 					</LanguageContext.Provider>
 				</ThemeProvider>
 			</HelmetProvider>

source/src/LangaugeContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from "react"
+
+export const LanguageContext = createContext({
+	language: "",
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	toggleLanguage: () => {},
+})

source/src/components/LanguageToggleButton.tsx

@@ -4,9 +4,10 @@ import { faLanguage } from "@fortawesome/free-solid-svg-icons"
 import styled from "styled-components"
 import ReactTooltip from "react-tooltip"
 
-import { LanguageContext } from "../App"
 import theming from "../theming"
 
+import { LanguageContext } from "../LangaugeContext"
+
 interface StyledThemeButtonProps {
 	language: string
 }

source/src/components/Navbar.tsx

@@ -3,10 +3,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import styled from "styled-components"
 import ReactTooltip from "react-tooltip"
-import NavbarData from "../data/NavbarData"
-import theming from "../theming"
-
 import { Link } from "react-router-dom"
+
+import theming from "../theming"
+import NavbarData from "../data/NavbarData"
+
 import SearchBox from "./SearchBox"
 import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
@@ -63,13 +64,11 @@ export default class Navbar extends React.Component {
 					/>
 				</Link>
 				<this.StyledNavLinks>
-					{NavbarData.map((item, index) => {
+					{NavbarData.map((item, index) => (
-						return (
 						<this.StyledLink key={index} to={item.path}>
 							{item.title}
 						</this.StyledLink>
-						)
+					))}
-					})}
 				</this.StyledNavLinks>
 
 				<ThemeToggleButton />

source/src/components/SearchBox.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faSearch } from "@fortawesome/free-solid-svg-icons"
 import styled from "styled-components"
+
 import theming from "../theming"
 
 export default class Navbar extends React.Component {

source/src/components/Sidebar.tsx

@@ -1,12 +1,12 @@
 import React from "react"
 import styled, { css } from "styled-components"
-import NavbarData, { Item } from "../data/NavbarData"
 import ReactTooltip from "react-tooltip"
-
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
 
 import theming from "../theming"
+import NavbarData, { Item } from "../data/NavbarData"
+
 import SubMenu from "./SubMenu"
 
 interface SidebarProps {}

source/src/components/ThemeToggleButton.tsx

@@ -2,7 +2,6 @@ import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
 import styled, { ThemeConsumer } from "styled-components"
-
 import ReactTooltip from "react-tooltip"
 
 import theming from "../theming"

source/src/index.tsx

@@ -1,12 +1,15 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import { BrowserRouter } from "react-router-dom"
 
 import App from "./App"
 import reportWebVitals from "./reportWebVitals"
 
 ReactDOM.render(
 	<React.StrictMode>
+		<BrowserRouter>
 			<App />
+		</BrowserRouter>
 	</React.StrictMode>,
 	document.getElementById("root")
 )

source/src/pages/notfound.tsx

@@ -1,8 +1,9 @@
 import React from "react"
 import styled from "styled-components"
-import theming from "../theming"
 import { Helmet } from "react-helmet-async"
 
+import theming from "../theming"
+
 export default class NotFound extends React.Component {
 	StyledNotFound = styled.div`
 		margin: auto;

source/src/pages/page.tsx

@@ -1,10 +1,11 @@
 import React from "react"
 import marked from "marked"
-import NotFound from "./notfound"
 import { Helmet } from "react-helmet-async"
 
 import pages from "../pages.json"
 
+import NotFound from "./notfound"
+
 export default class Page extends React.Component {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	fetched: any
@@ -12,7 +13,7 @@ export default class Page extends React.Component {
 	constructor(props) {
 		super(props)
 
-		const fetched = pages[props.location.pathname]
+		const fetched = pages[location.pathname]
 		if (!fetched) return
 
 		fetched.content = fetched?.content ? fetched.content : "No content"

source/src/pages/portfolio.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-
 import styled from "styled-components"
 import { Helmet } from "react-helmet-async"
 

source/src/pages/postList.tsx

@@ -1,18 +1,18 @@
 import React from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
-import theming from "../theming"
 import marked from "marked"
 import { Helmet } from "react-helmet-async"
 
+import theming from "../theming"
 import pages from "../pages.json"
 
 interface HomeProps {
-	title?: string
+	title: string
 	howMany?: number
 }
 
-export default class Home extends React.Component<HomeProps, { lol: boolean }> {
+export default class PostList extends React.Component<HomeProps> {
 	h1Text: string
 	PostCards: Array<unknown> = []
 
@@ -20,11 +20,12 @@ export default class Home extends React.Component<HomeProps, { lol: boolean }> {
 		padding-top: 2rem;
 		margin: auto;
 		text-align: center;
-		color: ${(props) =>
+		color: white;
+		/* color: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
 				light: "#111111",
 				dark: "#EEEEEE",
-			})};
+			})}; */
 	`
 
 	StyledH1 = styled.h1`
@@ -61,20 +62,17 @@ export default class Home extends React.Component<HomeProps, { lol: boolean }> {
 
 	constructor(props) {
 		super(props)
-		let howMany = props.howMany
-		const isLimited = Boolean(howMany)
 
-		this.h1Text = isLimited ? "All posts" : `${howMany} recent posts`
+		let howMany = props.howMany | 0
+
+		const isLimited = howMany ? true : false
+
+		this.h1Text = isLimited ? `${howMany} recent posts` : "All posts"
 
 		for (const pagePath in pages) {
 			if (isLimited && howMany <= 0) continue
 
 			const post = pages[pagePath]
-			post.title = post.meta?.title ? post.meta.title : "Unknown title"
-			post.date = post.meta?.date ? post.meta.date : "Unknown date"
-			post.author = post.meta?.author
-				? post.meta.author
-				: "Unknown author"
 
 			this.PostCards.push(
 				<this.StyledPostCard
@@ -83,11 +81,17 @@ export default class Home extends React.Component<HomeProps, { lol: boolean }> {
 				>
 					<this.StyledTitle>
 						<this.StyledLink to={pagePath}>
-							{post.title}
+							{post.meta?.title
+								? post.meta.title
+								: "Unknown title"}
 						</this.StyledLink>
 					</this.StyledTitle>
 					<small>
-						Published on {post.date} by {post.author}
+						Published on{" "}
+						{post.meta?.date ? post.meta.date : "Unknown date"} by{" "}
+						{post.meta?.author
+							? post.meta.author
+							: "Unknown author"}
 					</small>
 					<hr />
 					<div