moved styles outside the class and fixed react error #130 where site doesn't work on production mode

2021-05-30 20:43:34 +09:00 · 2021-05-30 20:43:34 +09:00 · cd8cbba973
commit cd8cbba973
parent cdbe754071
11 changed files with 431 additions and 438 deletions
--- a/source/src/components/Footer.tsx
+++ b/source/src/components/Footer.tsx
@ -4,8 +4,7 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import styled from "styled-components"
 import theming from "../theming"

-export default class Footer extends React.Component {
-	StyledFooter = styled.footer`
+const StyledFooter = styled.footer`
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 1px; /* footer goes outside the page by 1 px for some reason */
@ -29,9 +28,9 @@ export default class Footer extends React.Component {
 	.logo {
 		color: gray;
 	}
-	`
+`

-	StyledLink = styled.a`
+const StyledLink = styled.a`
 	width: 30px;
 	font-size: 2rem;
 	color: ${(props) =>
@ -47,29 +46,30 @@ export default class Footer extends React.Component {
 				dark: "white",
 			})};
 	}
-	`
+`

-	StyledStrong = styled.strong`
+const StyledStrong = styled.strong`
 	font-size: 1.1rem;
-	`
+`

+export default class Footer extends React.Component {
 	render() {
 		return (
-			<this.StyledFooter>
+			<StyledFooter>
 				<div className="logo">
 					Copyright &copy; develo
-					<this.StyledStrong>p</this.StyledStrong>omp
+					<StyledStrong>p</StyledStrong>omp
 				</div>

 				<div className="icons">
-					<this.StyledLink
+					<StyledLink
 						href="https://github.com/developomp/developomp-site"
 						target="_blank"
 					>
 						<FontAwesomeIcon icon={faGithub} />
-					</this.StyledLink>
+					</StyledLink>
 				</div>
-			</this.StyledFooter>
+			</StyledFooter>
 		)
 	}
 }
--- a/source/src/components/LanguageToggleButton.tsx
+++ b/source/src/components/LanguageToggleButton.tsx
@ -8,12 +8,7 @@ import theming from "../theming"

 import { LanguageContext } from "../LangaugeContext"

