diff --git a/source/src/App.tsx b/source/src/App.tsx index d1e70dd..9e3ade9 100644 --- a/source/src/App.tsx +++ b/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 "katex/dist/katex.min.css" // latex mathematical expression - -import theming from "./theming" +import { ThemeType } from "./types/styled-comonents" 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( - storage.getItem("theme") || "dark" // get theme from storage and set to "dark" mode if not set already + const [currentTheme, setCurrentTheme] = useState( + (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 = () => { { + setTheme(setThemeTo) { setCurrentTheme(setThemeTo) }, }} @@ -105,7 +101,7 @@ const App = () => { } /> } /> } /> - } /> + } /> )} diff --git a/source/src/components/Footer.tsx b/source/src/components/Footer.tsx index 392c8c6..13e36d2 100644 --- a/source/src/components/Footer.tsx +++ b/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; diff --git a/source/src/components/Loading.tsx b/source/src/components/Loading.tsx index 4f8759d..97d8a15 100644 --- a/source/src/components/Loading.tsx +++ b/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; diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx index 6e764c0..8164f10 100644 --- a/source/src/components/Navbar.tsx +++ b/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` diff --git a/source/src/components/PostCard.tsx b/source/src/components/PostCard.tsx index d04a6ad..0fa3a8f 100644 --- a/source/src/components/PostCard.tsx +++ b/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%); diff --git a/source/src/components/Sidebar.tsx b/source/src/components/Sidebar.tsx index b697abd..c38f66c 100644 --- a/source/src/components/Sidebar.tsx +++ b/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} diff --git a/source/src/components/SubMenu.tsx b/source/src/components/SubMenu.tsx index 3abf8fb..e63a216 100644 --- a/source/src/components/SubMenu.tsx +++ b/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}; diff --git a/source/src/components/Tag.tsx b/source/src/components/Tag.tsx index 6dd0b4b..a50e713 100644 --- a/source/src/components/Tag.tsx +++ b/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; diff --git a/source/src/components/ThemeToggleButton.tsx b/source/src/components/ThemeToggleButton.tsx index 17be38e..00545fc 100644 --- a/source/src/components/ThemeToggleButton.tsx +++ b/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} diff --git a/source/src/pages/NotFound.tsx b/source/src/pages/NotFound.tsx index 3375c71..9c5cbd3 100644 --- a/source/src/pages/NotFound.tsx +++ b/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; diff --git a/source/src/pages/Page.tsx b/source/src/pages/Page.tsx index 66fb5ec..0eaea8e 100644 --- a/source/src/pages/Page.tsx +++ b/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" diff --git a/source/src/pages/PostList.tsx b/source/src/pages/PostList.tsx index 9ad40d0..465289d 100644 --- a/source/src/pages/PostList.tsx +++ b/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" diff --git a/source/src/pages/Search.tsx b/source/src/pages/Search.tsx index c5c040b..5f11170 100644 --- a/source/src/pages/Search.tsx +++ b/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" diff --git a/source/src/react-app-env.d.ts b/source/src/react-app-env.d.ts deleted file mode 100644 index 1a074f6..0000000 --- a/source/src/react-app-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// - -interface Document { - [fonts: string]: any -} diff --git a/source/src/globalStyle.ts b/source/src/styles/globalStyle.tsx similarity index 86% rename from source/src/globalStyle.ts rename to source/src/styles/globalStyle.tsx index 5cbb7bd..5a1620d 100644 --- a/source/src/globalStyle.ts +++ b/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; - background-color: #22272e; - border: 1px solid #555; - page-break-inside: avoid; - font-size: 15px; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; + border: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "1px solid #BBB", + dark: "1px solid #555", + })}; 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} +` diff --git a/source/src/theming.ts b/source/src/styles/theming.ts similarity index 100% rename from source/src/theming.ts rename to source/src/styles/theming.ts diff --git a/source/src/types/styled-comonents.d.ts b/source/src/types/styled-comonents.d.ts index b0fab1f..8ad51f8 100644 --- a/source/src/types/styled-comonents.d.ts +++ b/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 - setTheme(setThemeTo: string): void + currentTheme: ThemeType + setTheme(setThemeTo: ThemeType): void } }