pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

added basic platform support (mobile, IE)

Browse source
This commit is contained in:
Kim, Jimin 2021-05-30 22:10:17 +09:00
parent 543cd31421
commit 8b40dcb298
6 changed files with 110 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

1
source/package.json
View file

@ -32,6 +32,7 @@
"markdown-toc": "^1.2.0", "markdown-toc": "^1.2.0",
"marked": "^2.0.6", "marked": "^2.0.6",
"react": "^17.0.2", "react": "^17.0.2",
"react-device-detect": "^1.17.0",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-helmet-async": "^1.0.9", "react-helmet-async": "^1.0.9",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",

140
source/src/App.tsx
View file

@ -1,8 +1,9 @@
import React from "react" import React from "react"
import { Switch, Route } from "react-router-dom" 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 { HelmetProvider } from "react-helmet-async"
import storage from "local-storage-fallback" import storage from "local-storage-fallback"
import { isIE } from "react-device-detect"
import theming from "./theming" import theming from "./theming"
import { LanguageContext } from "./LangaugeContext" 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 AppProps {}
interface AppState { interface AppState {
@ -173,71 +182,80 @@ export default class App extends React.Component<AppProps, AppState> {
} }
render() { render() {
return ( if (isIE)
<HelmetProvider> return (
<ThemeProvider <>
theme={{ <StyledP>
currentTheme: this.state.currentTheme, <b>Internet Explorer</b> is not supported.
setTheme: (setThemeTo) => </StyledP>
this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components </>
}} )
> else
<LanguageContext.Provider return (
value={{ <HelmetProvider>
language: this.state.currentLanguage, <ThemeProvider
toggleLanguage: () => { theme={{
// cycle through languages currentTheme: this.state.currentTheme,
let setLanguageTo = "en" setTheme: (setThemeTo) =>
if (this.state.currentLanguage == "en") this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components
setLanguageTo = "kr"
this.setState({
currentLanguage: setLanguageTo,
})
},
}} }}
> >
<GlobalStyle /> <LanguageContext.Provider
<Navbar /> value={{
<div id="content"> language: this.state.currentLanguage,
{this.state.isLoading ? ( toggleLanguage: () => {
<Spinner size={200} /> // cycle through languages
) : ( let setLanguageTo = "en"
<Switch> if (this.state.currentLanguage == "en")
<Route exact path="/"> setLanguageTo = "kr"
<PostList this.setState({
key="home" currentLanguage: setLanguageTo,
howMany={4} })
title="Home" },
/> }}
</Route> >
<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"> <Route exact path="/archives">
<PostList <PostList
key="archives" key="archives"
title="Archives" title="Archives"
/> />
</Route> </Route>
<Route exact path="/portfolio"> <Route exact path="/portfolio">
<Portfolio /> <Portfolio />
</Route> </Route>
<Route exact path="/404"> <Route exact path="/404">
<NotFound /> <NotFound />
</Route> </Route>
<Route exact path="/:path*"> <Route exact path="/:path*">
{({ match }) => ( {({ match }) => (
<Page key={match.params.path} /> <Page key={match.params.path} />
)} )}
</Route> </Route>
</Switch> </Switch>
)} )}
</div> </div>
<Footer /> <Footer />
</LanguageContext.Provider> </LanguageContext.Provider>
</ThemeProvider> </ThemeProvider>
</HelmetProvider> </HelmetProvider>
) )
} }
} }

17
source/src/components/LanguageToggleButton.tsx
View file

@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faLanguage } from "@fortawesome/free-solid-svg-icons" import { faLanguage } from "@fortawesome/free-solid-svg-icons"
import styled from "styled-components" import styled from "styled-components"
import ReactTooltip from "react-tooltip" import ReactTooltip from "react-tooltip"
import { isMobile } from "react-device-detect"
import theming from "../theming" import theming from "../theming"
@ -43,11 +44,17 @@ export default class LanguageToggleButton extends React.Component {
> >
<FontAwesomeIcon icon={faLanguage} /> <FontAwesomeIcon icon={faLanguage} />
</StyledThemeButton> </StyledThemeButton>
<ReactTooltip id="language" type="dark" effect="solid"> {!isMobile && (
<span> <ReactTooltip
Using {this.languageName(language)} language id="language"
</span> type="dark"
</ReactTooltip> effect="solid"
>
<span>
Using {this.languageName(language)} language
</span>
</ReactTooltip>
)}
</> </>
)} )}
</LanguageContext.Consumer> </LanguageContext.Consumer>

9
source/src/components/Navbar.tsx
View file

@ -4,6 +4,7 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"
import styled from "styled-components" import styled from "styled-components"
import ReactTooltip from "react-tooltip" import ReactTooltip from "react-tooltip"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import { isMobile } from "react-device-detect"
import theming from "../theming" import theming from "../theming"
import NavbarData from "../data/NavbarData" import NavbarData from "../data/NavbarData"
@ -83,9 +84,11 @@ export default class Navbar extends React.Component {
> >
<FontAwesomeIcon icon={faGithub} /> <FontAwesomeIcon icon={faGithub} />
</StyledALink> </StyledALink>
<ReactTooltip id="github" type="dark" effect="solid"> {!isMobile && (
<span>View source code</span> <ReactTooltip id="github" type="dark" effect="solid">
</ReactTooltip> <span>View source code</span>
</ReactTooltip>
)}
<SearchBox /> <SearchBox />
<Sidebar /> <Sidebar />

9
source/src/components/Sidebar.tsx
View file

@ -1,6 +1,7 @@
import React from "react" import React from "react"
import styled, { css } from "styled-components" import styled, { css } from "styled-components"
import ReactTooltip from "react-tooltip" import ReactTooltip from "react-tooltip"
import { isMobile } from "react-device-detect"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons" import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
@ -112,9 +113,11 @@ export default class Sidebar extends React.Component<
onClick={this.toggleSidebar} onClick={this.toggleSidebar}
> >
<FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon> <FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
<ReactTooltip id="sidebar" type="dark" effect="solid"> {!isMobile && (
<span>open sidebar</span> <ReactTooltip id="sidebar" type="dark" effect="solid">
</ReactTooltip> <span>open sidebar</span>
</ReactTooltip>
)}
</StyledToggleSidebarButton> </StyledToggleSidebarButton>
<SidebarNav isSidebarOpen={this.state.isSidebarOpen}> <SidebarNav isSidebarOpen={this.state.isSidebarOpen}>

9
source/src/components/ThemeToggleButton.tsx
View file

@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons" import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
import styled, { ThemeConsumer } from "styled-components" import styled, { ThemeConsumer } from "styled-components"
import ReactTooltip from "react-tooltip" import ReactTooltip from "react-tooltip"
import { isMobile } from "react-device-detect"
import theming from "../theming" import theming from "../theming"
@ -41,9 +42,11 @@ export default class Navbar extends React.Component {
<FontAwesomeIcon icon={faSun} /> <FontAwesomeIcon icon={faSun} />
)} )}
</StyledThemeButton> </StyledThemeButton>
<ReactTooltip id="theme" type="dark" effect="solid"> {!isMobile && (
<span>Using {currentTheme} theme</span> <ReactTooltip id="theme" type="dark" effect="solid">
</ReactTooltip> <span>Using {currentTheme} theme</span>
</ReactTooltip>
)}
</> </>
)} )}
</ThemeConsumer> </ThemeConsumer>