Replace Plausible component with a package

gruz0 · Nov 11, 2024 · b396476 · b396476
1 parent e218127
commit b396476
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 145 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "ioredis": "^5.4.1",
     "next": "14.2.13",
+    "next-plausible": "^3.12.4",
     "openai": "^4.65.0",
     "react": "^18",
     "react-dom": "^18"

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import PlausibleProvider from 'next-plausible'
 import React from 'react'
 import { env } from '@/lib/env'
 import type { Metadata } from 'next'
@@ -17,6 +18,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <PlausibleProvider domain={env.DOMAIN} />
+      </head>
+
       <body>{children}</body>
     </html>
   )

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import React from 'react'
-import Plausible from '@/components/Plausible'
 import { ConceptRepositorySQLite } from '@/concept/adapters/ConceptRepositorySQLite'
 
 export const dynamic = 'force-dynamic'
@@ -15,38 +14,34 @@ export default async function LandingPage() {
   const totalConceptsCount = await getTotalConceptsCount()
 
   return (
-    <>
-      <Plausible />
-
-      <div className="p-4 md:p-6 lg:p-8">
-        <h1 className="mb-4 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
-          Validate Your Product or Startup Idea Fast!
-        </h1>
-
-        <div className="mb-6 md:mb-8">
-          <p className="text-lg md:text-2xl">
-            Start by answering one question, and we&apos;ll tell you if we got
-            something valuable about your product idea and target audience. Step
-            by step guide to validate your idea super fast.
-          </p>
-        </div>
-
-        <div className="mb-2 rounded-lg border border-green-300 bg-green-50 p-4 text-lg text-green-800 md:mb-8">
-          <p>
-            We&apos;ve analyzed <strong>{totalConceptsCount} ideas</strong> so
-            far! Let&apos;s see how we can help you today 🤗
-          </p>
-        </div>
-
-        <div className="mb-8 pt-8 text-center">
-          <Link
-            href="/start"
-            className="justify-center rounded-md border border-transparent bg-blue-600 px-8 py-4 text-2xl font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-          >
-            Take the First Step
-          </Link>
-        </div>
+    <div className="p-4 md:p-6 lg:p-8">
+      <h1 className="mb-4 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
+        Validate Your Product or Startup Idea Fast!
+      </h1>
+
+      <div className="mb-6 md:mb-8">
+        <p className="text-lg md:text-2xl">
+          Start by answering one question, and we&apos;ll tell you if we got
+          something valuable about your product idea and target audience. Step
+          by step guide to validate your idea super fast.
+        </p>
       </div>
-    </>
+
+      <div className="mb-2 rounded-lg border border-green-300 bg-green-50 p-4 text-lg text-green-800 md:mb-8">
+        <p>
+          We&apos;ve analyzed <strong>{totalConceptsCount} ideas</strong> so
+          far! Let&apos;s see how we can help you today 🤗
+        </p>
+      </div>
+
+      <div className="mb-8 pt-8 text-center">
+        <Link
+          href="/start"
+          className="justify-center rounded-md border border-transparent bg-blue-600 px-8 py-4 text-2xl font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          Take the First Step
+        </Link>
+      </div>
+    </div>
   )
 }
diff --git a/src/app/start/page.tsx b/src/app/start/page.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import ConceptForm from '@/components/ConceptForm'
-import Plausible from '@/components/Plausible'
 import { createIdeaLimiterKey, getLimits } from '@/lib/rateLimiter'
 
 export const dynamic = 'force-dynamic'
