Heyho,
I’ve been trying to get an algolia search up and running on Kirby 3.6.
But right now I am running into multiple issues, that I can’t seem to fix on my own.
I have been trying to use a modified version of @distantnative 's plugin.
The plugin was originally modified to work with Kirby 3.5 in mind, where is seems to work perfectly.
And now I’m trying to make it run in another project using Kirby 3.6.
Indexing / Updating an index on saving a page works mostly fine.
But updating the entirety of the index leads to a couple of issues.
To update the entirety of the index, I added a button to the panel, that would do just that.
However whenever I load the panel page where this button is placed.
I get the following error:
And when clicking on the button to update the index I get this error:
And the console logs say that k-search is being replaced:
This is the index.js of the plugin, where the this.load is failing:
(function () {
var a = {
extends: "k-search",
data: () => ({ hasIndex: !0, isProcessing: !1 }),
computed: {
rebuild() {
let i = this.$t("search.index.missing");
return this.isProcessing && (i += "\u2026"), i;
},
},
methods: {
async index() {
this.isProcessing = !0;
try {
await this.$api.post("search"), this.$store.dispatch("notification/success", this.$t("search.index.built"));
} catch (i) {
console.error(e);
} finally {
await this.search(this.q), (this.isProcessing = !1), (this.hasIndex = !0);
}
},
async search(i) {
this.isLoading = !0;
try {
if ("" === i) throw new Error();
const t = await this.$api.get("search", { q: i, select: ["id", "title", "email", "name", "filename", "parent", "panelIcon", "panelImage"] });
this.items = t.data.map((i) => {
let e = { id: i.id, icon: { ...i.panelIcon, back: "black", color: "#fff" }, image: { ...i.panelImage, back: "pattern", cover: !0 } };
return (
i.hasOwnProperty("email")
? ((e.title = i.name || i.email), (e.link = this.$api.users.link(i.id)), (e.info = i.email), (e.icon = { back: "black", type: "user" }))
: i.hasOwnProperty("filename")
? ((e.title = i.filename), (e.link = this.$api.files.link(this.$api.pages.url(i.parent.id), i.filename)), (e.info = i.id))
: ((e.title = i.title), (e.link = this.$api.pages.link(i.id)), (e.info = i.id)),
e
);
});
} catch (e) {
"error.notFound" === e.key && (this.hasIndex = !1), (this.items = []);
} finally {
(this.selected = -1), (this.isLoading = !1), (this.hasResults = this.items.length > 0);
}
},
},
};
if (typeof a === "function") {
a = a.options;
}
Object.assign(
a,
(function () {
var render = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("k-overlay", { ref: "overlay" }, [
_c("div", { staticClass: "k-search", attrs: { role: "search" } }, [
_c(
"div",
{ staticClass: "k-search-input" },
[
_c("input", {
directives: [{ name: "model", rawName: "v-model", value: _vm.q, expression: "q" }],
ref: "input",
attrs: { placeholder: _vm.$t("search") + " \u2026", "aria-label": _vm.$t("search"), autofocus: true, type: "text" },
domProps: { value: _vm.q },
on: {
input: [
function ($event) {
if ($event.target.composing) {
return;
}
_vm.q = $event.target.value;
},
function ($event) {
_vm.hasResults = true;
},
],
keydown: [
function ($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) {
return null;
}
$event.preventDefault();
return _vm.onDown($event);
},
function ($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) {
return null;
}
$event.preventDefault();
return _vm.onUp($event);
},
function ($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
return null;
}
$event.preventDefault();
return _vm.onTab($event);
},
function ($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
return null;
}
return _vm.onEnter($event);
},
function ($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) {
return null;
}
return _vm.close($event);
},
],
},
}),
_vm._v(" "),
_c("k-button", { staticClass: "k-search-close", attrs: { tooltip: _vm.$t("close"), icon: _vm.isLoading ? "loader" : "cancel" }, on: { click: _vm.close } }),
],
1
),
_vm._v(" "),
_vm.q && (!_vm.hasResults || _vm.items.length)
? _c("div", { staticClass: "k-search-results" }, [
_vm.items.length
? _c(
"ul",
{
on: {
mouseout: function ($event) {
_vm.selected = -1;
},
},
},
_vm._l(_vm.items, function (item, itemIndex) {
return _c(
"li",
{
key: item.id,
attrs: { "data-selected": _vm.selected === itemIndex },
on: {
mouseover: function ($event) {
_vm.selected = itemIndex;
},
},
},
[
_c("k-link", { attrs: { to: item.link }, on: { click: _vm.close } }, [
_c(
"span",
{ staticClass: "k-search-item-image" },
[_vm.imageOptions(item.image) ? _c("k-image", _vm._b({}, "k-image", _vm.imageOptions(item.image), false)) : _c("k-icon", _vm._b({}, "k-icon", item.icon, false))],
1
),
_vm._v(" "),
_c("span", { staticClass: "k-search-item-info" }, [_c("strong", [_vm._v(_vm._s(item.title))]), _vm._v(" "), _c("small", [_vm._v(_vm._s(item.info))])]),
]),
],
1
);
}),
0
)
: !_vm.hasIndex
? _c("p", { staticClass: "k-search-empty k-search-index", on: { click: _vm.index } }, [_vm._v(" " + _vm._s(_vm.rebuild) + " ")])
: !_vm.hasResults
? _c("p", { staticClass: "k-search-empty" }, [_vm._v(" " + _vm._s(_vm.$t("search.results.none")) + " ")])
: _vm._e(),
])
: _vm._e(),
]),
]);
};
var staticRenderFns = [];
return { render: render, staticRenderFns: staticRenderFns, _compiled: true, _scopeId: null, functional: undefined };
})()
);
var b = {
data: () => ({ headline: "", isProcessing: !1 }),
computed: {
text() {
let s = this.$t("search.index.build");
return this.isProcessing && (s += "\u2026"), s;
},
},
async created() {
const s = await this.load();
this.headline = s.headline;
},
methods: {
async build() {
this.isProcessing = !0;
try {
await this.$api.post("search"), this.$store.dispatch("notification/success", this.$t("search.index.built"));
} catch (s) {
console.error(e);
} finally {
this.isProcessing = !1;
}
},
},
};
if (typeof b === "function") {
b = b.options;
}
Object.assign(
b,
(function () {
var render = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
[
_c("div", { staticClass: "k-section-header" }, [_c("k-headline", [_vm._v(_vm._s(_vm.headline))])], 1),
_vm._v(" "),
_c("k-button", { attrs: { icon: "refresh", disabled: _vm.isProcessing }, on: { click: _vm.build } }, [_vm._v(" " + _vm._s(_vm.text) + " ")]),
],
1
);
};
var staticRenderFns = [];
return { render: render, staticRenderFns: staticRenderFns, _compiled: true, _scopeId: null, functional: undefined };
})()
);
panel.plugin("distantnative/search-for-kirby", { sections: { search: b }, components: { "k-search": a } });
})();
This is the config.php:
"search" => [
// "provider" => "sqlite",
'provider' => 'algolia',
'algolia' => [
'app' => "[MYALGOLIAAPP]",
'key' => "[MYAPIKEY]",
'index' => 'kirby',
'options' => []
],
"entries" => [
"files" => 'page.files',
"users" => false
],
"fields" => [
"pages" => [
"url" => function($model) {
return $model->url();
},
"title" => function($model) {
return $model->title();
},
"headline" => function($model) {
switch ($model->intendedTemplate()) {
case "default":
case "seminars":
case "intern":
return $model->title();
case "seminarpage":
case "newspage":
return $model->headline();
}
},
"image" => function($model) {
switch ($model->intendedTemplate()) {
case "newspage":
$img = $model->posterimage()->toFile();
if ($img) {
return $img->resize(200, 200)->url();
}
break;
case "seminars":
$img = $model->posterimage()->toFile();
if ($img) {
return $img->resize(200, 200)->url();
}
break;
}
},
"content" => function($model) {
switch ($model->intendedTemplate()) {
case "intern":
case "seminars":
case "default":
$res = [];
$len = 0;
foreach ($model->content()->contentbuilder()->toBlocks() as $section) {
if ($section->draft()->value() != true) {
switch ($section->type()) {
case "text":
array_push($res, $section->headline(), $section->text()->excerpt());
case "separator":
array_push($res, $section->headline(), $section->subheadline(), $section->sepTextLarge()->excerpt(), $section->sepTextMedium()->excerpt(), $section->sepTextSmall()->excerpt());
case "downloads":
case "karte":
case "newslist":
case "video":
array_push($res, $section->headline());
}
}
}
foreach ($res as $i => $v) {
if ($len < 15000) {
$len += strlen($v);
$res[$i] = mb_convert_encoding($v, 'UTF-8', 'UTF-8');
}
else {
$res[$i] = "";
}
}
return $res;
case "seminarpage":
case "newspage":
return $model->text();
}
},
"template" => function($model) {
return $model->intendedTemplate()->name();
}
],
"files" => [
"url" => function($model) {
return $model->url();
},
"title" => function($model) {
return $model->filetitle();
},
"extension" => function($model) {
return $model->extension();
}
]
],
"templates" => [
"pages" => ["default", "intern", "newspage", "seminarpage", "seminars"],
"files" => [],
"users" => false
]
]
Has somebody encountered a similar issue and knows where to look or what to look out for?