Develop Reference

How to properly write a vuepress plugin?

I am trying to write a Vuepress plugin to make use of App Level enhancement and install a Vue plugin. But I can't seem to get this to work. Can you please take a look at the code below and see what is wrong?
{.vuepress/config.js}
module.exports = {
plugins: [
require('./builder.plugin.js')
]
}
{.vuepress/builder.plugin.js}
module.exports = (option, ctx) => {
return {
enhanceAppFiles: [{
name: 'builder-plugin',
content: `export default ({ Vue }) => {
Vue.component('b-header', {
name: 'b-header',
template: '<div id="header"><slot /></div>'
})
}`
}]
}
}
{README.md}
# Introduction
<b-header>Test from component</b-header>
The final error I get is:
Unknown custom element: <b-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I actually found the answer. The above did not work because I was mixing client site code with runtime code by using a plugin.
The trick was to use enhanceAPP hook.
ref: https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration

Web Scraping with Javascript?

I'm having a hard time figuring out how to scrape this webpage to get this wedding list into my onepager. It doesn't seem complicated at first but when I get into the code, I just can't get any results.
I've tried ygrab.js, which was fairly simple and got me somewhere but then I can't seem to scrape the images and it only prints the output in the console (not much documentation to go on).
$(function() {
var $listResult = $('#list-result');
var kado = [];
var data = [
{
url: 'https://www.kadolog.com/fr/list/liste-de-mariage-laura-julien',
selector: '.kado-not-full',
loop: true,
result: [{
name: 'photo',
find: '.views-field-field-photo',
grab: {
by: 'attr',
value: 'src'
}
},
{
name: 'title',
find: '.views-field-title .field-content',
grab: {
by: 'text',
value: ''
}
},
{
name: 'description',
find: '.views-field-body .field-content',
grab: {
by: 'text',
value: ''
}
},
{
name: 'price',
find: '.price',
grab: {
by: 'text',
value: ''
}
},
{
name: 'remaining',
find: '.topinfo',
grab: {
by: 'text',
value: ''
}
},
{
name: 'link',
find: '.views-field-nothing .field-content .btn',
grab: {
by: 'attr',
value: 'href'
}
},
],
},
];
ygrab(data, function(result){
console.log(JSON.stringify(result, null, 2)); //photos = undefined
});
Then there's Node.js with Request and Cheerio (and I tried Crawler too), but I have no idea how node works.
var request = require("request");
This gives me an error in the console saying require is not defined. Fair enough, I added require.js to the scripts in my page. I got another error ("Uncaught Error: Mismatched anonymous define() module: ...").
My question is this: Is there a simple Javascript way (possibly without involving node?), to scrape the wedding list I'm trying to get? Or maybe a tutorial that resembles what I'm trying to do step by step ?
I'd be truly grateful for any help or advice.

i think your only issue is the img selector.
Change
{
name: 'photo',
find: '.views-field-field-photo',
grab: {
by: 'attr',
value: 'src'
}
},
To this
{
name: 'photo',
find: '.views-field-field-photo .field-content img',
grab: {
by: 'attr',
value: 'src'
}
},
I actually can't test this right now, but it should be working!!

Node.js is a seperate application that executes javascript independent of a web page.
require is Node's way of importing packages, and isn't defined by the browser, require.js is a javascript library for requiring packages, but it doesn't work the same way as Node's require function.
To use request and cheerio, you'd need to install Node.js from here, then install request and cheerio with the following commands:
npm install request --save
npm install cheerio --save
Then any code you write with Node.js in that directory will have access to the modules.
Here's a tutorial to web scraping in Node.js with cheerio.

How to integrate mailchimp with nuxt js app?

I'd like to embed the following script into my component in nuxtjs app. But since nuxt has no solution for this. I'd like to ask the vue community to see if there was a better way of embedding external 3rd party js scripts?
Where should I be embedding this type of scipt? And what sort of external configurations do I need to add to enable this to work?
I tried adding directly into my template but it doesn't seem to be working.
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) })</script>
Thanks!

