Components

Components are elements used throughout the ButterflyVu user interface, to construct the pages and layouts.

To Override

In order to override a component, add the following pattern to compose.yml:

...
volumes:
    - ./overrides/components/COMPONENT_FILE_NAME.astro:/vu/src/components/COMPONENT_FILE_NAME.astro

The COMPONENT_FILE_NAME must be renamed to match the component you want to override. You can do this to multiple components, doesn’t just have to be one.

For example, if you want to override both the sidebar and it’s footer slot, you can do something like this:

...
volumes:
    - ./overrides/components/SidebarElement.astro:/vu/src/components/SidebarElement.astro
    - ./overrides/components/slots/sidebar/Footer.astro:/vu/src/components/slots/sidebar/Footer.astro

It’s also recommended that you copy the already existing component file that was already included with ButterflyVu and start modifying from there.

Interface Properties

Some components may have interface properties, which are used throughout the default component to insert variables. Be sure that you’re closely reviewing the component you’re attempting to override, as you may want to use these properties in your custom code.

As an example, an interface property will look like this within the component:

---
interface Properties {
    Title: String
    Alternate: Boolean
}

const {
    Title,
    Alternate
} = Astro.props
---

<h2 data-alternative={Alternate}>{Title}</h2>