Integrating with an Existing Theme

/* theme definition import */
@import "./tailwind-theme.css";

/* docs styles */
@import "@/docs/styles/docs-global.css";

1
// other collections...
2

3
const docsCollection = defineCollection({
4
  loader: glob({ pattern: "**/[^_]*{md,mdx}", base: "./src/docs/data/docs" }),
5
  schema: () =>
6
    z.object({
7
      title: z.string(),
8
      description: z.string().optional(),
9
      sidebar: z
10
        .object({
11
          label: z.string().optional(),
12
          order: z.number().optional(),
13
          badge: z
14
            .object({
15
              text: z.string(),
16
              variant: z.enum(["note", "tip", "caution", "danger", "info"]).default("note"),
17
            })
18
            .optional(),
19
        })
20
        .optional(),
21
      tableOfContents: z
22
        .object({
23
          minHeadingLevel: z.number().min(1).max(6).optional(),
24
          maxHeadingLevel: z.number().min(1).max(6).optional(),
25
        })
26
        .optional(),
27
      pagefind: z.boolean().optional(),
28
      mappingKey: z.string().optional(),
29
      draft: z.boolean().optional(),
30
    }),
31
});
32

33
export const collections = {
34
  // other collection....
35
  docs: docsCollection,
36
};

1
export default defineConfig({
2
  // other config options...
3
  integrations: [
4
    AutoImport({
5
      imports: [
6
        // other imports...
7
        "@/docs/components/mdx-components/Aside.astro",
8
        "@/docs/components/mdx-components/Badge.astro",
9
        "@/docs/components/mdx-components/Button.astro",
10
        "@/docs/components/mdx-components/Steps.astro",
11
        "@/docs/components/mdx-components/Tabs.astro",
12
        "@/docs/components/mdx-components/TabsContent.astro",
13
        "@/docs/components/mdx-components/TabsList.astro",
14
        "@/docs/components/mdx-components/TabsTrigger.astro",
15
      ],
16
    }),
17
  ],
18
});