feat: apply special classes on regex match in pages

README.md

@@ -56,36 +56,38 @@ Open [http://localhost:3000](http://localhost:3000) and you're in.
 ## Project Structure
 
 ```
-├── 📄 .eslintrc.json
-├── 📄 .gitignore
+├── 📁 .github
+│   └── 📁 workflows
+│       └── 📄 linter.yaml
 ├── 📁 .vscode
 │   └── 📄 settings.json
-├── 📄 CONTRIBUTING.md
-├── 📄 LICENSE
-├── 📄 README.md
 ├── 📁 app
 │   ├── 📄 globals.css
 │   ├── 📄 layout.tsx
+│   ├── 📄 not-found.tsx
 │   ├── 📄 page.tsx
 │   ├── 📁 pages
-│   │   ├── 📄 [slug]
+│   │   ├── 📁 [slug]
+│   │   │   ├── 📄 PageClient.tsx
+│   │   │   ├── 📁 [subslug]
+│   │   │   │   └── 📄 page.tsx
+│   │   │   └── 📄 page.tsx
 │   │   ├── 📄 layout.tsx
 │   │   └── 📄 page.tsx
+│   ├── 📁 partners
+│   │   └── 📄 page.tsx
 │   ├── 📁 resources
 │   │   └── 📄 page.tsx
 │   └── 📁 rules
 │       └── 📄 page.tsx
-├── 📄 components.json
 ├── 📁 components
 │   ├── 📄 AnimatedText.tsx
 │   ├── 📄 Badge.tsx
+│   ├── 📄 BorderGlow.tsx
 │   ├── 📄 BorderGlowButton.tsx
 │   ├── 📄 Footer.tsx
-│   ├── 📄 GlowButton.tsx
-│   ├── 📄 Navbar.tsx
-│   ├── 📄 Section.tsx
-│   ├── 📄 ShinyText.tsx
-│   ├── 📄 TargetCursor.tsx
+│   ├── 📄 FuzzyText.tsx
+│           ...
 │   ├── 📁 home
 │   │   ├── 📄 BelongSection.tsx
 │   │   ├── 📄 CTASection.tsx
@@ -100,9 +102,9 @@ Open [http://localhost:3000](http://localhost:3000) and you're in.
 │       ├── 📄 aspect-ratio.tsx
 │       ├── 📄 avatar.tsx
 │       ├── 📄 badge.tsx
-│       ├── 📄 breadcrumb.tsx
-│       ├── 📄 button.tsx
-│       ├── ...
+                ...
+├── 📁 content
+│   └── 📄 pages.ts
 ├── 📁 hooks
 │   └── 📄 use-toast.ts
 ├── 📁 lib
@@ -111,10 +113,16 @@ Open [http://localhost:3000](http://localhost:3000) and you're in.
 │   ├── 📄 redirects.config.ts
 │   ├── 📄 staticdata.config.ts
 │   └── 📄 utils.ts
+├── 📄 .eslintrc.json
+├── 📄 .gitignore
+├── 📄 components.json
+├── 📄 CONTRIBUTING.md
+├── 📄 LICENSE
 ├── 📄 next.config.js
 ├── 📄 package-lock.json
 ├── 📄 package.json
 ├── 📄 postcss.config.js
+├── 📄 README.md
 ├── 📄 tailwind.config.ts
 └── 📄 tsconfig.json
 ```
@@ -145,7 +153,7 @@ npm run format     # Run Prettier
 
 ## Community
 
-- **Discord** - [devhub.vercel.app/invite](https://devhub.vercel.app/invite)
+- **Discord** - [devhub.vercel.app/join](https://devhub.vercel.app/join)
 - **GitHub Org** - [github.com/open-devhub](https://github.com/open-devhub)
 - **Email** - open-devhub@outlook.com
 

app/api/link-preview/route.ts

@@ -0,0 +1,143 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+
+function extractMeta(html: string, property: string): string | null {
+  const patterns = [
+    new RegExp(
+      `<meta[^>]+(?:property|name)=["']${property}["'][^>]+content=["']([^"']*)["']`,
+      "i",
+    ),
+    new RegExp(
+      `<meta[^>]+content=["']([^"']*)["'][^>]+(?:property|name)=["']${property}["']`,
+      "i",
+    ),
+  ];
+  for (const pattern of patterns) {
+    const match = html.match(pattern);
+    if (match) return match[1];
+  }
+  return null;
+}
+
+function extractTitleTag(html: string): string | null {
+  const match = html.match(/<title[^>]*>([^<]+)<\/title>/i);
+  return match ? match[1] : null;
+}
+
+function decodeHtmlEntities(str: string): string {
+  return str
+    .replace(/&amp;/g, "&")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">");
+}
+
+const PRIVATE_HOSTNAME_PATTERNS = [
+  /^localhost$/i,
+  /^0\.0\.0\.0$/,
+  /^127\./,
+  /^10\./,
+  /^172\.(1[6-9]|2[0-9]|3[0-1])\./,
+  /^192\.168\./,
+  /^169\.254\./,
+  /^::1$/,
+  /^fc00:/i,
+  /^fe80:/i,
+];
+
+function isSafeUrl(candidate: string): boolean {
+  let parsed: URL;
+  try {
+    parsed = new URL(candidate);
+  } catch {
+    return false;
+  }
+  if (!["http:", "https:"].includes(parsed.protocol)) {
+    return false;
+  }
+  const hostname = parsed.hostname.toLowerCase();
+  return !PRIVATE_HOSTNAME_PATTERNS.some((pattern) => pattern.test(hostname));
+}
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const url = searchParams.get("url");
+
+  if (!url) {
+    return NextResponse.json({ error: "missing url" }, { status: 400 });
+  }
+
+  if (!isSafeUrl(url)) {
+    return NextResponse.json(
+      { error: "invalid or disallowed url" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5000);
+
+    const res = await fetch(url, {
+      signal: controller.signal,
+      redirect: "error",
+      headers: {
+        "User-Agent":
+          "Mozilla/5.0 (compatible; LinkPreviewBot/1.0; +https://example.com/bot)",
+      },
+    });
+
+    clearTimeout(timeout);
+
+    if (!res.ok) {
+      return NextResponse.json({ error: "failed to fetch" }, { status: 502 });
+    }
+
+    const contentLength = res.headers.get("content-length");
+    if (contentLength && parseInt(contentLength, 10) > 1024 * 1024) {
+      return NextResponse.json(
+        { error: "response too large" },
+        { status: 502 },
+      );
+    }
+
+    const html = await res.text();
+    if (html.length > 1024 * 1024) {
+      return NextResponse.json(
+        { error: "response too large" },
+        { status: 502 },
+      );
+    }
+
+    const rawTitle = extractMeta(html, "og:title") || extractTitleTag(html);
+    const rawDescription =
+      extractMeta(html, "og:description") || extractMeta(html, "description");
+    const rawImage = extractMeta(html, "og:image");
+
+    let image: string | null = null;
+    if (rawImage) {
+      try {
+        const resolvedImage = new URL(rawImage, url).toString();
+        image = isSafeUrl(resolvedImage) ? resolvedImage : null;
+      } catch {
+        image = null;
+      }
+    }
+
+    return NextResponse.json(
+      {
+        title: rawTitle ? decodeHtmlEntities(rawTitle).trim() : null,
+        description: rawDescription
+          ? decodeHtmlEntities(rawDescription).trim()
+          : null,
+        image,
+        url,
+      },
+      { headers: { "Cache-Control": "public, max-age=3600" } },
+    );
+  } catch {
+    return NextResponse.json({ error: "failed to fetch" }, { status: 502 });
+  }
+}

app/globals.css

@@ -108,6 +108,10 @@ body {
   font-family: var(--font-pixelify), "Pixelify Sans", monospace;
 }
 
+.font-mono {
+  font-family: monospace;
+}
+
 /* Mono font */
 .font-mono-custom {
   font-family: var(--font-geist-mono), "Geist Mono", monospace;

app/layout.tsx

@@ -1,5 +1,5 @@
-import Footer from "@/components/Footer";
-import Navbar from "@/components/Navbar";
+import Footer from "@/components/site/Footer";
+import Navbar from "@/components/site/Navbar";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono, Pixelify_Sans } from "next/font/google";
 import "./globals.css";

app/not-found.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import FuzzyText from "@/components/FuzzyText";
+import FuzzyText from "@/components/bits/FuzzyText";
 import { fadeInUp } from "@/lib/animations";
 import { motion } from "framer-motion";
 import { ArrowLeft, ArrowRight } from "lucide-react";

app/page.tsx

@@ -1,10 +1,10 @@
+import TargetCursor from "@/components/bits/TargetCursor";
 import BelongSection from "@/components/home/BelongSection";
 import CTASection from "@/components/home/CTASection";
 import FeaturesSection from "@/components/home/FeaturesSection";
 import HeroSection from "@/components/home/HeroSection";
 import ShowcaseSection from "@/components/home/ShowcaseSection";
 import StatsSection from "@/components/home/StatsSection";
-import TargetCursor from "@/components/TargetCursor";
 
 export default function Home() {
   return (