Algolia Theme Customization

[nerdoza]

The Algolia theme is not responding to the theme customizations.

Looking at the Navbar.vue file, it is importing the aliased @AlgoliaSearchBox. Changing the import to ./AlgoliaSearchBox.vue resolves the theming issues, but I'm not certain if there is a reason that it was using the alias that I'm not seeing?

I'm happy to make a PR for this if there is no objection to the change.

[nerdoza]

As I look further, it appears that the intentions behind using the alias was to be able to bypass the style inclusion based on the isAlgoliaSearch attribute.

vuepress/lib/webpack/createBaseConfig.js

Lines 44 to 46 in 4bf56d7

	.set('@AlgoliaSearchBox', isAlgoliaSearch
	? path.resolve(__dirname, '../default-theme/AlgoliaSearchBox.vue')
	: path.resolve(__dirname, './noopModule.js'))

Replacing the reference in the import will cause the style to always be bundled. I'm not certain how to work around this and I foresee this happening in the future with similar modules that are optional dependencies so I don't know if having the user modify the import is necessarily the correct approach.

[nerdoza]

Solution submitted in PR #334 .

[ulivz]

Not clearly know what do you want to do.

[nerdoza]

@ulivz, if you eject the theme and then customize the AlgoliaSearchBox.vue file, the changes are not picked up because the @AligoliaSearchBox alias was pointing to default_theme directory in the root of the application. The PR #334 changes the alias to point to a relative path, so by default it will use the root default_theme location, but when ejected it will use the customized vue file instead.

[ulivz]

Hmmm, so why not describe it by using a issue template at first 😅

if you want maintainers to help you to solve a problem or merge a pr, you should take us to your context first. I won't understand what you want to do util you said you use eject.

[meteorlxy]

@bayssmekanique
In my opinion, eject aims to help users build their custom theme, but don't rely on it too much.

In your own theme, you can import the customed AligoliaSearchBox by something like @theme/AlgoliaSearchBox.vue with the help of @theme alias.

The @AlgoliaSearchBox alias points to the built-in AlgoliaSearchBox.vue but not to your customed component. If you change it to ./AlgoliaSearchBox.vue, others who want to use the built-in AlgoliaSearchBox.vue will lose their alias.

[nerdoza]

@meteorlxy, I'm not entirely following your point regarding the @theme/AlgoliaSearchBox.vue, as this is more addressing the eject condition, not necessarily theme overriding, which I think might be what you are addressing?

You are correct that with this change, it will point to custom ejected vue file, rather than the default theme file when the files have been ejected. If the files haven't been ejected, then it will still point to the default vue file. This is more in keeping with the way all the other components work, so I would think this component should work the same way. In all the other components, the dependent components are referenced relative to the requesting components location, so this is doing the same for the AlgoliaSearchBox.vue component.

vuepress/lib/default-theme/Navbar.vue

Lines 23 to 26 in d9b290b

	import SidebarButton from './SidebarButton.vue'
	import AlgoliaSearchBox from '@AlgoliaSearchBox'
	import SearchBox from './SearchBox.vue'
	import NavLinks from './NavLinks.vue'

I understand what you are saying in regards to if someone wants to customize some portion of the site, but has no reason to customize that particular component, but the variables being pulled in by the default AlgoliaSearchBox.vue component are all the default styles, so they have no way of overriding the style.

[ulivz]

#334 (comment)

[brandonkelly]

@ulivz Why was this issue closed? Even if you don’t like the proposed fix, the core issue definitely still exists: createBaseConfig.js will only set @AlgoliaSearchBox to the path to AlgoliaSearchBox.vue in the default theme directory, even if you’ve supplied a custom theme.

Is there a way around this that doesn’t involve hacking VuePress? E.g. is it possible to override t he @AlgoliaSearchBox alias from enhanceApp.js or something?