feat(docs): add redirect-only 404 page for docs

Signed-off-by: Akella Srinivas <alsrinivas.346@gmail.com>

Author: Srinu346

docusaurus.config.js

@@ -17,11 +17,7 @@ module.exports = {
   favicon: "img/favicon.png",
   organizationName: "keploy", // Usually your GitHub org/user name.
   projectName: "docs", // Usually your repo name.
-  markdown: {
-    hooks: {
-      onBrokenMarkdownLinks: "warn",
-    },
-  },
+  onBrokenMarkdownLinks: "warn",
   plugins: [
     function preloadFontPlugin() {
       return {

src/components/Community.js

@@ -1,7 +1,13 @@
 import React from "react";
-import { FaYoutube, FaGithub, FaSlack, FaRss, FaArrowRight } from "react-icons/fa";
-import { FaXTwitter } from "react-icons/fa6";
-import { HiOutlineNewspaper } from "react-icons/hi2";
+import {
+  FaYoutube,
+  FaGithub,
+  FaSlack,
+  FaRss,
+  FaArrowRight,
+} from "react-icons/fa";
+import {FaXTwitter} from "react-icons/fa6";
+import {HiOutlineNewspaper} from "react-icons/hi2";
 
 const communityLinks = [
   {
@@ -66,19 +72,20 @@ export const Community = () => {
           Connect with the Keploy community
         </h2>
         <p className="mx-auto max-w-2xl text-base text-gray-600 dark:text-gray-400">
-          Get help, learn best practices, and stay updated—through the channels you already use.
+          Get help, learn best practices, and stay updated—through the channels
+          you already use.
         </p>
       </div>
 
       {/* Community Links Grid */}
       <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {communityLinks.map(({ title, desc, href, Icon, iconColor, bgColor }) => (
+        {communityLinks.map(({title, desc, href, Icon, iconColor, bgColor}) => (
           <a
             key={title}
             href={href}
             target="_blank"
             rel="noopener noreferrer"
-            className="group flex items-start gap-4 rounded-xl border border-gray-200 bg-white p-4 transition-all duration-200 hover:border-orange-300 hover:shadow-md hover:no-underline dark:border-gray-700 dark:bg-gray-800/50 dark:hover:border-orange-500/50"
+            className="group flex items-start gap-4 rounded-xl border border-gray-200 bg-white p-4 transition-all duration-200 hover:border-orange-300 hover:no-underline hover:shadow-md dark:border-gray-700 dark:bg-gray-800/50 dark:hover:border-orange-500/50"
           >
             <div
               className={`flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl ${bgColor}`}
@@ -108,7 +115,8 @@ export const Community = () => {
               Want to see a demo of Keploy Enterprise?
             </h3>
             <p className="text-sm text-gray-600 dark:text-gray-400">
-              Share your use-case, workflow—and we'll help with any resources you need.
+              Share your use-case, workflow—and we'll help with any resources
+              you need.
             </p>
           </div>
           <a

src/components/DocHeaderChips.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 /**
  * DocHeaderChips - Minimal metadata strip for doc pages
@@ -17,26 +17,26 @@ import React from 'react';
 
 const tierStyles = {
   oss: {
-    label: 'Open Source',
-    color: '#059669',
-    bg: 'rgba(16, 185, 129, 0.08)',
-    dotColor: '#10b981',
+    label: "Open Source",
+    color: "#059669",
+    bg: "rgba(16, 185, 129, 0.08)",
+    dotColor: "#10b981",
   },
   enterprise: {
-    label: 'Enterprise',
-    color: '#7c3aed',
-    bg: 'rgba(139, 92, 246, 0.08)',
-    dotColor: '#8b5cf6',
+    label: "Enterprise",
+    color: "#7c3aed",
+    bg: "rgba(139, 92, 246, 0.08)",
+    dotColor: "#8b5cf6",
   },
   cloud: {
-    label: 'Cloud',
-    color: '#2563eb',
-    bg: 'rgba(59, 130, 246, 0.08)',
-    dotColor: '#3b82f6',
+    label: "Cloud",
+    color: "#2563eb",
+    bg: "rgba(59, 130, 246, 0.08)",
+    dotColor: "#3b82f6",
   },
 };
 
-export default function DocHeaderChips({ tier, version, availability = [] }) {
+export default function DocHeaderChips({tier, version, availability = []}) {
   const hasTier = tier && tierStyles[tier.toLowerCase()];
   const hasVersion = version && version.trim();
   const hasAvailability = availability && availability.length > 0;
@@ -49,19 +49,20 @@ export default function DocHeaderChips({ tier, version, availability = [] }) {
   return (
     <div className="doc-meta">
       {tierConfig && (
-        <span className="doc-meta__tier" style={{ color: tierConfig.color }}>
-          <span className="doc-meta__dot" style={{ background: tierConfig.dotColor }} />
+        <span className="doc-meta__tier" style={{color: tierConfig.color}}>
+          <span
+            className="doc-meta__dot"
+            style={{background: tierConfig.dotColor}}
+          />
           {tierConfig.label}
         </span>
       )}
       {hasVersion && (
-        <span className="doc-meta__version">
-          v{version.replace(/^v/i, '')}
-        </span>
+        <span className="doc-meta__version">v{version.replace(/^v/i, "")}</span>
       )}
       {hasAvailability && (
         <span className="doc-meta__availability">
-          {availability.join(' · ')}
+          {availability.join(" · ")}
         </span>
       )}
       <style>{`
@@ -115,4 +116,3 @@ export default function DocHeaderChips({ tier, version, availability = [] }) {
     </div>
   );
 }
-

src/components/EcosystemSupport.js

@@ -30,7 +30,7 @@ export const EcosystemSupport = () => {
       {/* Callout Banners */}
       <div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:grid-cols-12">
         {/* OSS Sponsorship Banner */}
-        <div className="group relative overflow-hidden rounded-2xl border border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50 p-6 md:col-span-12 dark:border-amber-900/50 dark:from-gray-900 dark:to-amber-950/20">
+        <div className="group relative overflow-hidden rounded-2xl border border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50 p-6 dark:border-amber-900/50 dark:from-gray-900 dark:to-amber-950/20 md:col-span-12">
           {/* Decorative star pattern */}
           <div className="absolute -right-4 -top-4 text-amber-200/50 dark:text-amber-700/20">
             <FaStar className="h-24 w-24" />
@@ -46,30 +46,41 @@ export const EcosystemSupport = () => {
               Keploy Open Source Sponsorship
             </h3>
             <p className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-              Selected projects receive <strong>free access</strong> to Keploy’s suite of tools—starting with our <strong>AI-based test generator</strong>—while helping us showcase how AI-powered test generation works in real-world open source development.
+              Selected projects receive <strong>free access</strong> to Keploy’s
+              suite of tools—starting with our{" "}
+              <strong>AI-based test generator</strong>—while helping us showcase
+              how AI-powered test generation works in real-world open source
+              development.
             </p>
 
             <div className="mb-4 rounded-xl border border-amber-200/70 bg-white/70 p-4 text-sm text-gray-700 dark:border-amber-900/40 dark:bg-gray-900/30 dark:text-gray-300">
-              <div className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-300">Requirements</div>
+              <div className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-300">
+                Requirements
+              </div>
               <ul className="list-disc space-y-1 pl-5">
                 <li>Public open source repository</li>
                 <li>Valid OSS license (MIT or equivalent)</li>
                 <li>
-                  Consent to being featured in Keploy’s OSS showcase (marketing, website features, and links to public PRs using Keploy)
+                  Consent to being featured in Keploy’s OSS showcase (marketing,
+                  website features, and links to public PRs using Keploy)
                 </li>
               </ul>
             </div>
 
             <div className="mb-5 rounded-xl border border-amber-200/70 bg-white/70 p-4 text-sm text-gray-700 dark:border-amber-900/40 dark:bg-gray-900/30 dark:text-gray-300">
-              <div className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-300">Selection process</div>
+              <div className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-300">
+                Selection process
+              </div>
               <p className="mb-0">
-                This is an application-based program. Submitting an application does not guarantee acceptance. We review applications on a rolling basis and will reach out to selected projects directly.
+                This is an application-based program. Submitting an application
+                does not guarantee acceptance. We review applications on a
+                rolling basis and will reach out to selected projects directly.
               </p>
             </div>
 
             <Link
               to="https://forms.gle/example-sponsorship"
-              className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-amber-500/25 transition-all duration-200 hover:from-amber-600 hover:to-orange-600 hover:text-white hover:shadow-amber-500/40 hover:no-underline"
+              className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-amber-500/25 transition-all duration-200 hover:from-amber-600 hover:to-orange-600 hover:text-white hover:no-underline hover:shadow-amber-500/40"
             >
               Apply for sponsorship
             </Link>
@@ -80,7 +91,7 @@ export const EcosystemSupport = () => {
         </div>
 
         {/* Share Your Story Banner */}
-        <div className="group relative h-full overflow-hidden rounded-2xl border border-purple-200 bg-gradient-to-br from-purple-50 to-indigo-50 p-6 md:col-span-6 dark:border-purple-900/50 dark:from-gray-900 dark:to-purple-950/20">
+        <div className="group relative h-full overflow-hidden rounded-2xl border border-purple-200 bg-gradient-to-br from-purple-50 to-indigo-50 p-6 dark:border-purple-900/50 dark:from-gray-900 dark:to-purple-950/20 md:col-span-6">
           {/* Decorative pen pattern */}
           <div className="absolute -right-4 -top-4 text-purple-200/50 dark:text-purple-700/20">
             <FaPen className="h-24 w-24" />
@@ -117,7 +128,7 @@ export const EcosystemSupport = () => {
         </div>
 
         {/* GSoC Banner */}
-        <div className="group relative h-full overflow-hidden rounded-2xl border border-blue-200 bg-gradient-to-br from-blue-50 to-cyan-50 p-6 md:col-span-6 dark:border-blue-900/50 dark:from-gray-900 dark:to-blue-950/20">
+        <div className="group relative h-full overflow-hidden rounded-2xl border border-blue-200 bg-gradient-to-br from-blue-50 to-cyan-50 p-6 dark:border-blue-900/50 dark:from-gray-900 dark:to-blue-950/20 md:col-span-6">
           {/* Decorative cap pattern */}
           <div className="absolute -right-4 -top-4 text-blue-200/50 dark:text-blue-700/20">
             <FaGoogle className="h-24 w-24" />
@@ -137,7 +148,8 @@ export const EcosystemSupport = () => {
               Contribute and get sponsored.
             </p>
             <p className="mb-5 text-sm text-gray-600 dark:text-gray-400">
-              Keploy participates in GSoC. Explore this year’s project ideas and contribute to core testing workflows.
+              Keploy participates in GSoC. Explore this year’s project ideas and
+              contribute to core testing workflows.
             </p>
 
             {/* CTA */}
@@ -156,4 +168,3 @@ export const EcosystemSupport = () => {
 };
 
 export default EcosystemSupport;
-