fix(website): fixed alignment issue when callout component has no title

Author: Rel1cx

.pkgs/configs/package.json

@@ -24,7 +24,7 @@
     "eslint-plugin-de-morgan": "^1.2.1",
     "eslint-plugin-function": "^0.0.21",
     "eslint-plugin-jsdoc": "^50.6.9",
-    "eslint-plugin-perfectionist": "^4.12.0",
+    "eslint-plugin-perfectionist": "^4.12.1",
     "eslint-plugin-regexp": "^2.7.0",
     "eslint-plugin-unicorn": "^58.0.0",
     "typescript-eslint": "^8.31.0"

.pkgs/eslint-plugin-local/package.json

@@ -34,7 +34,7 @@
     "@typescript-eslint/utils": "^8.31.0",
     "eslint-plugin-de-morgan": "^1.2.1",
     "eslint-plugin-jsdoc": "^50.6.9",
-    "eslint-plugin-perfectionist": "^4.12.0",
+    "eslint-plugin-perfectionist": "^4.12.1",
     "eslint-plugin-regexp": "^2.7.0",
     "eslint-plugin-unicorn": "^58.0.0",
     "string-ts": "^2.2.1",

apps/website/app/docs/[[...slug]]/page.tsx

@@ -1,3 +1,4 @@
+import { Callout } from "#/components/ui/Callout";
 import { source } from "#/lib/source";
 import { Popup, PopupContent, PopupTrigger } from "fumadocs-twoslash/ui";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
@@ -8,6 +9,7 @@ import { notFound } from "next/navigation";
 
 const mdxComponents = {
   ...defaultMdxComponents,
+  Callout,
   Popup,
   PopupContent,
   PopupTrigger,

apps/website/app/overrides.css

@@ -1,3 +1,14 @@
+.fd-callout .min-w-0.flex-1 {
+  display: flex;
+  flex-flow: column;
+  gap: calc(var(--spacing) * 2);
+}
+
+.fd-callout .min-w-0.flex-1>* {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 [aria-roledescription="flowchart-v2"] span.nodeLabel {
   filter: brightness(0.5);
 }

apps/website/components/ui/Callout.tsx

@@ -0,0 +1,14 @@
+import type { Pretty } from "@eslint-react/eff";
+import type React from "react";
+import { cn } from "#/lib/cn";
+import { Callout as FDCallout } from "fumadocs-ui/components/callout";
+
+export type CalloutProps = Pretty<Parameters<typeof FDCallout>[0]> & { ref?: React.RefObject<HTMLDivElement | null> };
+
+export function Callout({ children, className, ...props }: CalloutProps) {
+  return (
+    <FDCallout className={cn("fd-callout", className)} {...props}>
+      {children}
+    </FDCallout>
+  );
+}

apps/website/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@chevrotain/regexp-to-ast": "^11.0.3",
+    "@eslint-react/eff": "workspace:*",
     "bsky-react-post": "^0.1.7",
     "clsx": "^2.1.1",
     "fumadocs-core": "15.2.9",
@@ -51,7 +52,7 @@
     "eslint": "^9.25.1",
     "eslint-plugin-de-morgan": "^1.2.1",
     "eslint-plugin-import-x": "^4.10.6",
-    "eslint-plugin-perfectionist": "^4.12.0",
+    "eslint-plugin-perfectionist": "^4.12.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-unicorn": "^58.0.0",

package.json

@@ -69,7 +69,7 @@
     "cspell": "^8.19.2",
     "dedent": "^1.5.3",
     "dprint": "^0.49.1",
-    "esbuild": "^0.25.2",
+    "esbuild": "^0.25.3",
     "eslint": "^9.25.1",
     "eslint-config-flat-gitignore": "^2.1.0",
     "eslint-plugin-vitest": "^0.5.4",
@@ -112,7 +112,7 @@
       "@types/react": "^19.1.2",
       "@types/react-dom": "^19.1.2",
       "cross-spawn": "^7.0.6",
-      "esbuild": "^0.25.2",
+      "esbuild": "^0.25.3",
       "lucide-react": "^0.503.0",
       "next": "^15.3.1",
       "react": "^19.1.0",