added basic platform support (mobile, IE)

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",

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,6 +182,15 @@ export default class App extends React.Component<AppProps, AppState> {
 	}
 
 	render() {
+		if (isIE)
+			return (
+				<>
+					<StyledP>
+						<b>Internet Explorer</b> is not supported.
+					</StyledP>
+				</>
+			)
+		else
 			return (
 				<HelmetProvider>
 					<ThemeProvider

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">
+						{!isMobile && (
+							<ReactTooltip
+								id="language"
+								type="dark"
+								effect="solid"
+							>
 								<span>
 									Using {this.languageName(language)} language
 								</span>
 							</ReactTooltip>
+						)}
 					</>
 				)}
 			</LanguageContext.Consumer>

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>
+				{!isMobile && (
 					<ReactTooltip id="github" type="dark" effect="solid">
 						<span>View source code</span>
 					</ReactTooltip>
+				)}
 
 				<SearchBox />
 				<Sidebar />

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>
+					{!isMobile && (
 						<ReactTooltip id="sidebar" type="dark" effect="solid">
 							<span>open sidebar</span>
 						</ReactTooltip>
+					)}
 				</StyledToggleSidebarButton>
 
 				<SidebarNav isSidebarOpen={this.state.isSidebarOpen}>

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>
+						{!isMobile && (
 							<ReactTooltip id="theme" type="dark" effect="solid">
 								<span>Using {currentTheme} theme</span>
 							</ReactTooltip>
+						)}
 					</>
 				)}
 			</ThemeConsumer>