We Keep Coding

How to incorporate custom theme js files into Nuxt

I am attempting to use a purchased Bootstrap theme (because I am design challenged) into a Nuxt site. I have managed to get all of the scss/css files included, but I'm having problems finding a way to get the custom .js files to be added as well. The theme itself uses jQuery, and the two files are all jQuery functions. I've added bootstrap-vue and jQuery from npm, and I've tried adding the files in the script item in the head section in nuxt.config.js like so using theassets` directory;
head{
script: [
{ src: '~assets/js/min/plugins.min.js' },
{ src: '~assets/js/min/custom.min.js' },
{ src: '~assets/js/min/modernizr.min.js' },
],
}
and like so using the static directory
head{
script: [
{ src: 'js/min/plugins.min.js' },
{ src: 'js/min/custom.min.js' },
{ src: 'js/min/modernizr.min.js' },
],
}
but either way, I keep getting a jQuery is not defined error.
Is there another way to load these files so that they have access to jQuery? Search results seem to indicate that maybe I should use a plugin, but I'm not sure how to do that just to add a local js file.

Maybe you have just a / missing?
Assuming you have this folder sturcture:
/static/js/modernizr-custom.js
You could include it:
head: {
...
script: [
{ src: '/js/modernizr-custom.js' }
]
}
Does this solve your problem?
Also it is of course mandatory that if your plugin.js is using jQuery that you actually load jQuery.
To do that, just include jQuery in the same way to your scripts in nuxt.config.js:
head: {
...
script: [
{ src: '/js/jquery.min.js' },
{ src: '/js/plugin.js' }
]
}
This means you have to download jquery and put it into your static directory.
Alternatively you could use a CND to load jquery from. (This makes sense, because other pages might have loaded jquery from the same cdn and you have it already cached).
{ src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js }

How to add jQuery into a VuePress file

I have a project that I want to document with VuePress, and I have a small code that requires jQuery to run. I know you can add inline script tags and put code in them, but I can't seem to be able to add jQuery. Here is the folder structure and what I've tried:
docs
.vuepress
-- dist
-- public
-- css
-- js
-- jquery-3.3.1.min.js
-- scripts.js
-- config.js
components.md
and in components.md I added the following at the end:
<script src="/js/jquery-3.3.1.min.js"></script>
Here's the error when adding jquery in the script tag:
Module not found: Error: Can't resolve '../../../../../../js/jquery-3.3.1.min.js?vue&type=script&lang=js&' in C:/Users/../docs
# ./node_modules/vuepress/lib/app/.temp/routes.js
# ./node_modules/vuepress/lib/app/app.js
# ./node_modules/vuepress/lib/app/clientEntry.js
# multi ./node_modules/vuepress/lib/app/clientEntry.js
Adding the css in config.js in module.exports.head works, but for some reason adding javascript doesn't work (jquery gets added, but sometimes it works and most of the time it doesn't). Here's what I tried in config.js
head: [
["link",{ rel: "stylesheet", href: "/css/bootstrap-4.1.3/bootstrap reboot.css" } ],
["link",{ rel: "stylesheet", href: "/css/bootstrap-4.1.3/bootstrap-grid.css"}],
["link", { rel: "stylesheet", href: "/css/bootstrap-custom.css" }],
["link", { rel: "stylesheet", href: "/css/style.css" }],
["script", { src: "/js/jquery-3.3.1.min.js" }],
["script", { src: "/js/scripts.js" }]
]
EDIT: I tested a bit more and apparently, even though the scripts are imported, I can't select the element I want to select. For example $('.my-elements') returns an empty selector. On the other hand document.getElementsByClassName('my-elements') works and shows the element I want as the first array element, but if I want to select that first array element with [0] at the end it returns undefined.
I tried selecting elements in the console using the 2 functions above. The same functions work in the console but don't work in the script, this is weird.

In
.vuepress/config.js
add script
module.exports = {
head: [
['script', {src: 'https://code.jquery.com/jquery-3.4.1.min.js'}]
]
}
Further docs about head config
https://vuepress.vuejs.org/config/#head
jQuery CDN
https://code.jquery.com/

just to add, for vitepress if anyone is using, (the newer 1.0.0-alpha45) has now changed for defining .vitepress/config.js
export default {
head: [
['script', {src: 'https://code.jquery.com/jquery-3.6.3.slim.min.js'}]
]
}

Add "active" classes to menu items using Grunt

