diff --git a/packages/nextjs/components/BuildCard.tsx b/packages/nextjs/components/BuildCard.tsx
index 911e1f9..e458d4c 100644
--- a/packages/nextjs/components/BuildCard.tsx
+++ b/packages/nextjs/components/BuildCard.tsx
@@ -1,4 +1,5 @@
import Image from "next/image";
+import TrackedLink from "~~/components/TrackedLink";
export const BuildCard = ({
name,
@@ -12,19 +13,18 @@ export const BuildCard = ({
link: string;
}) => {
return (
-
-
+
-
+
);
};
diff --git a/packages/nextjs/components/ChallengeCard.tsx b/packages/nextjs/components/ChallengeCard.tsx
index e26ba61..cb4a521 100644
--- a/packages/nextjs/components/ChallengeCard.tsx
+++ b/packages/nextjs/components/ChallengeCard.tsx
@@ -1,4 +1,5 @@
import Image from "next/image";
+import TrackedLink from "~~/components/TrackedLink";
/**
* Site header
@@ -26,14 +27,9 @@ export const Card = ({
{name}
{description}
-
+
Fork the Repo
-
+
);
};
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 10187f5..eea15cf 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -1,6 +1,7 @@
import React from "react";
import Image from "next/image";
import Link from "next/link";
+import TrackedLink from "~~/components/TrackedLink";
/**
* Site header
@@ -16,14 +17,13 @@ export const Header = () => {
);
diff --git a/packages/nextjs/components/LearnMoreCard.tsx b/packages/nextjs/components/LearnMoreCard.tsx
index 416a23c..3d96e69 100644
--- a/packages/nextjs/components/LearnMoreCard.tsx
+++ b/packages/nextjs/components/LearnMoreCard.tsx
@@ -1,15 +1,16 @@
+import TrackedLink from "~~/components/TrackedLink";
+
export const LearnMoreCard = ({ name, description, link }: { name: string; description: string; link: string }) => {
return (
-
-
+
);
};
diff --git a/packages/nextjs/components/TrackedLink.tsx b/packages/nextjs/components/TrackedLink.tsx
new file mode 100644
index 0000000..1da788e
--- /dev/null
+++ b/packages/nextjs/components/TrackedLink.tsx
@@ -0,0 +1,27 @@
+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();
+ console.log(id);
+
+ return (
+ plausible("click", { props: { id } })}
+ >
+ {children}
+
+ );
+}
diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js
index 04662cc..c1a3790 100644
--- 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 = {
@@ -40,4 +42,4 @@ const nextConfig = {
},
};
-module.exports = nextConfig;
+module.exports = withPlausibleProxy()(nextConfig);
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index 5b50ede..b94a817 100644
--- 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",
"react": "^18.2.0",
"react-blockies": "^1.4.1",
diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
index d5f573a..f701138 100644
--- a/packages/nextjs/pages/_app.tsx
+++ b/packages/nextjs/pages/_app.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
import type { AppProps } from "next/app";
import { RainbowKitProvider, darkTheme, 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 { useDarkMode } from "usehooks-ts";
@@ -21,19 +22,21 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
}, [isDarkMode]);
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 7d01141..1488263 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -6,6 +6,7 @@ import { Footer } from "~~/components/Footer";
import { Header } from "~~/components/Header";
import { LearnMoreCard } from "~~/components/LearnMoreCard";
import { MetaHeader } from "~~/components/MetaHeader";
+import TrackedLink from "~~/components/TrackedLink";
import { Address } from "~~/components/scaffold-eth";
const Home: NextPage = () => {
@@ -33,14 +34,13 @@ const Home: NextPage = () => {
Level up your skills and get paid
@@ -105,14 +105,13 @@ const Home: NextPage = () => {
Open source tooling built and maintained by BuidlGuidl
@@ -161,9 +160,9 @@ const Home: NextPage = () => {
link="https://buidlguidl.com/build/oFWIYHo7WkvFQ29WQ12J"
/>
-
+
See all projects
-
+
@@ -212,14 +211,13 @@ const Home: NextPage = () => {
Our goal is to enrich open learning within the Ethereum developer ecosystem.
-
Connect with us
-
+
SUPPORTED BY
diff --git a/yarn.lock b/yarn.lock
index 1aa31cf..6dd382d 100644
--- 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
@@ -6267,6 +6268,17 @@ __metadata:
languageName: node
linkType: hard
+"next-plausible@npm:^3.10.1":
+ version: 3.10.1
+ resolution: "next-plausible@npm:3.10.1"
+ 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: 5ff1e007fb6c4af37467143de67b41f54fc15940c3a714a0090e12551b23d03100b49870300a222ca8ea6a21edc8875a8119a1b1311b8f1ffc42221e70ac4a99
+ languageName: node
+ linkType: hard
+
"next@npm:^13.1.6":
version: 13.1.6
resolution: "next@npm:13.1.6"