chore: adds prettier and linting (#11)

* adds lint command and eslintrc.json

* adds prettier

* makes formatting changes from prettier

Co-authored-by: Tara Z Manicsic <tzmanics@MacBook-Pro.local>

Author: tzmanics

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

.prettierrc.js

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

components/ArrowIcon.js

@@ -1,4 +1,4 @@
-export default function ArrowIcon({ className, color = "text-primary" }) {
+export default function ArrowIcon({ className, color = 'text-primary' }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

components/CustomLink.js

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 export default function CustomLink({ as, href, ...otherProps }) {
   return (

components/Footer.js

@@ -54,8 +54,8 @@ const ThemeSwitcher = () => {
         type="button"
         aria-label="Use Dark Mode"
         onClick={() => {
-          document.documentElement.classList.add("dark");
-          localStorage.setItem("theme", "dark");
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('theme', 'dark');
         }}
         className="flex items-center h-full pr-2 dark:bg-primary rounded-3xl flex justify-center align-center p-2 w-24 h-10 transition"
       >
@@ -66,8 +66,8 @@ const ThemeSwitcher = () => {
         type="button"
         aria-label="Use Light Mode"
         onClick={() => {
-          document.documentElement.classList.remove("dark");
-          localStorage.setItem("theme", "light");
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('theme', 'light');
         }}
         className="flex items-center h-full pr-2 bg-primary dark:bg-transparent rounded-3xl flex justify-center align-center p-2 w-24 h-10 transition"
       >

components/Header.js

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 export default function Header({ name }) {
   return (

components/Layout.js

@@ -1,12 +1,12 @@
-import classNames from "classnames";
-import { useEffect } from "react";
-import styles from "./Layout.module.css";
+import classNames from 'classnames';
+import { useEffect } from 'react';
+import styles from './Layout.module.css';
 
 export function GradientBackground({ variant, className }) {
   const classes = classNames(
     {
-      [styles.colorBackground]: variant === "large",
-      [styles.colorBackgroundBottom]: variant === "small",
+      [styles.colorBackground]: variant === 'large',
+      [styles.colorBackgroundBottom]: variant === 'small',
     },
     className
   );
@@ -16,27 +16,27 @@ export function GradientBackground({ variant, className }) {
 
 export default function Layout({ children }) {
   const setAppTheme = () => {
-    const darkMode = localStorage.getItem("theme") === "dark";
-    const lightMode = localStorage.getItem("theme") === "light";
+    const darkMode = localStorage.getItem('theme') === 'dark';
+    const lightMode = localStorage.getItem('theme') === 'light';
 
     if (darkMode) {
-      document.documentElement.classList.add("dark");
+      document.documentElement.classList.add('dark');
     } else if (lightMode) {
-      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.remove('dark');
     }
     return;
   };
 
   const handleSystemThemeChange = () => {
-    var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
     darkQuery.onchange = (e) => {
       if (e.matches) {
-        document.documentElement.classList.add("dark");
-        localStorage.setItem("theme", "dark");
+        document.documentElement.classList.add('dark');
+        localStorage.setItem('theme', 'dark');
       } else {
-        document.documentElement.classList.remove("dark");
-        localStorage.setItem("theme", "light");
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('theme', 'light');
       }
     };
   };

components/SEO.js

@@ -1,4 +1,4 @@
-import Head from "next/head";
+import Head from 'next/head';
 
 export default function SEO({ title, description }) {
   return (

package.json

@@ -17,7 +17,8 @@
     "dev:watch": "next-remote-watch ./posts",
     "build": "next build",
     "start": "next start",
-    "export": "next build && next export"
+    "export": "next build && next export",
+    "lint": "next lint"
   },
   "dependencies": {
     "@mapbox/rehype-prism": "^0.8.0",
@@ -33,6 +34,9 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.0",
+    "eslint": "<8.0.0",
+    "eslint-config-next": "12.0.10",
+    "eslint-config-prettier": "^8.3.0",
     "postcss": "^8.4.4",
     "tailwindcss": "^3.0.0"
   }

pages/_app.js

@@ -1,5 +1,5 @@
-import "../styles/globals.css";
-import "prismjs/themes/prism-tomorrow.css";
+import '../styles/globals.css';
+import 'prismjs/themes/prism-tomorrow.css';
 
 function MyApp({ Component, pageProps }) {
   return (