-interface StyledThemeButtonProps {
-	language: string
-}
-
-export default class LanguageToggleButton extends React.Component {
-	StyledThemeButton = styled.div<StyledThemeButtonProps>`
+const StyledThemeButton = styled.div<StyledThemeButtonProps>`
 	${theming.styles.navbarButtonStyle}
 	${(props) =>
 		props.language == "en"
@ -22,8 +17,13 @@ export default class LanguageToggleButton extends React.Component {
 			-moz-transform: scaleX(-1);\
 			-webkit-transform: scaleX(-1);\
 			-ms-transform: scaleX(-1);"};
-	`
+`

+interface StyledThemeButtonProps {
+	language: string
+}
+
+export default class LanguageToggleButton extends React.Component {
 	languageName = (language) => {
 		let name = "English"
 		if (language == "kr") name = "Korean"
@ -35,14 +35,14 @@ export default class LanguageToggleButton extends React.Component {
 			<LanguageContext.Consumer>
 				{({ language, toggleLanguage }) => (
 					<>
-						<this.StyledThemeButton
+						<StyledThemeButton
 							data-tip
 							data-for="language"
 							onClick={toggleLanguage}
 							language={language}
 						>
 							<FontAwesomeIcon icon={faLanguage} />
-						</this.StyledThemeButton>
+						</StyledThemeButton>
 						<ReactTooltip id="language" type="dark" effect="solid">
 							<span>
 								Using {this.languageName(language)} language
--- a/source/src/components/Navbar.tsx
+++ b/source/src/components/Navbar.tsx
@ -13,8 +13,7 @@ import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
 import LanguageToggleButton from "./LanguageToggleButton"

-export default class Navbar extends React.Component {
-	StyledNav = styled.nav`
+const StyledNav = styled.nav`
 	display: flex;
 	align-items: center;
 	height: 2rem;
@ -35,60 +34,62 @@ export default class Navbar extends React.Component {
 	.right {
 		margin-left: auto;
 	}
-	`
+`

-	StyledNavLinks = styled.div`
+const StyledNavLinks = styled.div`
 	@media only screen and (max-width: ${theming.size.screen_size1}) {
 		display: none;
 	}
-	`
+`

-	StyledImg = styled.img`
+const StyledImg = styled.img`
 	height: 2rem;
 	margin: 1rem;
-	`
+`

-	StyledLink = styled(Link)`
+const StyledLink = styled(Link)`
 	${theming.styles.navbarButtonStyle}
-	`
+`

-	StyledALink = styled.a`
+const StyledALink = styled.a`
 	${theming.styles.navbarButtonStyle}
-	`
+`
+
+export default class Navbar extends React.Component {
 	render() {
 		return (
-			<this.StyledNav>
+			<StyledNav>
 				<Link to="/">
-					<this.StyledImg
+					<StyledImg
 						src={process.env.PUBLIC_URL + "/icon/icon_circle.svg"}
 					/>
 				</Link>
-				<this.StyledNavLinks>
+				<StyledNavLinks>
 					{NavbarData.map((item, index) => (
-						<this.StyledLink key={index} to={item.path}>
+						<StyledLink key={index} to={item.path}>
 							{item.title}
-						</this.StyledLink>
+						</StyledLink>
 					))}
-				</this.StyledNavLinks>
+				</StyledNavLinks>

 				<ThemeToggleButton />
 				<LanguageToggleButton />

-				<this.StyledALink
+				<StyledALink
 					data-tip
 					data-for="github"
 					href="https://github.com/developomp/developomp-site"
 					target="_blank"
 				>
 					<FontAwesomeIcon icon={faGithub} />
-				</this.StyledALink>
+				</StyledALink>
 				<ReactTooltip id="github" type="dark" effect="solid">
 					<span>View source code</span>
 				</ReactTooltip>

 				<SearchBox />
 				<Sidebar />
-			</this.StyledNav>
+			</StyledNav>
 		)
 	}
 }
--- a/source/src/components/SearchBox.tsx
+++ b/source/src/components/SearchBox.tsx
@ -5,8 +5,7 @@ import styled from "styled-components"

 import theming from "../theming"

-export default class Navbar extends React.Component {
-	StyledSearchBoxContainer = styled.div`
+const StyledSearchBoxContainer = styled.div`
 	display: flex;
 	justify-content: left;
 	margin: 0.5rem;
@ -29,9 +28,9 @@ export default class Navbar extends React.Component {
 				dark: "#36393F",
 			})};
 	}
-	`
+`

-	StyledSearchBox = styled.input`
+const StyledSearchBox = styled.input`
 	width: 80%;
 	border: none;
 	border-right: 1rem;
@ -40,22 +39,23 @@ export default class Navbar extends React.Component {
 	text-decoration: none;
 	background-color: inherit;
 	color: inherit;
-	`
+`

-	StyledSearchButton = styled(FontAwesomeIcon)`
+const StyledSearchButton = styled(FontAwesomeIcon)`
 	cursor: pointer;
-	`
+`

+export default class Navbar extends React.Component {
 	render() {
 		return (
-			<this.StyledSearchBoxContainer>
-				<this.StyledSearchBox
+			<StyledSearchBoxContainer>
+				<StyledSearchBox
 					type="text"
 					name="search"
 					placeholder="Search"
 				/>
-				<this.StyledSearchButton icon={faSearch} />
-			</this.StyledSearchBoxContainer>
+				<StyledSearchButton icon={faSearch} />
+			</StyledSearchBoxContainer>
 		)
 	}
 }
--- a/source/src/components/Sidebar.tsx
+++ b/source/src/components/Sidebar.tsx
@ -9,6 +9,73 @@ import NavbarData, { Item } from "../data/NavbarData"

 import SubMenu from "./SubMenu"

+const CommonSidebarToggleButtonStyle = css`
+	${theming.styles.navbarButtonStyle}
+	width: 1.5rem;
+	text-align: center;
+	cursor: pointer;
+	@media only screen and (min-width: ${theming.size.screen_size1}) {
+		display: none;
+	}
+`
+
+const StyledToggleSidebarButton = styled.div`
+	${CommonSidebarToggleButtonStyle}
+`
+
+const StyledToggleSidebarButton2 = styled.div`
+	${CommonSidebarToggleButtonStyle}
+	border-radius: 0;
+	margin: auto;
+	width: 90%;
+	height: 2rem;
+	font-size: 1.1rem;
+`
+
+const StyledOverlay = styled.div<SidebarState>`
+	display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 20;
+	transition-property: opacity;
+	background-color: rgba(0, 0, 0, 25%);
+
+	* {
+		overflow: scroll;
+	}
+`
+
+const SidebarNav = styled.nav<SidebarState>`
+	width: 250px;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	position: fixed;
+	top: 0;
+	right: ${(props) => (props.isSidebarOpen ? "0" : "-100%")};
+	transition: 350ms;
+	z-index: 30;
+	overflow-x: hidden;
+	overflow-y: scroll;
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: theming.light.backgroundColor0,
+			dark: theming.dark.backgroundColor0,
+		})};
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: theming.light.color0,
+			dark: theming.dark.color0,
+		})};
+`
+
+const SidebarWrap = styled.div`
+	width: 100%;
+`
+
 interface SidebarProps {}
 interface SidebarState {
 	isSidebarOpen: boolean
@ -31,82 +98,15 @@ export default class Sidebar extends React.Component<
 		document.body.style.overflow = this.state.isSidebarOpen ? "" : "hidden"
 	}

-	CommonSidebarToggleButtonStyle = css`
-		${theming.styles.navbarButtonStyle}
-		width: 1.5rem;
-		text-align: center;
-		cursor: pointer;
-		@media only screen and (min-width: ${theming.size.screen_size1}) {
-			display: none;
-		}
-	`
-
-	StyledToggleSidebarButton = styled.div`
-		${this.CommonSidebarToggleButtonStyle}
-	`
-
-	StyledToggleSidebarButton2 = styled.div`
-		${this.CommonSidebarToggleButtonStyle}
-		border-radius: 0;
-		margin: auto;
-		width: 90%;
-		height: 2rem;
-		font-size: 1.1rem;
-	`
-
-	StyledOverlay = styled.div<SidebarState>`
-		display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: 20;
-		transition-property: opacity;
-		background-color: rgba(0, 0, 0, 25%);
-
-		* {
-			overflow: scroll;
-		}
-	`
-
-	SidebarNav = styled.nav<SidebarState>`
-		width: 250px;
-		height: 100vh;
-		display: flex;
-		justify-content: center;
-		position: fixed;
-		top: 0;
-		right: ${(props) => (props.isSidebarOpen ? "0" : "-100%")};
-		transition: 350ms;
-		z-index: 30;
-		overflow-x: hidden;
-		overflow-y: scroll;
-		background-color: ${(props) =>
-			theming.theme(props.theme.currentTheme, {
-				light: theming.light.backgroundColor0,
-				dark: theming.dark.backgroundColor0,
-			})};
-		color: ${(props) =>
-			theming.theme(props.theme.currentTheme, {
-				light: theming.light.color0,
-				dark: theming.dark.color0,
-			})};
-	`
-
-	SidebarWrap = styled.div`
-		width: 100%;
-	`
-
 	render() {
 		return (
 			<>
-				<this.StyledOverlay
+				<StyledOverlay
 					isSidebarOpen={this.state.isSidebarOpen}
 					onClick={this.toggleSidebar}
 				/>

-				<this.StyledToggleSidebarButton
+				<StyledToggleSidebarButton
 					data-tip
 					data-for="sidebar"
 					onClick={this.toggleSidebar}
@ -115,21 +115,21 @@ export default class Sidebar extends React.Component<
 					<ReactTooltip id="sidebar" type="dark" effect="solid">
 						<span>open sidebar</span>
 					</ReactTooltip>
-				</this.StyledToggleSidebarButton>
+				</StyledToggleSidebarButton>

-				<this.SidebarNav isSidebarOpen={this.state.isSidebarOpen}>
-					<this.SidebarWrap>
-						<this.StyledToggleSidebarButton2
+				<SidebarNav isSidebarOpen={this.state.isSidebarOpen}>
+					<SidebarWrap>
+						<StyledToggleSidebarButton2
 							onClick={this.toggleSidebar}
 						>
 							<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>{" "}
 							Close
-						</this.StyledToggleSidebarButton2>
+						</StyledToggleSidebarButton2>
 						{NavbarData.map((item: Item, index) => {
 							return <SubMenu item={item} key={index} />
 						})}
-					</this.SidebarWrap>
-				</this.SidebarNav>
+					</SidebarWrap>
+				</SidebarNav>
 			</>
 		)
 	}
--- a/source/src/components/Spinner.tsx
+++ b/source/src/components/Spinner.tsx
@ -5,20 +5,7 @@
 import React from "react"
 import styled, { keyframes } from "styled-components"

-interface BallInterface {
-	size: number
-	key: string
-	index: number
-}
-
-interface SpinnerProps {
-	size: number
-}
-
-export default class Spinner extends React.Component<SpinnerProps> {
-	balls: unknown[] = []
-
-	motion = keyframes`
+const motion = keyframes`
 		from {
 			transform: scale(1, 1);
 			opacity: 1;
@ -29,7 +16,7 @@ export default class Spinner extends React.Component<SpinnerProps> {
 		}
 	`

-	spin = keyframes`
+const spin = keyframes`
 		from {
 			transform: rotate(0deg);
 		}
@ -38,7 +25,7 @@ export default class Spinner extends React.Component<SpinnerProps> {
 		}
 	`

-	Ball = styled.div<BallInterface>`
+const Ball = styled.div<BallInterface>`
 	float: left;
 	clear: right;
 	margin: ${(props) => props.size / 15}px;
@ -46,7 +33,7 @@ export default class Spinner extends React.Component<SpinnerProps> {
 	height: ${(props) => props.size / 5}px;
 	border-radius: 2px;
 	background-color: lightgrey;
-		animation-name: ${this.motion};
+	animation-name: ${motion};
 	animation-direction: alternate;
 	animation-duration: 800ms;
 	animation-timing-function: linear;
@ -80,15 +67,28 @@ export default class Spinner extends React.Component<SpinnerProps> {
 	&:nth-child(9) {
 		animation-delay: 1000ms;
 	}
-	`
+`

-	Wrapper = styled.div`
+const Wrapper = styled.div`
 	margin: 5rem auto 0 auto;
 	width: 200px;
 	height: 200px;
 	animation-timing-function: linear;
-		animation: ${this.spin} 10s infinite;
-	`
+	animation: ${spin} 10s infinite;
+`
+
+interface BallInterface {
+	size: number
+	key: string
+	index: number
+}
+
+interface SpinnerProps {
+	size: number
+}
+
+export default class Spinner extends React.Component<SpinnerProps> {
+	balls: unknown[] = []

 	constructor(props) {
 		super(props)
@ -99,7 +99,7 @@ export default class Spinner extends React.Component<SpinnerProps> {
 		for (let i = 0; i < countBallsInLine; i++) {
 			for (let j = 0; j < countBallsInLine; j++) {
 				this.balls.push(
-					<this.Ball
+					<Ball
 						size={this.props.size}
 						key={keyValue.toString()}
 						index={keyValue}
@ -111,6 +111,6 @@ export default class Spinner extends React.Component<SpinnerProps> {
 	}

 	render() {
-		return <this.Wrapper>{this.balls}</this.Wrapper>
+		return <Wrapper>{this.balls}</Wrapper>
 	}
 }
--- a/source/src/components/SubMenu.tsx
+++ b/source/src/components/SubMenu.tsx
@ -4,19 +4,7 @@ import styled from "styled-components"
 import theming from "../theming"
 import { Item } from "../data/NavbarData"

-interface SubMenuProps {
-	item: Item
-}
-
-interface SubMenuState {
-	isSubNavOpen: boolean
-}
-
-export default class SubMenu extends React.Component<
-	SubMenuProps,
-	SubMenuState
-> {
-	SidebarLink = styled(Link)`
+const SidebarLink = styled(Link)`
 	${theming.styles.navbarButtonStyle};
 	display: flex;
 	width: 100%;
@ -27,13 +15,13 @@ export default class SubMenu extends React.Component<
 	align-items: center;
 	padding: 20px;
 	list-style: none;
-	`
+`

-	SidebarLabel = styled.span`
+const SidebarLabel = styled.span`
 	margin-left: 16px;
-	`
+`

-	DropdownLink = styled(Link)`
+const DropdownLink = styled(Link)`
 	background: #414757;
 	height: 60px;
 	padding-left: 3rem;
@ -47,8 +35,20 @@ export default class SubMenu extends React.Component<
 		background: #632ce4;
 		cursor: pointer;
 	}
-	`
+`

+interface SubMenuProps {
+	item: Item
+}
+
+interface SubMenuState {
+	isSubNavOpen: boolean
+}
+
+export default class SubMenu extends React.Component<
+	SubMenuProps,
+	SubMenuState
+> {
 	constructor(props) {
 		super(props)
 		this.state = {
@ -61,15 +61,13 @@ export default class SubMenu extends React.Component<
 	render() {
 		return (
 			<>
-				<this.SidebarLink
+				<SidebarLink
 					to={this.props.item.path}
 					onClick={this.props.item.subNav && this.showSubNav}
 				>
 					<div>
 						{this.props.item.icon}
-						<this.SidebarLabel>
-							{this.props.item.title}
-						</this.SidebarLabel>
+						<SidebarLabel>{this.props.item.title}</SidebarLabel>
 					</div>
 					<div>
 						{this.props.item.subNav && this.state.isSubNavOpen
@ -78,7 +76,7 @@ export default class SubMenu extends React.Component<
 							? this.props.item.iconClosed
 							: null}
 					</div>
-				</this.SidebarLink>
+				</SidebarLink>

 				{/* not used as of the moment */}
 				{this.state.isSubNavOpen && // check if subNav is open
@ -86,12 +84,10 @@ export default class SubMenu extends React.Component<
 					this.props.item.subNav.map((item, index) => {
 						// shows all items in subNav
 						return (
-							<this.DropdownLink to={item.path} key={index}>
+							<DropdownLink to={item.path} key={index}>
 								{item.icon}
-								<this.SidebarLabel>
-									{item.title}
-								</this.SidebarLabel>
-							</this.DropdownLink>
+								<SidebarLabel>{item.title}</SidebarLabel>
+							</DropdownLink>
 						)
 					})}
 			</>
--- a/source/src/components/ThemeToggleButton.tsx
+++ b/source/src/components/ThemeToggleButton.tsx
@ -6,8 +6,7 @@ import ReactTooltip from "react-tooltip"

 import theming from "../theming"

-export default class Navbar extends React.Component {
-	StyledThemeButton = styled.div`
+const StyledThemeButton = styled.div`
 	${theming.styles.navbarButtonStyle}
 	${(props) =>
 		theming.theme(props.theme.currentTheme, {
@ -17,13 +16,15 @@ export default class Navbar extends React.Component {
 			-webkit-transform: scaleX(-1);\
 			-ms-transform: scaleX(-1);",
 		})};
-	`
+`
+
+export default class Navbar extends React.Component {
 	render() {
 		return (
 			<ThemeConsumer>
 				{({ currentTheme, setTheme }) => (
 					<>
-						<this.StyledThemeButton
+						<StyledThemeButton
 							data-tip
 							data-for="theme"
 							className="right"
@ -39,7 +40,7 @@ export default class Navbar extends React.Component {
 							{currentTheme == "light" && (
 								<FontAwesomeIcon icon={faSun} />
 							)}
-						</this.StyledThemeButton>
+						</StyledThemeButton>
 						<ReactTooltip id="theme" type="dark" effect="solid">
 							<span>Using {currentTheme} theme</span>
 						</ReactTooltip>
--- a/source/src/pages/NotFound.tsx
+++ b/source/src/pages/NotFound.tsx
@ -4,8 +4,7 @@ import { Helmet } from "react-helmet-async"

 import theming from "../theming"

-export default class NotFound extends React.Component {
-	StyledNotFound = styled.div`
+const StyledNotFound = styled.div`
 	margin: auto;
 	margin-top: 2rem;
 	text-align: center;
@ -14,12 +13,13 @@ export default class NotFound extends React.Component {
 			light: "#111111",
 			dark: "#EEEEEE",
 		})};
-	`
+`

-	Styled404 = styled.h1`
+const Styled404 = styled.h1`
 	font-size: 3rem;
-	`
+`

+export default class NotFound extends React.Component {
 	render() {
 		return (
 			<>
@ -38,10 +38,10 @@ export default class NotFound extends React.Component {
 						content="Page does not exist"
 					/>
 				</Helmet>
-				<this.StyledNotFound className="card main-content">
-					<this.Styled404>404</this.Styled404>
+				<StyledNotFound className="card main-content">
+					<Styled404>404</Styled404>
 					the page you are looking for does not exist. :(
-				</this.StyledNotFound>
+				</StyledNotFound>
 			</>
 		)
 	}
--- a/source/src/pages/Portfolio.tsx
+++ b/source/src/pages/Portfolio.tsx
@ -2,13 +2,13 @@ import React from "react"
 import styled from "styled-components"
 import { Helmet } from "react-helmet-async"

-export default class Portfolio extends React.Component {
-	StyledPortfolio = styled.div``
+const StyledPortfolio = styled.div``

-	StyledH1 = styled.h1`
+const StyledH1 = styled.h1`
 	font-size: 3rem;
-	`
+`

+export default class Portfolio extends React.Component {
 	render() {
 		return (
 			<>
@ -30,10 +30,10 @@ export default class Portfolio extends React.Component {
 						content="developomp's Portfolio"
 					/>
 				</Helmet>
-				<this.StyledPortfolio className="card main-content">
-					<this.StyledH1>Portfolio</this.StyledH1>
+				<StyledPortfolio className="card main-content">
+					<StyledH1>Portfolio</StyledH1>
 					My projects
-				</this.StyledPortfolio>
+				</StyledPortfolio>
 			</>
 		)
 	}
--- a/source/src/pages/PostList.tsx
+++ b/source/src/pages/PostList.tsx
@ -7,16 +7,7 @@ import { Helmet } from "react-helmet-async"
 import theming from "../theming"
 import pages from "../pages.json"

-interface HomeProps {
-	title: string
-	howMany?: number
-}
-
-export default class PostList extends React.Component<HomeProps> {
-	h1Text: string
-	PostCards: Array<unknown> = []
-
-	StyledPostList = styled.div`
+const StyledPostList = styled.div`
 	padding-top: 2rem;
 	margin: auto;
 	text-align: center;
@ -25,20 +16,20 @@ export default class PostList extends React.Component<HomeProps> {
 			light: "#111111",
 			dark: "#EEEEEE",
 		})};
-	`
+`

-	StyledH1 = styled.h1`
+const StyledH1 = styled.h1`
 	margin-bottom: 20px;
 	font-weight: 500;
 	margin: 0;
-	`
+`

-	StyledTitle = styled.h1`
+const StyledTitle = styled.h1`
 	font-size: 2rem;
 	font-style: bold;
-	`
+`

-	StyledLink = styled(Link)`
+const StyledLink = styled(Link)`
 	text-decoration: none;

 	color: ${(props) =>
@ -50,14 +41,23 @@ export default class PostList extends React.Component<HomeProps> {
 	&:hover {
 		text-decoration: underline;
 	}
-	`
+`

-	StyledPostCard = styled.div`
+const StyledPostCard = styled.div`
 	box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
 	text-align: left;
 	margin-bottom: 20px;
 	padding: 10px 20px;
-	`
+`
+
+interface HomeProps {
+	title: string
+	howMany?: number
+}
+
+export default class PostList extends React.Component<HomeProps> {
+	h1Text: string
+	PostCards: Array<unknown> = []

 	constructor(props) {
 		super(props)
@ -74,17 +74,14 @@ export default class PostList extends React.Component<HomeProps> {
 			const post = pages[pagePath]

 			this.PostCards.push(
-				<this.StyledPostCard
-					key={pagePath}
-					className="card main-content"
-				>
-					<this.StyledTitle>
-						<this.StyledLink to={pagePath}>
+				<StyledPostCard key={pagePath} className="card main-content">
+					<StyledTitle>
+						<StyledLink to={pagePath}>
 							{post.meta?.title
 								? post.meta.title
 								: "Unknown title"}
-						</this.StyledLink>
-					</this.StyledTitle>
+						</StyledLink>
+					</StyledTitle>
 					<small>
 						Published on{" "}
 						{post.meta?.date ? post.meta.date : "Unknown date"} by{" "}
@ -103,11 +100,9 @@ export default class PostList extends React.Component<HomeProps> {
 						}}
 					></div>
 					<small>
-						<this.StyledLink to={pagePath}>
-							Read more
-						</this.StyledLink>
+						<StyledLink to={pagePath}>Read more</StyledLink>
 					</small>
-				</this.StyledPostCard>
+				</StyledPostCard>
 			)
 			howMany--
 		}
@ -129,11 +124,11 @@ export default class PostList extends React.Component<HomeProps> {
 					<meta property="og:description" content="" />
 				</Helmet>

-				<this.StyledPostList>
-					<this.StyledH1>{this.h1Text}</this.StyledH1>
+				<StyledPostList>
+					<StyledH1>{this.h1Text}</StyledH1>
 					<br />
 					{this.PostCards}
-				</this.StyledPostList>
+				</StyledPostList>
 			</>
 		)
 	}