Component templating

Bookshop components use the templating language of your chosen static site generator. For Astro, Bookshop supports writing components as .astro files or in React as either .jsx or .tsx files.

Creating your first component#

Bookshop components live in the src/components/ directory that Astro creates by default. Each component can be placed at the top level of a folder or nested in a folder matching that component's name.

To start, let's have a look at a sample bookshop component. Create an empty file at src/components/sample/sample.astro in your site and add the following content:

<div class="c-sample">
  <p>{ Astro.props.text }</p>
</div>

If you're used to writing Astro templates on your site, the contents of this component should be very familiar. Beyond the special directory structure that this component should live in, any existing components should be compatible with Bookshop without any changes. Notice that this component is nested in a folder with the same name as the component. This doesn't change the component's Bookshop name (sample) but can be useful for grouping files related to this component — we'll see some examples of this later on.

Here's a hypothetical React component that uses some more advanced syntax:

export default ({ date, title, subtitle }) => {
  return <div class="c-hero">
    <p className="date">Published on {date.toLocaleDateString()}</p>
    <h1>{ title }</h1>
    {subtitle && <h2>{ subtitle }</h2>}
  </div>;
}

As with the Astro example, this component uses standard React JSX, and any existing React components should be compatible with Bookshop by default. With this component, we've opted not to nest it inside a folder. This can be cleaner when creating individual components that don't have any supporting files.

Supported templating and functions#

There are some restrictions on the features you can use inside your components. Since Bookshop renders your components in the browser, any functions or packages that you use must be able to run in a browser. Bookshop will include any .png, .svg, .jpg, and .webp assets imported by your components for live editing, but other asset types are not supported.