I'm trying to find out how can I add JS code snippets to work with Docusaurus.io (https://docusaurus.io). I want to add some analytics tools to my Docusaurus based web documentation such as - mixpanel, full story, etc. but I didn't find how can I do it.
I am not sure exactly where you'd like to put JS snippet in. Here are some scenarios in Docusaurus.
You may add JS file to siteConfig.js, this section:
scripts: ['https://buttons.github.io/buttons.js'],
If you'd like to add JS snippet to pages, then it is doable since each page is just a React component. Something like this in your render method:
<script type="text/javascript" dangerouslySetInnerHTML={{__html: js_snippet}} />
If you'd like to add JS snippet to docs I think it is pretty hard because docs are in markdown which I don't think you can add script tag.
Hope this helps.
Add a scripts key into siteConfig.js which takes in an array of script sources you want to load in the head. As mentioned on this page - https://docusaurus.io/docs/en/site-config.html#optional-fields
scripts - Array of JavaScript sources to load. The script tag will be inserted in the HTML head.
So you can add it as such in siteConfig.js:
const siteConfig = {
...
scripts: [
'https://buttons.github.io/buttons.js',
...
],
...
};
Related
There is a site with wall of topics. Anyone can write anything. But anyone can write JS script and this script will be executed with loading this site.
Something like document.body.innerHTML = "";.
I wrote also script which found every script in <div> with topics and rewrite its to empty string, but it does not work.
If I tested this script on the site (in console) with topics (before executed), it found scripts and rewrite its, but after post my script to this website, it does not work. Scripts will be executed after all.
Can I fix it before help from IT tech?
One solution is to add the user content as a text node. The content will show up exactly as the user typed it. Though if you're trying to include formatting (bold, italic, etc.), this won't work.
const userContent = "<myScript>alert('here')</myScript>"
const userContentNode = document.createTextNode(userContent)
document.body.appendChild(userContentNode)
<body>
</body>
I had to use <myScript> instead of <script> because it looks like Stackoverflow does some kind of anti-XSS stuff for snippets.
I have a multi-page HTML site with common code that is reused on each page (for example, navbar code, Analytics, stylesheet imports, etc).
Is there a way to dynamically insert that common code in a manner that achieves the same result as PHP's include capability, and makes the code easier to maintain?
I've seen similar questions but not all seem to speak to what I want to achieve with the site I am working with. For example:
How to inject HTML banner code using Vanilla Javascript? - Stack Overflow
Important: Much of the code I want to insert/import will be <header> code that is necessary to properly render the pages so it will need to be inserted as the page loads.
Any suggestions? Please limit suggestions to vanilla JavaScript. I don't know JQuery at this point and want to try do this with JS.
There are a handful of ways to do what you want, but I think a template engine such as EJS or similar will meet your needs.
Do keep in mind though the implications of doing this client-side. Crawlers and such that don't run JavaScript won't have the benefit of seeing what's supposed to be on your page.
What you should probably be doing instead is running these JavaScript templates server-side, outputting static pages which then can be put on your web server or CDN.
Webpack? You could use a packaging system to fuse all your JS into one file, same for CSS. That way you have only only script and one link to add to each page. But for HTML parts, they would be added with javascript ajax and that shouldn't be a solution...
Why would you have multiple pages at all? Cant you just have one page, then update a certain ( the main part) part of your page with new code content instead of a redirect. ( if you want to see this in action visit http://google.com, http://twitter.com and many many more ). the index.html would then look like this:
<body>
<div id = "nav" >
<a href = "/whatever.html" class = "redirect" > Whatever </a>
</div>
<div id = "main" >
Some content
</div>
<script>
//embed jquery
$(_ => {
$(".redirect").on("click",function(e){
e.preventDefault();
$("#main").load(this.href);
});
});
</script>
I am trying to get Isotope javascript ) to work on a test page.
I am trying to get their example of Filtering with Isotope working. (Stackoverflow not allowing me to post a link as I'm new to posting on here...!)
I have copied their example HTML, CSS and vanilla JS into a test page here on my domain: http://chrislydon.co.uk/testiso.php
(A php file because I want to test adding items from a MySQL DB once the basic thing is working!)
I think I have everything I need: reference to the Isotope JS in the head, their JS copied to between tags - and their exact HTML (and CSS).
I am following the example which was labelled as "Vanilla JS" (as their other examples relies on JQuery (which I will implement eventually...))
I can't see what I'm doing wrong that means this verbatim copy of their example won't work....
(Tried it on different browsers - their examples work in them, but my copied example doesn't)
I'm OK with PHP/HTML but only done basic stuff in JS so perhaps I'm missing something terribly obvious!
Thanks for any help you can offer!
There were two main problems:
1) in the <head> of the document, your <script> tag is missing a >: <script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"</script>
Change to:
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
2) If the above initializer runs in the <head> of the document, there will be no document available to query and document.querySelector('.grid') will return null.
Instead, put the script just before the </body> tag.
Working jsFiddle:
https://jsfiddle.net/dptve3s6/1
Bonus: You have a function called myFunction attached to a button's onClick event, but that function is not defined anywhere. Define it, and enjoy.
I'm not a front-end developer and have been struggling for hours to get highlight.js to do what I want. Need to display code nicely in a blog. Okay, it works perfectly in that it renders the code I post into
<pre><code>...</code></pre>
...very nicely and colourfully with the chosen style, idea.css for example. I've got all the styles and highlight.pack.js ready to go in the directory.
But it is so messy to paste the whole program between those tags! It is more cleanly reusable for other things if the code can stay in its file.
What is the shortest and most elegant way (without loading in any external libraries if possible) to get it to pull the code out of a python file in the same directory myCode.py in between those tags?
The main reference for this library is here.
I am assuming that your code file to highlight lives on the webserver.
Import the file using JQuery get.
Put the content into the code tags.
Call the appropriate function from hightlight.js to make it highlight the code.
Here is some HTML/JS code:
<pre><code></code></pre>
<script type="text/javascript">
$.get("/myCode.py", function(response) { //(1)
$("code").html(response); //(2)
$("code").each(function(i, block) {
hljs.highlightBlock(block); //(3)
});
});
</script>
Note that this assumes that there is only one <code> tag in your page.Otherwise step 2 needs to be adjusted.
I installed Foundation 6 using bower. I keep getting multiple warning in the console every-time I use any Foundation 6 - JavaScript based plugin.
Exact warning :
Tried to initialize magellan on an element that already has a Foundation plugin.
My script includes look like:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
The warning is triggered by the following code present in foundation.js at line 180 :
// For each plugin found, initialize it
$elem.each(function () {
var $el = $(this),
opts = {};
// Don't double-dip on plugins
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
return;
}
I have tried re-installing from scratch but it still doesn't work.
Similar question exists in Zurb Foundation Forum but till now there is no good answer.
How do I resolve this?
UPDATE
For Version 6.4.*, all plugins and js based elements tend to work only if $(document).foundation(); is mentioned within the html file. So delete it from app.js if you have written in it. For additional reasons, go through the explanation below.
Although I have mentioned the answer long back in the comments of the question, I felt it will be better to write it up with few more points.
While installing Zurb Foundation 6 using bower (command line), it gives you a nice index.html page to get started which has the <script> tag that refers to an external js file located at root\js\app.js. The app.js file by default has the following code:
$(document).foundation(); //invoke all jQuery based Foundation elements
So basically, you already have everything to get started.
But, this wasn't the way how it worked until Foundation 6 and I wasn't aware of these changes. I didn't go through the contents of app.js as I was assuming it to be empty. I simply did the old way of invoking them in my html pages by writing the following code:
<script type="text/javascript">
$(document).foundation();
</script>
This kind of double referred the jQuery based Foundation elements raising a warning at the browser console.
Solution was to remove either of the invocation, but actually removing the code written in external js file makes more sense for the following reasons:
External references cost an additional http request, very slightly increasing the precious page load time. Why not reduce it, if you can.
Invoking jQuery based elements in the site has to be done as early as possible so that every element gets the original shape in no time. So it makes more sense to mention the invocation within a html page rather than request a external file to invoke.
So, remove the code mentioned in the external js file, that is your app.js file. The warnings would vanish.
For Version 6.4.*, all plugins and js based elements tend to work only if mentioned within the html file.
The best solution to this problem is to put $(document).foundation(); inside <script> tag under .html file, and remove it form external .js file (app.js)
Like this-,
in
xyz.html
<script type="text/javascript">
$(document).foundation();
</script>
other solution like, putting it inside external .js file (app.js), and removing it from .html file, will not always works.
at least it didn't work for me.
Tested on-
foundation version 6.4.2