Plausible setup and components/hooks links to docs (#28)

scaffold-eth · Oct 26, 2023 · ed7a0bc · ed7a0bc
1 parent 8425657
commit ed7a0bc
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 24 deletions.
diff --git a/packages/nextjs/components/TrackedLink.tsx b/packages/nextjs/components/TrackedLink.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { usePlausible } from "next-plausible";
+
+type TrackedLinkProps = {
+  id: string;
+  href: string;
+  className?: string;
+  children: ReactNode;
+};
+
+// Track external clicks on links using plausible
+export default function TrackedLink({ id, href, className, children }: TrackedLinkProps) {
+  const plausible = usePlausible();
+
+  return (
+    <a
+      href={href}
+      target="_blanck"
+      rel="noreferrer"
+      className={className}
+      onClick={() => plausible("click", { props: { id } })}
+    >
+      {children}
+    </a>
+  );
+}
diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js
@@ -1,4 +1,6 @@
 // @ts-check
+// @ts-ignore
+const { withPlausibleProxy } = require("next-plausible");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -11,4 +13,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withPlausibleProxy()(nextConfig);
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -21,6 +21,7 @@
     "@uniswap/v2-sdk": "^3.0.1",
     "daisyui": "^2.31.0",
     "next": "^13.1.6",
+    "next-plausible": "^3.10.1",
     "nextjs-progressbar": "^0.0.16",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",

diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app";
 import { RainbowKitProvider, lightTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
+import PlausibleProvider from "next-plausible";
 import NextNProgress from "nextjs-progressbar";
 import { Toaster } from "react-hot-toast";
 import { WagmiConfig } from "wagmi";
@@ -12,16 +13,18 @@ import "~~/styles/globals.css";
 
 const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <NextNProgress />
-      <RainbowKitProvider chains={appChains.chains} avatar={BlockieAvatar} theme={lightTheme()}>
-        <main className="font-space-grotesk">
-          <Component {...pageProps} />
-        </main>
-        <Footer />
-        <Toaster />
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <PlausibleProvider domain="scaffoldeth.io">
+      <WagmiConfig config={wagmiConfig}>
+        <NextNProgress />
+        <RainbowKitProvider chains={appChains.chains} avatar={BlockieAvatar} theme={lightTheme()}>
+          <main className="font-space-grotesk">
+            <Component {...pageProps} />
+          </main>
+          <Footer />
+          <Toaster />
+        </RainbowKitProvider>
+      </WagmiConfig>
+    </PlausibleProvider>
   );
 };
 

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -5,6 +5,7 @@ import CopyToClipboard from "react-copy-to-clipboard";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { HooksExample } from "~~/components/HooksExample";
 import { MetaHeader } from "~~/components/MetaHeader";
+import TrackedLink from "~~/components/TrackedLink";
 
 const Home: NextPage = () => {
   const [cloneCommandCopied, setCloneCommandCopied] = useState(false);
@@ -89,23 +90,21 @@ const Home: NextPage = () => {
           </div>
 
           <div className="flex flex-wrap gap-4 items-center justify-center">
-            <a
+            <TrackedLink
+              id="Docs"
               href="https://docs.scaffoldeth.io/"
-              target="_blank"
               className="btn btn-outline btn-sm px-5 h-10 bg-base-100 normal-case font-normal text-lg"
-              rel="noreferrer"
             >
               Docs
-            </a>
-            <a
+            </TrackedLink>
+            <TrackedLink
+              id="Github"
               href="https://github.com/scaffold-eth/scaffold-eth-2"
-              target="_blank"
               className="btn btn-outline btn-sm px-5 h-10 bg-neutral text-white normal-case font-normal text-lg flex items-center gap-2"
-              rel="noreferrer"
             >
-              <span>Github</span>
+              Github
               <Image src="/assets/ghIcon.png" alt="github icon" height={25} width={25} />
-            </a>
+            </TrackedLink>
           </div>
         </div>
       </div>
@@ -154,6 +153,11 @@ const Home: NextPage = () => {
                 Accelerate your dapp development using our pre-built components for common web3 use cases. Tailwind and
                 daisyUI to style your dapp and give it a modern and appealing design.
               </p>
+              <p className="m-auto text-center lg:text-left lg:mx-0 max-w-[300px] lg:max-w-none lg:pr-6 link">
+                <TrackedLink id="Components" href="https://docs.scaffoldeth.io/components/">
+                  Check out all the components
+                </TrackedLink>
+              </p>
             </div>
           </div>
         </div>
@@ -176,6 +180,11 @@ const Home: NextPage = () => {
               <span className="italic">Wagmi</span>, an easy-to-use interface with typescript autocompletions for
               reading from, writing to, and monitoring events emitted by your smart contracts.
             </p>
+            <p className="m-auto text-center lg:text-left lg:mx-0 max-w-[300px] lg:max-w-none lg:pr-6 link">
+              <TrackedLink id="Hooks" href="https://docs.scaffoldeth.io/hooks/">
+                Check out all the available hooks
+              </TrackedLink>
+            </p>
           </div>
           <HooksExample />
         </div>
@@ -189,14 +198,13 @@ const Home: NextPage = () => {
             You can build and learn together with the BuidlGuidl community, joining over 800 members in creating
             products, prototypes, and tutorials to enrich the web3 ecosystem.
           </p>
-          <a
+          <TrackedLink
+            id="BuidlGuidl"
             href="https://buidlguidl.com"
-            target="_blank"
             className="btn btn-outline btn-sm px-5 h-10 bg-base-100 normal-case font-normal text-lg"
-            rel="noreferrer"
           >
             Learn More
-          </a>
+          </TrackedLink>
         </div>
       </div>
 

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -28,6 +28,12 @@ module.exports = {
           ".tooltip": {
             "--tooltip-tail": "6px",
           },
+          ".link": {
+            textUnderlineOffset: "2px",
+          },
+          ".link:hover": {
+            opacity: "80%",
+          },
         },
       },
       {
@@ -53,6 +59,12 @@ module.exports = {
             "--tooltip-tail": "6px",
             "--tooltip-color": "hsl(var(--p))",
           },
+          ".link": {
+            textUnderlineOffset: "2px",
+          },
+          ".link:hover": {
+            opacity: "80%",
+          },
         },
       },
     ],

diff --git a/yarn.lock b/yarn.lock
@@ -1132,6 +1132,7 @@ __metadata:
     eslint-config-prettier: ^8.5.0
     eslint-plugin-prettier: ^4.2.1
     next: ^13.1.6
+    next-plausible: ^3.10.1
     nextjs-progressbar: ^0.0.16
     postcss: ^8.4.16
     prettier: ^2.8.4
@@ -6268,6 +6269,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-plausible@npm:^3.10.1":
+  version: 3.11.2
+  resolution: "next-plausible@npm:3.11.2"
+  peerDependencies:
+    next: ^11.1.0 || ^12.0.0 || ^13.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 853427fdc0584619ed8cc69369cfd379fc305c7270b380d4d6ceb8d60a2cec9498cc137a5c0d6413d09dec39072ec5dcafdac1d87aea4ef22a5d2aca4d759921
+  languageName: node
+  linkType: hard
+
 "next@npm:^13.1.6":
   version: 13.1.6
   resolution: "next@npm:13.1.6"