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 <[email protected]>

* 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 <[email protected]>

Author: qw-in

README.md

@@ -70,7 +70,6 @@ server](https://arcjet.com/discord).
 
 - Auth: [Auth.js](https://authjs.dev/)
 - App: [Next.js](https://nextjs.org/)
-- UI: [shadcn/ui](https://ui.shadcn.com/)
 - Form handling: [React Hook Form](https://react-hook-form.com/) (see also [our
   full form protection
   example](https://github.com/arcjet/example-nextjs-form))

app/attack/page.module.css

@@ -1,8 +1,5 @@
 import VisitDashboard from "@/components/compositions/VisitDashboard";
-import WhatNext from "@/components/compositions/WhatNext";
-import Divider from "@/components/elements/Divider";
-import sharedStyles from "@/components/elements/PageShared.module.scss";
-import styles from "./page.module.css";
+import { WhatNext } from "@/components/compositions/WhatNext";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import Link from "next/link";
@@ -22,69 +19,66 @@ export default async function IndexPage() {
     : "https";
 
   return (
-    <section className={sharedStyles.Content}>
-      <div className={sharedStyles.Section}>
-        <h1 className={styles.title}>Arcjet attack protection example</h1>
-        <p className={styles.description}>
+    <main className="page">
+      <div className="section">
+        <h1 className="heading-primary">Arcjet attack protection example</h1>
+        <p className="typography-primary">
           This page is protected by{" "}
-          <Link
-            href="https://docs.arcjet.com/shield/concepts"
-            className={styles.link}
-          >
+          <Link href="https://docs.arcjet.com/shield/concepts" className="link">
             Arcjet Shield
           </Link>
           .
         </p>
-        <p className={styles.subdescription}>
+        <p className="typography-secondary">
           Once a certain suspicion threshold is reached, subsequent requests
           from that client are blocked for a period of time. Shield detects{" "}
           <Link
             href={
               "https://docs.arcjet.com/shield/concepts#which-attacks-will-arcjet-shield-block"
             }
-            className={styles.link}
+            className="link"
           >
             suspicious behavior
           </Link>
           , such as SQL injection and cross-site scripting attacks.
         </p>
       </div>
 
-      <Divider />
+      <hr className="divider" />
 
-      <div className={sharedStyles.Section}>
-        <h2 className={styles.sectionHeading}>Try it</h2>
-        <p className={styles.secondaryText}>
+      <div className="section">
+        <h2 className="heading-secondary">Try it</h2>
+        <p className="typography-secondary">
           Simulate an attack using <code>curl</code>:
         </p>
-        <pre className={styles.codeExample}>
+        <pre className="codeblock">
           curl -v -H &quot;x-arcjet-suspicious: true&quot; {protocol}://
           {hostname}/attack/test
         </pre>
-        <p className={styles.explanation}>
+        <p className="typography-secondary">
           After the 5th request, your IP will be blocked for 15 minutes.
           Suspicious requests must meet a threshold before they are blocked to
           avoid false positives.
         </p>
-        <p className={styles.explanation}>
+        <p className="typography-secondary">
           Shield can also be installed in middleware to protect your entire
           site.
         </p>
 
         {siteKey && <VisitDashboard />}
       </div>
 
-      <Divider />
+      <hr className="divider" />
 
-      <div className={sharedStyles.Section}>
-        <h2 className={styles.sectionHeading}>See the code</h2>
-        <p className={styles.secondaryText}>
+      <div className="section">
+        <h2 className="heading-secondary">See the code</h2>
+        <p className="typography-secondary">
           The{" "}
           <Link
             href="https://github.com/arcjet/example-nextjs/blob/main/app/attack/test/route.ts"
             target="_blank"
             rel="noreferrer"
-            className={styles.link}
+            className="link"
           >
             API route
           </Link>{" "}
@@ -93,17 +87,17 @@ export default async function IndexPage() {
             href="https://github.com/arcjet/example-nextjs/blob/main/lib/arcjet.ts"
             target="_blank"
             rel="noreferrer"
-            className={styles.link}
+            className="link"
           >
             centralized Arcjet client
           </Link>{" "}
           which sets base rules.
         </p>
       </div>
 
-      <Divider />
+      <hr className="divider" />
 
       <WhatNext deployed={siteKey != null} />
-    </section>
+    </main>
   );
 }

app/attack/page.tsx

@@ -1,13 +1,9 @@
 import VisitDashboard from "@/components/compositions/VisitDashboard";
-import WhatNext from "@/components/compositions/WhatNext";
-import Divider from "@/components/elements/Divider";
+import { WhatNext } from "@/components/compositions/WhatNext";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import Link from "next/link";
 
-import sharedStyles from "@/components/elements/PageShared.module.scss";
-import styles from "./page.module.css";
-
 export const metadata: Metadata = {
   title: "Bot protection example",
   description: "An example of Arcjet's bot protection for Next.js.",
@@ -22,54 +18,54 @@ export default async function IndexPage() {
     : "https";
 
   return (
-    <section className={sharedStyles.Content}>
-      <div className={sharedStyles.Section}>
-        <h1 className={styles.title}>Arcjet bot protection example</h1>
-        <p className={styles.description}>
+    <main className="page">
+      <div className="section">
+        <h1 className="heading-primary">Arcjet bot protection example</h1>
+        <p className="typography-primary">
           This page is protected by{" "}
           <Link
             href="https://docs.arcjet.com/bot-protection/concepts"
-            className={styles.link}
+            className="link"
           >
             Arcjet&apos;s bot protection
           </Link>{" "}
           configured to block automated clients.
         </p>
       </div>
 
-      <Divider />
+      <hr className="divider" />
 
-      <div className={sharedStyles.Section}>
-        <h2 className={styles.sectionHeading}>Try it</h2>
-        <p className={styles.secondaryText}>
+      <div className="section">
+        <h2 className="heading-secondary">Try it</h2>
+        <p className="typography-secondary">
           Make a request using <code>curl</code>, which is considered an
           automated client:
         </p>
-        <pre className={styles.codeExample}>
+        <pre className="codeblock">
           curl -v {protocol}://{hostname}/bots/test
         </pre>
-        <p className={styles.secondaryText}>
+        <p className="typography-secondary">
           Your IP will be blocked for 60 seconds.
         </p>
-        <p className={styles.explanation}>
+        <p className="typography-secondary">
           Bot protection can also be installed in middleware to protect your
           entire site.
         </p>
 
         {siteKey && <VisitDashboard />}
       </div>
 
-      <Divider />
+      <hr className="divider" />
 
-      <div className={sharedStyles.Section}>
-        <h2 className={styles.sectionHeading}>See the code</h2>
-        <p className={styles.secondaryText}>
+      <div className="section">
+        <h2 className="heading-secondary">See the code</h2>
+        <p className="typography-secondary">
           The{" "}
           <Link
             href="https://github.com/arcjet/example-nextjs/blob/main/app/bots/test/route.ts"
             target="_blank"
             rel="noreferrer"
-            className={styles.link}
+            className="link"
           >
             API route
           </Link>{" "}
@@ -78,17 +74,17 @@ export default async function IndexPage() {
             href="https://github.com/arcjet/example-nextjs/blob/main/lib/arcjet.ts"
             target="_blank"
             rel="noreferrer"
-            className={styles.link}
+            className="link"
           >
             centralized Arcjet client
           </Link>{" "}
           which sets base rules.
         </p>
       </div>
 
-      <Divider />
+      <hr className="divider" />
 
       <WhatNext deployed={siteKey != null} />
-    </section>
+    </main>
   );
 }

app/bots/page.module.css

@@ -49,7 +49,7 @@ export async function GET(req: NextRequest) {
   // If the decision is denied, return an appropriate response. You can inspect
   // the decision results to customize the response.
   if (decision.isDenied() && decision.reason.isBot()) {
-    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    return NextResponse.json({ error: "Bots are forbidden" }, { status: 403 });
   } else if (decision.isDenied() && decision.reason.isRateLimit()) {
     return NextResponse.json({ error: "Too many requests" }, { status: 429 });
   } else if (decision.isErrored()) {