Skip to content

Commit 5eb9e6a

Browse files
qw-inmorekid
qw-in
and
morekid
authored
chore(css): Move to vanilla CSS (#316)
* chore: Switch to vanilla css * chore(css): Tweaks, fixes, and screenshot updates * fix: Fix GitHub repo link * Update package.json Co-authored-by: Daniele De Matteis <632296+morekid@users.noreply.github.com> * chore(styles): Simplify class names further * chore: trunk fmt * fix: Hamburger menu popover now auto-closes * fix: Update border color in dark mode * feat: Introduce NavLink component. * chore: Remove console log * chore: Add anchor positioning polyfill * chore: Fix overflowing button * chore: Consistent codeblock styling * chore: Wrap "want to know more" * chore: fmt * chore: Align header items closer to baseline * chore: Update playwright screenshots * chore: Wrap "want to know more" in block * chore: Update playwright screenshots * Morekid/visual adjustments (#327) * chore: Drop unused packages and files via knip * chore: Regenerate screenshots * chore: Remove shadcn from readme * chore: Next patched the lockfile --------- Co-authored-by: Daniele De Matteis <632296+morekid@users.noreply.github.com>
1 parent ec4470a commit 5eb9e6a

File tree

118 files changed

+1444
-4220
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+1444
-4220
lines changed

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ server](https://arcjet.com/discord).
7070

7171
- Auth: [Auth.js](https://authjs.dev/)
7272
- App: [Next.js](https://nextjs.org/)
73-
- UI: [shadcn/ui](https://ui.shadcn.com/)
7473
- Form handling: [React Hook Form](https://react-hook-form.com/) (see also [our
7574
full form protection
7675
example](https://github.com/arcjet/example-nextjs-form))

‎app/attack/page.module.css‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎app/attack/page.tsx‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import VisitDashboard from "@/components/compositions/VisitDashboard";
2-
import WhatNext from "@/components/compositions/WhatNext";
3-
import Divider from "@/components/elements/Divider";
4-
import sharedStyles from "@/components/elements/PageShared.module.scss";
5-
import styles from "./page.module.css";
2+
import { WhatNext } from "@/components/compositions/WhatNext";
63
import type { Metadata } from "next";
74
import { headers } from "next/headers";
85
import Link from "next/link";
@@ -22,69 +19,66 @@ export default async function IndexPage() {
2219
: "https";
2320

2421
return (
25-
<section className={sharedStyles.Content}>
26-
<div className={sharedStyles.Section}>
27-
<h1 className={styles.title}>Arcjet attack protection example</h1>
28-
<p className={styles.description}>
22+
<main className="page">
23+
<div className="section">
24+
<h1 className="heading-primary">Arcjet attack protection example</h1>
25+
<p className="typography-primary">
2926
This page is protected by{" "}
30-
<Link
31-
href="https://docs.arcjet.com/shield/concepts"
32-
className={styles.link}
33-
>
27+
<Link href="https://docs.arcjet.com/shield/concepts" className="link">
3428
Arcjet Shield
3529
</Link>
3630
.
3731
</p>
38-
<p className={styles.subdescription}>
32+
<p className="typography-secondary">
3933
Once a certain suspicion threshold is reached, subsequent requests
4034
from that client are blocked for a period of time. Shield detects{" "}
4135
<Link
4236
href={
4337
"https://docs.arcjet.com/shield/concepts#which-attacks-will-arcjet-shield-block"
4438
}
45-
className={styles.link}
39+
className="link"
4640
>
4741
suspicious behavior
4842
</Link>
4943
, such as SQL injection and cross-site scripting attacks.
5044
</p>
5145
</div>
5246

53-
<Divider />
47+
<hr className="divider" />
5448

55-
<div className={sharedStyles.Section}>
56-
<h2 className={styles.sectionHeading}>Try it</h2>
57-
<p className={styles.secondaryText}>
49+
<div className="section">
50+
<h2 className="heading-secondary">Try it</h2>
51+
<p className="typography-secondary">
5852
Simulate an attack using <code>curl</code>:
5953
</p>
60-
<pre className={styles.codeExample}>
54+
<pre className="codeblock">
6155
curl -v -H &quot;x-arcjet-suspicious: true&quot; {protocol}://
6256
{hostname}/attack/test
6357
</pre>
64-
<p className={styles.explanation}>
58+
<p className="typography-secondary">
6559
After the 5th request, your IP will be blocked for 15 minutes.
6660
Suspicious requests must meet a threshold before they are blocked to
6761
avoid false positives.
6862
</p>
69-
<p className={styles.explanation}>
63+
<p className="typography-secondary">
7064
Shield can also be installed in middleware to protect your entire
7165
site.
7266
</p>
7367

7468
{siteKey && <VisitDashboard />}
7569
</div>
7670

77-
<Divider />
71+
<hr className="divider" />
7872

79-
<div className={sharedStyles.Section}>
80-
<h2 className={styles.sectionHeading}>See the code</h2>
81-
<p className={styles.secondaryText}>
73+
<div className="section">
74+
<h2 className="heading-secondary">See the code</h2>
75+
<p className="typography-secondary">
8276
The{" "}
8377
<Link
8478
href="https://github.com/arcjet/example-nextjs/blob/main/app/attack/test/route.ts"
8579
target="_blank"
8680
rel="noreferrer"
87-
className={styles.link}
81+
className="link"
8882
>
8983
API route
9084
</Link>{" "}
@@ -93,17 +87,17 @@ export default async function IndexPage() {
9387
href="https://github.com/arcjet/example-nextjs/blob/main/lib/arcjet.ts"
9488
target="_blank"
9589
rel="noreferrer"
96-
className={styles.link}
90+
className="link"
9791
>
9892
centralized Arcjet client
9993
</Link>{" "}
10094
which sets base rules.
10195
</p>
10296
</div>
10397

104-
<Divider />
98+
<hr className="divider" />
10599

106100
<WhatNext deployed={siteKey != null} />
107-
</section>
101+
</main>
108102
);
109103
}

‎app/bots/page.module.css‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎app/bots/page.tsx‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import VisitDashboard from "@/components/compositions/VisitDashboard";
2-
import WhatNext from "@/components/compositions/WhatNext";
3-
import Divider from "@/components/elements/Divider";
2+
import { WhatNext } from "@/components/compositions/WhatNext";
43
import type { Metadata } from "next";
54
import { headers } from "next/headers";
65
import Link from "next/link";
76

8-
import sharedStyles from "@/components/elements/PageShared.module.scss";
9-
import styles from "./page.module.css";
10-
117
export const metadata: Metadata = {
128
title: "Bot protection example",
139
description: "An example of Arcjet's bot protection for Next.js.",
@@ -22,54 +18,54 @@ export default async function IndexPage() {
2218
: "https";
2319

2420
return (
25-
<section className={sharedStyles.Content}>
26-
<div className={sharedStyles.Section}>
27-
<h1 className={styles.title}>Arcjet bot protection example</h1>
28-
<p className={styles.description}>
21+
<main className="page">
22+
<div className="section">
23+
<h1 className="heading-primary">Arcjet bot protection example</h1>
24+
<p className="typography-primary">
2925
This page is protected by{" "}
3026
<Link
3127
href="https://docs.arcjet.com/bot-protection/concepts"
32-
className={styles.link}
28+
className="link"
3329
>
3430
Arcjet&apos;s bot protection
3531
</Link>{" "}
3632
configured to block automated clients.
3733
</p>
3834
</div>
3935

40-
<Divider />
36+
<hr className="divider" />
4137

42-
<div className={sharedStyles.Section}>
43-
<h2 className={styles.sectionHeading}>Try it</h2>
44-
<p className={styles.secondaryText}>
38+
<div className="section">
39+
<h2 className="heading-secondary">Try it</h2>
40+
<p className="typography-secondary">
4541
Make a request using <code>curl</code>, which is considered an
4642
automated client:
4743
</p>
48-
<pre className={styles.codeExample}>
44+
<pre className="codeblock">
4945
curl -v {protocol}://{hostname}/bots/test
5046
</pre>
51-
<p className={styles.secondaryText}>
47+
<p className="typography-secondary">
5248
Your IP will be blocked for 60 seconds.
5349
</p>
54-
<p className={styles.explanation}>
50+
<p className="typography-secondary">
5551
Bot protection can also be installed in middleware to protect your
5652
entire site.
5753
</p>
5854

5955
{siteKey && <VisitDashboard />}
6056
</div>
6157

62-
<Divider />
58+
<hr className="divider" />
6359

64-
<div className={sharedStyles.Section}>
65-
<h2 className={styles.sectionHeading}>See the code</h2>
66-
<p className={styles.secondaryText}>
60+
<div className="section">
61+
<h2 className="heading-secondary">See the code</h2>
62+
<p className="typography-secondary">
6763
The{" "}
6864
<Link
6965
href="https://github.com/arcjet/example-nextjs/blob/main/app/bots/test/route.ts"
7066
target="_blank"
7167
rel="noreferrer"
72-
className={styles.link}
68+
className="link"
7369
>
7470
API route
7571
</Link>{" "}
@@ -78,17 +74,17 @@ export default async function IndexPage() {
7874
href="https://github.com/arcjet/example-nextjs/blob/main/lib/arcjet.ts"
7975
target="_blank"
8076
rel="noreferrer"
81-
className={styles.link}
77+
className="link"
8278
>
8379
centralized Arcjet client
8480
</Link>{" "}
8581
which sets base rules.
8682
</p>
8783
</div>
8884

89-
<Divider />
85+
<hr className="divider" />
9086

9187
<WhatNext deployed={siteKey != null} />
92-
</section>
88+
</main>
9389
);
9490
}

‎app/bots/test/route.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export async function GET(req: NextRequest) {
4949
// If the decision is denied, return an appropriate response. You can inspect
5050
// the decision results to customize the response.
5151
if (decision.isDenied() && decision.reason.isBot()) {
52-
return NextResponse.json({ error: "Forbidden" }, { status: 403 });
52+
return NextResponse.json({ error: "Bots are forbidden" }, { status: 403 });
5353
} else if (decision.isDenied() && decision.reason.isRateLimit()) {
5454
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
5555
} else if (decision.isErrored()) {

‎app/layout.module.css‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)