Add PostHog... maybe\?

firezone · Jun 9, 2023 · 67b342c · 67b342c
1 parent 19c97b2
commit 67b342c
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 123 deletions.
diff --git a/website/.gitignore b/website/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

diff --git a/website/package.json b/website/package.json
@@ -24,6 +24,7 @@
     "highlight.js": "^11.8.0",
     "next": "13.4.4",
     "postcss": "8.4.23",
+    "posthog-js": "^1.67.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.7",

diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
diff --git a/website/src/app/blog/page.tsx b/website/src/app/blog/page.tsx
@@ -34,9 +34,9 @@ export default function Page() {
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    fill-rule="evenodd"
+                    fillRule="evenodd"
                     d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
-                    clip-rule="evenodd"
+                    clipRule="evenodd"
                   ></path>
                   <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
                 </svg>
@@ -86,9 +86,9 @@ export default function Page() {
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    fill-rule="evenodd"
+                    fillRule="evenodd"
                     d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
-                    clip-rule="evenodd"
+                    clipRule="evenodd"
                   ></path>
                   <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
                 </svg>

diff --git a/website/src/app/providers.jsx b/website/src/app/providers.jsx
@@ -0,0 +1,31 @@
+"use client";
+
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+if (typeof window !== "undefined") {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+  });
+}
+
+export default function PHProvider({ children }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  // Track pageviews
+  useEffect(() => {
+    if (pathname) {
+      let url = window.origin + pathname;
+      if (searchParams.toString()) {
+        url = url + `?${searchParams.toString()}`;
+      }
+      posthog.capture("$pageview", {
+        $current_url: url,
+      });
+    }
+  }, [pathname, searchParams]);
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
diff --git a/website/src/components/Blog/Post/index.tsx b/website/src/components/Blog/Post/index.tsx
@@ -66,114 +66,8 @@ export default function Post({
           </article>
         </div>
       </main>
-      <aside
-        aria-label="Related articles"
-        className="py-8 lg:py-24 bg-gray-50 dark:bg-gray-800"
-      >
-        <div className="px-4 mx-auto max-w-screen-xl">
-          <h2 className="mb-8 text-2xl font-bold text-gray-900 dark:text-white">
-            Related articles
-          </h2>
-          <div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
-            <article className="max-w-xs">
-              <a href="#">
-                <Image
-                  src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/article/blog-1.png"
-                  className="mb-5 rounded-lg"
-                  width={100}
-                  height={100}
-                  alt="Image 1"
-                />
-              </a>
-              <h2 className="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white">
-                <a href="#">Our first office</a>
-              </h2>
-              <p className="mb-4 font-light text-gray-500 dark:text-gray-400">
-                Over the past year, Volosoft has undergone many changes! After
-                months of preparation.
-              </p>
-              <a
-                href="#"
-                className="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
-              >
-                Read in 2 minutes
-              </a>
-            </article>
-            <article className="max-w-xs">
-              <a href="#">
-                <Image
-                  src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/article/blog-2.png"
-                  className="mb-5 rounded-lg"
-                  alt="Image 2"
-                  width={100}
-                  height={100}
-                />
-              </a>
-              <h2 className="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white">
-                <a href="#">Enterprise design tips</a>
-              </h2>
-              <p className="mb-4 font-light text-gray-500 dark:text-gray-400">
-                Over the past year, Volosoft has undergone many changes! After
-                months of preparation.
-              </p>
-              <a
-                href="#"
-                className="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
-              >
-                Read in 12 minutes
-              </a>
-            </article>
-            <article className="max-w-xs">
-              <a href="#">
-                <Image
-                  src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/article/blog-3.png"
-                  className="mb-5 rounded-lg"
-                  alt="Image 3"
-                  width={100}
-                  height={100}
-                />
-              </a>
-              <h2 className="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white">
-                <a href="#">We partnered with Google</a>
-              </h2>
-              <p className="mb-4 font-light text-gray-500 dark:text-gray-400">
-                Over the past year, Volosoft has undergone many changes! After
-                months of preparation.
-              </p>
-              <a
-                href="#"
-                className="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
-              >
-                Read in 8 minutes
-              </a>
-            </article>
-            <article className="max-w-xs">
-              <a href="#">
-                <Image
-                  width={100}
-                  height={100}
-                  src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/article/blog-4.png"
-                  className="mb-5 rounded-lg"
-                  alt="Image 4"
-                />
-              </a>
-              <h2 className="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white">
-                <a href="#">Our first project with React</a>
-              </h2>
-              <p className="mb-4 font-light text-gray-500 dark:text-gray-400">
-                Over the past year, Volosoft has undergone many changes! After
-                months of preparation.
-              </p>
-              <a
-                href="#"
-                className="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
-              >
-                Read in 4 minutes
-              </a>
-            </article>
-          </div>
-        </div>
-      </aside>
+
+      {/* TODO: Related articles (see flowbite blocks) */}
 
       <section className="bg-white dark:bg-gray-900">
         <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
@@ -182,8 +76,8 @@ export default function Post({
               Sign up for our newsletter
             </h2>
             <p className="mx-auto mb-8 max-w-2xl font-light text-gray-500 md:mb-12 sm:text-xl dark:text-gray-400">
-              Stay up to date with the roadmap progress, announcements and
-              exclusive discounts feel free to sign up with your email.
+              Sign up with your email to receive roadmap updates, how-tos, and
+              product announcements from the Firezone team.
             </p>
             <form action="#">
               <div className="items-center mx-auto mb-3 space-y-4 max-w-screen-sm sm:flex sm:space-y-0">

diff --git a/website/src/components/DocsSidebar/index.tsx b/website/src/components/DocsSidebar/index.tsx
@@ -19,7 +19,7 @@ export default function DocsSidebar() {
       id="docs-sidebar"
       aria-label="Sidebar"
       aria-hidden="true"
-      className="sticky top-0 w-64 h-screen pt-24 transition-transform -translate-x-full bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+      className="sticky left-0 top-0 w-64 h-screen pt-24 transition-transform -translate-x-full bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
     >
       <SearchForm />
       <div className="pt-3 mt-5 h-full overflow-y-auto bg-white dark:bg-gray-800 pr-3">

diff --git a/website/src/components/Footer/index.tsx b/website/src/components/Footer/index.tsx
@@ -58,11 +58,16 @@ export default function Footer() {
                     Blog
                   </Link>
                 </li>
-                <li>
+                <li className="mb-4">
                   <Link href="/contact/sales" className="hover:underline">
                     Contact
                   </Link>
                 </li>
+                <li>
+                  <Link href="/contact/newsletter" className="hover:underline">
+                    Newsletter
+                  </Link>
+                </li>
               </ul>
             </div>
             <div>

diff --git a/website/src/components/RootLayout/index.tsx b/website/src/components/RootLayout/index.tsx
@@ -2,6 +2,7 @@ import { Metadata } from "next";
 import "@/app/globals.css";
 import "highlight.js/styles/default.css";
 import RootNavbar from "@/components/RootNavbar";
+import Providers from "@/app/Providers";
 import Footer from "@/components/Footer";
 import { Source_Sans_Pro } from "next/font/google";
 const source_sans_pro = Source_Sans_Pro({
@@ -16,13 +17,15 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={source_sans_pro.className}>
-        <div className="h-auto antialiased">
-          <RootNavbar />
-          {children}
-          <Footer />
-        </div>
-      </body>
+      <Providers>
+        <body className={source_sans_pro.className}>
+          <div className="h-auto antialiased">
+            <RootNavbar />
+            {children}
+            <Footer />
+          </div>
+        </body>
+      </Providers>
     </html>
   );
 }