diff --git a/source/.eslintrc b/source/.eslintrc index 5c241c4..282efb7 100644 --- a/source/.eslintrc +++ b/source/.eslintrc @@ -22,15 +22,8 @@ "sourceType": "module" }, "plugins": ["react", "@typescript-eslint"], - "overrides": [ - { - "files": ["*.ts", "*.tsx"], - "rules": { - "@typescript-eslint/explicit-module-boundary-types": ["off"] - } - } - ], "rules": { + "@typescript-eslint/no-empty-interface": "off", "@typescript-eslint/explicit-module-boundary-types": "off", "react/jsx-uses-vars": "error", "react/no-unknown-property": [ diff --git a/source/markdown/blog/death of miracle.md b/source/markdown/blog/death of miracle.md deleted file mode 100644 index a992be4..0000000 --- a/source/markdown/blog/death of miracle.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: death of miracle -author: developomp -date: May 15, 2021 ---- - -Understanding things what we once called magic. -Science. diff --git a/source/markdown/blog/guide to arch linux.md b/source/markdown/blog/guide to arch linux.md deleted file mode 100644 index 2187e73..0000000 --- a/source/markdown/blog/guide to arch linux.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: guide to arch linux -author: developomp -date: May 13, 2021 ---- - -# Guide to Arch Linux - -## Why arch linux? - -## Getting started - -### Philosophy - -### Arch wiki - -### Command line - -## Installation - -## display manager - -## window manager - -# Conclusion diff --git a/source/markdown/blog/why I write README.md b/source/markdown/blog/why I write README.md deleted file mode 100644 index e69de29..0000000 diff --git a/source/markdown/blog/work.md b/source/markdown/blog/work.md deleted file mode 100644 index a39e7aa..0000000 --- a/source/markdown/blog/work.md +++ /dev/null @@ -1,6 +0,0 @@ -학교로 갔다 -집으로 왔다 -일을 한다 -죽었다 -나는 죽었다 -나는 죽었다 diff --git a/source/src/App.tsx b/source/src/App.tsx index 601e1d8..d37c158 100644 --- a/source/src/App.tsx +++ b/source/src/App.tsx @@ -1,12 +1,12 @@ +import React, { createContext } from "react" import { BrowserRouter as Router, Switch, Route } from "react-router-dom" import { ThemeProvider, createGlobalStyle } from "styled-components" import { HelmetProvider } from "react-helmet-async" import storage from "local-storage-fallback" -import { useState, useEffect } from "react" -import Spinner from "./components/Spinner" -import LanguageContext from "./LanguageContext" + import theming from "./theming" +import Spinner from "./components/Spinner" import Navbar from "./components/Navbar" import Footer from "./components/Footer" @@ -126,124 +126,130 @@ blockquote { } ` -function App() { - /** - * Loading - */ - const [isLoading, setLoading] = useState(true) +interface AppProps {} + +interface AppState { + isLoading: boolean + currentTheme: string + currentLanguage: string +} + +export const LanguageContext = createContext({ + language: "", + // eslint-disable-next-line @typescript-eslint/no-empty-function + toggleLanguage: () => {}, +}) + +export default class App extends React.Component { + constructor(props) { + super(props) + this.state = { + isLoading: true, + currentTheme: storage.getItem("theme") || "dark", // get theme from storage and set to "dark" mode if not set already + currentLanguage: storage.getItem("lang") || "en", // get language from storage and set to "en" if not set already + } + } + + componentDidMount() { + // show loading screen until all fonts are loaded. + // Experimental feature. Not fully supported on all browsers (IE, I'm looking at you). + // https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet - // show loading screen until all fonts are loaded. - // Experimental feature. Not fully supported on all browsers (IE, I'm looking at you). - // https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet - useEffect(() => { // checks if document.fonts.onloadingdone is supported on the browser if (typeof document.fonts.onloadingdone != undefined) { document.fonts.onloadingdone = () => { - setLoading(false) + this.setState({ isLoading: false }) } } else { - setLoading(false) + this.setState({ isLoading: false }) } - }, []) - - /** - * Theme - */ - const [currentTheme, _setTheme] = useState( - storage.getItem("theme") || "dark" // get theme from storage and set to "dark" mode if not set already - ) - - // save theme when it is changed - useEffect(() => { - storage.setItem("theme", currentTheme) - }, [currentTheme]) - - /** - * Language - */ - - const [currentLanguage, _setLanguage] = useState( - storage.getItem("lang") || "en" // get language from storage and set to "en" if not set already - ) - - // save language when it is changed - useEffect(() => { - storage.setItem("lang", currentLanguage) - }, [currentLanguage]) - - const languageState = { - language: currentLanguage, - toggleLanguage: () => { - // cycle through languages - let setLanguageTo = "en" - if (currentLanguage == "en") setLanguageTo = "kr" - _setLanguage(setLanguageTo) - }, } - return ( - - _setTheme(setThemeTo), // make setTheme function available in other components - }} - > - - - - -
- {isLoading ? ( - - ) : ( - - ( - - )} - /> - ( - - )} - /> - - - - - )} -
-