add prettier tailwind plugin

.prettierrc

@@ -1,8 +1,8 @@
 {
   "trailingComma": "es5",
-  "semi": true,
+  "semi": false,
   "tabWidth": 2,
   "singleQuote": true,
   "jsxSingleQuote": true,
-  "plugins": ["prettier-plugin-organize-imports"]
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
 }

next.config.mjs

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {}
 
-export default nextConfig;
+export default nextConfig

package.json

@@ -32,7 +32,6 @@
     "next": "14.1.0",
     "next-mdx-remote": "^4.4.1",
     "next-themes": "^0.2.1",
-    "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
     "pretty-quick": "^4.0.0",
     "react": "^18",
@@ -54,6 +53,8 @@
     "eslint-config-next": "14.1.0",
     "husky": "^9.0.11",
     "postcss": "^8",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

src/app/analytics/page.tsx

@@ -1,69 +1,69 @@
-import AnalyticsDashboard from '@/components/AnalyticsDashboard';
-import { getDate } from '@/utils';
-import { analytics } from '@/utils/analytics';
+import AnalyticsDashboard from '@/components/AnalyticsDashboard'
+import { getDate } from '@/utils'
+import { analytics } from '@/utils/analytics'
 
 const Page = async () => {
-  const TRACKING_DAYS = 7;
+  const TRACKING_DAYS = 7
 
-  const pageviews = await analytics.retrieveDays('pageview', TRACKING_DAYS);
+  const pageviews = await analytics.retrieveDays('pageview', TRACKING_DAYS)
 
   const totalPageviews = pageviews.reduce((acc, curr) => {
     return (
       acc +
       curr.events.reduce((acc, curr) => {
-        return acc + Object.values(curr)[0]!;
+        return acc + Object.values(curr)[0]!
       }, 0)
-    );
-  }, 0);
+    )
+  }, 0)
 
-  const avgVisitorsPerDay = (totalPageviews / TRACKING_DAYS).toFixed(1);
+  const avgVisitorsPerDay = (totalPageviews / TRACKING_DAYS).toFixed(1)
 
   const amtVisitorsToday = pageviews
     .filter((ev) => ev.date === getDate())
     .reduce((acc, curr) => {
       return (
         acc +
         curr.events.reduce((acc, curr) => acc + Object.values(curr)[0]!, 0)
-      );
-    }, 0);
+      )
+    }, 0)
 
-  const topCountriesMap = new Map<string, number>();
+  const topCountriesMap = new Map<string, number>()
 
   for (let i = 0; i < pageviews.length; i++) {
-    const day = pageviews[i];
-    if (!day) continue;
+    const day = pageviews[i]
+    if (!day) continue
 
     for (let j = 0; j < day.events.length; j++) {
-      const event = day.events[j];
-      if (!event) continue;
+      const event = day.events[j]
+      if (!event) continue
 
-      const key = Object.keys(event)[0]!;
-      const value = Object.values(event)[0]!;
+      const key = Object.keys(event)[0]!
+      const value = Object.values(event)[0]!
 
-      const parsedKey = JSON.parse(key);
-      const country = parsedKey?.country;
+      const parsedKey = JSON.parse(key)
+      const country = parsedKey?.country
 
       if (country) {
         if (topCountriesMap.has(country)) {
-          const prevValue = topCountriesMap.get(country)!;
-          topCountriesMap.set(country, prevValue + value);
+          const prevValue = topCountriesMap.get(country)!
+          topCountriesMap.set(country, prevValue + value)
         } else {
-          topCountriesMap.set(country, value);
+          topCountriesMap.set(country, value)
         }
       }
     }
   }
 
   const topCountries = [...topCountriesMap.entries()]
     .sort((a, b) => {
-      if (a[1] > b[1]) return -1;
-      else return 1;
+      if (a[1] > b[1]) return -1
+      else return 1
     })
-    .slice(0, 5);
+    .slice(0, 5)
 
   return (
-    <div className='min-h-screen w-full py-12 flex justify-center items-center'>
-      <div className='relative w-full max-w-6xl mx-auto text-white'>
+    <div className='flex min-h-screen w-full items-center justify-center py-12'>
+      <div className='relative mx-auto w-full max-w-6xl text-white'>
         <AnalyticsDashboard
           avgVisitorsPerDay={avgVisitorsPerDay}
           amtVisitorsToday={amtVisitorsToday}
@@ -72,7 +72,7 @@ const Page = async () => {
         />
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Page;
+export default Page

src/app/blog/[slug]/page.tsx

@@ -1,51 +1,51 @@
-import { MDX } from '@/components/markdown/mdx';
-import { Button } from '@/components/ui/button';
-import { getBlogPostByName, getSortedBlogPosts } from '@/lib/blog';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
+import { MDX } from '@/components/markdown/mdx'
+import { Button } from '@/components/ui/button'
+import { getBlogPostByName, getSortedBlogPosts } from '@/lib/blog'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
 
 const getBlogPost = async (slug: string) => {
-  const blogPost = await getBlogPostByName(slug);
+  const blogPost = await getBlogPostByName(slug)
   if (!blogPost) {
-    notFound();
+    notFound()
   }
-  return blogPost;
-};
+  return blogPost
+}
 
 export async function generateStaticParams() {
-  const blogPosts = await getSortedBlogPosts();
+  const blogPosts = await getSortedBlogPosts()
   return blogPosts.map((post) => ({
     slug: post.id,
-  }));
+  }))
 }
 
 export async function generateMetadata({
   params,
 }: {
-  params: { slug: string };
+  params: { slug: string }
 }) {
-  const blogPost = await getBlogPost(params.slug);
+  const blogPost = await getBlogPost(params.slug)
   return {
     title: blogPost.title,
     description: blogPost.description,
     keywords: blogPost.keywords,
-  };
+  }
 }
 
 export default async function BlogPost({
   params,
 }: {
-  params: { slug: string };
+  params: { slug: string }
 }) {
-  const { markdown } = await getBlogPost(params.slug);
+  const { markdown } = await getBlogPost(params.slug)
   return (
     <div className='container'>
       <Link href='/blog'>
-        <Button variant='link' className='pl-0 mb-4 justify-start'>
+        <Button variant='link' className='mb-4 justify-start pl-0'>
           Back
         </Button>
       </Link>
       <MDX markdown={markdown}></MDX>
     </div>
-  );
+  )
 }

src/app/blog/page.tsx

@@ -4,20 +4,20 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card';
-import { getSortedBlogPosts } from '@/lib/blog';
-import Link from 'next/link';
+} from '@/components/ui/card'
+import { getSortedBlogPosts } from '@/lib/blog'
+import Link from 'next/link'
 
 export function generateMetadata() {
   return {
     title: 'Blog',
     description: '',
     keywords: [],
-  };
+  }
 }
 
 export default async function Blogs() {
-  const blogPosts = await getSortedBlogPosts();
+  const blogPosts = await getSortedBlogPosts()
   return (
     <>
       <ul>
@@ -36,5 +36,5 @@ export default async function Blogs() {
         ))}
       </ul>
     </>
-  );
+  )
 }

src/app/layout.tsx

@@ -1,22 +1,22 @@
-import Footer from '@/components/Footer';
-import { Header } from '@/components/Header';
-import { ThemeProvider } from '@/components/theme/theme-provider';
-import { cn } from '@/lib/utils';
-import type { Metadata } from 'next';
-import { Space_Grotesk } from 'next/font/google';
-import './globals.css';
+import Footer from '@/components/Footer'
+import { Header } from '@/components/Header'
+import { ThemeProvider } from '@/components/theme/theme-provider'
+import { cn } from '@/lib/utils'
+import type { Metadata } from 'next'
+import { Space_Grotesk } from 'next/font/google'
+import './globals.css'
 
-const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] });
+const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
-};
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang='en' suppressHydrationWarning>
@@ -34,5 +34,5 @@ export default function RootLayout({
         </ThemeProvider>
       </body>
     </html>
-  );
+  )
 }

src/app/page.tsx

@@ -1,5 +1,5 @@
-import { Body } from '@/components/Body';
+import { Body } from '@/components/Body'
 
 export default function Home() {
-  return <Body />;
+  return <Body />
 }