@@ -15,36 +14,32 @@ export default async function StartPage({
   const problem = searchParams.problem || ''
 
   return (
-    <>
-      <Plausible />
+    <div className="p-4 md:p-6 lg:p-8">
+      {limiter.isAllowed ? (
+        <>
+          <h1 className="mb-6 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
+            Only One Question
+          </h1>
 
-      <div className="p-4 md:p-6 lg:p-8">
-        {limiter.isAllowed ? (
-          <>
-            <h1 className="mb-6 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
-              Only One Question
-            </h1>
+          <ConceptForm problem={problem} />
+        </>
+      ) : (
+        <>
+          <h1 className="mb-6 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
+            Unfortunately...
+          </h1>
 
-            <ConceptForm problem={problem} />
-          </>
-        ) : (
-          <>
-            <h1 className="mb-6 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
-              Unfortunately...
-            </h1>
-
-            <div className="mt-8 flex items-center rounded-lg border border-blue-300 bg-blue-50 p-4 text-xl">
-              <p className="text-lg">
-                We provide {limiter.limit} free reports per hour, and the limit
-                has been reached by indie makers and founders.
-                <br />
-                Limits will be reset at {limiter.resetAt.toUTCString()}. Please
-                try again later.
-              </p>
-            </div>
-          </>
-        )}
-      </div>
-    </>
+          <div className="mt-8 flex items-center rounded-lg border border-blue-300 bg-blue-50 p-4 text-xl">
+            <p className="text-lg">
+              We provide {limiter.limit} free reports per hour, and the limit
+              has been reached by indie makers and founders.
+              <br />
+              Limits will be reset at {limiter.resetAt.toUTCString()}. Please
+              try again later.
+            </p>
+          </div>
+        </>
+      )}
+    </div>
   )
 }
diff --git a/src/app/supporters/page.tsx b/src/app/supporters/page.tsx
@@ -1,7 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
-import Plausible from '@/components/Plausible'
 import Supporters from '../../../public/supporters.json'
 
 export const dynamic = 'force-dynamic'
@@ -17,82 +16,77 @@ const SupportersPage: React.FC = () => {
   const supporters: Supporter[] = Supporters.sort(() => Math.random() - 0.5)
 
   return (
-    <>
-      <Plausible />
+    <div className="p-4 md:p-6 lg:p-8">
+      <header className="mb-8 text-center">
+        <h1 className="mb-4 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
+          Meet the Supporters of CheckMVP ❤️
+        </h1>
 
-      <div className="p-4 md:p-6 lg:p-8">
-        <header className="mb-8 text-center">
-          <h1 className="mb-4 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
-            Meet the Supporters of CheckMVP ❤️
-          </h1>
+        <p className="text-justify text-lg text-gray-600 md:text-center">
+          These amazing individuals may not have directly contributed to
+          building CheckMVP, but their support has been invaluable to me on this
+          journey. Whether it was through sharing their thoughts, offering
+          feedback, testing first versions, or simply bringing positive energy,
+          they&apos;ve played a key role in helping me grow and improve!
+        </p>
+      </header>
 
-          <p className="text-justify text-lg text-gray-600 md:text-center">
-            These amazing individuals may not have directly contributed to
-            building CheckMVP, but their support has been invaluable to me on
-            this journey. Whether it was through sharing their thoughts,
-            offering feedback, testing first versions, or simply bringing
-            positive energy, they&apos;ve played a key role in helping me grow
-            and improve!
-          </p>
-        </header>
-
-        <section className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {supporters.map((supporter, index) => (
-            <div
-              key={index}
-              className="flex flex-col items-center rounded-lg border bg-white p-4 shadow-lg transition duration-300 hover:shadow-xl md:p-6"
+      <section className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {supporters.map((supporter, index) => (
+          <div
+            key={index}
+            className="flex flex-col items-center rounded-lg border bg-white p-4 shadow-lg transition duration-300 hover:shadow-xl md:p-6"
+          >
+            <Link
+              href={supporter.url}
+              target="_blank"
+              rel="noopener noreferrer nofollow"
             >
+              <Image
+                src={supporter.image}
+                alt={`${supporter.name}'s profile picture`}
+                className="mb-4 rounded-full"
+                width={48}
+                height={48}
+              />
+            </Link>
+
+            <h2 className="text-xl font-semibold text-gray-800">
               <Link
                 href={supporter.url}
                 target="_blank"
                 rel="noopener noreferrer nofollow"
+                className="mt-4 text-blue-600 hover:text-blue-700 hover:underline"
               >
-                <Image
-                  src={supporter.image}
-                  alt={`${supporter.name}'s profile picture`}
-                  className="mb-4 rounded-full"
-                  width={48}
-                  height={48}
-                />
+                {supporter.name}
               </Link>
+            </h2>
+            <p className="mt-2 text-center text-gray-600">
+              {supporter.tagline}
+            </p>
+          </div>
+        ))}
+      </section>
 
-              <h2 className="text-xl font-semibold text-gray-800">
-                <Link
-                  href={supporter.url}
-                  target="_blank"
-                  rel="noopener noreferrer nofollow"
-                  className="mt-4 text-blue-600 hover:text-blue-700 hover:underline"
-                >
-                  {supporter.name}
-                </Link>
-              </h2>
-              <p className="mt-2 text-center text-gray-600">
-                {supporter.tagline}
-              </p>
-            </div>
-          ))}
-        </section>
+      <hr className="my-6" />
 
-        <hr className="my-6" />
+      <div className="my-6 text-center">
+        <p className="mb-6 text-lg text-gray-600">
+          Want to be featured as a supporter?
+        </p>
 
-        <div className="my-6 text-center">
-          <p className="mb-6 text-lg text-gray-600">
-            Want to be featured as a supporter?
-          </p>
-
-          <p className="text-lg text-gray-600">
-            <Link
-              href="https://x.com/itmistakes_com"
-              className="mt-4 rounded-lg bg-blue-600 px-6 py-3 text-white transition duration-200 hover:bg-blue-500"
-              target="_blank"
-              rel="nofollow noopener noreferrer"
-            >
-              Drop me a message on X
-            </Link>
-          </p>
-        </div>
+        <p className="text-lg text-gray-600">
+          <Link
+            href="https://x.com/itmistakes_com"
+            className="mt-4 rounded-lg bg-blue-600 px-6 py-3 text-white transition duration-200 hover:bg-blue-500"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            Drop me a message on X
+          </Link>
+        </p>
       </div>
-    </>
+    </div>
   )
 }
 

diff --git a/src/components/Plausible.tsx b/src/components/Plausible.tsx