WIP: Upgrade nextjs and deps, fix errors

WIP: Fix legacy image

WIP: Fix legacy image

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "next",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ]
+}

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 80,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  useTabs: false,
+};

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true
+}

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -4,24 +4,34 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "next": "latest",
-    "next-google-fonts": "^1.2.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "@next/font": "^13.0.5",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.28.0",
+    "next": "13.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^3.11.0"
   },
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^5.0.0",
     "@types/node": "^14.6.0",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
-    "postcss": "^8.1.8",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "eslint-config-next": "13.0.5",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "postcss": "^8.4.19",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.2",
-    "tailwindcss": "^2.0.1",
-    "typescript": "4.0.2"
+    "prettier": "^2.8.0",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3"
   },
   "license": "MIT"
 }

postcss.config.js

@@ -1,3 +1,11 @@
 module.exports = {
-    plugins: ['tailwindcss', 'postcss-preset-env'],
+    plugins: ['tailwindcss', process.env.NODE_ENV === 'production' ?
+      [ '@fullhuman/postcss-purgecss', {
+          content: [
+            './pages/**/*.{js,jsx,ts,tsx}',
+            './components/**/*.{js,jsx,ts,tsx}',
+          ],
+          defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+        },
+      ] : undefined,,'postcss-preset-env'],
 }

src/components/Avatar.tsx

@@ -13,7 +13,10 @@ const Index = () => (
       width={150}
       height={150}
       className="object-cover rounded-full"
-    />
+      style={{
+        maxWidth: "100%",
+        height: "auto"
+      }} />
   </div>
 );
 

src/components/DarkModeSwitch.tsx

@@ -7,11 +7,9 @@ const DarkModeSwitch = () => {
 
   useEffect(() => {
     if (active) {
-      // @ts-ignore
-      document?.querySelector("html").classList.add("dark");
+      document?.querySelector("html")?.classList.add("dark");
     } else {
-      // @ts-ignore
-      document?.querySelector("html").classList.remove("dark");
+      document?.querySelector("html")?.classList.remove("dark");
     }
   }, [active]);
 

src/components/Head.tsx

@@ -1,10 +1,8 @@
 import { FunctionComponent } from "react";
 import NextHead from "next/head";
-import GoogleFonts from "next-google-fonts";
 
 const Head: FunctionComponent = ({ children }) => (
   <>
-    <GoogleFonts href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" />
     <NextHead>
       <meta charSet="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />

src/components/SocialIconRow.tsx

@@ -27,7 +27,7 @@ const SOCIAL_LINKS = {
 const SocialIconRow = () => (
   <div className="flex justify-center align-center space-x-4">
     {Object.values(SOCIAL_LINKS).map((social) => (
-      <a href={social.url} target="_blank" rel="noopener" key={social.service}>
+      <a href={social.url} target="_blank" rel="noopener noreferrer" key={social.service}>
         <span className="sr-only">
           {social.srPretext} {social.handle} on {social.service}
         </span>

src/pages/_app.tsx

@@ -1,17 +1,25 @@
 import { AppProps } from "next/app";
 import Head from "../components/Head";
 import "../styles/index.css";
+import { Source_Sans_Pro } from '@next/font/google';
 
 const TITLE =
   "ckhdotio - Colin Hoernig - musings of an engineering manager, developer, and tech enthusiast";
 
+const font = Source_Sans_Pro({weight:"400", subsets:["latin"]});
+
 function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
         <title>{TITLE}</title>
         <meta name="description" content={TITLE} />
       </Head>
+      <style jsx global>{`
+        html {
+          font-family: ${font.style.fontFamily};
+        }
+      `}</style>
       <Component {...pageProps} />
     </>
   );

src/styles/index.css

@@ -1,5 +1,7 @@
+/* purgecss start ignore */
 @tailwind base;
 @tailwind components;
+/* purgecss end ignore */
 
 html, body {
     @apply m-0 p-0 bg-gray-200 dark:bg-gray-800;

tailwind.config.js

@@ -1,7 +1,12 @@
-const colors = require("tailwindcss/colors");
+/* eslint-disable @typescript-eslint/no-var-requires */
+const colors = require('tailwindcss/colors')
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  purge: ["./src/**/*.html", "./src/**/*.tsx", "./src/**/*.jsx"],
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx}",
+    "./src/components/**/*.{js,ts,jsx,tsx}",
+  ],
   darkMode: "class",
   theme: {
     extend: {
@@ -31,7 +36,7 @@ module.exports = {
 
       black: colors.black,
       white: colors.white,
-      gray: colors.coolGray,
+      gray: colors.gray,
       red: colors.red,
       yellow: colors.amber,
       green: colors.emerald,

tsconfig.json

@@ -6,7 +6,10 @@
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "lib": ["dom", "es2017"],
+    "lib": [
+      "dom",
+      "es2017"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,
@@ -16,8 +19,14 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "incremental": true
   },
-  "exclude": ["node_modules"],
-  "include": ["**/*.ts", "**/*.tsx"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }