From 8b40dcb298795484ea946716851c725745602ef1 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sun, 30 May 2021 22:10:17 +0900
Subject: [PATCH] added basic platform support (mobile, IE)

---
 source/package.json                           |   1 +
 source/src/App.tsx                            | 140 ++++++++++--------
 .../src/components/LanguageToggleButton.tsx   |  17 ++-
 source/src/components/Navbar.tsx              |   9 +-
 source/src/components/Sidebar.tsx             |   9 +-
 source/src/components/ThemeToggleButton.tsx   |   9 +-
 6 files changed, 110 insertions(+), 75 deletions(-)

diff --git a/source/package.json b/source/package.json
index b2abc02..231a468 100644
--- a/source/package.json
+++ b/source/package.json
@@ -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",
diff --git a/source/src/App.tsx b/source/src/App.tsx
index 21b5236..49b1150 100644
--- a/source/src/App.tsx
+++ b/source/src/App.tsx
@@ -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>
+			)
 	}
 }
diff --git a/source/src/components/LanguageToggleButton.tsx b/source/src/components/LanguageToggleButton.tsx
index 888124c..523794e 100644
--- a/source/src/components/LanguageToggleButton.tsx
+++ b/source/src/components/LanguageToggleButton.tsx
@@ -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>
diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx
index f6bb707..61f6b53 100644
--- a/source/src/components/Navbar.tsx
+++ b/source/src/components/Navbar.tsx
@@ -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 />
diff --git a/source/src/components/Sidebar.tsx b/source/src/components/Sidebar.tsx
index 2637194..9fa1e5a 100644
--- a/source/src/components/Sidebar.tsx
+++ b/source/src/components/Sidebar.tsx
@@ -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}>
diff --git a/source/src/components/ThemeToggleButton.tsx b/source/src/components/ThemeToggleButton.tsx
index 4513ebd..57ce8ce 100644
--- a/source/src/components/ThemeToggleButton.tsx
+++ b/source/src/components/ThemeToggleButton.tsx
@@ -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>