Python: first release

.changeset/icy-bags-fry.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-python': patch
+---
+
+Initial release

apps/docs/content/docs/ui/(integrations)/python.mdx

@@ -0,0 +1,91 @@
+---
+title: Python
+description: Generate docs from Python
+---
+
+<Callout type="warn" title="Experiemntal">
+  Support for Python docgen is still experimental, please use it in caution.
+</Callout>
+
+## Setup
+
+```package-install
+fumadocs-python shiki
+```
+
+### Generate Docs
+
+Install the Python command first, we need it to collect docs from your Python package.
+
+```bash
+pip install ./node_modules/fumadocs-python
+```
+
+Generate the docs as a JSON:
+
+```bash
+fumapy-generate your-package-name
+# for example
+fumapy-generate httpx
+```
+
+Use the following script to convert JSON into MDX:
+
+```js title="scripts/generate-docs.mjs"
+import { rimraf } from 'rimraf';
+import * as Python from 'fumadocs-python';
+import * as fs from 'node:fs/promises';
+
+// output JSON file path
+const jsonPath = './httpx.json';
+
+async function generate() {
+  const out = 'content/docs/(api)';
+  // clean previous output
+  await rimraf(out);
+
+  const content = JSON.parse((await fs.readFile(jsonPath)).toString());
+  const converted = Python.convert(content, {
+    baseUrl: '/docs',
+  });
+
+  await Python.write(converted, {
+    outDir: out,
+  });
+}
+
+void generate();
+```
+
+<Callout type="warn" title="Be careful">
+  While most docgens use Markdown or reStructuredText, Fumadocs uses **MDX**.
+  Make sure your doc is valid in MDX syntax before running.
+</Callout>
+
+### MDX Components
+
+Add the components.
+
+```tsx
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import type { MDXComponents } from 'mdx/types';
+import * as Python from 'fumadocs-python/components';
+
+export function getMDXComponents(components?: MDXComponents): MDXComponents {
+  return {
+    ...defaultMdxComponents,
+    ...Python,
+    ...components,
+  };
+}
+```
+
+Add styles:
+
+```css title="Tailwind CSS"
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+/* [!code ++] */
+@import 'fumadocs-python/preset.css';
+```

packages/python/src/components/index.tsx

@@ -10,7 +10,7 @@ import { buttonVariants } from 'fumadocs-ui/components/ui/button';
 import { ChevronRight } from 'lucide-react';
 import { highlight } from 'fumadocs-core/highlight';
 
-const cardVariants = cva('bg-fd-card rounded-lg text-sm my-6 p-3');
+const cardVariants = cva('bg-fd-card rounded-lg text-sm my-6 p-3 border');
 const badgeVariants = cva(
   'text-xs font-medium border p-1 rounded-lg not-prose',
   {
@@ -91,12 +91,9 @@ export function PyParameter(props: {
   children?: ReactNode;
 }) {
   return (
-    <figure
+    <div
       data-parameter=""
-      className={cn(
-        cardVariants(),
-        'bg-fd-secondary border shadow-lg !my-0 rounded-none first:rounded-t-lg last:rounded-b-lg',
-      )}
+      className="bg-fd-secondary rounded-lg text-sm p-3 border shadow-md rounded-none first:rounded-t-lg last:rounded-b-lg"
     >
       <div className="flex flex-wrap gap-2 items-center font-mono text-fd-foreground">
         <code className={cn(badgeVariants({ color: 'primary' }))}>param</code>
@@ -119,7 +116,7 @@ export function PyParameter(props: {
         ) : null}
         {props.children}
       </div>
-    </figure>
+    </div>
   );
 }
 

packages/ui/src/components/callout.tsx

@@ -20,7 +20,7 @@ type CalloutProps = Omit<
 };
 
 const calloutVariants = cva(
-  'my-6 flex flex-row gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md',
+  'my-4 flex flex-row gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md',
   {
     variants: {
       type: {