Add Pagefind to docs (#801)

* Add Pagefind to docs

* Improve callout styles and allow to have no icon

Author: dan-lee

docs/pages/components/callout.mdx

@@ -18,6 +18,7 @@ type CalloutProps = {
   children: ReactNode;
   title?: string;
   className?: string;
+  icon?: boolean;
 };
 ```
 
@@ -80,3 +81,31 @@ type CalloutProps = {
   This raises a warning to watch out for.
 </Callout>
 ```
+
+## Variations
+
+Callouts can be customized by omitting the title or icon:
+
+<Callout type="note">Without a title</Callout>
+
+<Callout type="note" icon={false} title="Without an icon">
+  You can hide the icon while keeping the title
+</Callout>
+
+<Callout type="note" icon={false}>
+  Or have neither title nor icon
+</Callout>
+
+```tsx
+<Callout type="note">
+  Without a title
+</Callout>
+
+<Callout type="note" icon={false} title="Without an icon">
+  You can hide the icon while keeping the title
+</Callout>
+
+<Callout type="note" icon={false}>
+  Or have neither title nor icon
+</Callout>
+```

docs/pages/configuration/search.md

@@ -3,15 +3,47 @@ title: Search
 sidebar_icon: search-code
 ---
 
-It is possible to add search to a Zudoku powered site. It will appear in the top navigation and persist across all pages.
+Zudoku offers search functionality that enhances user experience by enabling content discovery across your site. When configured, a search bar will appear in the header, allowing users to quickly find relevant information on any page.
 
-## Configuration
+We currently support two search providers:
 
-At this time, only [Inkeep](https://inkeep.com/) is supported.
+- [Pagefind](https://pagefind.app/)
+- [Inkeep](https://inkeep.com/)
 
-### Inkeep
+## Pagefind
 
-To add search to your site you will need to copy some variables from your [Inkeep account setting](https://portal.inkeep.com/):
+[Pagefind](https://pagefind.app/) is a lightweight, static search library that can be used to add search to your Zudoku site without any external services.
+
+:::caution{icon=""}
+
+While functional for production use, the Pagefind integration is still work in progress and will be improved in future releases and become the default search provider.
+
+:::
+
+To enable pagefind search, configure the `search` option in your configuration:
+
+```typescript
+{
+  search: {
+    type: "pagefind",
+    // Optional: Maximum number of sub results per page
+    maxSubResults: 3
+    // Optional: Configure search result ranking (defaults shown below)
+    ranking: {
+      termFrequency: 0.8,
+      pageLength: 0.6,
+      termSimilarity: 1.2,
+      termSaturation: 1.2,
+    },
+  }
+}
+```
+
+For more information about how Pagefind's ranking system works and how to customize it for your content, see the [Pagefind ranking documentation](https://pagefind.app/docs/ranking/).
+
+## Inkeep
+
+To add Inkeep search to your site you will need to copy some variables from your [Inkeep account setting](https://portal.inkeep.com/):
 
 - API Key
 - Integration ID

packages/zudoku/src/lib/ui/Callout.tsx

@@ -56,31 +56,49 @@ type CalloutProps = {
   title?: string;
   children: ReactNode;
   className?: string;
+  icon?: boolean;
 };
 
-export const Callout = ({ type, children, title, className }: CalloutProps) => {
+export const Callout = ({
+  type,
+  children,
+  title,
+  className,
+  icon = true,
+}: CalloutProps) => {
   const { border, bg, iconColor, titleColor, textColor, Icon } =
     stylesMap[type];
 
   return (
     <div
       className={cn(
-        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "not-prose rounded-md border p-4 text-md my-2",
+        icon &&
+          "grid grid-cols-[min-content_1fr] items-baseline grid-rows-[fit-content_1fr] gap-x-4 gap-y-2",
+        !icon && title && "flex flex-col gap-2",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none my-2",
-        title && "items-center",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
+        icon && title && "items-center",
         border,
         bg,
         className,
       )}
     >
-      <Icon
-        className={cn(!title && "translate-y-px", iconColor)}
-        size={20}
-        aria-hidden="true"
-      />
+      {icon && (
+        <Icon
+          className={cn(!title ? "translate-y-1" : "align-middle", iconColor)}
+          size={20}
+          aria-hidden="true"
+        />
+      )}
       {title && <h3 className={cn("font-medium", titleColor)}>{title}</h3>}
-      <div className={cn("col-start-2", !title && "row-start-1", textColor)}>
+      <div
+        className={cn(
+          icon && "col-start-2",
+          !title && icon && "row-start-1",
+          textColor,
+        )}
+      >
         {children}
       </div>
     </div>