Development

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+.vscode
+public
+.next
+prisma

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": ["next/core-web-vitals", "eslint:recommended", "next", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+  }
+}

.husky/pre-commit

@@ -1,4 +1,4 @@
-npm run lint
-npm run format
-npm run build
-git add .
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.huskyrc

@@ -1,5 +1,5 @@
 {
   "hooks": {
-    "pre-commit": "sh .husky/pre-commit"
+    "pre-commit": "lint-staged"
   }
 }

.lintstagedrc

@@ -0,0 +1,10 @@
+{
+    "*/**/*.{js,jsx,ts,tsx}": [
+        "prettier --write",
+        "eslint --fix",
+        "eslint"
+    ],
+    "*/**/*.{json,css,md,mdx}": [
+        "prettier --write"
+    ]
+}

.prettierignore

@@ -0,0 +1,11 @@
+bun.lock
+package-lock.json
+node_modules
+.next
+.cache
+.vscode
+.husky
+public
+next-env.d.ts
+next.config.ts
+prisma

.prettierrc

@@ -1,9 +1,11 @@
 {
+  "bracketSpacing": true,
   "trailingComma": "all",
   "arrowParens": "always",
   "tabWidth": 2,
-  "printWidth": 130,
+  "printWidth": 80,
   "semi": true,
   "singleQuote": true,
-  "jsxSingleQuote": true
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

app/PhotoGallery/page.tsx

@@ -1,6 +1,5 @@
 import { Button } from '@/components/ui/button';
 import type { Metadata } from 'next';
-import Image from 'next/image';
 
 export const metadata: Metadata = {
   title: 'Photo Gallery',
@@ -10,13 +9,18 @@ export const metadata: Metadata = {
 
 const PhotoGallery = () => {
   return (
-    <section className='mx-auto min-h-screen flex flex-col items-center justify-center'>
+    <section className='mx-auto flex min-h-screen flex-col items-center justify-center'>
       <h1 className='text-4xl font-bold'>Photo Gallery</h1>
       {/* Show that this page is still in development */}
 
-      <p className='text-lg mt-4 text-gray-500'>This page is still in development. Check back later for more photos.</p>
+      <p className='mt-4 text-lg text-gray-500'>
+        This page is still in development. Check back later for more photos.
+      </p>
 
-      <Button variant='outline' className='mt-8 text-white bg-slate-700 hover:bg-slate-300'>
+      <Button
+        variant='outline'
+        className='mt-8 bg-slate-700 text-white hover:bg-slate-300'
+      >
         Load More
       </Button>
     </section>

app/actions.ts

@@ -1,5 +1,5 @@
 'use server';
-import { revalidatePath, unstable_noStore as noStore } from 'next/cache';
+import { unstable_noStore as noStore } from 'next/cache';
 import supabase from '@/lib/supabase/private';
 import { z } from 'zod';
 
@@ -36,7 +36,7 @@ export async function sendMessage(prevState: any, formData: FormData) {
     };
   }
   try {
-    const { data, error } = await supabase.from('Message').upsert({
+    const { error } = await supabase.from('Message').upsert({
       email: validatedFields.data.email,
       message: validatedFields.data.message,
       name: validatedFields.data.name,

app/api/route.ts

@@ -10,14 +10,17 @@ export async function POST(request: Request) {
     negative_prompt: 'deformed, ugly',
   });
 
-  const response = await fetch('https://modal-labs--instant-stable-diffusion-xl.modal.run/v1/inference', {
-    method: 'POST',
-    headers: {
-      Authorization: `Token ${process.env.MODAL_TOKEN_ID}:${process.env.MODAL_TOKEN_SECRET}`,
-      'Content-Type': 'application/json',
+  const response = await fetch(
+    'https://modal-labs--instant-stable-diffusion-xl.modal.run/v1/inference',
+    {
+      method: 'POST',
+      headers: {
+        Authorization: `Token ${process.env.MODAL_TOKEN_ID}:${process.env.MODAL_TOKEN_SECRET}`,
+        'Content-Type': 'application/json',
+      },
+      body,
     },
-    body,
-  });
+  );
 
   if (response.status !== 201) {
     const message = await response.text();

app/blog/[slug]/page.tsx

@@ -19,16 +19,28 @@ import { increment } from '@/app/actions';
 //   return blogs.map((blog) => ({ slug: blog.slug }));
 // }
 
-export async function generateMetadata({ params }: { params: any }): Promise<Metadata | undefined> {
+export async function generateMetadata({
+  params,
+}: {
+  params: any;
+}): Promise<Metadata | undefined> {
   const blog = getBlogs().find((post) => post.slug === params.slug);
 
   if (!blog) {
     return notFound();
   }
 
-  let { title, publishedAt: publishedTime, summary: description, image, tags } = blog.metadata;
+  let {
+    title,
+    publishedAt: publishedTime,
+    summary: description,
+    image,
+    tags,
+  } = blog.metadata;
 
-  let ogImage = image ? `https://patelvivek.dev${image}` : `https://patelvivek.dev/og?title=${title}`;
+  let ogImage = image
+    ? `https://patelvivek.dev${image}`
+    : `https://patelvivek.dev/og?title=${title}`;
 
   return {
     title,
@@ -68,7 +80,7 @@ export default function Blog({ params }: { params: any }) {
   }
 
   return (
-    <div className='mx-auto mt-16 sm:mt-40 w-11/12 sm:w-3/4'>
+    <div className='mx-auto mt-16 w-11/12 sm:mt-40 sm:w-3/4'>
       <Progress />
       <section>
         <script
@@ -99,18 +111,22 @@ export default function Blog({ params }: { params: any }) {
             <Button
               variant='outline'
               className='
-            mb-5 cursor-pointer text-lg font-semibold 
-            border-neutral-800 text-neutral-800 hover:underline
-            dark:border-neutral-300 dark:text-neutral-300
-            hover:border-indigo-700 hover:dark:border-indigo-700
+            mb-5 cursor-pointer border-neutral-800 text-lg 
+            font-semibold text-neutral-800 hover:border-indigo-700
+            hover:underline dark:border-neutral-300
+            dark:text-neutral-300 hover:dark:border-indigo-700
             '
             >
               &larr; Back to Blogs
             </Button>
           </Link>
-          <h1 className='text-start text-indigo-500 text-2xl sm:text-4xl font-bold'>{blog.metadata.title}</h1>
-          <h2 className='text-xl text-neutral-700 dark:text-neutral-300'>{blog.metadata.summary}</h2>
-          <div className='flex flex-col gap-2 sm:flex-row sm:items-center justify-between'>
+          <h1 className='text-start text-2xl font-bold text-indigo-500 sm:text-4xl'>
+            {blog.metadata.title}
+          </h1>
+          <h2 className='text-xl text-neutral-700 dark:text-neutral-300'>
+            {blog.metadata.summary}
+          </h2>
+          <div className='flex flex-col justify-between gap-2 sm:flex-row sm:items-center'>
             <p className='text-base text-neutral-700 dark:text-neutral-300'>
               <span className='flex flex-row items-center gap-2'>
                 <Suspense
@@ -121,20 +137,21 @@ export default function Blog({ params }: { params: any }) {
                     </>
                   }
                 >
-                  <Calendar /> {formatDate(blog.metadata.publishedAt!)} | {blog.readingTime}
+                  <Calendar /> {formatDate(blog.metadata.publishedAt!)} |{' '}
+                  {blog.readingTime}
                 </Suspense>
               </span>
             </p>
             <Suspense fallback={<p>----</p>}>
               <Views slug={blog.slug} />
             </Suspense>
           </div>
-          <div className='flex flex-row flex-wrap gap-4 mb-5'>
+          <div className='mb-5 flex flex-row flex-wrap gap-4'>
             {blog.metadata.tags?.map((tag) => (
               <Link key={tag} href={`/tag/${tag.toLowerCase()}`}>
                 <Button
                   variant='outline'
-                  className='cursor-pointer text-lg font-semibold border-2 border-indigo-500 hover:underline'
+                  className='cursor-pointer border-2 border-indigo-500 text-lg font-semibold hover:underline'
                 >
                   {tag}
                 </Button>
@@ -165,5 +182,12 @@ async function Views({ slug }: { slug: string }) {
 }
 
 function RoundedImage(props: any) {
-  return <Image alt={props.alt} className={props.className} {...props} priority={true} />;
+  return (
+    <Image
+      alt={props.alt}
+      className={props.className}
+      {...props}
+      priority={true}
+    />
+  );
 }

app/blog/page.tsx

@@ -4,11 +4,14 @@ import { getBlogs } from '@/lib/get-blogs';
 
 export const metadata: Metadata = {
   title: 'Read all the blogs I have written',
-  description: 'Get practical tips and insights on React, Next.js, and modern web development techniques from my blog.',
-  keywords: 'blogs, writing, articles, nextjs, react, javascript, web development, modern web development',
+  description:
+    'Get practical tips and insights on React, Next.js, and modern web development techniques from my blog.',
+  keywords:
+    'blogs, writing, articles, nextjs, react, javascript, web development, modern web development',
   openGraph: {
     title: 'Read all the blogs I have written',
-    description: 'Get practical tips and insights on React, Next.js, and modern web development techniques from my blog.',
+    description:
+      'Get practical tips and insights on React, Next.js, and modern web development techniques from my blog.',
     url: 'https://patelvivek.dev/blog',
     siteName: 'Vivek Patel',
     images: [
@@ -35,8 +38,10 @@ const BlogPage = () => {
   });
 
   return (
-    <div className='mt-16 sm:mt-40 w-11/12 sm:w-3/4 mx-auto flex flex-col items-center gap-4'>
-      <h1 className='text-center text-2xl font-bold md:text-4xl border-b-4 border-indigo-500'>All Blogs</h1>
+    <div className='mx-auto mt-16 flex w-11/12 flex-col items-center gap-4 sm:mt-40 sm:w-3/4'>
+      <h1 className='border-b-4 border-indigo-500 text-center text-2xl font-bold md:text-4xl'>
+        All Blogs
+      </h1>
       <div className='flex flex-col justify-center gap-4'>
         {allBlogs.length > 0 ? (
           allBlogs.map((blog) => (
@@ -57,7 +62,9 @@ const BlogPage = () => {
           </p>
         )}
       </div>
-      <h2 className='text-center text-2xl font-bold md:text-4xl border-b-4 border-indigo-500'>Medium</h2>
+      <h2 className='border-b-4 border-indigo-500 text-center text-2xl font-bold md:text-4xl'>
+        Medium
+      </h2>
       <div className='mb-10 flex flex-col justify-center gap-4'>
         {/* Medium */}
         <BlogPost

app/blog/views.tsx

@@ -15,7 +15,7 @@ export default function ViewCounter({
   const number = new Number(viewsForSlug?.views || 0).toLocaleString();
 
   return (
-    <span className='text-base flex flex-row gap-2 items-center text-neutral-800 dark:text-gray-300'>
+    <span className='flex flex-row items-center gap-2 text-base text-neutral-800 dark:text-gray-300'>
       <Eye />
       <p className='flex flex-row'>{`${number} Views `}</p>
     </span>