I am using Grunt to build a set of static pages that operate together as a site/application. In the interest of sticking to DRY practices, I am using a package called grunt-processhtml to do "includes".
However, my "included" navigation does not have the appropriate classes to indicate the current page in the navigation. I can pull it off with JavaScript if I need to (set the active class after the menu is created, based on either a variable or the URL). However, I also stumbled across this:
grunt-autonav
Which post-processes my assembled static files and adds the appropriate class. However, I can't for the life of me figure out how to configure it for "process all of the .html files and add the appropriate classes to each of them."
My last failed attempt looks like this:
autonav: {
options: {
parent: '.nav'
},
dev: {
src: '<%= dirs.purgatory %>/html/**/*.html',
dest: '<%= dirs.dev %>'
}
}
However, the plugin doesn't seem to want to use this kind of input for the source:
Warning: Unable to read
"purgatory/html/download.html,purgatory/html/upload.html" file (error
code: ENOENT). Use --force to continue.
It sees my two HTML files but doesn't know how to take it from there. I can't tell if I have a configuration error or if the plugin just doesn't work this way. The sample given in their documentation seems to require specifying every single page that needs its nav customized. But it might be a reading comprehension issue.
Does anybody know how to accomplish my goal in Grunt (not in JS) using the above or any other tools? I don't mind adding a new tool, but I've come up short.

To use dynamic file lists in grunt and all its plugins, you need to wrap your src/dest in a files object and set expand to true:
autonav: {
options: {
parent: '.nav'
},
dev: {
files: {
expand: true,
src: '<%= dirs.purgatory %>/html/**/*.html',
dest: '<%= dirs.dev %>'
}
}
}

Xavier Priour set me on the right path, but I had to scratch my head a bit before I arrived at the final solution:
autonav: {
options: {
parent: '.nav'
},
dev: {
files: [
{
expand: true,
cwd: '<%= dirs.purgatory %>/html',
src: '**/*.html',
dest: '<%= dirs.dev %>'
}
]
}
}
First, I had to look into expand, which provided samples that used the files property Xavier mentioned. However, the examples show that files is an array of objects. Not sure if it "has" to be, but I followed that pattern and wrapped it up as an array.
Next was realizing it wasn't the input string that was wrong, it was that I was configuring the copy incorrectly. When expanded, the destination is a recreation of the source path. To get around this, you issue a CWD. This means that your input path is essentially "null"-ish and it doesn't create a "purgatory" directory in the destination.
The final task now works as expected!

Gulp doesn't create folder?

When I minified my css, I was left with an incorrect path to the fonts from various libraries. So, I created a task to move the fonts from my bower_components/ folder to dist/public/fonts:
gulp.task('doit', function() {
gulp.src(["public/bower_components/bootstrap/dist/fonts/*", "public/bower_components/font-awesome/fonts/*"])
.pipe(gulp.dest("dist/public/fonts"));
});
Basically that should throw any fonts I need into a generic fonts folder, which my minified css should now be able to access.
But after I run it, dist/public/fonts doesn't exist. Why not?

I don't fully understand the paths you're src-ing (public/bower_components?), but I believe you'll want to use the base option for gulp.src.
Because these two globs will have different bases, I'd suggest breaking it into two separate tasks, and building a third to aggregate them into a single. Otherwise you'll need to get into merging streams or the addSrc plugin.
gulp.task('copy:fonts:bootstrap', function () {
return gulp.src(
[
'public/bower_components/bootstrap/dist/fonts/**/*'
],
{
base: 'public/bower_components/bootstrap/dist/fonts'
}
)
.pipe(gulp.dest('dist/public/fonts'));
});
gulp.task('copy:fonts:fontawesome', function () {
return gulp.src(
[
'public/bower_components/font-awesome/fonts/**/*'
],
{
base: 'public/bower_components/font-awesome/fonts'
}
)
.pipe(gulp.dest('dist/public/fonts'));
});
gulp.task('copy:fonts', ['copy:fonts:bootstrap', 'copy:fonts:fontawesome']);

According to this article, specify your src like this:
gulp.src(['src/js/**/*.js'], { base: 'src' })
.pipe(foo())
.pipe(gulp.dest("./public/"));
and it will auto create the destination directories for you. In this case, the 'js' folder will be created in public if it doesnt exist already.

How can i add a search to a reveal.js presentation?

How can i add a search to a reveal.js presentation ?
There is a search.js file available under plugins but i'm not sure how to use it.
Please help me to set this up. thank you.

To include the search plugin, you can add an entry to the dependencies array in the initialization object (this is at the bottom of the index.html file in the repo):
Reveal.initialize({
dependencies: [
{ src: 'plugin/search/search.js', async: true },
],
});