From ed7a0bc41374c13e64d17a2026a61e71c69df7a3 Mon Sep 17 00:00:00 2001
From: Pablo Alayeto <55535804+Pabl0cks@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:49:51 +0200
Subject: [PATCH] Plausible setup and components/hooks links to docs (#28)
---
packages/nextjs/components/TrackedLink.tsx | 26 +++++++++++++++++
packages/nextjs/next.config.js | 4 ++-
packages/nextjs/package.json | 1 +
packages/nextjs/pages/_app.tsx | 23 ++++++++-------
packages/nextjs/pages/index.tsx | 34 +++++++++++++---------
packages/nextjs/tailwind.config.js | 12 ++++++++
yarn.lock | 12 ++++++++
7 files changed, 88 insertions(+), 24 deletions(-)
create mode 100644 packages/nextjs/components/TrackedLink.tsx
diff --git a/packages/nextjs/components/TrackedLink.tsx b/packages/nextjs/components/TrackedLink.tsx
new file mode 100644
index 0000000..13c4375
--- /dev/null
+++ 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 (
+ plausible("click", { props: { id } })}
+ >
+ {children}
+
+ );
+}
diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js
index 148d011..893b8e5 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 = {
@@ -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
index bc68040..ecc9a27 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",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
index f8800e8..54018a3 100644
--- 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 (
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index e7c6d01..0ba2811 100644
--- 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 = () => {
@@ -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.
+
+
+ Check out all the components
+
+
@@ -176,6 +180,11 @@ const Home: NextPage = () => {
Wagmi, an easy-to-use interface with typescript autocompletions for
reading from, writing to, and monitoring events emitted by your smart contracts.
+
+
+ Check out all the available hooks
+
+
@@ -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.
-
Learn More
-
+
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index ee060c4..d158e7a 100644
--- 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
index 158853b..1103e3a 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
@@ -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"