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

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 {
+const StyledFooter = styled.footer`
-	StyledFooter = styled.footer`
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 1px; /* footer goes outside the page by 1 px for some reason */
@@ -31,7 +30,7 @@ export default class Footer extends React.Component {
 	}
 `
 
-	StyledLink = styled.a`
+const StyledLink = styled.a`
 	width: 30px;
 	font-size: 2rem;
 	color: ${(props) =>
@@ -49,27 +48,28 @@ export default class Footer extends React.Component {
 	}
 `
 
-	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>
 		)
 	}
 }

source/src/components/LanguageToggleButton.tsx

@@ -8,12 +8,7 @@ import theming from "../theming"
 
 import { LanguageContext } from "../LangaugeContext"
 
-interface StyledThemeButtonProps {
+const StyledThemeButton = styled.div<StyledThemeButtonProps>`
-	language: string
-}
-
-export default class LanguageToggleButton extends React.Component {
-	StyledThemeButton = styled.div<StyledThemeButtonProps>`
 	${theming.styles.navbarButtonStyle}
 	${(props) =>
 		props.language == "en"
@@ -24,6 +19,11 @@ export default class LanguageToggleButton extends React.Component {
 			-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

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 {
+const StyledNav = styled.nav`
-	StyledNav = styled.nav`
 	display: flex;
 	align-items: center;
 	height: 2rem;
@@ -37,58 +36,60 @@ export default class Navbar extends React.Component {
 	}
 `
 
-	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>
 		)
 	}
 }

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 {
+const StyledSearchBoxContainer = styled.div`
-	StyledSearchBoxContainer = styled.div`
 	display: flex;
 	justify-content: left;
 	margin: 0.5rem;
@@ -31,7 +30,7 @@ export default class Navbar extends React.Component {
 	}
 `
 
-	StyledSearchBox = styled.input`
+const StyledSearchBox = styled.input`
 	width: 80%;
 	border: none;
 	border-right: 1rem;
@@ -42,20 +41,21 @@ export default class Navbar extends React.Component {
 	color: inherit;
 `
 
-	StyledSearchButton = styled(FontAwesomeIcon)`
+const StyledSearchButton = styled(FontAwesomeIcon)`
 	cursor: pointer;
 `
 
+export default class Navbar extends React.Component {
 	render() {
 		return (
-			<this.StyledSearchBoxContainer>
+			<StyledSearchBoxContainer>
-				<this.StyledSearchBox
+				<StyledSearchBox
 					type="text"
 					name="search"
 					placeholder="Search"
 				/>
-				<this.StyledSearchButton icon={faSearch} />
+				<StyledSearchButton icon={faSearch} />
-			</this.StyledSearchBoxContainer>
+			</StyledSearchBoxContainer>
 		)
 	}
 }

source/src/components/Sidebar.tsx

@@ -9,29 +9,7 @@ import NavbarData, { Item } from "../data/NavbarData"
 
 import SubMenu from "./SubMenu"
 
-interface SidebarProps {}
+const CommonSidebarToggleButtonStyle = css`
-interface SidebarState {
-	isSidebarOpen: boolean
-}
-
-export default class Sidebar extends React.Component<
-	SidebarProps,
-	SidebarState
-> {
-	constructor(props) {
-		super(props)
-		this.state = {
-			isSidebarOpen: false,
-		}
-	}
-
-	// for some reason this.setState only works if this is an arrow function
-	toggleSidebar = () => {
-		this.setState({ isSidebarOpen: !this.state.isSidebarOpen })
-		document.body.style.overflow = this.state.isSidebarOpen ? "" : "hidden"
-	}
-
-	CommonSidebarToggleButtonStyle = css`
 	${theming.styles.navbarButtonStyle}
 	width: 1.5rem;
 	text-align: center;
@@ -41,12 +19,12 @@ export default class Sidebar extends React.Component<
 	}
 `
 
-	StyledToggleSidebarButton = styled.div`
+const StyledToggleSidebarButton = styled.div`
-		${this.CommonSidebarToggleButtonStyle}
+	${CommonSidebarToggleButtonStyle}
 `
 
-	StyledToggleSidebarButton2 = styled.div`
+const StyledToggleSidebarButton2 = styled.div`
-		${this.CommonSidebarToggleButtonStyle}
+	${CommonSidebarToggleButtonStyle}
 	border-radius: 0;
 	margin: auto;
 	width: 90%;
@@ -54,7 +32,7 @@ export default class Sidebar extends React.Component<
 	font-size: 1.1rem;
 `
 
-	StyledOverlay = styled.div<SidebarState>`
+const StyledOverlay = styled.div<SidebarState>`
 	display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
 	position: fixed;
 	top: 0;
@@ -70,7 +48,7 @@ export default class Sidebar extends React.Component<
 	}
 `
 
-	SidebarNav = styled.nav<SidebarState>`
+const SidebarNav = styled.nav<SidebarState>`
 	width: 250px;
 	height: 100vh;
 	display: flex;
@@ -94,19 +72,41 @@ export default class Sidebar extends React.Component<
 		})};
 `
 
-	SidebarWrap = styled.div`
+const SidebarWrap = styled.div`
 	width: 100%;
 `
 
+interface SidebarProps {}
+interface SidebarState {
+	isSidebarOpen: boolean
+}
+
+export default class Sidebar extends React.Component<
+	SidebarProps,
+	SidebarState
+> {
+	constructor(props) {
+		super(props)
+		this.state = {
+			isSidebarOpen: false,
+		}
+	}
+
+	// for some reason this.setState only works if this is an arrow function
+	toggleSidebar = () => {
+		this.setState({ isSidebarOpen: !this.state.isSidebarOpen })
+		document.body.style.overflow = this.state.isSidebarOpen ? "" : "hidden"
+	}
+
 	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}>
+				<SidebarNav isSidebarOpen={this.state.isSidebarOpen}>
-					<this.SidebarWrap>
+					<SidebarWrap>
-						<this.StyledToggleSidebarButton2
+						<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>
+					</SidebarWrap>
-				</this.SidebarNav>
+				</SidebarNav>
 			</>
 		)
 	}

