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

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 },
],
});

Related

nuxt.config.js not loading .css files

I am attempting to include my meta information (mostly visible in the static .css and .js files) to my Nuxt application by adding them into nuxt.config.js. I am expecting all of my global meta tags (charset, keywords, etc) as well as my CSS to be loaded when I reload the project on the page I'm testing on, however only using the local vue-meta section gives these desired results. I would like to be able to have most of my meta in the configuration file, so while leaving everything in each page is an option,it is not the one I would like to take.
I get no warnings or errors when loading the page, which makes me believe that it's not a problem, but I have just started using this file and would like to know if it is something trivial
The head I am trying to implement in nuxt.config.js is below. All file paths are valid (since they are what I use in the individual pages and they work just fine.
module.export = {
head:{
meta: [
{charset: 'utf-8'},
{
name: 'keywords', content: '~some keywords~'
},
],
link: [
{ rel: 'stylesheet', href: '/css/style.css' },
{ rel:'stylesheet', href:'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'},
{ rel:'canonical', href:'https://www.self.com' }
],
script: [
{src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'},
{src: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'},
{src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'},
]
},
//...
}
I also have a similar body in my css: section, however that produced no results as well.
I believe you are missing a period ( . ) in your CSS link href, try:
href: './css/style.css'
Also you can try adding CSS as a property of your head object:
head {
link: [...],
css: ["./css/style.css"],
script: [...]
}/*end of head*/
If you try the second option then remove the CSS ref from your link array.
Good luck!

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 }

Grunt Concat same file multiple times

I'd like to use grunt-contrib-concat for application frontend HTML templating purposes and this would be useful for me.
I'd like to define page partials and and concatenate them inside an output file that is going to be compiled by handlebars.
I've got everything set up, however Concat doesn't allow me to use the same file more than once.
Basically concat is filtering the sources so they don't occur more than once. The second partial1.hbs will not be concatenated.
pageconcat: {
src: [
'app/templates/partial1.hbs',
'app/templates/partial2.hbs',
'app/templates/partial1.hbs'
],
dest: 'app/result.hbs'
}
Is there any way to do this?
Update 1
After playing around with grunt's console output function, I was able to debug (of some sort) the concat plugin. Here's what I found out: The input array is deduplicated by grunt for some reason.
Update 2
The deduplication occurs in the foreach file loop that grunt uses. I've managed to bypass that (see answer). I do not know how reliable my solution is but it's a workaround and it works well if you don't put the wrong input.
You may be able to use the file array format to set up two different source sets. Something like this:
{
"files": [{
"src": [
"app/templates/partial1.hbs",
"app/templates/partial2.hbs"
],
"dest": "app/result.hbs"
}, {
"src": [
"app/result.hbs",
"app/templates/partial1.hbs"
],
"dest": "app/result.hbs"
}]
}
added "app/result.hbs" to second source set, as was pointed out in the comments.
Thanks.
Solution
After some debugging I came up with a solution. Certainly not the best, but it works fine, as it should.
I edited the concat.js plugin file inside the node_modules folder the following way:
grunt.registerMultiTask('concat', ...){
var self = this;
//several lines of code
//...
//replace f.src.filter(..) wtih
self.data.src.filter(..);
}

Dojo build package configuration

In our Dojo system, we have something like the following specified in our dojoConfig:
packages: [{
name: "myWidgets",
location: "/js/libs/widgets"
}]
So that in our require statements, all we have to do is something like:
require(["myWidgets/myCalendarWidget"....
The problem is when I run the build, this dojoConfig is not available and I get numerous missing dependency errors because 'myWidgets' isn't defined according to the build profile.
Now, I've tried adding a package block to the build profile also, but the end result of that is to create an actual 'myWidgets' package, which I don't want.
So, is there any way to make the build see the definition of the 'myWidgets' alias, yet have the end result of the build output still mirror the regular file structure (i.e. /js/libs/widgets)? I tried to define these path aliases in the defaultConfig element in the build profile and that doesn't work either.
If you are using a profile, you can specify the packages in the profile
/util/buildscripts:./build.sh profile=../../../myProfile.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#profile-basics
You can also specify a javascript file that holds the dojoConfig
/util/buildscripts:./build.sh --dojoConfig ../build/examples/dojoConfig.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#using-a-package-configuration
Answer to your comment. The path is relative from where dojo.js is.
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
locale: 'en-us',
paths: {
"evf": "../../evf"
}
};
My directory structure looks like
js/dojo-1.8.0
dijit
dojo <-- contains dojo.js
dojox
util
js/evf
myCustomWidget.js

Is it possible to stop requireJS from adding the .js file extension automatically?

I'm using requireJS to load scripts. It has this detail in the docs:
The path that is used for a module name should not include the .js
extension, since the path mapping could be for a directory.
In my app, I map all of my script files in a config path, because they're dynamically generated at runtime (my scripts start life as things like order.js but become things like order.min.b25a571965d02d9c54871b7636ca1c5e.js (this is a hash of the file contents, for cachebusting purposes).
In some cases, require will add a second .js extension to the end of these paths. Although I generate the dynamic paths on the server side and then populate the config path, I have to then write some extra javascript code to remove the .js extension from the problematic files.
Reading the requireJS docs, I really don't understand why you'd ever want the path mapping to be used for a directory. Does this mean it's possible to somehow load an entire directory's worth of files in one call? I don't get it.
Does anybody know if it's possible to just force require to stop adding .js to file paths so I don't have to hack around it?
thanks.
UPDATE: added some code samples as requested.
This is inside my HTML file (it's a Scala project so we can't write these variables directly into a .js file):
foo.js.modules = {
order : '#Static("javascripts/order.min.js")',
reqwest : 'http://5.foo.appspot.com/js/libs/reqwest',
bean : 'http://4.foo.appspot.com/js/libs/bean.min',
detect : 'order!http://4.foo.appspot.com/js/detect/detect.js',
images : 'order!http://4.foo.appspot.com/js/detect/images.js',
basicTemplate : '#Static("javascripts/libs/basicTemplate.min.js")',
trailExpander : '#Static("javascripts/libs/trailExpander.min.js")',
fetchDiscussion : '#Static("javascripts/libs/fetchDiscussion.min.js")'
mostPopular : '#Static("javascripts/libs/mostPopular.min.js")'
};
Then inside my main.js:
requirejs.config({
paths: foo.js.modules
});
require([foo.js.modules.detect, foo.js.modules.images, "bean"],
function(detect, images, bean) {
// do stuff
});
In the example above, I have to use the string "bean" (which refers to the require path) rather than my direct object (like the others use foo.js.modules.bar) otherwise I get the extra .js appended.
Hope this makes sense.
If you don't feel like adding a dependency on noext, you can also just append a dummy query string to the path to prevent the .js extension from being appended, as in:
require.config({
paths: {
'signalr-hubs': '/signalr/hubs?noext'
}
});
This is what the noext plugin does.
requirejs' noext plugin:
Load scripts without appending ".js" extension, useful for dynamic scripts...
Documentation
check the examples folder. All the info you probably need will be inside comments or on the example code itself.
Basic usage
Put the plugins inside the baseUrl folder (usually same folder as the main.js file) or create an alias to the plugin location:
require.config({
paths : {
//create alias to plugins (not needed if plugins are on the baseUrl)
async: 'lib/require/async',
font: 'lib/require/font',
goog: 'lib/require/goog',
image: 'lib/require/image',
json: 'lib/require/json',
noext: 'lib/require/noext',
mdown: 'lib/require/mdown',
propertyParser : 'lib/require/propertyParser',
markdownConverter : 'lib/Markdown.Converter'
}
});
//use plugins as if they were at baseUrl
define([
'image!awsum.jpg',
'json!data/foo.json',
'noext!js/bar.php',
'mdown!data/lorem_ipsum.md',
'async!http://maps.google.com/maps/api/js?sensor=false',
'goog!visualization,1,packages:[corechart,geochart]',
'goog!search,1',
'font!google,families:[Tangerine,Cantarell]'
], function(awsum, foo, bar, loremIpsum){
//all dependencies are loaded (including gmaps and other google apis)
}
);
I am using requirejs server side with node.js. The noext plugin does not work for me. I suspect this is because it tries to add ?noext to a url and we have filenames instead of urls serverside.
I need to name my files .njs or .model to separate them from static .js files. Hopefully the author will update requirejs to not force automatic .js file extension conventions on the users.
Meanwhile here is a quick patch to disable this behavior.
To apply this patch (against version 2.1.15 of node_modules/requirejs/bin/r.js) :
Save in a file called disableAutoExt.diff or whatever and open a terminal
cd path/to/node_modules/
patch -p1 < path/to/disableAutoExt.diff
add disableAutoExt: true, to your requirejs.config: requirejs.config({disableAutoExt: true,});
Now we can do require(["test/index.njs", ...] ... and get back to work.
Save this patch in disableAutoExt.diff :
--- mod/node_modules/requirejs/bin/r.js 2014-09-07 20:54:07.000000000 -0400
+++ node_modules/requirejs/bin/r.js 2014-12-11 09:33:21.000000000 -0500
## -1884,6 +1884,10 ##
//Delegates to req.load. Broken out as a separate function to
//allow overriding in the optimizer.
load: function (id, url) {
+ if (config.disableAutoExt && url.match(/\..*\.js$/)) {
+ url = url.replace(/\.js$/, '');
+ }
+
req.load(context, id, url);
},
The patch simply adds the following around line 1887 to node_modules/requirejs/bin/r.js:
if (config.disableAutoExt && url.match(/\..*\.js$/)) {
url = url.replace(/\.js$/, '');
}
UPDATE: Improved patch by moving url change deeper in the code so it no longer causes a hang after calling undef on a module. Needed undef because:
To disable caching of modules when developing with node.js add this to your main app file:
requirejs.onResourceLoad = function(context, map)
{
requirejs.undef(map.name);
};

Categories