Skip to content

Commit 7833156

Browse files
morekidmorekid
authored
feat: differentiate live/deployed layouts, restyle (#53)
* add new assets * add styled-components and sass * add new components * add key attr to nav items for later use * add effect to retrieve site key * button: add variants * RLForm: invert content position * globals: use sass and update styles * update layout and pages with new comps and styles
1 parent bdde6b2 commit 7833156

32 files changed

+1024
-262
lines changed

‎app/attack/page.tsx

+43-18
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,39 @@
1+
import VisitDashboard from "@/components/compositions/VisitDashboard";
2+
import WhatNext from "@/components/compositions/WhatNext";
3+
import useSiteKey from "@/components/effects/useSiteKey";
4+
import Divider from "@/components/elements/Divider";
15
import type { Metadata } from "next";
26
import Link from "next/link";
37

8+
import styles from "@/components/elements/PageShared.module.scss";
9+
410
export const metadata: Metadata = {
511
title: "Arcjet attack protection",
612
description:
713
"Arcjet Shield detects suspicious behavior, such as SQL injection and cross-site scripting attacks.",
814
};
915

1016
export default function IndexPage() {
17+
const { siteKey } = useSiteKey();
18+
1119
return (
12-
<section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
13-
<div className="flex max-w-[980px] flex-col items-start gap-2">
20+
<section className={styles.Content}>
21+
<div className={styles.Section}>
1422
<h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
1523
Arcjet attack protection example
1624
</h1>
17-
<p className="max-w-[700px]">
25+
<p className="max-w-[700px] text-lg">
1826
This page is protected by{" "}
1927
<Link
2028
href="https://docs.arcjet.com/shield/concepts"
2129
className="hover:underline font-bold decoration-1 underline-offset-2"
2230
>
2331
Arcjet Shield
2432
</Link>
25-
. Once a certain suspicion threshold is reached, subsequent requests
33+
.
34+
</p>
35+
<p className="max-w-[700px] text-lg text-secondary-foreground">
36+
Once a certain suspicion threshold is reached, subsequent requests
2637
from that client are blocked for a period of time. Shield detects{" "}
2738
<Link
2839
href={
@@ -35,20 +46,34 @@ export default function IndexPage() {
3546
, such as SQL injection and cross-site scripting attacks.
3647
</p>
3748
</div>
38-
<h2 className="text-xl font-bold">Try it</h2>
39-
<p>Simulate an attack using curl:</p>
40-
<pre className="p-4">
41-
curl -v -H &quot;x-arcjet-suspicious: true&quot;
42-
https://example.arcjet.com/attack/test
43-
</pre>
44-
<p className="max-w-[700px]">
45-
After the 5th request, your IP will be blocked for 15 minutes.
46-
Suspicious requests must meet a threshold before they are blocked to
47-
avoid false positives.
48-
</p>
49-
<p className="max-w-[700px]">
50-
Shield can also be installed in middleware to protect your entire site.
51-
</p>
49+
50+
<Divider />
51+
52+
<div className={styles.Section}>
53+
<h2 className="text-xl font-bold">Try it</h2>
54+
<p className="text-secondary-foreground">
55+
Simulate an attack using <code>curl</code>:
56+
</p>
57+
<pre className="p-4">
58+
curl -v -H &quot;x-arcjet-suspicious: true&quot;
59+
https://example.arcjet.com/attack/test
60+
</pre>
61+
<p className="max-w-[700px] text-secondary-foreground">
62+
After the 5th request, your IP will be blocked for 15 minutes.
63+
Suspicious requests must meet a threshold before they are blocked to
64+
avoid false positives.
65+
</p>
66+
<p className="max-w-[700px] text-secondary-foreground">
67+
Shield can also be installed in middleware to protect your entire
68+
site.
69+
</p>
70+
71+
{siteKey && <VisitDashboard />}
72+
</div>
73+
74+
<Divider />
75+
76+
<WhatNext deployed={siteKey != null} />
5277
</section>
5378
);
5479
}

‎app/bots/page.tsx

+35-14
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
1+
import VisitDashboard from "@/components/compositions/VisitDashboard";
2+
import WhatNext from "@/components/compositions/WhatNext";
3+
import useSiteKey from "@/components/effects/useSiteKey";
4+
import Divider from "@/components/elements/Divider";
15
import type { Metadata } from "next";
26
import Link from "next/link";
37

8+
import styles from "@/components/elements/PageShared.module.scss";
9+
410
export const metadata: Metadata = {
511
title: "Arcjet bot protection example",
612
description:
713
"An example of Arcjet's bot protection configured to block automated clients.",
814
};
915

1016
export default function IndexPage() {
17+
const { siteKey } = useSiteKey();
18+
1119
return (
12-
<section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
13-
<div className="flex max-w-[980px] flex-col items-start gap-2">
20+
<section className={styles.Content}>
21+
<div className={styles.Section}>
1422
<h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
1523
Arcjet bot protection example
1624
</h1>
17-
<p className="max-w-[700px]">
25+
<p className="max-w-[700px] text-lg">
1826
This page is protected by{" "}
1927
<Link
2028
href="https://docs.arcjet.com/bot-protection/concepts"
@@ -25,17 +33,30 @@ export default function IndexPage() {
2533
configured to block automated clients.
2634
</p>
2735
</div>
28-
<h2 className="text-xl font-bold">Try it</h2>
29-
<p>
30-
Make a request using <code>curl</code> (which is considered an automated
31-
client):
32-
</p>
33-
<pre className="p-4">curl -v https://example.arcjet.com/bots/test</pre>
34-
<p>Your IP will be blocked for 60 seconds.</p>
35-
<p className="max-w-[700px]">
36-
Bot protection can also be installed in middleware to protect your
37-
entire site.
38-
</p>
36+
37+
<Divider />
38+
39+
<div className={styles.Section}>
40+
<h2 className="text-xl font-bold">Try it</h2>
41+
<p className="text-secondary-foreground">
42+
Make a request using <code>curl</code>, which is considered an
43+
automated client:
44+
</p>
45+
<pre className="p-4">curl -v https://example.arcjet.com/bots/test</pre>
46+
<p className="text-secondary-foreground">
47+
Your IP will be blocked for 60 seconds.
48+
</p>
49+
<p className="max-w-[700px] text-secondary-foreground">
50+
Bot protection can also be installed in middleware to protect your
51+
entire site.
52+
</p>
53+
54+
{siteKey && <VisitDashboard />}
55+
</div>
56+
57+
<Divider />
58+
59+
<WhatNext deployed={siteKey != null} />
3960
</section>
4061
);
4162
}

‎app/layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { SiteHeader } from "@/components/site-header";
1+
import { SiteHeader } from "@/components/SiteHeader";
22
import { ThemeProvider } from "@/components/theme-provider";
33
import { siteConfig } from "@/config/site";
44
import { fontSans } from "@/lib/fonts";
55
import { cn } from "@/lib/utils";
6-
import "@/styles/globals.css";
6+
import "@/styles/globals.scss";
77
import type { Viewport } from "next";
88
import { Metadata } from "next";
99

‎app/page.tsx

+80-76
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,91 @@
1+
import WhatNext from "@/components/compositions/WhatNext";
2+
import useSiteKey from "@/components/effects/useSiteKey";
3+
import Divider from "@/components/elements/Divider";
14
import { buttonVariants } from "@/components/ui/button";
25
import Link from "next/link";
36

7+
import styles from "@/components/elements/PageShared.module.scss";
8+
49
export default function IndexPage() {
10+
const { siteKey } = useSiteKey();
11+
512
return (
6-
<section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
7-
<div className="flex max-w-[980px] flex-col items-start gap-2">
8-
<h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
9-
Arcjet example app
10-
</h1>
11-
<p className="max-w-[700px]">
12-
<Link
13-
href="https://arcjet.com"
14-
target="_blank"
15-
className="hover:underline font-bold decoration-1 underline-offset-2"
16-
>
17-
Arcjet
18-
</Link>{" "}
19-
helps developers protect their apps in just a few lines of code.
20-
Implement rate limiting, bot protection, email verification & defend
21-
against common attacks.
22-
</p>
23-
<p className="max-w-[700px]">
24-
This application shows of the key features of Arcjet. The code is{" "}
25-
<Link
26-
href="https://github.com/arcjet/arcjet-js-example"
27-
target="_blank"
28-
rel="noreferrer"
29-
className="hover:underline font-bold decoration-1 underline-offset-2"
30-
>
31-
on GitHub
32-
</Link>
33-
.
34-
</p>
35-
</div>
36-
<h2 className="text-xl font-bold">Examples</h2>
37-
<div className="flex gap-4">
38-
<Link href="/signup" className={buttonVariants({ variant: "default" })}>
39-
Signup form protection
40-
</Link>
41-
<Link href="/bots" className={buttonVariants({ variant: "default" })}>
42-
Bot protection
43-
</Link>
44-
<Link
45-
href="/rate-limiting"
46-
className={buttonVariants({ variant: "default" })}
47-
>
48-
Rate limiting
49-
</Link>
50-
<Link href="/attack" className={buttonVariants({ variant: "default" })}>
51-
Attack protection
52-
</Link>
13+
<section className={styles.Content}>
14+
<div className={styles.Section}>
15+
<div className="flex max-w-[980px] flex-col items-start gap-6">
16+
<p className="max-w-[700px] text-lg">
17+
<Link
18+
href="https://arcjet.com"
19+
target="_blank"
20+
className="hover:underline font-bold decoration-1 underline-offset-2"
21+
>
22+
Arcjet
23+
</Link>{" "}
24+
helps developers protect their apps in just a few lines of code.
25+
Implement rate limiting, bot protection, email verification & defend
26+
against common attacks.
27+
</p>
28+
<p className="max-w-[700px] text-secondary-foreground">
29+
This application shows of the key features of Arcjet. The code is{" "}
30+
<Link
31+
href="https://github.com/arcjet/arcjet-js-example"
32+
target="_blank"
33+
rel="noreferrer"
34+
className="hover:underline font-bold decoration-1 underline-offset-2"
35+
>
36+
on GitHub
37+
</Link>
38+
.
39+
</p>
40+
</div>
41+
42+
<div className="flex max-w-[980px] flex-col items-start gap-6 pt-8">
43+
<h2 className="text-xl font-bold">Examples</h2>
44+
<div className="flex gap-4">
45+
<Link
46+
href="/signup"
47+
className={buttonVariants({ variant: "default" })}
48+
>
49+
Signup form protection
50+
</Link>
51+
<Link
52+
href="/bots"
53+
className={buttonVariants({ variant: "default" })}
54+
>
55+
Bot protection
56+
</Link>
57+
<Link
58+
href="/rate-limiting"
59+
className={buttonVariants({ variant: "default" })}
60+
>
61+
Rate limiting
62+
</Link>
63+
<Link
64+
href="/attack"
65+
className={buttonVariants({ variant: "default" })}
66+
>
67+
Attack protection
68+
</Link>
69+
</div>
70+
</div>
5371
</div>
5472

55-
<h2 className="text-xl font-bold">Deploy it now</h2>
56-
<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Farcjet%2Farcjet-js-example&project-name=arcjet-example&repository-name=arcjet-example&developer-id=oac_1GEcKBuKBilVnjToj1QUwdb8&demo-title=Arcjet%20Example%20&demo-description=Example%20rate%20limiting%2C%20bot%20protection%2C%20email%20verification%20%26%20form%20protection.&demo-url=https%3A%2F%2Fgithub.com%2Farcjet%2Farcjet-js-example&demo-image=https%3A%2F%2Fapp.arcjet.com%2Fimg%2Fexample-apps%2Fvercel%2Fdemo-image.jpg&integration-ids=oac_1GEcKBuKBilVnjToj1QUwdb8&external-id=arcjet-js-example">
57-
<img src="https://vercel.com/button" alt="Deploy with Vercel" />
58-
</a>
73+
{!siteKey && (
74+
<>
75+
<Divider />
5976

60-
<h2 className="text-xl font-bold">What next?</h2>
61-
<div className="flex gap-4">
62-
<Link
63-
href="https://app.arcjet.com"
64-
target="_blank"
65-
className={buttonVariants({ variant: "outline" })}
66-
>
67-
Sign up for Arcjet
68-
</Link>
69-
<Link
70-
href="https://docs.arcjet.com"
71-
target="_blank"
72-
className={buttonVariants({ variant: "outline" })}
73-
>
74-
Arcjet docs
75-
</Link>
76-
<Link
77-
href="https://discord.gg/TPra6jqZDC"
78-
target="_blank"
79-
rel="noreferrer"
80-
className={buttonVariants({ variant: "outline" })}
81-
>
82-
Join our Discord
83-
</Link>
84-
</div>
77+
<div className={styles.Section}>
78+
<h2 className="text-xl font-bold">Deploy it now</h2>
79+
<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Farcjet%2Farcjet-js-example&project-name=arcjet-example&repository-name=arcjet-example&developer-id=oac_1GEcKBuKBilVnjToj1QUwdb8&demo-title=Arcjet%20Example%20&demo-description=Example%20rate%20limiting%2C%20bot%20protection%2C%20email%20verification%20%26%20form%20protection.&demo-url=https%3A%2F%2Fgithub.com%2Farcjet%2Farcjet-js-example&demo-image=https%3A%2F%2Fapp.arcjet.com%2Fimg%2Fexample-apps%2Fvercel%2Fdemo-image.jpg&integration-ids=oac_1GEcKBuKBilVnjToj1QUwdb8&external-id=arcjet-js-example">
80+
<img src="https://vercel.com/button" alt="Deploy with Vercel" />
81+
</a>
82+
</div>
83+
</>
84+
)}
85+
86+
<Divider />
87+
88+
<WhatNext deployed={siteKey != null} />
8589
</section>
8690
);
8791
}

0 commit comments

Comments
 (0)