Layouts | Documentation

Layouts are elements used throughout the ButterflyVu user interface, to construct the entire layout for the splash and document.

To Override

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

...
volumes:
    - ./overrides/layouts/LAYOUT_FILE_NAME.astro:/vu/src/layouts/LAYOUT_FILE_NAME.astro

The LAYOUT_FILE_NAME must be renamed to match the layout you want to override. You can do this to multiple layouts, doesn’t just have to be one.

For example, to override the splash page, you would do:

...
volumes:
    - ./overrides/layouts/Splash.astro:/vu/src/layouts/Splash.astro

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

Interface Properties

Some layouts may have interface properties, which are used throughout the default layout to insert variables. Be sure that you’re closely reviewing the layout 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 layout:

---
interface Props {
    Title: String;
    Icon?: String;
    Date?: String;
    Authors?: String;
    Category?: String;
    IsAPI?: Boolean
}

const { Title, Icon, Date, Authors, Category, IsAPI = false } = Astro.props
---

<html>
    <Head Title={Title}/>
    ...

Using ? at the end of a property name makes it optional.

Support Branding Guidelines Source Code