Release 0.16 (#196)

* initial refactor * fixes * test secrets extraction * updated lock * fix secret schema * updated schemas, fixed tests, skipping flow tests for now * added validator for rjsf, hook form via standard schema * removed @sinclair/typebox * remove unneeded vite dep * fix jsonv literal on Field.tsx * fix schema import path * fix schema modals * fix schema modals * fix json field form, replaced auth form * initial waku * finalize waku example * fix jsonv-ts version * fix schema updates with falsy values * fix media api to respect options' init, improve types * checking media controller test * checking media controller test * checking media controller test * clean up mediacontroller test * added cookie option `partitioned`, as well as cors `origin` to be array, option to enable `credentials` (#214) * added cookie option `partitioned`, as well as cors `origin` to be array, option to enable `credentials` * fix server test * fix data api (updated jsonv-ts) * enhance cloudflare image optimization plugin with new options and explain endpoint (#215) * feat: add ability to serve static by using dynamic imports (#197) * feat: add ability to serve static by using dynamic imports * serveStaticViaImport: make manifest optional * serveStaticViaImport: add error log * refactor/imports (#217) * refactored core and core/utils imports * refactored core and core/utils imports * refactored media imports * refactored auth imports * refactored data imports * updated package json exports, fixed mm config * fix tests * feat/deno (#219) * update bun version * fix module manager's em reference * add basic deno example * finalize * docs: fumadocs migration (#185) * feat(docs): initialize documentation structure with Fumadocs * feat(docs): remove home route and move /docs route to /route * feat(docs): add redirect to /start page * feat(docs): migrate Getting Started chapters * feat(docs): migrate Usage and Extending chapters * feat(callout): add CalloutCaution, CalloutDanger, CalloutInfo, and CalloutPositive * feat(layout): add Discord and GitHub links to documentation layout * feat(docs): add integration chapters draft * feat(docs): add modules chapters draft * refactor(mdx-components): remove unused Icon import * refactor(StackBlitz): enhance type safety by using unknown instead of any * refactor(layout): update navigation mode to 'top' in layout configuration * feat(docs): add @iconify/react package * docs(mdx-components): add Icon component to MDX components list * feat(docs): update Next.js integration guide * feat(docs): update React Router integration guide * feat(docs): update Astro integration guide * feat(docs): update Vite integration guide * fix(docs): update package manager initialization commands * feat(docs): migrate Modules chapters * chore(docs): update package.json with new devDependencies * feat(docs): migrate Integration Runtimes chapters * feat(docs): update Database usage chapter * feat(docs): restructure documentation paths * chore(docs): clean up unused imports and files in documentation * style(layout): revert navigation mode to previous state * fix(docs): routing for documentation structure * feat(openapi): add API documentation generation from OpenAPI schema * feat(docs): add icons to documentation pages * chore(dependencies): remove unused content-collections packages * fix(types): fix type error for attachFile in source.ts * feat(redirects): update root redirect destination to '/start' * feat(search): add static search functionality * chore(dependencies): update fumadocs-core and fumadocs-ui to latest versions * feat(search): add Powered by Orama link * feat(generate-openapi): add error handling for missing OpenAPI schema * feat(scripts): add OpenAPI generation to build process * feat(config): enable dynamic redirects and rewrites in development mode * feat(layout): add GitHub token support for improved API rate limits * feat(redirects): add 301 redirects for cloudflare pages * feat(docs): add Vercel redirects configuration * feat(config): enable standalone output for development environment * chore(layout): adjust layout settings * refactor(package): clean up ajv dependency versions * feat(docs): add twoslash support * refactor(layout): update DocsLayout import and navigation configuration * chore(layout): clean up layout.tsx by commenting out GithubInfo * fix(Search): add locale to search initialization * chore(package): update fumadocs and orama to latest versions * docs: add menu items descriptions * feat(layout): add GitHub URL to the layout component * feat(docs): add AutoTypeTable component to MDX components * feat(app): implement AutoTypeTable rendering for AppEvents type * docs(layout): switch callouts back to default components * fix(config): use __filename and __dirname for module paths * docs: add note about node.js 22 requirement * feat(styles): add custom color variables for light and dark themes * docs: add S3 setup instructions for media module * docs: fix typos and indentation in media module docs * docs: add local media adapter example for Node.js * docs(media): add S3/R2 URL format examples and fix typo * docs: add cross-links to initial config and seeding sections * indent numbered lists content, clarified media serve locations * fix mediacontroller tests * feat(layout): add AnimatedGridPattern component for dynamic background * style(layout): configure fancy ToC style ('clerk') * fix(AnimatedGridPattern): correct strokeDasharray type * docs: actualize docs * feat: add favicon * style(cloudflare): format code examples * feat(layout): add Github and Discord footer icons * feat(footer): add SVG social media icons for GitHub and Discord * docs: adjusted auto type table, added llm functions * added static deployment to cloudflare workers * docs: change cf redirects to proxy *.mdx instead of redirecting --------- Co-authored-by: dswbx <dennis.senn@gmx.ch> Co-authored-by: cameronapak <cameronandrewpak@gmail.com> * build: improve build script * add missing exports, fix EntityTypescript imports * media: Dropzone: add programmatic upload, additional events, loading state * schema object: disable extended defaults to allow empty config values * Feat/new docs deploy (#224) * test * try fixing pm * try fixing pm * fix docs on imports, export events correctly --------- Co-authored-by: Tim Seriakov <59409712+timseriakov@users.noreply.github.com> Co-authored-by: cameronapak <cameronandrewpak@gmail.com>
2026-03-16 04:27:21 +00:00 · 2025-08-01 15:55:59 +02:00
parent daaaae82b6
commit a298b65abf
430 changed files with 15041 additions and 12375 deletions
--- a/docs/app/[[...slug]]/page.tsx
+++ b/docs/app/[[...slug]]/page.tsx
@@ -0,0 +1,64 @@
+import { source } from "@/lib/source";
+import { DocsPage, DocsBody, DocsDescription, DocsTitle } from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+import { getMDXComponents } from "@/mdx-components";
+import { LLMCopyButton, ViewOptions } from "@/components/ai/page-actions";
+
+export default async function Page(props: {
+   params: Promise<{ slug?: string[] }>;
+}) {
+   const params = await props.params;
+   const page = source.getPage(params.slug);
+   if (!page) notFound();
+
+   const MDXContent = page.data.body;
+
+   return (
+      <DocsPage
+         toc={page.data.toc}
+         full={page.data.full}
+         tableOfContent={{
+            style: "clerk",
+         }}
+      >
+         <DocsTitle>{page.data.title}</DocsTitle>
+         <DocsDescription className="mb-0">{page.data.description}</DocsDescription>
+         <div className="flex flex-row gap-2 items-center border-b pt-2 pb-6">
+            <LLMCopyButton markdownUrl={`${page.url}.mdx`} />
+            <ViewOptions
+               markdownUrl={`${page.url}.mdx`}
+               githubUrl={`https://github.com/bknd-io/bknd/blob/dev/apps/docs/content/docs/${page.path}`}
+            />
+         </div>
+         <DocsBody>
+            <MDXContent
+               components={getMDXComponents({
+                  // this allows you to link to other pages with relative file paths
+                  a: createRelativeLink(source, page),
+               })}
+            />
+         </DocsBody>
+      </DocsPage>
+   );
+}
+
+export async function generateStaticParams() {
+   return source.generateParams();
+}
+
+export async function generateMetadata(props: {
+   params: Promise<{ slug?: string[] }>;
+}) {
+   const params = await props.params;
+   const page = source.getPage(params.slug);
+   if (!page) notFound();
+
+   return {
+      title: page.data.title,
+      description: page.data.description,
+      icons: {
+         icon: "/favicon.svg",
+      },
+   };
+}
--- a/docs/app/_components/AnimatedGridPattern.tsx
+++ b/docs/app/_components/AnimatedGridPattern.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { motion } from "motion/react";
+import {
+  ComponentPropsWithoutRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+
+import { twMerge as cn } from "tailwind-merge";
+
+export interface AnimatedGridPatternProps
+  extends ComponentPropsWithoutRef<"svg"> {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  strokeDasharray?: string | number;
+  numSquares?: number;
+  maxOpacity?: number;
+  duration?: number;
+  repeatDelay?: number;
+}
+
+export function AnimatedGridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = 0,
+  numSquares = 50,
+  className,
+  maxOpacity = 0.5,
+  duration = 4,
+  repeatDelay = 0.5,
+  ...props
+}: AnimatedGridPatternProps) {
+  const id = useId();
+  const containerRef = useRef<SVGSVGElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  const getPos = useCallback(() => {
+    return [
+      Math.floor((Math.random() * dimensions.width) / width),
+      Math.floor((Math.random() * dimensions.height) / height),
+    ];
+  }, [dimensions.width, dimensions.height, width, height]);
+
+  const generateSquares = useCallback(
+    (count: number) => {
+      return Array.from({ length: count }, (_, i) => ({
+        id: i,
+        pos: getPos(),
+      }));
+    },
+    [getPos],
+  );
+
+  const [squares, setSquares] = useState(() => generateSquares(numSquares));
+
+  const updateSquarePosition = (id: number) => {
+    setSquares((currentSquares) =>
+      currentSquares.map((sq) =>
+        sq.id === id
+          ? {
+              ...sq,
+              pos: getPos(),
+            }
+          : sq,
+      ),
+    );
+  };
+
+  useEffect(() => {
+    if (dimensions.width && dimensions.height) {
+      setSquares(generateSquares(numSquares));
+    }
+  }, [dimensions, numSquares, generateSquares]);
+
+  useEffect(() => {
+    const current = containerRef.current;
+    if (!current) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setDimensions({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+      }
+    });
+
+    resizeObserver.observe(current);
+
+    return () => {
+      resizeObserver.unobserve(current);
+    };
+  }, []);
+
+  return (
+    <svg
+      ref={containerRef}
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full",
+        className,
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path
+            d={`M.5 ${height}V.5H${width}`}
+            fill="none"
+            stroke="currentColor"
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+      <svg x={x} y={y} className="overflow-visible">
+        {squares.map(({ pos: [x, y], id }, index) => (
+          <motion.rect
+            key={`${x}-${y}-${index}`}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: maxOpacity }}
+            transition={{
+              duration,
+              repeat: 1,
+              delay: index * 0.1,
+              repeatDelay,
+              repeatType: "reverse",
+            }}
+            onAnimationComplete={() => updateSquarePosition(id)}
+            width={width - 1}
+            height={height - 1}
+            x={x * width + 1}
+            y={y * height + 1}
+            fill="currentColor"
+            strokeWidth="0"
+          />
+        ))}
+      </svg>
+    </svg>
+  );
+}
--- a/docs/app/_components/Callout/CalloutCaution.tsx
+++ b/docs/app/_components/Callout/CalloutCaution.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export function CalloutCaution({
+  title,
+  children,
+}: {
+  title?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl my-4 px-4 py-3 flex gap-3 border bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-900/15 dark:border-yellow-900 dark:text-yellow-100 [&>div>p]:m-0">
+      <div className="pt-1.5 text-yellow-500 dark:text-yellow-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="-2 -2 24 24"
+          fill="currentColor"
+        >
+          <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-13a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1m0 10a1 1 0 1 1 0-2a1 1 0 0 1 0 2" />
+        </svg>
+      </div>
+      <div>
+        {title && <span className="font-semibold">{title}</span>}
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/docs/app/_components/Callout/CalloutDanger.tsx
+++ b/docs/app/_components/Callout/CalloutDanger.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+
+export function CalloutDanger({
+  title,
+  children,
+}: {
+  title?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl my-4 px-4 py-3 flex gap-3 border bg-red-50 border-red-200 text-red-900 dark:bg-red-900/15 dark:border-red-900 dark:text-red-100 [&>div>p]:m-0">
+      <div className="pt-1.5 text-red-500 dark:text-red-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <g>
+            <path d="M16.34 9.322a1 1 0 1 0-1.364-1.463l-2.926 2.728L9.322 7.66A1 1 0 0 0 7.86 9.024l2.728 2.926l-2.927 2.728a1 1 0 1 0 1.364 1.462l2.926-2.727l2.728 2.926a1 1 0 1 0 1.462-1.363l-2.727-2.926z" />
+            <path
+              fillRule="evenodd"
+              d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12m11 9a9 9 0 1 1 0-18a9 9 0 0 1 0 18"
+              clipRule="evenodd"
+            />
+          </g>
+        </svg>
+      </div>
+      <div>
+        {title && <span className="font-semibold">{title}</span>}
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/docs/app/_components/Callout/CalloutInfo.tsx
+++ b/docs/app/_components/Callout/CalloutInfo.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export function CalloutInfo({
+  title,
+  children,
+}: {
+  title?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl my-4 px-4 py-3 flex gap-3 border bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-900/15 dark:border-blue-900 dark:text-blue-100 [&>div>p]:m-0">
+      <div className="pt-1.5 text-blue-500 dark:text-blue-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={18}
+          height={18}
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z" />
+        </svg>
+      </div>
+      <div>
+        {title && <span className="font-semibold">{title}</span>}
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/docs/app/_components/Callout/CalloutPositive.tsx
+++ b/docs/app/_components/Callout/CalloutPositive.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+export function CalloutPositive({
+  title,
+  children,
+}: {
+  title?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl my-4 px-4 py-3 flex gap-3 border bg-green-50 border-green-200 text-green-900 dark:bg-green-900/15 dark:border-green-900 dark:text-green-100 [&>div>p]:m-0">
+      <div className="pt-1.5 text-green-500 dark:text-green-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <g fill="none" fillRule="evenodd">
+            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+            <path
+              fill="currentColor"
+              d="M21.546 5.111a1.5 1.5 0 0 1 0 2.121L10.303 18.475a1.6 1.6 0 0 1-2.263 0L2.454 12.89a1.5 1.5 0 1 1 2.121-2.121l4.596 4.596L19.424 5.111a1.5 1.5 0 0 1 2.122 0"
+            />
+          </g>
+        </svg>
+      </div>
+      <div>
+        {title && <span className="font-semibold">{title}</span>}
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/docs/app/_components/Callout/index.ts
+++ b/docs/app/_components/Callout/index.ts
@@ -0,0 +1,4 @@
+export { CalloutPositive } from "./CalloutPositive";
+export { CalloutCaution } from "./CalloutCaution";
+export { CalloutDanger } from "./CalloutDanger";
+export { CalloutInfo } from "./CalloutInfo";
--- a/docs/app/_components/FooterIcons.tsx
+++ b/docs/app/_components/FooterIcons.tsx
@@ -0,0 +1,48 @@
+import { ThemeToggle } from "fumadocs-ui/components/layout/theme-toggle";
+
+export function FooterIcons() {
+  return (
+    <div className="flex justify-between items-center w-full px-2">
+      <div className="flex items-center gap-3">
+        <a
+          href="https://github.com/bknd-io/bknd"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="GitHub"
+          className="text-fd-muted-foreground hover:text-fd-accent-foreground"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-6 h-6"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+            ></path>
+          </svg>
+        </a>
+        <a
+          href="https://discord.gg/952SFk8Tb8"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Discord"
+          className="text-fd-muted-foreground hover:text-fd-accent-foreground"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-6.5 h-6.5"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3a12 12 0 0 0-.529 1.1a15.2 15.2 0 0 0-4.573 0a12 12 0 0 0-.535-1.1a16.3 16.3 0 0 0-4.129 1.3a17.4 17.4 0 0 0-2.868 11.662a15.8 15.8 0 0 0 4.963 2.521q.616-.847 1.084-1.785a10.6 10.6 0 0 1-1.706-.83q.215-.16.418-.331a11.66 11.66 0 0 0 10.118 0q.206.172.418.331q-.817.492-1.71.832a12.6 12.6 0 0 0 1.084 1.785a16.5 16.5 0 0 0 5.064-2.595a17.3 17.3 0 0 0-2.973-11.59M8.678 14.813a1.94 1.94 0 0 1-1.8-2.045a1.93 1.93 0 0 1 1.8-2.047a1.92 1.92 0 0 1 1.8 2.047a1.93 1.93 0 0 1-1.8 2.045m6.644 0a1.94 1.94 0 0 1-1.8-2.045a1.93 1.93 0 0 1 1.8-2.047a1.92 1.92 0 0 1 1.8 2.047a1.93 1.93 0 0 1-1.8 2.045"
+            ></path>
+          </svg>
+        </a>
+      </div>
+
+      <ThemeToggle className="p-0" />
+    </div>
+  );
+}
--- a/docs/app/_components/Logo.tsx
+++ b/docs/app/_components/Logo.tsx
@@ -0,0 +1,24 @@
+import Image from "next/image";
+
+export function Logo() {
+  return (
+    <>
+      <Image
+        src="/logo/bknd_logo_white.svg"
+        alt="bknd logo"
+        width={110}
+        height={24}
+        className="hidden dark:block pl-1.5"
+        priority
+      />
+      <Image
+        src="/logo/bknd_logo_black.svg"
+        alt="bknd logo"
+        width={110}
+        height={24}
+        className="block dark:hidden pl-1.5"
+        priority
+      />
+    </>
+  );
+}
--- a/docs/app/_components/Search.tsx
+++ b/docs/app/_components/Search.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { create } from "@orama/orama";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogFooter,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from "fumadocs-ui/components/dialog/search";
+import { useI18n } from "fumadocs-ui/contexts/i18n";
+
+function initOrama() {
+  return create({
+    schema: { _: "string" },
+    // https://docs.orama.com/open-source/supported-languages
+    language: "english",
+  });
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const { locale } = useI18n(); // (optional) for i18n
+  const { search, setSearch, query } = useDocsSearch({
+    type: "static",
+    initOrama,
+    locale,
+    from: "/api/search",
+  });
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+
+        <SearchDialogList items={query.data !== "empty" ? query.data : null} />
+
+        <SearchDialogFooter>
+          <div className="flex w-full">
+            <a
+              href="https://orama.com"
+              rel="noreferrer noopener"
+              className="ml-auto text-xs text-nowrap text-fd-muted-foreground"
+            >
+              Powered by Orama
+            </a>
+          </div>
+        </SearchDialogFooter>
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}
--- a/docs/app/_components/SearchByTags.tsx
+++ b/docs/app/_components/SearchByTags.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { create } from "@orama/orama";
+import { clsx } from "clsx";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogFooter,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from "fumadocs-ui/components/dialog/search";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "fumadocs-ui/components/ui/popover";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+function initOrama() {
+  return create({
+    schema: {
+      _: "string",
+      title: "string",
+      description: "string",
+      url: "string",
+      tags: "string[]",
+    },
+  });
+}
+
+const tagItems = [
+  {
+    name: "All",
+    value: undefined,
+  },
+  {
+    name: "Documentation",
+    description: "Developer documentation",
+    value: "documentation",
+  },
+  {
+    name: "Guide",
+    description: "User Guide",
+    value: "guide",
+  },
+  {
+    name: "OpenAPI",
+    description: "OpenAPI Reference",
+    value: "openapi",
+  },
+];
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const [tag, setTag] = useState<string>();
+  const [open, setOpen] = useState(false);
+
+  const { search, setSearch, query } = useDocsSearch({
+    type: "static",
+    initOrama,
+    tag,
+    from: "/api/search",
+  });
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+
+        <SearchDialogList items={query.data !== "empty" ? query.data : null} />
+
+        <SearchDialogFooter className="flex flex-row flex-wrap gap-2 items-center">
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger
+              className={buttonVariants({
+                size: "sm",
+                color: "ghost",
+                className: "-m-1.5 me-auto",
+              })}
+            >
+              <span className="text-fd-muted-foreground/80 me-2">Filter</span>
+              {tagItems.find((item) => item.value === tag)?.name ?? "All"}
+              <ChevronDown className="size-3.5 text-fd-muted-foreground" />
+            </PopoverTrigger>
+            <PopoverContent className="flex flex-col p-1 gap-1" align="start">
+              {tagItems.map((item, i) => {
+                const isSelected = item.value === tag;
+
+                return (
+                  <button
+                    key={i}
+                    onClick={() => {
+                      setTag(item.value);
+                      setOpen(false);
+                    }}
+                    className={clsx(
+                      "rounded-lg text-start px-2 py-1.5",
+                      isSelected
+                        ? "text-fd-primary bg-fd-primary/10"
+                        : "hover:text-fd-accent-foreground hover:bg-fd-accent",
+                    )}
+                  >
+                    <p className="font-medium mb-0.5">{item.name}</p>
+                    <p className="text-xs opacity-70">{item.description}</p>
+                  </button>
+                );
+              })}
+            </PopoverContent>
+          </Popover>
+          <a
+            href="https://orama.com"
+            rel="noreferrer noopener"
+            className="text-xs text-nowrap text-fd-muted-foreground"
+          >
+            Powered by Orama
+          </a>
+        </SearchDialogFooter>
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}
--- a/docs/app/_components/StackBlitz.tsx
+++ b/docs/app/_components/StackBlitz.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import * as React from "react";
+
+export const examples = {
+  adminRich: {
+    path: "github/bknd-io/bknd-examples",
+    startScript: "example-admin-rich",
+    initialPath: "/data/schema"
+  }
+};
+
+export const StackBlitz = ({
+  path,
+  ratio = 9 / 16,
+  example,
+  ...props
+}: {
+  path?: string;
+  ratio?: number;
+  example?: keyof typeof examples;
+  [key: string]: unknown;
+}) => {
+  const selected = example ? examples[example] : undefined;
+  const finalPath = path || selected?.path || "github/bknd-io/bknd-examples";
+
+  const params = new URLSearchParams({
+    ctl: "1",
+    hideExplorer: "1",
+    embed: "1",
+    view: "preview",
+    ...(selected || {}),
+    ...props
+  });
+
+  const url = new URL(
+    `https://stackblitz.com/${finalPath}?${params.toString()}`
+  );
+
+  return (
+    <>
+      <div
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          width: "100%",
+          paddingTop: `${ratio * 100}%`
+        }}
+      >
+        <iframe
+          width="100%"
+          height="100%"
+          src={url.toString()}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            border: "none"
+          }}
+        />
+      </div>
+      <div
+        style={{
+          fontSize: "80%",
+          opacity: 0.7,
+          marginTop: "0.2rem",
+          marginBottom: "1rem",
+          textAlign: "center"
+        }}
+      >
+        If you&rsquo;re having issues viewing it inline,{" "}
+        <a href={url.toString()} target="_blank" rel="noreferrer">
+          try in a new tab
+        </a>
+        .
+      </div>
+    </>
+  );
+};
--- a/docs/app/api/search/route.ts
+++ b/docs/app/api/search/route.ts
@@ -0,0 +1,5 @@
+import { source } from "@/lib/source";
+import { createFromSource } from "fumadocs-core/search/server";
+
+export const revalidate = false;
+export const { staticGET: GET } = createFromSource(source);
--- a/docs/app/global.css
+++ b/docs/app/global.css
@@ -0,0 +1,19 @@
+@import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+@import "fumadocs-openapi/css/preset.css";
+@import "fumadocs-twoslash/twoslash.css";
+
+:root {
+  --color-fd-primary: #008001;
+  --color-fd-primary-foreground: #000000;
+  --tw-prose-links: #008001;
+  --tw-prose-code: #008001;
+}
+
+.dark {
+  --color-fd-primary: #4ec9b0;
+  --color-fd-primary-foreground: #000000;
+  --tw-prose-links: #4ec9b0;
+  --tw-prose-code: #4ec9b0;
+}
--- a/docs/app/layout.config.tsx
+++ b/docs/app/layout.config.tsx
@@ -0,0 +1,17 @@
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import { Logo } from "@/app/_components/Logo";
+
+/**
+ * Shared layout configurations
+ *
+ * you can customise layouts individually from:
+ * Home Layout: app/(home)/layout.tsx
+ * Docs Layout: app/docs/layout.tsx
+ */
+export const baseOptions: BaseLayoutProps = {
+  nav: {
+    title: <Logo />,
+  },
+  // see https://fumadocs.dev/docs/ui/navigation/links
+  links: [],
+};
--- a/docs/app/layout.tsx
+++ b/docs/app/layout.tsx
@@ -0,0 +1,34 @@
+import "./global.css";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import { baseOptions } from "./layout.config";
+import { source } from "@/lib/source";
+import type { ReactNode } from "react";
+import { Provider } from "./provider";
+import { AnimatedGridPattern } from "./_components/AnimatedGridPattern";
+import { FooterIcons } from "./_components/FooterIcons";
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="relative bg-background">
+        <div className="absolute top-0 inset-x-0 h-[300px] -z-10 pointer-events-none [mask-image:linear-gradient(to_bottom,black,transparent)]">
+          <AnimatedGridPattern className="h-full w-full opacity-15 dark:opacity-10 text-[var(--color-fd-primary)] dark:text-[var(--color-fd-primary)]" />
+        </div>
+
+        <Provider>
+          <DocsLayout
+            tree={source.pageTree}
+            nav={{ ...baseOptions.nav }}
+            themeSwitch={{
+              enabled: true,
+              component: <FooterIcons />,
+              mode: "light-dark",
+            }}
+          >
+            {children}
+          </DocsLayout>
+        </Provider>
+      </body>
+    </html>
+  );
+}
--- a/docs/app/llms-full.txt/route.ts
+++ b/docs/app/llms-full.txt/route.ts
@@ -0,0 +1,12 @@
+import { source } from "@/lib/source";
+import { getLLMText } from "@/lib/get-llm-text";
+
+// cached forever
+export const revalidate = false;
+
+export async function GET() {
+   const scan = source.getPages().map(getLLMText);
+   const scanned = await Promise.all(scan);
+
+   return new Response(scanned.join("\n\n"));
+}
--- a/docs/app/llms.mdx/[[...slug]]/route.ts
+++ b/docs/app/llms.mdx/[[...slug]]/route.ts
@@ -0,0 +1,18 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { getLLMText } from "@/lib/get-llm-text";
+import { source } from "@/lib/source";
+import { notFound } from "next/navigation";
+
+export const revalidate = false;
+
+export async function GET(_req: NextRequest, { params }: { params: Promise<{ slug?: string[] }> }) {
+   const { slug } = await params;
+   const page = source.getPage(slug);
+   if (!page) notFound();
+
+   return new NextResponse(await getLLMText(page));
+}
+
+export function generateStaticParams() {
+   return source.generateParams();
+}
--- a/docs/app/provider.tsx
+++ b/docs/app/provider.tsx
@@ -0,0 +1,10 @@
+"use client";
+import { RootProvider } from "fumadocs-ui/provider";
+import Search from "./_components/Search";
+import type { ReactNode } from "react";
+
+export function Provider({ children }: { children: ReactNode }) {
+  return (
+    <RootProvider search={{ SearchDialog: Search }}>{children}</RootProvider>
+  );
+}