Skip to content

Commit 1aa7a56

Browse files
michaelwschultzmichaelwschultz
committed
Update umami external link tracking
1 parent 045194f commit 1aa7a56

File tree

4 files changed

+140
-120
lines changed

4 files changed

+140
-120
lines changed

‎app/Main.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,13 @@ export default function Home({ posts, heroFontStyles }) {
6464
<span className="block pt-4">
6565
The game was designed and built in 8 days and lots of coffee. This
6666
was also the first ever game published by{" "}
67-
<Link href="https://ratrace.studio">RatRace.studio</Link>
67+
<Link
68+
href="https://ratrace.studio"
69+
data-umami-event="outbound-link-click"
70+
data-umami-event-url="https://ratrace.studio"
71+
>
72+
RatRace.studio
73+
</Link>
6874
</span>
6975
</ProjectCard>
7076
<ProjectCard
@@ -83,7 +89,11 @@ export default function Home({ posts, heroFontStyles }) {
8389
</ProjectCard>
8490
<ProjectCard title="Time Between The Stars" buttonText="Coming Soon">
8591
Space simulation game influenced by the short story{" "}
86-
<Link href="https://www.amazon.com/Slow-Between-Stars-Reaches-collection-ebook/dp/B0C4QX2FSF">
92+
<Link
93+
href="https://www.amazon.com/Slow-Between-Stars-Reaches-collection-ebook/dp/B0C4QX2FSF"
94+
data-umami-event="outbound-link-click"
95+
data-umami-event-url="https://www.amazon.com/Slow-Between-Stars-Reaches-collection-ebook/dp/B0C4QX2FSF"
96+
>
8797
Slow Time Between The Stars by John Scalzi
8898
</Link>
8999
.
@@ -94,14 +104,16 @@ export default function Home({ posts, heroFontStyles }) {
94104
This will be the first full-length game from{" "}
95105
<Link
96106
href="https://ratrace.studio"
97-
data-umami-event={"Clicked link https://ratrace.studio"}
107+
data-umami-event="outbound-link-click"
108+
data-umami-event-url="https://ratrace.studio"
98109
>
99110
RatRace.studio
100111
</Link>
101112
, a collaboration with{" "}
102113
<Link
103114
href="https://luketns.com"
104-
data-umami-event={"Clicked link https://luketns.com"}
115+
data-umami-event="outbound-link-click"
116+
data-umami-event-url="https://luketns.com"
105117
>
106118
Luke Schultz
107119
</Link>

‎app/games/page.tsx‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import gamesData from '@/data/gamesData'
2-
import Card from '@/components/Card'
3-
import { genPageMetadata } from 'app/seo'
1+
import gamesData from "@/data/gamesData";
2+
import Card from "@/components/Card";
3+
import { genPageMetadata } from "app/seo";
44

5-
export const metadata = genPageMetadata({ title: 'Games' })
5+
export const metadata = genPageMetadata({ title: "Games" });
66

77
export default function Games() {
8-
return (
9-
<div className="divide-y divide-gray-200 dark:divide-gray-700">
10-
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
11-
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
12-
Games
13-
</h1>
14-
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
15-
Games I've built with Rat Race Studio
16-
</p>
17-
</div>
18-
<div className="container py-12">
19-
<div className="-m-4 flex flex-wrap">
20-
{gamesData.map((d) => (
21-
<Card
22-
key={d.title}
23-
title={d.title}
24-
description={d.description}
25-
imgSrc={d.imgSrc}
26-
href={d.href}
27-
buttonText={d.buttonText}
28-
/>
29-
))}
30-
</div>
31-
</div>
32-
</div>
33-
)
8+
return (
9+
<div className="divide-y divide-gray-200 dark:divide-gray-700">
10+
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
11+
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
12+
Games
13+
</h1>
14+
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
15+
Games I've built with Rat Race Studio
16+
</p>
17+
</div>
18+
<div className="container py-12">
19+
<div className="-m-4 flex flex-wrap">
20+
{gamesData.map((d) => (
21+
<Card
22+
key={d.title}
23+
title={d.title}
24+
description={d.description}
25+
imgSrc={d.imgSrc}
26+
href={d.href}
27+
buttonText={d.buttonText}
28+
/>
29+
))}
30+
</div>
31+
</div>
32+
</div>
33+
);
3434
}

‎app/work/page.tsx‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import workData from '@/data/workData'
2-
import Card from '@/components/Card'
3-
import { genPageMetadata } from 'app/seo'
1+
import workData from "@/data/workData";
2+
import Card from "@/components/Card";
3+
import { genPageMetadata } from "app/seo";
44

5-
export const metadata = genPageMetadata({ title: 'Work' })
5+
export const metadata = genPageMetadata({ title: "Work" });
66

77
export default function Work() {
8-
return (
9-
<div className="divide-y divide-gray-200 dark:divide-gray-700">
10-
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
11-
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
12-
Work
13-
</h1>
14-
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
15-
Projects I've worked on over the years
16-
</p>
17-
</div>
18-
<div className="container py-12">
19-
<div className="-m-4 flex flex-wrap">
20-
{workData.map((d) => (
21-
<Card
22-
key={d.title}
23-
title={d.title}
24-
description={d.description}
25-
imgSrc={d.imgSrc}
26-
href={d.href}
27-
buttonText={d.buttonText}
28-
/>
29-
))}
30-
</div>
31-
</div>
32-
</div>
33-
)
8+
return (
9+
<div className="divide-y divide-gray-200 dark:divide-gray-700">
10+
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
11+
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
12+
Work
13+
</h1>
14+
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
15+
Projects I've worked on over the years
16+
</p>
17+
</div>
18+
<div className="container py-12">
19+
<div className="-m-4 flex flex-wrap">
20+
{workData.map((d) => (
21+
<Card
22+
key={d.title}
23+
title={d.title}
24+
description={d.description}
25+
imgSrc={d.imgSrc}
26+
href={d.href}
27+
buttonText={d.buttonText}
28+
/>
29+
))}
30+
</div>
31+
</div>
32+
</div>
33+
);
3434
}

‎components/Card.tsx‎

Lines changed: 64 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,67 @@
1-
import Image from './Image'
2-
import Link from './Link'
1+
import Image from "./Image";
2+
import Link from "./Link";
33

44
const Card = ({ title, description, imgSrc, href, buttonText }) => (
5-
<div className="md max-w-[544px] p-4 md:w-1/2">
6-
<div
7-
className={`${
8-
imgSrc && 'h-full'
9-
} overflow-hidden rounded-md border-2 border-gray-200 border-opacity-60 dark:border-gray-700`}
10-
>
11-
{imgSrc &&
12-
(href ? (
13-
<Link href={href} aria-label={`Link to ${title}`} data-umami-event={`Clicked ${title}`}>
14-
<Image
15-
alt={title}
16-
src={imgSrc}
17-
className="h-112 object-cover object-center"
18-
width={630}
19-
height={500}
20-
/>
21-
</Link>
22-
) : (
23-
<Image
24-
alt={title}
25-
src={imgSrc}
26-
className="h-112 object-cover object-center"
27-
width={630}
28-
height={306}
29-
/>
30-
))}
31-
<div className="p-6">
32-
<h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
33-
{href ? (
34-
<Link href={href} aria-label={`Link to ${title}`} data-umami-event={`Clicked ${title}`}>
35-
{title}
36-
</Link>
37-
) : (
38-
title
39-
)}
40-
</h2>
41-
<p className="prose mb-3 max-w-none whitespace-pre-wrap text-gray-500 dark:text-gray-400">
42-
{description}
43-
</p>
44-
{href && (
45-
<Link
46-
href={href}
47-
className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
48-
aria-label={`Link to ${title}`}
49-
data-umami-event={`Clicked ${title}`}
50-
>
51-
{buttonText ?? 'Learn more'} &rarr;
52-
</Link>
53-
)}
54-
</div>
55-
</div>
56-
</div>
57-
)
5+
<div className="md max-w-[544px] p-4 md:w-1/2">
6+
<div
7+
className={`${
8+
imgSrc && "h-full"
9+
} overflow-hidden rounded-md border-2 border-gray-200 border-opacity-60 dark:border-gray-700`}
10+
>
11+
{imgSrc &&
12+
(href ? (
13+
<Link
14+
href={href}
15+
aria-label={`Link to ${title}`}
16+
data-umami-event={`Clicked ${title}`}
17+
>
18+
<Image
19+
alt={title}
20+
src={imgSrc}
21+
className="h-112 object-cover object-center"
22+
width={630}
23+
height={500}
24+
/>
25+
</Link>
26+
) : (
27+
<Image
28+
alt={title}
29+
src={imgSrc}
30+
className="h-112 object-cover object-center"
31+
width={630}
32+
height={306}
33+
/>
34+
))}
35+
<div className="p-6">
36+
<h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
37+
{href ? (
38+
<Link
39+
href={href}
40+
aria-label={`Link to ${title}`}
41+
data-umami-event={`Clicked ${title}`}
42+
>
43+
{title}
44+
</Link>
45+
) : (
46+
title
47+
)}
48+
</h2>
49+
<p className="prose mb-3 max-w-none whitespace-pre-wrap text-gray-500 dark:text-gray-400">
50+
{description}
51+
</p>
52+
{href && (
53+
<Link
54+
href={href}
55+
className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
56+
aria-label={`Link to ${title}`}
57+
data-umami-event={`Clicked ${title}`}
58+
>
59+
{buttonText ?? "Learn more"} &rarr;
60+
</Link>
61+
)}
62+
</div>
63+
</div>
64+
</div>
65+
);
5866

59-
export default Card
67+
export default Card;

0 commit comments

Comments
 (0)