source/src/components/Spinner.tsx

@@ -5,20 +5,7 @@
 import React from "react"
 import styled, { keyframes } from "styled-components"
 
-interface BallInterface {
+const motion = keyframes`
-	size: number
-	key: string
-	index: number
-}
-
-interface SpinnerProps {
-	size: number
-}
-
-export default class Spinner extends React.Component<SpinnerProps> {
-	balls: unknown[] = []
-
-	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;
@@ -82,14 +69,27 @@ export default class Spinner extends React.Component<SpinnerProps> {
 	}
 `
 
-	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>
 	}
 }

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 {
+const SidebarLink = styled(Link)`
-	item: Item
-}
-
-interface SubMenuState {
-	isSubNavOpen: boolean
-}
-
-export default class SubMenu extends React.Component<
-	SubMenuProps,
-	SubMenuState
-> {
-	SidebarLink = styled(Link)`
 	${theming.styles.navbarButtonStyle};
 	display: flex;
 	width: 100%;
@@ -29,11 +17,11 @@ export default class SubMenu extends React.Component<
 	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;
@@ -49,6 +37,18 @@ export default class SubMenu extends React.Component<
 	}
 `
 
+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>
+						<SidebarLabel>{this.props.item.title}</SidebarLabel>
-							{this.props.item.title}
-						</this.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>
+								<SidebarLabel>{item.title}</SidebarLabel>
-									{item.title}
+							</DropdownLink>
-								</this.SidebarLabel>
-							</this.DropdownLink>
 						)
 					})}
 			</>

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 {
+const StyledThemeButton = styled.div`
-	StyledThemeButton = styled.div`
 	${theming.styles.navbarButtonStyle}
 	${(props) =>
 		theming.theme(props.theme.currentTheme, {
@@ -18,12 +17,14 @@ export default class Navbar extends React.Component {
 			-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>

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 {
+const StyledNotFound = styled.div`
-	StyledNotFound = styled.div`
 	margin: auto;
 	margin-top: 2rem;
 	text-align: center;
@@ -16,10 +15,11 @@ export default class NotFound extends React.Component {
 		})};
 `
 
-	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">
+				<StyledNotFound className="card main-content">
-					<this.Styled404>404</this.Styled404>
+					<Styled404>404</Styled404>
 					the page you are looking for does not exist. :(
-				</this.StyledNotFound>
+				</StyledNotFound>
 			</>
 		)
 	}

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 {
+const StyledPortfolio = styled.div``
-	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">
+				<StyledPortfolio className="card main-content">
-					<this.StyledH1>Portfolio</this.StyledH1>
+					<StyledH1>Portfolio</StyledH1>
 					My projects
-				</this.StyledPortfolio>
+				</StyledPortfolio>
 			</>
 		)
 	}

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 {
+const StyledPostList = styled.div`
-	title: string
-	howMany?: number
-}
-
-export default class PostList extends React.Component<HomeProps> {
-	h1Text: string
-	PostCards: Array<unknown> = []
-
-	StyledPostList = styled.div`
 	padding-top: 2rem;
 	margin: auto;
 	text-align: center;
@@ -27,18 +18,18 @@ export default class PostList extends React.Component<HomeProps> {
 		})};
 `
 
-	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) =>
@@ -52,13 +43,22 @@ export default class PostList extends React.Component<HomeProps> {
 	}
 `
 
-	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
+				<StyledPostCard key={pagePath} className="card main-content">
-					key={pagePath}
+					<StyledTitle>
-					className="card main-content"
+						<StyledLink to={pagePath}>
-				>
-					<this.StyledTitle>
-						<this.StyledLink to={pagePath}>
 							{post.meta?.title
 								? post.meta.title
 								: "Unknown title"}
-						</this.StyledLink>
+						</StyledLink>
-					</this.StyledTitle>
+					</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}>
+						<StyledLink to={pagePath}>Read more</StyledLink>
-							Read more
-						</this.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>
+				<StyledPostList>
-					<this.StyledH1>{this.h1Text}</this.StyledH1>
+					<StyledH1>{this.h1Text}</StyledH1>
 					<br />
 					{this.PostCards}
-				</this.StyledPostList>
+				</StyledPostList>
 			</>
 		)
 	}