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>
netlify-templates · Feb 5, 2022 · d901a43 · d901a43
1 parent f5d7594
commit d901a43
Show file tree

Hide file tree

Showing 19 changed files with 1,733 additions and 1,807 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 80,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  useTabs: false,
+};
diff --git a/components/ArrowIcon.js b/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"

diff --git a/components/CustomLink.js b/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 (

diff --git a/components/Footer.js b/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"
       >

diff --git a/components/Header.js b/components/Header.js
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 export default function Header({ name }) {
   return (

diff --git a/components/Layout.js b/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');
       }
     };
   };

diff --git a/components/SEO.js b/components/SEO.js
@@ -1,4 +1,4 @@
-import Head from "next/head";
+import Head from 'next/head';
 
 export default function SEO({ title, description }) {
   return (

diff --git a/package.json b/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"
   }

diff --git a/pages/_app.js b/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 (

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,5 +1,5 @@
-import React from "react";
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 class MyDocument extends Document {
   render() {

diff --git a/pages/index.js b/pages/index.js
@@ -1,12 +1,12 @@
-import Link from "next/link";
-import { getPosts } from "../utils/mdx-utils";
+import Link from 'next/link';
+import { getPosts } from '../utils/mdx-utils';
 
-import Footer from "../components/Footer";
-import Header from "../components/Header";
-import Layout, { GradientBackground } from "../components/Layout";
-import ArrowIcon from "../components/ArrowIcon";
-import { getGlobalData } from "../utils/global-data";
-import SEO from "../components/SEO";
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import Layout, { GradientBackground } from '../components/Layout';
+import ArrowIcon from '../components/ArrowIcon';
+import { getGlobalData } from '../utils/global-data';
+import SEO from '../components/SEO';
 
 export default function Index({ posts, globalData }) {
   return (
@@ -24,7 +24,7 @@ export default function Index({ posts, globalData }) {
               className="md:first:rounded-t-lg md:last:rounded-b-lg backdrop-blur-lg bg-white dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 border-b-0 last:border-b hover:border-b hovered-sibling:border-t-0"
             >
               <Link
-                as={`/posts/${post.filePath.replace(/\.mdx?$/, "")}`}
+                as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
                 href={`/posts/[slug]`}
               >
                 <a className="py-6 lg:py-10 px-6 lg:px-16 block focus:outline-none focus:ring-4">

diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
@@ -1,20 +1,20 @@
-import { getGlobalData } from "../../utils/global-data";
+import { getGlobalData } from '../../utils/global-data';
 import {
   getNextPostBySlug,
   getPostBySlug,
   getPreviousPostBySlug,
   postFilePaths,
-} from "../../utils/mdx-utils";
+} from '../../utils/mdx-utils';
 
-import { MDXRemote } from "next-mdx-remote";
-import Head from "next/head";
-import Link from "next/link";
-import ArrowIcon from "../../components/ArrowIcon";
-import CustomLink from "../../components/CustomLink";
-import Footer from "../../components/Footer";
-import Header from "../../components/Header";
-import Layout, { GradientBackground } from "../../components/Layout";
-import SEO from "../../components/SEO";
+import { MDXRemote } from 'next-mdx-remote';
+import Head from 'next/head';
+import Link from 'next/link';
+import ArrowIcon from '../../components/ArrowIcon';
+import CustomLink from '../../components/CustomLink';
+import Footer from '../../components/Footer';
+import Header from '../../components/Header';
+import Layout, { GradientBackground } from '../../components/Layout';
+import SEO from '../../components/SEO';
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how
@@ -118,7 +118,7 @@ export const getStaticProps = async ({ params }) => {
 export const getStaticPaths = async () => {
   const paths = postFilePaths
     // Remove file extensions for page paths
-    .map((path) => path.replace(/\.mdx?$/, ""))
+    .map((path) => path.replace(/\.mdx?$/, ''))
     // Map the path into the static paths object required by Next.js
     .map((slug) => ({ params: { slug } }));
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1,9 @@
 module.exports = {
-  mode: "jit",
+  mode: 'jit',
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
   ],
-  darkMode: "class", // or 'media' or 'class'
-  presets: [require("./utils/tailwind-preset")],
+  darkMode: 'class', // or 'media' or 'class'
+  presets: [require('./utils/tailwind-preset')],
 };
diff --git a/themes.js b/themes.js
@@ -1,53 +1,53 @@
 exports.COLOR_THEMES = {
   default: {
     colors: {
-      primary: "#7D7AFF",
-      "gradient-1": "#7d7aff",
-      "gradient-2": "#2121e2",
-      "gradient-3": "#00fff0",
-      "gradient-4": "#8785FF",
+      primary: '#7D7AFF',
+      'gradient-1': '#7d7aff',
+      'gradient-2': '#2121e2',
+      'gradient-3': '#00fff0',
+      'gradient-4': '#8785FF',
     },
   },
   bejamas: {
     colors: {
-      primary: "#FF8585",
-      "gradient-1": "#7d7aff",
-      "gradient-2": "#2121E2",
-      "gradient-3": "#FF76B8",
-      "gradient-4": "#001AFF",
+      primary: '#FF8585',
+      'gradient-1': '#7d7aff',
+      'gradient-2': '#2121E2',
+      'gradient-3': '#FF76B8',
+      'gradient-4': '#001AFF',
     },
   },
   netlify: {
     colors: {
-      primary: "#00A354",
-      "gradient-1": "#00F0FF",
-      "gradient-2": "#00F0FF",
-      "gradient-3": "#FAFF00",
-      "gradient-4": "#00F0FF",
+      primary: '#00A354',
+      'gradient-1': '#00F0FF',
+      'gradient-2': '#00F0FF',
+      'gradient-3': '#FAFF00',
+      'gradient-4': '#00F0FF',
     },
   },
   reddie: {
     colors: {
-      primary: "#FF4D4D",
-      "gradient-1": "#FFC700",
-      "gradient-2": "#FF85DD",
-      "gradient-3": "#FF85DD",
-      "gradient-4": "#FF8585",
+      primary: '#FF4D4D',
+      'gradient-1': '#FFC700',
+      'gradient-2': '#FF85DD',
+      'gradient-3': '#FF85DD',
+      'gradient-4': '#FF8585',
     },
   },
   greenie: {
     colors: {
-      primary: "#C78500",
-      "gradient-1": "#FFCC81",
-      "gradient-2": "#00F37F",
-      "gradient-3": "#00F37F",
-      "gradient-4": "#FFCC81",
+      primary: '#C78500',
+      'gradient-1': '#FFCC81',
+      'gradient-2': '#00F37F',
+      'gradient-3': '#00F37F',
+      'gradient-4': '#FFCC81',
     },
   },
 };
 
 exports.FONT_THEMES = {
-  "sans-serif": `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
+  'sans-serif': `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
   serif: `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
   monospace: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
 };
diff --git a/utils/global-data.js b/utils/global-data.js
@@ -1,12 +1,17 @@
 export const getGlobalData = () => {
-
-  const name = process.env.BLOG_NAME ? decodeURI(process.env.BLOG_NAME) : "Jay Doe";
-  const blogTitle = process.env.BLOG_TITLE ? decodeURI(process.env.BLOG_TITLE) : "Next.js Blog Theme";
-  const footerText = process.env.BLOG_FOOTER_TEXT ? decodeURI(process.env.BLOG_FOOTER_TEXT) : "All rights reserved.";
+  const name = process.env.BLOG_NAME
+    ? decodeURI(process.env.BLOG_NAME)
+    : 'Jay Doe';
+  const blogTitle = process.env.BLOG_TITLE
+    ? decodeURI(process.env.BLOG_TITLE)
+    : 'Next.js Blog Theme';
+  const footerText = process.env.BLOG_FOOTER_TEXT
+    ? decodeURI(process.env.BLOG_FOOTER_TEXT)
+    : 'All rights reserved.';
 
   return {
     name,
     blogTitle,
-    footerText
+    footerText,
   };
 };
diff --git a/utils/mdx-utils.js b/utils/mdx-utils.js
@@ -1,11 +1,11 @@
-import fs from "fs";
-import path from "path";
-import matter from "gray-matter";
-import { serialize } from "next-mdx-remote/serialize";
-import rehypePrism from "@mapbox/rehype-prism";
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { serialize } from 'next-mdx-remote/serialize';
+import rehypePrism from '@mapbox/rehype-prism';
 
 // POSTS_PATH is useful when you want to get the path to a specific file
-export const POSTS_PATH = path.join(process.cwd(), "posts");
+export const POSTS_PATH = path.join(process.cwd(), 'posts');
 
 // postFilePaths is the list of all mdx files inside the POSTS_PATH directory
 export const postFilePaths = fs
@@ -66,7 +66,7 @@ export const getNextPostBySlug = (slug) => {
   // no prev post found
   if (!post) return null;
 
-  const nextPostSlug = post?.filePath.replace(/\.mdx?$/, "");
+  const nextPostSlug = post?.filePath.replace(/\.mdx?$/, '');
 
   return {
     title: post.data.title,
@@ -84,7 +84,7 @@ export const getPreviousPostBySlug = (slug) => {
   // no prev post found
   if (!post) return null;
 
-  const previousPostSlug = post?.filePath.replace(/\.mdx?$/, "");
+  const previousPostSlug = post?.filePath.replace(/\.mdx?$/, '');
 
   return {
     title: post.data.title,