@farming-labs/theme 0.0.2-beta.24 → 0.0.2-beta.27

package/dist/docs-layout.d.mts

@@ -14,20 +14,29 @@ import { DocsConfig } from "@farming-labs/docs";
  * export const metadata = createDocsMetadata(docsConfig);
  * ```
  */
-declare function createDocsMetadata(config: DocsConfig): {
-  twitter?: {
-    card: "summary" | "summary_large_image";
-  } | undefined;
-  description?: string | undefined;
-  title: {
-    template: string;
-    default: string;
-  };
-};
+declare function createDocsMetadata(config: DocsConfig): Record<string, unknown>;
+/**
+ * Generate page-level metadata with dynamic OG images.
+ *
+ * Usage in a docs page or [[...slug]] route:
+ * ```ts
+ * export function generateMetadata({ params }) {
+ *   const page = getPage(params.slug);
+ *   return createPageMetadata(docsConfig, {
+ *     title: page.data.title,
+ *     description: page.data.description,
+ *   });
+ * }
+ * ```
+ */
+declare function createPageMetadata(config: DocsConfig, page: {
+  title: string;
+  description?: string;
+}): Record<string, unknown>;
 declare function createDocsLayout(config: DocsConfig): ({
   children
 }: {
   children: ReactNode;
 }) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { createDocsLayout, createDocsMetadata };
+export { createDocsLayout, createDocsMetadata, createPageMetadata };

package/dist/docs-layout.mjs

@@ -204,15 +204,71 @@ function buildDescriptionMap(entry) {
 */
 function createDocsMetadata(config) {
 	const meta = config.metadata;
+	const og = config.og;
 	const template = meta?.titleTemplate ?? "%s";
-	return {
+	const defaultTitle = template.replace("%s", "").replace(/^[\s–—-]+/, "").trim() || "Docs";
+	const result = {
 		title: {
 			template,
-			default: template.replace("%s", "").replace(/^[\s–—-]+/, "").trim() || "Docs"
+			default: defaultTitle
 		},
 		...meta?.description ? { description: meta.description } : {},
 		...meta?.twitterCard ? { twitter: { card: meta.twitterCard } } : {}
 	};
+	if (og?.enabled !== false && og?.endpoint) {
+		const ogUrl = `${og.endpoint}?title=${encodeURIComponent(defaultTitle)}${meta?.description ? `&description=${encodeURIComponent(meta.description)}` : ""}`;
+		result.openGraph = { images: [{
+			url: ogUrl,
+			width: 1200,
+			height: 630
+		}] };
+		result.twitter = {
+			...result.twitter,
+			card: meta?.twitterCard ?? "summary_large_image",
+			images: [ogUrl]
+		};
+	}
+	return result;
+}
+/**
+* Generate page-level metadata with dynamic OG images.
+*
+* Usage in a docs page or [[...slug]] route:
+* ```ts
+* export function generateMetadata({ params }) {
+*   const page = getPage(params.slug);
+*   return createPageMetadata(docsConfig, {
+*     title: page.data.title,
+*     description: page.data.description,
+*   });
+* }
+* ```
+*/
+function createPageMetadata(config, page) {
+	const og = config.og;
+	const result = {
+		title: page.title,
+		...page.description ? { description: page.description } : {}
+	};
+	if (og?.enabled !== false && og?.endpoint) {
+		const ogUrl = `${og.endpoint}?title=${encodeURIComponent(page.title)}${page.description ? `&description=${encodeURIComponent(page.description)}` : ""}`;
+		result.openGraph = {
+			title: page.title,
+			description: page.description,
+			images: [{
+				url: ogUrl,
+				width: 1200,
+				height: 630
+			}]
+		};
+		result.twitter = {
+			card: "summary_large_image",
+			title: page.title,
+			description: page.description,
+			images: [ogUrl]
+		};
+	}
+	return result;
 }
 /** Resolve the themeToggle config into fumadocs-ui's `themeSwitch` prop. */
 function resolveThemeSwitch(toggle) {
@@ -229,7 +285,7 @@ function resolveSidebar(sidebar) {
 	if (sidebar === false) return { enabled: false };
 	return {
 		enabled: sidebar.enabled !== false,
-		component: sidebar.component,
+		componentFn: typeof sidebar.component === "function" ? sidebar.component : void 0,
 		footer: sidebar.footer,
 		banner: sidebar.banner,
 		collapsible: sidebar.collapsible,
@@ -343,7 +399,8 @@ function createDocsLayout(config) {
 	const forcedTheme = themeSwitch.enabled === false && toggleConfig?.default && toggleConfig.default !== "system" ? toggleConfig.default : void 0;
 	const resolvedSidebar = resolveSidebar(config.sidebar);
 	const sidebarFlat = resolvedSidebar.flat;
-	const { flat: _sidebarFlat, ...sidebarProps } = resolvedSidebar;
+	const sidebarComponentFn = resolvedSidebar.componentFn;
+	const { flat: _sidebarFlat, componentFn: _componentFn, ...sidebarProps } = resolvedSidebar;
 	const breadcrumbConfig = config.breadcrumb;
 	const breadcrumbEnabled = breadcrumbConfig === void 0 || breadcrumbConfig === true || typeof breadcrumbConfig === "object" && breadcrumbConfig.enabled !== false;
 	const colors = config.theme?._userColorOverrides;
@@ -380,14 +437,21 @@ function createDocsLayout(config) {
 	const lastModifiedMap = buildLastModifiedMap(config.entry);
 	const descriptionMap = buildDescriptionMap(config.entry);
 	return function DocsLayoutWrapper({ children }) {
+		const tree = buildTree(config, !!sidebarFlat);
+		const finalSidebarProps = { ...sidebarProps };
+		if (sidebarComponentFn) finalSidebarProps.component = sidebarComponentFn({
+			tree,
+			collapsible: sidebarProps.collapsible !== false,
+			flat: !!sidebarFlat
+		});
 		return /* @__PURE__ */ jsxs(DocsLayout, {
-			tree: buildTree(config, !!sidebarFlat),
+			tree,
 			nav: {
 				title: navTitle,
 				url: navUrl
 			},
 			themeSwitch,
-			sidebar: sidebarProps,
+			sidebar: finalSidebarProps,
 			...aiMode === "sidebar-icon" && aiEnabled ? { searchToggle: { components: { lg: /* @__PURE__ */ jsx(SidebarSearchWithAI, {}) } } } : {},
 			children: [
 				/* @__PURE__ */ jsx(ColorStyle, { colors }),
@@ -444,4 +508,4 @@ function ForcedThemeScript({ theme }) {
 }
 
 //#endregion
-export { createDocsLayout, createDocsMetadata };
+export { createDocsLayout, createDocsMetadata, createPageMetadata };

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { DefaultUIDefaults, fumadocs } from "./default/index.mjs";
 import { DocsCommandSearch } from "./docs-command-search.mjs";
-import { createDocsLayout, createDocsMetadata } from "./docs-layout.mjs";
+import { createDocsLayout, createDocsMetadata, createPageMetadata } from "./docs-layout.mjs";
 import { DocsPageClient } from "./docs-page-client.mjs";
 import { RootProvider } from "./provider.mjs";
 import { PageActions } from "./page-actions.mjs";
@@ -9,4 +9,4 @@ import { DocsBody, DocsPage } from "fumadocs-ui/layouts/docs/page";
 import { AIConfig, BreadcrumbConfig, CopyMarkdownConfig, DocsConfig, DocsMetadata, DocsNav, DocsTheme, FontStyle, OGConfig, OpenDocsConfig, OpenDocsProvider, PageActionsConfig, PageFrontmatter, SidebarConfig, ThemeToggleConfig, TypographyConfig, UIConfig, createTheme, deepMerge, defineDocs, extendTheme } from "@farming-labs/docs";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre } from "fumadocs-ui/components/codeblock";
-export { type AIConfig, type BreadcrumbConfig, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, type CopyMarkdownConfig, DocsBody, DocsCommandSearch, type DocsConfig, DocsLayout, type DocsMetadata, type DocsNav, DocsPage, DocsPageClient, type DocsTheme, type FontStyle, DefaultUIDefaults as FumadocsUIDefaults, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, PageActions, type PageActionsConfig, type PageFrontmatter, Pre, RootProvider, type SidebarConfig, Tab, Tabs, type ThemeToggleConfig, type TypographyConfig, type UIConfig, createDocsLayout, createDocsMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs };
+export { type AIConfig, type BreadcrumbConfig, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, type CopyMarkdownConfig, DocsBody, DocsCommandSearch, type DocsConfig, DocsLayout, type DocsMetadata, type DocsNav, DocsPage, DocsPageClient, type DocsTheme, type FontStyle, DefaultUIDefaults as FumadocsUIDefaults, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, PageActions, type PageActionsConfig, type PageFrontmatter, Pre, RootProvider, type SidebarConfig, Tab, Tabs, type ThemeToggleConfig, type TypographyConfig, type UIConfig, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { DocsCommandSearch } from "./docs-command-search.mjs";
 import { PageActions } from "./page-actions.mjs";
 import { DocsPageClient } from "./docs-page-client.mjs";
-import { createDocsLayout, createDocsMetadata } from "./docs-layout.mjs";
+import { createDocsLayout, createDocsMetadata, createPageMetadata } from "./docs-layout.mjs";
 import { RootProvider } from "./provider.mjs";
 import { DefaultUIDefaults, fumadocs } from "./default/index.mjs";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
@@ -10,4 +10,4 @@ import { createTheme, deepMerge, defineDocs, extendTheme } from "@farming-labs/d
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre } from "fumadocs-ui/components/codeblock";
 
-export { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, DocsBody, DocsCommandSearch, DocsLayout, DocsPage, DocsPageClient, DefaultUIDefaults as FumadocsUIDefaults, PageActions, Pre, RootProvider, Tab, Tabs, createDocsLayout, createDocsMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs };
+export { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, DocsBody, DocsCommandSearch, DocsLayout, DocsPage, DocsPageClient, DefaultUIDefaults as FumadocsUIDefaults, PageActions, Pre, RootProvider, Tab, Tabs, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.0.2-beta.24",
+  "version": "0.0.2-beta.27",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "keywords": [
     "docs",
@@ -98,7 +98,7 @@
     "next": ">=14.0.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@farming-labs/docs": "0.0.2-beta.24"
+    "@farming-labs/docs": "0.0.2-beta.27"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/base.css

@@ -390,8 +390,9 @@ figure.shiki:has(figcaption) figcaption {
 
 .fd-page-footer {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem 1rem;
   margin-top: auto;
   padding-top: 1.5rem;
   border-top: 1px solid var(--color-fd-border, hsl(0 0% 80% / 50%));
@@ -409,6 +410,13 @@ figure.shiki:has(figcaption) figcaption {
   margin-left: auto;
 }
 
+@media (max-width: 640px) {
+  .fd-last-updated-footer {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
 .fd-llms-txt-links {
   display: inline-flex;
   align-items: center;
@@ -427,8 +435,8 @@ figure.shiki:has(figcaption) figcaption {
 }
 
 .fd-llms-txt-link:hover {
-  /* color: var(--color-fd-foreground, hsl(0 0% 10%));
-  border-color: var(--color-fd-foreground, hsl(0 0% 10%)); */
+  color: var(--color-fd-foreground, hsl(0 0% 10%));
+  border-color: var(--color-fd-foreground, hsl(0 0% 10%));
   text-decoration: none;
 }
 

package/styles/pixel-border.css

@@ -450,21 +450,29 @@ figure.shiki > div:first-child {
 }
 
 /* ─── Page Actions (pixel-border overrides) ───────────────────────── */
-
 .fd-page-action-btn {
   border-radius: 0 !important;
   font-size: 0.75rem;
   letter-spacing: 0.03em;
+  text-transform: uppercase;
+  box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626);
+  font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace)) !important;
 }
 
 .fd-page-action-menu {
   border-radius: 0 !important;
   box-shadow: 0 4px 24px hsl(0 0% 0% / 0.5);
+  padding: 0px !important;
+  box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626);
 }
 
 .fd-page-action-menu-item {
   border-radius: 0 !important;
-  font-size: 0.8rem;
+  font-size: 0.68rem;
+  border-top: 1px solid var(--color-fd-border, #262626);
+  text-transform: uppercase;
+  color: var(--color-fd-muted-foreground, hsl(0 0% 45%));
+  font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace)) !important;
 }
 
 /* ─── AI Chat (pixel-border — zero radius, pixel-art, monospace) ── */