Slots

getSlots

getSlots is an asynchronous function that defines slots and returns an array of ClubsSlots.

Clubs runtime passes 3 arguments to getSlots, plugin options, config, and slot utils. And the return value should be an array of objects with the following values:

	Required	Type	Description
slot	Required	string | ClubsSlotName(*)	Name of the target slot.
component	Required	Astro component	Content of the slot.
props		Object	Object passed to Astro.props on the component
order		number	The order of the slot, with the higher number of order rendered backward if there are multiple slots with the same name on a page.

The returns value

The return value of getSlots should be an array of objects with these properties.

slot

Clubs has some predefined slots, and you can inject your components into the predefined slots on the pages and on the admin pages. Predefined slots are defined as enum type ClubsSlotName(*).

caution

Note that slots for pages may not be supported by a theme plugin.

If a custom theme implements its own slots, you can also specify an arbitrary string for slot.

component

The component property in getSlots() specifies the content that will be rendered in the target slot. The component can be built using Astro supported frameworks, which can be rendered by Astro.

caution

Only imported components that are .astro files can be used

src/components/ExampleComponent.astro

---
import {MySvelteComponent} from './MySvelteComponent.svelte'
---
const {ExampleComponent} = Astro.props as {
    ExampleComponent: {
        message: string
        }
    }

<MySvelteComponent client:load message={ExampleComponent.message}/>

src/components/MySvelteComponent.svelte

<scirpt>
    export let message: string
</script>

<h1>Hello, {message}</h1>

props

props is an object passed from the parent component (slot container) to the child component (defined in component property) to help render it correctly. It can contain any data that the child component needs, such as text, colors, and functions.

For example, if the child component is a button, the props object might include the text to display on the button, the color of the button, and the function to call when the button is clicked.

Example

src/index.ts

import { ClubsFunctionGetSlots, ClubsFunctionPlugin } from '@devprotocol/clubs-core'
import { default as ExampleComponent } from './components/ExampleComponent.astro'

const getPagePaths = async () => [
    {/* ... */}
]

export const getAdminPaths: ClubsFunctionGetAdminPaths = async (options) => [
    {/* ... */}
]

export const getSlots: ClubsFunctionGetSlots = async (_, config, _) => {
    return [
        {
            slot: 'admin:aside:example',
            component: ExampleComponent,
            props: {
                ExampleComponent: {
                    message: 'World!',
                },
            },
        },
    ]
}

export const meta: ClubsPluginMeta = {
    {/* ... */}
}

export default {
  getPagePaths,
  getAdminPaths,
  getSlots,
  meta,
} as ClubsFunctionPlugin