Basic Usage

You can use Partial by importing the Partial component and passing path property to it.

---
import { Partial } from '@splendidlabz/astro'
---

<Partial path="path-to-partial" />

The Partials Directory

Partials have to be placed in the partials directory (src/content/partials). Files you put into this directory can be read by the Partial component.

When you want to import a partial, pass its file name (without extensions) into the path property.

|- src
    |- content
        |- partials
            |- your-file.md

<Partial path="your-file" />

Nested partials

Recursive nested directories are supported.

To import a nested partial, pass the nested directory path and the file name to the path property.

|- partials
    |- nested
        |- deeply-nested
            |- file.md

<Partial path="nested/deeply-nested/file" />

Supported Extensions

Partial supports md, mdx and astro extensions.

|- partials
    |- your-file.md
    |- your-file-2.mdx
    |- your-file-3.astro

Passing Components into Partials

Components can be passed into partials with the mdx and mdx extensions. Alternatively, you can also import components directly within the partial.

---
import Comp1 from '@/components/Comp1.astro'
import Comp2 from '@/components/Comp2.astro'
const components = { Comp1, Comp2 }
---

<Partial path="file" {components} />

{/* Partial file, mdx */}
import Comp1 from '@/components/Comp1.astro'
import Comp2 from '@/components/Comp2.astro'

{/* Usage */}
<Comp1 />
<Comp2 />