From 8a2db03c0f2a2e09d488024393720cf7d6ffe2c0 Mon Sep 17 00:00:00 2001 From: developomp Date: Sat, 15 May 2021 19:50:00 +0900 Subject: [PATCH] - added custom spinner to use instead of imported ones - added new empty blog post - changed react-helmet to react-helmet-async for faster tab title change and reduced console warning - better eslint config and corresponding warning fixes (changing let -> const, removed unused variables, etc.) - removed redundant Router from footer - removed ignored preload attribute value from font loading link tag in index.html --- source/.eslintrc | 12 ++ source/markdown/blog/death of miracle.md | 8 ++ source/package.json | 3 +- source/public/index.html | 2 +- source/src/App.tsx | 112 +++++++++---------- source/src/components/Footer.tsx | 5 +- source/src/components/Navbar.tsx | 2 +- source/src/components/SearchBox.tsx | 2 +- source/src/components/Sidebar.tsx | 2 +- source/src/components/Spinner.tsx | 116 ++++++++++++++++++++ source/src/components/ThemeToggleButton.tsx | 2 +- source/src/pages/home.tsx | 8 +- source/src/pages/notfound.tsx | 2 +- source/src/pages/page.tsx | 4 +- source/src/pages/portfolio.tsx | 3 +- 15 files changed, 205 insertions(+), 78 deletions(-) create mode 100644 source/markdown/blog/death of miracle.md create mode 100644 source/src/components/Spinner.tsx diff --git a/source/.eslintrc b/source/.eslintrc index 830e5a6..5c241c4 100644 --- a/source/.eslintrc +++ b/source/.eslintrc @@ -1,5 +1,7 @@ { "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:json/recommended", "prettier" @@ -12,6 +14,7 @@ "version": "17.0" } }, + "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true @@ -19,7 +22,16 @@ "sourceType": "module" }, "plugins": ["react", "@typescript-eslint"], + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "@typescript-eslint/explicit-module-boundary-types": ["off"] + } + } + ], "rules": { + "@typescript-eslint/explicit-module-boundary-types": "off", "react/jsx-uses-vars": "error", "react/no-unknown-property": [ "error", diff --git a/source/markdown/blog/death of miracle.md b/source/markdown/blog/death of miracle.md new file mode 100644 index 0000000..a992be4 --- /dev/null +++ b/source/markdown/blog/death of miracle.md @@ -0,0 +1,8 @@ +--- +title: death of miracle +author: developomp +date: May 15, 2021 +--- + +Understanding things what we once called magic. +Science. diff --git a/source/package.json b/source/package.json index e1bccee..f9fd353 100644 --- a/source/package.json +++ b/source/package.json @@ -37,10 +37,9 @@ "react": "^17.0.2", "react-burger-menu": "^3.0.6", "react-dom": "^17.0.2", - "react-helmet": "^6.1.0", + "react-helmet-async": "^1.0.9", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.3", - "react-spinners": "^0.10.6", "react-tooltip": "^4.2.19", "styled-components": "^5.3.0", "styled-theming": "^2.2.0", diff --git a/source/public/index.html b/source/public/index.html index ac5129a..76e9f78 100644 --- a/source/public/index.html +++ b/source/public/index.html @@ -10,7 +10,7 @@ pomp diff --git a/source/src/App.tsx b/source/src/App.tsx index 0f5e82f..2604837 100644 --- a/source/src/App.tsx +++ b/source/src/App.tsx @@ -1,9 +1,10 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom" -import { ThemeProvider, createGlobalStyle, css } from "styled-components" +import { ThemeProvider, createGlobalStyle } from "styled-components" +import { HelmetProvider } from "react-helmet-async" import storage from "local-storage-fallback" import { useState, useEffect } from "react" import theme from "styled-theming" -import Loader from "react-spinners/HashLoader" +import Spinner from "./components/Spinner" import theming from "./theming" @@ -123,15 +124,6 @@ blockquote { } ` -// the loader is not compatible with styled-components so I'm converting it to string. -// doing this gives intellisense and stuff in my IDE -const LoaderStyle = css` - position: absolute; - top: 0%; - left: 50%; - transform: translate(-50%, 50%); -`.toString() - function App() { const [usingTheme, _setTheme] = useState(() => { const savedTheme = storage.getItem("theme") @@ -145,12 +137,12 @@ function App() { const [isLoading, setLoading] = useState(true) // show loading screen until all fonts are loaded. - // Experimental feature. Not fully supported on all browsers (ehem IE ehem). + // 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 = (_: EventListener) => { + document.fonts.onloadingdone = () => { setLoading(false) } } else { @@ -159,53 +151,55 @@ function App() { }, []) return ( - _setTheme(theme), - }} - > - - - -
- {isLoading ? ( - - ) : ( - - ( - - )} + + _setTheme(theme), // make setTheme function available in other components + }} + > + + + +
+ {isLoading ? ( + - } - /> - - - - - )} -
-
- - + ) : ( + + ( + + )} + /> + } + /> + + + + + )} +
+