add posthog integration and update about us page

dogokit · Mar 27, 2024 · fd6d4e0 · fd6d4e0
1 parent 28d9fad
commit fd6d4e0
Show file tree

Hide file tree

Showing 13 changed files with 787 additions and 95 deletions.
diff --git a/.env.example b/.env.example
@@ -8,8 +8,8 @@ SCREENSHOTONE_ACCESS_KEY=""
 SCREENSHOTONE_SECRET_KEY=""
 
 # PostHog
-POSTHOG_API_KEY=""
-POSTHOG_API_HOST=""
+VITE_POSTHOG_API_KEY=""
+VITE_POSTHOG_API_HOST=""
 
 # MailerLite
 MAILERLITE_API_TOKEN=""

diff --git a/LICENSE b/LICENSE
diff --git a/app/components/Card.tsx b/app/components/Card.tsx
@@ -20,7 +20,7 @@ export const CardBase = forwardRef<HTMLDivElement, CardProps>(({ ...props }, ref
     <Component
       ref={ref}
       className={cx(
-        "relative flex flex-col items-start gap-4 overflow-clip rounded-md border bg-neutral-50 p-5 hover:border-neutral-300 dark:border-neutral-700/50 dark:bg-neutral-800/40 dark:hover:border-neutral-700",
+        "fade-in relative flex flex-col items-start gap-4 overflow-clip rounded-md border bg-neutral-50 p-5 hover:border-neutral-300 dark:border-neutral-700/50 dark:bg-neutral-800/40 dark:hover:border-neutral-700",
         className
       )}
       {...rest}

diff --git a/app/components/Prose.tsx b/app/components/Prose.tsx
@@ -5,7 +5,7 @@ export const Prose = ({ children, className, ...props }: HTMLAttributes<HTMLElem
   return (
     <div
       className={cx(
-        "prose prose-neutral dark:prose-invert prose-a:font-normal prose-a:text-black dark:prose-a:text-white hover:prose-a:text-blue-500 first:prose-p:mt-0 last:prose-p:mb-0 first:prose-ul:mt-0 last:prose-ul:mb-0 prose-li:m-0 prose-img:border prose-img:border-neutral-200 prose-img:rounded-md prose-lead:text-lg/relaxed prose-pre:font-mono prose-pre:rounded-none prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-neutral-800 dark:prose-headings:text-neutral-200 text-neutral-600 dark:text-neutral-400",
+        "prose prose-neutral dark:prose-invert prose-a:font-normal prose-a:text-black dark:prose-a:text-white hover:prose-a:text-pink-500 first:prose-p:mt-0 last:prose-p:mb-0 first:prose-ul:mt-0 last:prose-ul:mb-0 prose-li:m-0 prose-img:border prose-img:border-neutral-200 prose-img:rounded-md prose-lead:text-lg/relaxed prose-pre:font-mono prose-pre:rounded-none prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-neutral-800 dark:prose-headings:text-neutral-200 text-neutral-600 dark:text-neutral-400",
         className
       )}
       {...props}

diff --git a/app/components/RepositoryDetails.tsx b/app/components/RepositoryDetails.tsx
@@ -9,6 +9,7 @@ import { CopyrightIcon, GitForkIcon, MoveRightIcon, StarIcon, TimerIcon } from "
 import { Insights } from "./Insights"
 import { Button } from "./Button"
 import { NavigationLink } from "./NavigationLink"
+import { posthog } from "posthog-js"
 
 type RepositoryDetailsProps = HTMLAttributes<HTMLElement> & {
   tool: SerializeFrom<ToolOne>
@@ -62,6 +63,7 @@ export const RepositoryDetails = ({ className, tool, ...props }: RepositoryDetai
           size="md"
           variant="secondary"
           suffix={<MoveRightIcon className="duration-150 group-hover:translate-x-0.5" />}
+          onClick={() => posthog.capture("repository_clicked", { url: tool.repository })}
           className="mt-1"
           asChild
         >

diff --git a/app/components/records/ToolRecord.tsx b/app/components/records/ToolRecord.tsx
@@ -33,10 +33,7 @@ export const ToolRecord = ({ tool, ...props }: ToolRecordProps) => {
       {...props}
     >
       {({ isTransitioning }) => (
-        <Card
-          className="fade-in"
-          style={isTransitioning ? { viewTransitionName: "tool" } : undefined}
-        >
+        <Card style={isTransitioning ? { viewTransitionName: "tool" } : undefined}>
           <Card.Header>
             <Favicon
               src={tool.faviconUrl}

diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,12 +1,26 @@
 import { RemixBrowser } from "@remix-run/react"
-import { StrictMode, startTransition } from "react"
+import { StrictMode, startTransition, useEffect } from "react"
 import { hydrateRoot } from "react-dom/client"
+import { posthog } from "posthog-js"
+
+const PosthogInit = () => {
+  useEffect(() => {
+    posthog.init(import.meta.env.VITE_POSTHOG_API_KEY!, {
+      api_host: import.meta.env.VITE_POSTHOG_API_HOST,
+      capture_pageview: false,
+      capture_pageleave: false,
+    })
+  }, [])
+
+  return null
+}
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
       <RemixBrowser />
+      <PosthogInit />
     </StrictMode>
   )
 })
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,14 +1,15 @@
 import { LinksFunction, MetaFunction } from "@remix-run/node"
 import { SpeedInsights } from "@vercel/speed-insights/remix"
 import { Analytics } from "@vercel/analytics/react"
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react"
-import { PropsWithChildren } from "react"
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLocation } from "@remix-run/react"
+import { PropsWithChildren, useEffect } from "react"
 import { Footer } from "~/components/Footer"
 import { Header } from "~/components/Header"
 import { Newsletter } from "~/components/Newsletter"
 import { Logo } from "./components/Logo"
 import { BreadcrumbsLink } from "./components/Breadcrumbs"
 import { SITE_NAME, SITE_URL } from "./utils/constants"
+import { posthog } from "posthog-js"
 
 import stylesheet from "~/styles.css?url"
 
@@ -43,6 +44,12 @@ export const meta: MetaFunction = ({ location }) => {
 }
 
 export function Layout({ children }: PropsWithChildren) {
+  const location = useLocation()
+
+  useEffect(() => {
+    posthog.capture("$pageview")
+  }, [location])
+
   return (
     <html lang="en">
       <head>

diff --git a/app/routes/$slug.tsx b/app/routes/$slug.tsx
@@ -17,6 +17,7 @@ import { updateUrlWithSearchParams } from "~/utils/helpers"
 import { Button } from "~/components/Button"
 import { Prose } from "~/components/Prose"
 import { RepositoryDetails } from "~/components/RepositoryDetails"
+import { posthog } from "posthog-js"
 
 export const handle = {
   breadcrumb: (data?: { tool: ToolOne }) => {
@@ -67,16 +68,17 @@ export default function ToolsPage() {
               <Series size="lg" className="w-full">
                 <FaviconImage
                   src={tool.faviconUrl}
-                  style={{ viewTransitionName: `tool-favicon` }}
+                  style={{ viewTransitionName: "tool-favicon" }}
                 />
-                <H1 style={{ viewTransitionName: `tool-title` }}>{tool.name}</H1>
+
+                <H1 style={{ viewTransitionName: "tool-title" }}>{tool.name}</H1>
               </Series>
 
               {tool.description && (
                 <Prose>
                   <h2
                     className="lead !font-normal !tracking-normal !text-neutral-600 dark:!text-neutral-400"
-                    style={{ viewTransitionName: `tool-description` }}
+                    style={{ viewTransitionName: "tool-description" }}
                   >
                     {tool.description}
                   </h2>
@@ -87,6 +89,7 @@ export default function ToolsPage() {
             {tool.website && (
               <Button
                 suffix={<MoveRightIcon className="duration-150 group-hover:translate-x-0.5" />}
+                onClick={() => posthog.capture("website_clicked", { url: tool.website })}
                 asChild
               >
                 <a

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -57,11 +57,11 @@ export default function Index() {
 
   return (
     <>
-      <section className="flex flex-col gap-y-6 sm:items-start sm:text-start">
+      <section className="flex flex-col gap-y-6">
         <Intro
           title={SITE_TAGLINE}
           description="We’ve curated some great open source alternatives to tools that your business requires in day-to-day operations."
-          className="items-start text-pretty"
+          className="max-w-xl text-pretty"
         />
 
         <Newsletter placeholder="Get weekly newsletter" buttonVariant="fancy" />

diff --git a/app/routes/about.tsx b/app/routes/about.tsx
@@ -1,4 +1,4 @@
-import { SITE_NAME } from "~/utils/constants"
+import { SITE_NAME, SITE_TAGLINE } from "~/utils/constants"
 import { Intro } from "~/components/Intro"
 import { Prose } from "~/components/Prose"
 import { Featured } from "~/components/Featured"
@@ -35,78 +35,85 @@ export default function AboutPage() {
       <Featured />
 
       <Prose>
-        <h2>Hi, Piotr here 👋</h2>
-
-        <p>
-          I was collecting nice open-source companies for quite some time now. Mostly to take some
-          inspiration and learn from their code.
-        </p>
-
-        <p>
-          Last week, I though it would be fun to learn this Astro thing everyone’s talking about. So
-          I thought building a directory website out of this collection was pretty good idea.
-        </p>
-
-        <p>
-          After 2 days of building, OpenAlternative was born. It’s a community driven list of open
-          source alternatives to proprietary software and applications.
-        </p>
-
-        <p>Enjoy and feel free to contribute!</p>
-
-        <h2>Tools Used</h2>
-        <h3>Frontend</h3>
-        <p>
-          For the frontend, I used{" "}
-          <a href="https://astro.build/" target="_blank" rel="noreferrer">
-            Astro
-          </a>
-          . It’s a new static site generator that’s really fast and fun to work with. Working with
-          Astro feels like working with a modern framework like React or Vue, but it’s actually a
-          static site generator.
-        </p>
-        <p>
-          A great addition to Astro is the ViewTransitions API support. It’s a really cool feature
-          that allows you to add page transitions to your website with just a few lines of code.
-        </p>
-
+        <h2>What is OpenAlternative?</h2>
         <p>
-          I also used{" "}
-          <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer">
-            Tailwind CSS
+          <a href="https://openalternative.co" title={SITE_TAGLINE}>
+            OpenAlternative
           </a>{" "}
-          for styling. It’s a utility-first CSS framework that’s really easy to use and makes
-          building websites a breeze.
+          is a community driven list of open source alternatives to proprietary software and
+          applications. The goal of the site is to be your first stop when researching for a new
+          open source service to help you grow your business. It will help you find alternatives and
+          reviews of the products you already use.
         </p>
 
-        <h3>Backend</h3>
-        <p>
-          For the database, I used{" "}
-          <a href="https://kulp.in/airtable" target="_blank" rel="noreferrer">
-            Airtable
-          </a>
-          . It’s a really cool tool that allows you to create databases with a really nice UI. It
-          also has a really nice API that makes it easy to work with.
-        </p>
+        <h2>How did OpenAlternative get started?</h2>
 
         <p>
-          Screenshots are generated automatically with{" "}
+          The project started as a weekend project to learn a new technology and try something new
+          and fun from scratch. It gained a lot of traction early on (
+          <a href="https://kulp.in/launch" target="_blank" rel="noreferrer">
+            100k unique visitors
+          </a>{" "}
+          in one week,{" "}
           <a
-            href="https://kulp.in/screenshotone"
+            href="https://news.ycombinator.com/item?id=39639386"
             target="_blank"
-            title="Screenshot API"
-            rel="noreferrer"
+            rel="noreferrer nofollow"
           >
-            ScreenshotOne
+            #1 on Hacker News
           </a>
-          . Highly recommended service for generating screenshots of websites.
+          ) so it was clear that there was a need for a site like this.
+        </p>
+
+        <p>
+          I’ve always been a fan of open source software and I’ve always wanted to contribute to the
+          community in some way. I thought that creating a list of open source alternatives to
+          proprietary software and applications would be a great way to give back to the community.
         </p>
 
+        <h2>Tools Used</h2>
+        <ul>
+          <li>
+            <a href="https://remix.run" target="_blank" rel="noreferrer nofollow">
+              Remix
+            </a>
+            - Web framework
+          </li>
+          <li>
+            <a href="https://github.com" target="_blank" rel="noreferrer nofollow">
+              GitHub
+            </a>
+            - Repository data
+          </li>
+          <li>
+            <a
+              href="https://kulp.in/screenshotone"
+              target="_blank"
+              title="Screenshot API"
+              rel="noreferrer"
+            >
+              ScreenshotOne
+            </a>
+            - Generating Screenshots
+          </li>
+          <li>
+            <a
+              href="https://kulp.in/airtable"
+              target="_blank"
+              title="Screenshot API"
+              rel="noreferrer nofollow"
+            >
+              Airtable
+            </a>
+            - Database
+          </li>
+        </ul>
+
         <h2>Contribute</h2>
         <p>
           If you have any suggestions for open source alternatives to proprietary software and
-          applications, feel free to contribute to the list. You can also contribute by adding new
-          categories or improving the website. The source code is available on{" "}
+          applications, feel free to contribute to the list. You can also contribute by suggesting
+          new categories or improving the website. The source code is available on{" "}
           <a
             href="https://github.com/piotrkulpinski/openalternative"
             target="_blank"
@@ -116,6 +123,14 @@ export default function AboutPage() {
           </a>
           .
         </p>
+
+        <p>
+          Enjoy and feel free to contribute!
+          <br />–{" "}
+          <a href="https://twitter.com/piotrkulpinski" target="_blank" rel="noreferrer">
+            Piotr Kulpinski
+          </a>
+        </p>
       </Prose>
     </>
   )

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "isbot": "^4.1.0",
     "lucide-react": "^0.359.0",
     "plur": "^5.1.0",
+    "posthog-js": "^1.116.6",
     "react": "canary",
     "react-dom": "canary",
     "tailwind-merge": "^2.2.2",