Skip to content

Commit 8133021

Browse files
steven-teysteven-tey
committed
update readme + examples
1 parent b624bfe commit 8133021

File tree

18 files changed

+4944
-15
lines changed

18 files changed

+4944
-15
lines changed

‎apps/nextjs-reverse-proxy/.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎apps/nextjs-reverse-proxy/.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎apps/nextjs-reverse-proxy/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Dub Analytics with Client-side Click Tracking + Reverse Proxy
2+
3+
This example shows you how you can use the `@dub/analytics` package with:
4+
5+
- [Client-side click tracking](https://dub.co/docs/conversions/clicks/introduction#client-side-click-tracking) for tracking clicks with query parameters in lieu of short links
6+
- A reverse proxy to avoid getting blocked by ad blockers
7+
8+
```ts app/layout.tsx
9+
import { Analytics as DubAnalytics } from '@dub/analytics/react';
10+
11+
export default function RootLayout({
12+
children,
13+
}: Readonly<{
14+
children: React.ReactNode;
15+
}>) {
16+
return (
17+
<html lang="en">
18+
<body>{children}</body>
19+
<DubAnalytics apiHost="/_proxy/dub" shortDomain="go.company.com" />
20+
</html>
21+
);
22+
}
23+
```

‎apps/nextjs-reverse-proxy/app/favicon.ico‎

25.3 KB
Binary file not shown.

‎apps/nextjs-reverse-proxy/app/globals.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:root {
2+
--max-width: 1100px;
3+
--border-radius: 12px;
4+
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
5+
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
6+
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
7+
8+
--foreground-rgb: 0, 0, 0;
9+
--background-start-rgb: 214, 219, 220;
10+
--background-end-rgb: 255, 255, 255;
11+
12+
--primary-glow: conic-gradient(
13+
from 180deg at 50% 50%,
14+
#16abff33 0deg,
15+
#0885ff33 55deg,
16+
#54d6ff33 120deg,
17+
#0071ff33 160deg,
18+
transparent 360deg
19+
);
20+
--secondary-glow: radial-gradient(
21+
rgba(255, 255, 255, 1),
22+
rgba(255, 255, 255, 0)
23+
);
24+
25+
--tile-start-rgb: 239, 245, 249;
26+
--tile-end-rgb: 228, 232, 233;
27+
--tile-border: conic-gradient(
28+
#00000080,
29+
#00000040,
30+
#00000030,
31+
#00000020,
32+
#00000010,
33+
#00000010,
34+
#00000080
35+
);
36+
37+
--callout-rgb: 238, 240, 241;
38+
--callout-border-rgb: 172, 175, 176;
39+
--card-rgb: 180, 185, 188;
40+
--card-border-rgb: 131, 134, 135;
41+
}
42+
43+
@media (prefers-color-scheme: dark) {
44+
:root {
45+
--foreground-rgb: 255, 255, 255;
46+
--background-start-rgb: 0, 0, 0;
47+
--background-end-rgb: 0, 0, 0;
48+
49+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
50+
--secondary-glow: linear-gradient(
51+
to bottom right,
52+
rgba(1, 65, 255, 0),
53+
rgba(1, 65, 255, 0),
54+
rgba(1, 65, 255, 0.3)
55+
);
56+
57+
--tile-start-rgb: 2, 13, 46;
58+
--tile-end-rgb: 2, 5, 19;
59+
--tile-border: conic-gradient(
60+
#ffffff80,
61+
#ffffff40,
62+
#ffffff30,
63+
#ffffff20,
64+
#ffffff10,
65+
#ffffff10,
66+
#ffffff80
67+
);
68+
69+
--callout-rgb: 20, 20, 20;
70+
--callout-border-rgb: 108, 108, 108;
71+
--card-rgb: 100, 100, 100;
72+
--card-border-rgb: 200, 200, 200;
73+
}
74+
}
75+
76+
* {
77+
box-sizing: border-box;
78+
padding: 0;
79+
margin: 0;
80+
}
81+
82+
html,
83+
body {
84+
max-width: 100vw;
85+
overflow-x: hidden;
86+
}
87+
88+
body {
89+
color: rgb(var(--foreground-rgb));
90+
background: linear-gradient(
91+
to bottom,
92+
transparent,
93+
rgb(var(--background-end-rgb))
94+
)
95+
rgb(var(--background-start-rgb));
96+
}
97+
98+
a {
99+
color: inherit;
100+
text-decoration: none;
101+
}
102+
103+
@media (prefers-color-scheme: dark) {
104+
html {
105+
color-scheme: dark;
106+
}
107+
}

‎apps/nextjs-reverse-proxy/app/layout.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { Metadata } from 'next';
2+
import { Inter } from 'next/font/google';
3+
import { Analytics as DubAnalytics } from '@dub/analytics/react';
4+
import './globals.css';
5+
6+
const inter = Inter({ subsets: ['latin'] });
7+
8+
export const metadata: Metadata = {
9+
title: 'Create Next App',
10+
description: 'Generated by create next app',
11+
};
12+
13+
export default function RootLayout({
14+
children,
15+
}: Readonly<{
16+
children: React.ReactNode;
17+
}>) {
18+
return (
19+
<html lang="en">
20+
<body className={inter.className}>{children}</body>
21+
<DubAnalytics apiHost="/_proxy/dub" shortDomain="go.company.com" />
22+
</html>
23+
);
24+
}

0 commit comments

Comments
 (0)