Questions regarding Bookshop components

[vitabef]

Hi!

I have a couple of questions regarding Bookshop components:

1. How do I create my own components (content blocks)? Simply placing them locally in component-library/components/ won’t work, right? In that case, does component-library need to become a local Hugo module?

2. If I don’t need to create new components but only want to override one that already exists in Hinode (or the theme), how should I proceed?

Thanks so much for your help!

[markdumay]

You don't necessarily need to create separate modules for your own custom Bookshop components. Hinode uses Bookshop's folder structure as a reference. You can either mount your own files in the same way, or use the target folders to override the default Hinode assets. You can see the mount configuration here:

hinode/config/_default/hugo.toml

Lines 141 to 162 in 5b2b996

	[[module.mounts]]
	source = 'component-library'
	target = 'layouts/partials/bookshop'
	includeFiles = ['**/*.hugo.html']
	[[module.mounts]]
	source = 'component-library'
	target = 'data/structures'
	includeFiles = ['**/*.bookshop.yml']
	[[module.mounts]]
	source = 'component-library'
	target = 'assets/bookshop'
	[[module.mounts]]
	source = 'component-library'
	target = 'assets/scss/modules/bookshop'
	includeFiles = ['**/*.scss']
	excludeFiles = ['bookshop.scss']
	[[module.mounts]]
	source = 'component-library/bookshop.scss'
	target = 'assets/scss/bookshop.scss'
	[[module.mounts]]
	source = 'component-library/helpers'
	target = 'layouts/partials/_bookshop/helpers'

Bookshop will pick up the defined components "automagically". However, you may want to update bookshop.scss to include your custom stylesheet.

As an example, you can create a custom file hero.hugo.html in the folder layouts/_partials/bookshop/components/hero of your own Hinode project. This will replace (override) Hinode's hero Bookshop component. It uses the target mount folder of the partial file. Hope this helps!

[vitabef]

Thank you very much. That all sounds quite logical, but I still can’t seem to get it working. I’ve been experimenting a bit to understand how it works and discovered the following:

0. In my project, I created the /component-library/components folder.

1. “Overriding”: I tried using a simple, existing component—specifically the “separator.” I copied the entire separator component from Hinode into my local /component-library/components/, and made some changes directly in separator.hugo.html so the differences would be visible when included. I defined the component in a page’s front matter as:

   - _bookshop_name: separator

   However, the changes are not visible—the original Hinode component is still being rendered, not my modified version.

2. “Creating a custom component”: Also in /component-library/components, I created a component named mycomponent in the subfolder mycomponent/. I added mycomponent.hugo.html, mycomponent.bookshop.yml, and mycomponent.scss with minimal specs and HTML. Then I included it on a page with:

   - _bookshop_name: mycomponent

   Unfortunately, I always get this build error:

   ERROR 📚 Error from Bookshop:
   📚❕ Component "mycomponent" does not exist.
        Create this component by placing a file in your bookshop at components/mycomponent/mycomponent.hugo.html or components/mycomponent.hugo.html
   

Is my approach incorrect? What am I doing wrong?

Thank you so much in advance!! I feel completely stuck 😊

[markdumay]

Both your examples use the /component-library/ as the base directory, so you need to mount the files as mentioned in my initial reaction. You can copy the mount config from the Hinode repository to your own project configuration (e.g. config/_default/hugo.toml). Alternatively, you can override the files by copying them to the mount target(s).

The hugo mount documentation is not very exhaustive, so I can imagine it's challenging to get it to work immediately. It still gives my headaches sometimes... In general, the mounts as defined in the Hinode module do not apply to your own project.