changed from hexo to custom react stuff #1
6 changed files with 110 additions and 75 deletions
|
|
@ -32,6 +32,7 @@
|
|||
"markdown-toc": "^1.2.0",
|
||||
"marked": "^2.0.6",
|
||||
"react": "^17.0.2",
|
||||
"react-device-detect": "^1.17.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-helmet-async": "^1.0.9",
|
||||
"react-router-dom": "^5.2.0",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React from "react"
|
||||
import { Switch, Route } from "react-router-dom"
|
||||
import { ThemeProvider, createGlobalStyle } from "styled-components"
|
||||
import styled, { ThemeProvider, createGlobalStyle } from "styled-components"
|
||||
import { HelmetProvider } from "react-helmet-async"
|
||||
import storage from "local-storage-fallback"
|
||||
import { isIE } from "react-device-detect"
|
||||
|
||||
import theming from "./theming"
|
||||
import { LanguageContext } from "./LangaugeContext"
|
||||
|
|
@ -127,6 +128,14 @@ blockquote {
|
|||
}
|
||||
`
|
||||
|
||||
const StyledP = styled.p`
|
||||
margin: auto;
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
font-family: ${theming.font.regular};
|
||||
`
|
||||
|
||||
interface AppProps {}
|
||||
|
||||
interface AppState {
|
||||
|
|
@ -173,71 +182,80 @@ export default class App extends React.Component<AppProps, AppState> {
|
|||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<ThemeProvider
|
||||
theme={{
|
||||
currentTheme: this.state.currentTheme,
|
||||
setTheme: (setThemeTo) =>
|
||||
this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components
|
||||
}}
|
||||
>
|
||||
<LanguageContext.Provider
|
||||
value={{
|
||||
language: this.state.currentLanguage,
|
||||
toggleLanguage: () => {
|
||||
// cycle through languages
|
||||
let setLanguageTo = "en"
|
||||
if (this.state.currentLanguage == "en")
|
||||
setLanguageTo = "kr"
|
||||
this.setState({
|
||||
currentLanguage: setLanguageTo,
|
||||
})
|
||||
},
|
||||
if (isIE)
|
||||
return (
|
||||
<>
|
||||
<StyledP>
|
||||
<b>Internet Explorer</b> is not supported.
|
||||
</StyledP>
|
||||
</>
|
||||
)
|
||||
else
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<ThemeProvider
|
||||
theme={{
|
||||
currentTheme: this.state.currentTheme,
|
||||
setTheme: (setThemeTo) =>
|
||||
this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components
|
||||
}}
|
||||
>
|
||||
<GlobalStyle />
|
||||
<Navbar />
|
||||
<div id="content">
|
||||
{this.state.isLoading ? (
|
||||
<Spinner size={200} />
|
||||
) : (
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<PostList
|
||||
key="home"
|
||||
howMany={4}
|
||||
title="Home"
|
||||
/>
|
||||
</Route>
|
||||
<LanguageContext.Provider
|
||||
value={{
|
||||
language: this.state.currentLanguage,
|
||||
toggleLanguage: () => {
|
||||
// cycle through languages
|
||||
let setLanguageTo = "en"
|
||||
if (this.state.currentLanguage == "en")
|
||||
setLanguageTo = "kr"
|
||||
this.setState({
|
||||
currentLanguage: setLanguageTo,
|
||||
})
|
||||
},
|
||||
}}
|
||||
>
|
||||
<GlobalStyle />
|
||||
<Navbar />
|
||||
<div id="content">
|
||||
{this.state.isLoading ? (
|
||||
<Spinner size={200} />
|
||||
) : (
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<PostList
|
||||
key="home"
|
||||
howMany={4}
|
||||
title="Home"
|
||||
/>
|
||||
</Route>
|
||||
|
||||
<Route exact path="/archives">
|
||||
<PostList
|
||||
key="archives"
|
||||
title="Archives"
|
||||
/>
|
||||
</Route>
|
||||
<Route exact path="/archives">
|
||||
<PostList
|
||||
key="archives"
|
||||
title="Archives"
|
||||
/>
|
||||
</Route>
|
||||
|
||||
<Route exact path="/portfolio">
|
||||
<Portfolio />
|
||||
</Route>
|
||||
<Route exact path="/portfolio">
|
||||
<Portfolio />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/404">
|
||||
<NotFound />
|
||||
</Route>
|
||||
<Route exact path="/404">
|
||||
<NotFound />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/:path*">
|
||||
{({ match }) => (
|
||||
<Page key={match.params.path} />
|
||||
)}
|
||||
</Route>
|
||||
</Switch>
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</LanguageContext.Provider>
|
||||
</ThemeProvider>
|
||||
</HelmetProvider>
|
||||
)
|
||||
<Route exact path="/:path*">
|
||||
{({ match }) => (
|
||||
<Page key={match.params.path} />
|
||||
)}
|
||||
</Route>
|
||||
</Switch>
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</LanguageContext.Provider>
|
||||
</ThemeProvider>
|
||||
</HelmetProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|||
import { faLanguage } from "@fortawesome/free-solid-svg-icons"
|
||||
import styled from "styled-components"
|
||||
import ReactTooltip from "react-tooltip"
|
||||
import { isMobile } from "react-device-detect"
|
||||
|
||||
import theming from "../theming"
|
||||
|
||||
|
|
@ -43,11 +44,17 @@ export default class LanguageToggleButton extends React.Component {
|
|||
>
|
||||
<FontAwesomeIcon icon={faLanguage} />
|
||||
</StyledThemeButton>
|
||||
<ReactTooltip id="language" type="dark" effect="solid">
|
||||
<span>
|
||||
Using {this.languageName(language)} language
|
||||
</span>
|
||||
</ReactTooltip>
|
||||
{!isMobile && (
|
||||
<ReactTooltip
|
||||
id="language"
|
||||
type="dark"
|
||||
effect="solid"
|
||||
>
|
||||
<span>
|
||||
Using {this.languageName(language)} language
|
||||
</span>
|
||||
</ReactTooltip>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</LanguageContext.Consumer>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"
|
|||
import styled from "styled-components"
|
||||
import ReactTooltip from "react-tooltip"
|
||||
import { Link } from "react-router-dom"
|
||||
import { isMobile } from "react-device-detect"
|
||||
|
||||
import theming from "../theming"
|
||||
import NavbarData from "../data/NavbarData"
|
||||
|
|
@ -83,9 +84,11 @@ export default class Navbar extends React.Component {
|
|||
>
|
||||
<FontAwesomeIcon icon={faGithub} />
|
||||
</StyledALink>
|
||||
<ReactTooltip id="github" type="dark" effect="solid">
|
||||
<span>View source code</span>
|
||||
</ReactTooltip>
|
||||
{!isMobile && (
|
||||
<ReactTooltip id="github" type="dark" effect="solid">
|
||||
<span>View source code</span>
|
||||
</ReactTooltip>
|
||||
)}
|
||||
|
||||
<SearchBox />
|
||||
<Sidebar />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from "react"
|
||||
import styled, { css } from "styled-components"
|
||||
import ReactTooltip from "react-tooltip"
|
||||
import { isMobile } from "react-device-detect"
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
|
||||
|
||||
|
|
@ -112,9 +113,11 @@ export default class Sidebar extends React.Component<
|
|||
onClick={this.toggleSidebar}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
|
||||
<ReactTooltip id="sidebar" type="dark" effect="solid">
|
||||
<span>open sidebar</span>
|
||||
</ReactTooltip>
|
||||
{!isMobile && (
|
||||
<ReactTooltip id="sidebar" type="dark" effect="solid">
|
||||
<span>open sidebar</span>
|
||||
</ReactTooltip>
|
||||
)}
|
||||
</StyledToggleSidebarButton>
|
||||
|
||||
<SidebarNav isSidebarOpen={this.state.isSidebarOpen}>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ 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 { isMobile } from "react-device-detect"
|
||||
|
||||
import theming from "../theming"
|
||||
|
||||
|
|
@ -41,9 +42,11 @@ export default class Navbar extends React.Component {
|
|||
<FontAwesomeIcon icon={faSun} />
|
||||
)}
|
||||
</StyledThemeButton>
|
||||
<ReactTooltip id="theme" type="dark" effect="solid">
|
||||
<span>Using {currentTheme} theme</span>
|
||||
</ReactTooltip>
|
||||
{!isMobile && (
|
||||
<ReactTooltip id="theme" type="dark" effect="solid">
|
||||
<span>Using {currentTheme} theme</span>
|
||||
</ReactTooltip>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ThemeConsumer>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue