chore:little fixes and formating and linting and patches

apps/public/src/app/(content)/guides/[guideSlug]/page.tsx

@@ -1,3 +1,9 @@
+import { ArrowLeftIcon, ClockIcon } from 'lucide-react';
+import type { Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import Script from 'next/script';
 import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
 import { HeroContainer } from '@/app/(home)/_sections/hero';
 import { Testimonials } from '@/app/(home)/_sections/testimonials';
@@ -7,16 +13,10 @@ import { GuideCard } from '@/components/guide-card';
 import { Logo } from '@/components/logo';
 import { SectionHeader } from '@/components/section';
 import { Toc } from '@/components/toc';
-import { url, getAuthor } from '@/lib/layout.shared';
+import { getAuthor, url } from '@/lib/layout.shared';
 import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import { guideSource } from '@/lib/source';
 import { getMDXComponents } from '@/mdx-components';
-import { ArrowLeftIcon, ClockIcon } from 'lucide-react';
-import type { Metadata } from 'next';
-import Image from 'next/image';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-import Script from 'next/script';
 
 const difficultyColors = {
   beginner: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
@@ -77,7 +77,7 @@ export default async function Page({
     .filter(
       (item) =>
         item.data.difficulty === guide?.data.difficulty &&
-        item.url !== guide?.url,
+        item.url !== guide?.url
     )
     .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
     .slice(0, 3);
@@ -108,34 +108,34 @@ export default async function Page({
       <HeroContainer>
         <div className="col">
           <Link
+            className="mb-4 flex items-center gap-2 text-muted-foreground"
             href={goBackUrl}
-            className="flex items-center gap-2 mb-4 text-muted-foreground"
           >
-            <ArrowLeftIcon className="w-4 h-4" />
+            <ArrowLeftIcon className="h-4 w-4" />
             <span>Back to all guides</span>
           </Link>
           <SectionHeader
             as="h1"
-            title={guide?.data.title}
             description={guide?.data.description}
+            title={guide?.data.title}
           />
-          <div className="row gap-4 items-center mt-8">
-            <div className="size-10 center-center bg-black rounded-full">
+          <div className="row mt-8 items-center gap-4">
+            <div className="center-center size-10 rounded-full bg-black">
               {author?.image ? (
                 <Image
-                  className="size-10 object-cover rounded-full"
-                  src={author.image}
                   alt={author.name}
-                  width={48}
+                  className="size-10 rounded-full object-cover"
                   height={48}
+                  src={author.image}
+                  width={48}
                 />
               ) : (
-                <Logo className="w-6 h-6 fill-white" />
+                <Logo className="h-6 w-6 fill-white" />
               )}
             </div>
             <div className="col flex-1">
               <p className="font-medium">{author?.name || 'OpenPanel Team'}</p>
-              <div className="row gap-4 items-center">
+              <div className="row items-center gap-4">
                 <p className="text-muted-foreground text-sm">
                   {guide?.data.date.toLocaleDateString()}
                 </p>
@@ -146,14 +146,14 @@ export default async function Page({
                 )}
               </div>
             </div>
-            <div className="row gap-3 items-center">
+            <div className="row items-center gap-3">
               <span
-                className={`font-mono text-xs px-3 py-1 rounded ${difficultyColors[guide?.data.difficulty || 'beginner']}`}
+                className={`rounded px-3 py-1 font-mono text-xs ${difficultyColors[guide?.data.difficulty || 'beginner']}`}
               >
                 {difficultyLabels[guide?.data.difficulty || 'beginner']}
               </span>
-              <div className="row gap-1 items-center text-muted-foreground text-sm">
-                <ClockIcon className="w-4 h-4" />
+              <div className="row items-center gap-1 text-muted-foreground text-sm">
+                <ClockIcon className="h-4 w-4" />
                 <span>{guide?.data.timeToComplete} min</span>
               </div>
             </div>
@@ -161,23 +161,23 @@ export default async function Page({
         </div>
       </HeroContainer>
       <Script
-        strategy="beforeInteractive"
-        id="guide-howto-schema"
-        type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        id="guide-howto-schema"
+        strategy="beforeInteractive"
+        type="application/ld+json"
       />
-      <article className="container max-w-5xl col">
-        <div className="grid grid-cols-1 md:grid-cols-[1fr_300px] gap-0">
+      <article className="col container max-w-5xl">
+        <div className="grid grid-cols-1 gap-0 md:grid-cols-[1fr_300px]">
           <div className="min-w-0">
-            <div className="prose [&_table]:w-auto [&_img]:max-w-full [&_img]:h-auto">
+            <div className="prose [&_img]:h-auto [&_img]:max-w-full [&_table]:w-auto">
               <Body components={getMDXComponents()} />
             </div>
           </div>
-          <aside className="pl-12 pb-12 gap-8 col">
+          <aside className="col gap-8 pb-12 pl-12">
             <Toc toc={guide?.data.toc} />
             <FeatureCardContainer className="gap-2">
-              <span className="text-lg font-semibold">Try OpenPanel</span>
-              <p className="text-muted-foreground text-sm mb-4">
+              <span className="font-semibold text-lg">Try OpenPanel</span>
+              <p className="mb-4 text-muted-foreground text-sm">
                 Give it a spin for free. No credit card required.
               </p>
               <GetStartedButton />
@@ -187,18 +187,18 @@ export default async function Page({
 
         {relatedGuides.length > 0 && (
           <div className="my-16">
-            <h3 className="text-2xl font-bold mb-8">Related guides</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <h3 className="mb-8 font-bold text-2xl">Related guides</h3>
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
               {relatedGuides.map((item) => (
                 <GuideCard
-                  key={item.url}
-                  url={item.url}
-                  title={item.data.title}
-                  difficulty={item.data.difficulty}
-                  timeToComplete={item.data.timeToComplete}
                   cover={item.data.cover}
-                  team={item.data.team}
                   date={item.data.date}
+                  difficulty={item.data.difficulty}
+                  key={item.url}
+                  team={item.data.team}
+                  timeToComplete={item.data.timeToComplete}
+                  title={item.data.title}
+                  url={item.url}
                 />
               ))}
             </div>

apps/public/src/app/(content)/guides/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from 'next';
+import Script from 'next/script';
 import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
 import { HeroContainer } from '@/app/(home)/_sections/hero';
 import { Testimonials } from '@/app/(home)/_sections/testimonials';
@@ -6,8 +8,6 @@ import { Section, SectionHeader } from '@/components/section';
 import { url } from '@/lib/layout.shared';
 import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import { guideSource } from '@/lib/source';
-import type { Metadata } from 'next';
-import Script from 'next/script';
 
 export const metadata: Metadata = getPageMetadata({
   title: 'Implementation Guides',
@@ -19,7 +19,7 @@ export const metadata: Metadata = getPageMetadata({
 
 export default async function Page() {
   const guides = (await guideSource.getPages()).sort(
-    (a, b) => b.data.date.getTime() - a.data.date.getTime(),
+    (a, b) => b.data.date.getTime() - a.data.date.getTime()
   );
 
   // Create ItemList schema for SEO
@@ -43,32 +43,32 @@ export default async function Page() {
     <div>
       <HeroContainer className="-mb-32">
         <SectionHeader
-          as="h1"
           align="center"
+          as="h1"
           className="flex-1"
-          title="Implementation Guides"
           description="Step-by-step tutorials for adding privacy-first analytics to your app with OpenPanel."
+          title="Implementation Guides"
         />
       </HeroContainer>
 
       <Script
-        strategy="beforeInteractive"
-        id="guides-itemlist-schema"
-        type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(itemListSchema) }}
+        id="guides-itemlist-schema"
+        strategy="beforeInteractive"
+        type="application/ld+json"
       />
 
-      <Section className="container grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+      <Section className="container grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3">
         {guides.map((item) => (
           <GuideCard
-            key={item.url}
-            url={item.url}
-            title={item.data.title}
-            difficulty={item.data.difficulty}
-            timeToComplete={item.data.timeToComplete}
             cover={item.data.cover}
-            team={item.data.team}
             date={item.data.date}
+            difficulty={item.data.difficulty}
+            key={item.url}
+            team={item.data.team}
+            timeToComplete={item.data.timeToComplete}
+            title={item.data.title}
+            url={item.url}
           />
         ))}
       </Section>