moved style related code to separate folder

source/src/App.tsx

@@ -1,14 +1,11 @@
 import { useEffect, useState } from "react"
 import { Routes, Route } from "react-router-dom"
-import styled, { ThemeProvider, createGlobalStyle } from "styled-components"
+import styled, { ThemeProvider } from "styled-components"
 import { Helmet } from "react-helmet-async"
 import storage from "local-storage-fallback"
 import { isIE } from "react-device-detect"
 
-import "highlight.js/styles/github-dark-dimmed.css" // code block styling
+import { ThemeType } from "./types/styled-comonents"
-import "katex/dist/katex.min.css" // latex mathematical expression
-
-import theming from "./theming"
 
 import Loading from "./components/Loading"
 import Navbar from "./components/Navbar"
@@ -18,14 +15,13 @@ import PostList from "./pages/PostList"
 import Search from "./pages/Search"
 import Page from "./pages/Page"
 import NotFound from "./pages/NotFound"
-import { globalStyle } from "./globalStyle"
+
+import theming from "./styles/theming"
+import GlobalStyle from "./styles/globalStyle"
 
 // Theme that will be used throughout the website
 // wrapping it using css because prettier extension does not work well with styled-components
 // https://github.com/styled-components/vscode-styled-components/issues/175
-const GlobalStyle = createGlobalStyle<{
-	theme: { currentTheme: string }
-}>`${globalStyle}`
 
 const IENotSupported = styled.p`
 	margin: auto;
@@ -43,8 +39,8 @@ const StyledContentContainer = styled.div`
 
 const App = () => {
 	const [isLoading, setIsLoading] = useState(true)
-	const [currentTheme, setCurrentTheme] = useState(
+	const [currentTheme, setCurrentTheme] = useState<ThemeType>(
-		storage.getItem("theme") || "dark" // get theme from storage and set to "dark" mode if not set already
+		(storage.getItem("theme") || "dark") as ThemeType // get theme from storage and set to "dark" mode if not set already
 	)
 
 	useEffect(() => {
@@ -78,7 +74,7 @@ const App = () => {
 		<ThemeProvider
 			theme={{
 				currentTheme: currentTheme,
-				setTheme: (setThemeTo) => {
+				setTheme(setThemeTo) {
 					setCurrentTheme(setThemeTo)
 				},
 			}}
@@ -105,7 +101,7 @@ const App = () => {
 						<Route path="/loading" element={<Loading />} />
 						<Route path="/search" element={<Search />} />
 						<Route path="/404" element={<NotFound />} />
-						<Route path="/:path*" element={<Page />} />
+						<Route path="/*" element={<Page />} />
 					</Routes>
 				)}
 			</StyledContentContainer>

source/src/components/Footer.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 
 const StyledFooter = styled.footer`
 	display: flex;

source/src/components/Loading.tsx

@@ -4,7 +4,7 @@
 
 import styled from "styled-components"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 
 const StyledContainer = styled.div`
 	display: flex;

source/src/components/Navbar.tsx

@@ -10,7 +10,7 @@ import { faSearch } from "@fortawesome/free-solid-svg-icons"
 import ThemeToggleButton from "./ThemeToggleButton"
 import Sidebar from "./Sidebar"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 import NavbarData from "../data/NavbarData"
 
 const StyledNav = styled.nav`

source/src/components/PostCard.tsx

@@ -13,7 +13,7 @@ import {
 import Tag from "../components/Tag"
 import TagList from "../components/TagList"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 
 const StyledPostCard = styled.div`
 	box-shadow: 0 4px 10px rgb(0 0 0 / 10%);

source/src/components/Sidebar.tsx

@@ -9,7 +9,7 @@ import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
 import SubMenu from "./SubMenu"
 
 import NavbarData, { Item } from "../data/NavbarData"
-import theming from "../theming"
+import theming from "../styles/theming"
 
 const CommonSidebarToggleButtonStyle = css`
 	${theming.styles.navbarButtonStyle}

source/src/components/SubMenu.tsx

@@ -7,7 +7,7 @@ import { Link } from "react-router-dom"
 import styled from "styled-components"
 
 import { Item } from "../data/NavbarData"
-import theming from "../theming"
+import theming from "../styles/theming"
 
 const SidebarLink = styled(Link)`
 	${theming.styles.navbarButtonStyle};

source/src/components/Tag.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components"
 import { faTag } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 
 const StyledTag = styled.div`
 	text-align: center;

source/src/components/ThemeToggleButton.tsx

@@ -5,7 +5,7 @@ import ReactTooltip from "react-tooltip"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 
 const StyledThemeButton = styled.div`
 	${theming.styles.navbarButtonStyle}

source/src/pages/NotFound.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components"
 import { Helmet } from "react-helmet-async"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 
 const StyledNotFound = styled.div`
 	text-align: center;

source/src/pages/Page.tsx

@@ -22,7 +22,7 @@ import TagList from "../components/TagList"
 import NotFound from "./NotFound"
 import Loading from "../components/Loading"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 
 import _map from "../data/map.json"
 import { useEffect } from "react"

source/src/pages/PostList.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from "react"
 import styled from "styled-components"
 import { Helmet } from "react-helmet-async"
 
-import theming from "../theming"
+import theming from "../styles/theming"
 import _map from "../data/map.json"
 
 import PostCard from "../components/PostCard"

source/src/pages/Search.tsx

@@ -11,7 +11,7 @@ import elasticlunr from "elasticlunr" // search engine
 
 import _map from "../data/map.json"
 import searchData from "../data/search.json"
-import theming from "../theming"
+import theming from "../styles/theming"
 
 import "react-date-range/dist/styles.css"
 import "react-date-range/dist/theme/default.css"

source/src/react-app-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react-scripts" />
-
-interface Document {
-	[fonts: string]: any
-}

source/src/styles/globalStyle.tsx

@@ -1,4 +1,10 @@
-import { css } from "styled-components"
+import { createGlobalStyle, css } from "styled-components"
+
+import "highlight.js/styles/base16/solarized-light.css"
+import "highlight.js/styles/atom-one-dark-reasonable.css"
+
+// this doesn't seem to be needed but Imma leave it anyway
+// import "katex/dist/katex.min.css"
 
 import theming from "./theming"
 
@@ -21,7 +27,7 @@ const scrollbarCSS = css`
 `
 
 const codeCSS = css`
-	code {
+	:not(pre) > code {
 		font-family: ${theming.font.code};
 		color: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
@@ -33,7 +39,11 @@ const codeCSS = css`
 				light: "#eee",
 				dark: "#444", // I hope no hardcore christian finds this code
 			})};
-		border: 1px solid #666; /* especially this */
+		border: ${(props) =>
+			theming.theme(props.theme.currentTheme, {
+				light: "1px solid #BBB",
+				dark: "1px solid #666", // especially this
+			})};
 		border-radius: 3px;
 		padding: 0 3px;
 	}
@@ -41,18 +51,21 @@ const codeCSS = css`
 	/* https://stackoverflow.com/a/48694906/12979111 */
 	pre > code {
 		font-family: ${theming.font.code};
-		color: #adbac7;
+		border: ${(props) =>
-		background-color: #22272e;
+			theming.theme(props.theme.currentTheme, {
-		border: 1px solid #555;
+				light: "1px solid #BBB",
-		page-break-inside: avoid;
+				dark: "1px solid #555",
-		font-size: 15px;
+			})};
-		line-height: 1.6;
-		margin-bottom: 1.6em;
-		max-width: 100%;
-		overflow: auto;
 		padding: 1em 1.5em;
+		overflow: auto;
 		display: block;
 		word-wrap: break-word;
+		page-break-inside: avoid;
+
+		/* improve code readability */
+
+		font-size: 1.08rem;
+		line-height: 1.6;
 	}
 `
 
@@ -142,7 +155,7 @@ const blockquoteCSS = css`
 	}
 `
 
-export const globalStyle = css`
+const globalStyle = css`
 	${scrollbarCSS}
 
 	${codeCSS}
@@ -226,3 +239,7 @@ export const globalStyle = css`
 		transition: color 0.1s linear;
 	}
 `
+
+export default createGlobalStyle`
+	${globalStyle}
+`

source/src/types/styled-comonents.d.ts

@@ -1,8 +1,10 @@
 import "styled-components"
 
+export type ThemeType = "dark" | "light"
+
 declare module "styled-components" {
 	export interface DefaultTheme {
-		currentTheme: string
+		currentTheme: ThemeType
-		setTheme(setThemeTo: string): void
+		setTheme(setThemeTo: ThemeType): void
 	}
 }