Open up your nuxt.config.js file, and search for the head object. You can add your third party scripts there like this:
// nuxt.config.js
module.exports = {
head: {
title: 'My title',
// etc.
script: [
{ src: "//downloads.mailchimp.com/js/signup-forms/popup/embed.js" },
// You can add multiple third-party scripts here
]
},
// Other stuff
}
Docs: How to use external resources?
I haven't tested it, but I think, since the other part is just javascript, you can add into your page you wan't to show it or a layout file (if you want to show it on multiple pages), like this:
// layout/default.vue
<template>
<!-- Your template -->
</template>
<script>
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) });
export default {
// etc...
}
</script>
Although the require part might mess things up...
Let me know if this works!

Insert the MailChimp code inside the <head>
head() {
return {
script: [
{
type: "text/javascript", // mailchimp universal script
src:
"//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js",
"data-dojo-config": "usePlainJson: true, isDebug: false"
},
{
type: "text/javascript", // mailchimp script for specific popup form
innerHTML: this.getMailchimp
}
],
__dangerouslyDisableSanitizers: ["script"]
};
},
computed: {
getMailchimp() {
if (process.client) {
return JSON.stringify(
window.dojoRequire(["mojo/signup-forms/Loader"], function(L) {
L.start({
baseUrl: "your base url",
uuid: "your uuid",
lid: "your lid",
uniqueMethods: true
});
})
);
}
}
}

Elasticsearch setting up stemming and analyzer questions

I'm using ES with my node server via the package "elasticsearch": "12.1.3".
I do bulk inserts of my documents. Excerpt:
var body = [];
_.each(rows, function(doc) {
body.push({
update: {
_index: 'mytest',
_type: 'mydoc',
_id: doc.id,
_retry_on_conflict: 3
}
});
body.push({
doc: doc,
doc_as_upsert: true
});
});
client.bulk({
body: body
}, ...
On demand, to individually update documents, I have this in place:
client.index({
index: 'mytest',
type: 'mydoc',
id: doc.id,
body: doc.body
}, ...);
Everything works as expected so far. Now I'm trying to add basic 'light_english' stemming.
Looking at the Docs here
and for the JS package here
I want certain fields in my document to be "fuzzy" matched, therefore I think stemming is the way to go?
It is not clear to me how I would set this up.
Assuming I use the example settings from the link above, would this be the right way to do it:
client.cluster.putSettings({
"settings": {
"analysis": {
"filter": {
"no_stem": {
"type": "keyword_marker",
"keywords": [ "skies" ]
}
},
"analyzer": {
"my_english": {
"tokenizer": "standard",
"filter": [
"lowercase",
"no_stem",
"porter_stem"
]
}
}
}
}
});
And would this then work permanently for my two code examples above, if applied once?
Bonus question: What would be a good default analyzer plugin (or settings) I can use? My main goal is that searches for example: "Günther" would also match "gunther" and vice versa.
Might it be better to do this manually before inserting/updating documents, so that strings are lower-cased, diacritics removed etc.?

TypeError: c[a] is undefined in CKEditor

I am loading ckeditor.js file using $.getScript and in callback I am initiating CKEditor. But it is showing an error TypeError: c[a] is undefined. Here is my code. How can I solve this issue?
$.getScript("ckeditor.js", function (data, textStatus, jqxhr) {
if (textStatus == 'success' && jqxhr.status == 200) {
CKEDITOR.replace( 'commentBox',
{
toolbar :
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Blockquote'] },
{ name: 'insert', items : [ 'Table','HorizontalRule','SpecialChar' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
]
});
}
});

I was getting the same error in similar circumstances.
I checked the formatted source in Chrome and discovered that this was being caused by the Format plugin trying to load its labels from the CKEDITOR.language object.
Turns out I didn't have en-gb included in my build and apparently it won't automatically fall back to straight en. Adding English (United Kingdom) to the build corrected the issues.

Re. https://stackoverflow.com/a/50719171/6462713
I had same issue. I have also loaded all supported languages in "/lang" folder. Basically my issue was - CKEditor isn't identifying properly its own folder path. So I set a CKEDITOR_BASEPATH variable before loading CKEditor.
It's briefly said here: (but there might be other places where it's explained better.) http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.basePath
Therefore implementation will be like this:
<script>
window.CKEDITOR_BASEPATH = 'http://example.com/path/to/libs/ckeditor/';
</script>
In my case i used window.CKEDITOR_BASEPATH = '/app/storereport/ckeditor/';
Then load the main ckeditor.js script. Hope this may help you.
<script type="application/javascript"/>
$(document).ready(function (){
CKEDITOR.replace( 'product_content' ); // ID of element
});
</script>