I'm working through a Coveo Atomic tutorial here: https://levelup.coveo.com/learn/courses/atomic/lessons/lesson-0-setup-and-initializing-the-search-interface In their example they show setting up the initialization code in your index.html file like the following:
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="https://static.cloud.coveo.com/atomic/v2/atomic.esm.js"
></script>
<link
rel="stylesheet"
href="https://static.cloud.coveo.com/atomic/v2/themes/coveo.css"
/>
<link
rel="stylesheet"
href="style.css"
/>
<script>
(async () => {
await customElements.whenDefined("atomic-search-interface");
const searchInterface = document.querySelector("#search");
await searchInterface.initialize({
accessToken: "xx29e62e9b-f739-4886-b433-c9326cc1b492",
organizationId: "docsdemoslhkhaxyy",
});
searchInterface.executeFirstSearch();
})();
</script>
</head>
<body>
<atomic-search-interface id="search">
<atomic-search-layout>
<!-- all Atomic components will go in here -->
</atomic-search-layout>
</atomic-search-interface>
</body>
</html>
For the code that goes in the head element, should i put that in the head element of the index.js file in the pages directory? For the code that goes into the body element, where should i put that, in the Docusaurus files? Is there an overall best practices when implementing something like this in Docusaurus? This is the first time I've tried this so I apologize up front for even more newbie questions than usual.
I would have thought that putting this code in the index.js file would be correct?
There are multiple js and css libaries loaded (see code snippet)
Basically, this is what I have right now:
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/7a1973f505-d75d99e70d86f83941cb8dde29be02ed.css" media="all">
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/merged-4c85787f15040b42f80e9b8c12940eda-46385b6288d9ae801d3574a36a4f492d.css" media="all">
<script src="/typo3temp/assets/compressed/jquery-3.2.1.min-0e2a44e5d7960526ea22d19998a23651.js" type="text/javascript"></script>
<script src="/typo3temp/assets/compressed/merged-62fcf9b86d5d5537cbb754d505e7050c-e3f29e58f7f84473b47512d5d903396a.js" type="text/javascript"></script>
And this is what I want to get:
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/merged-4c85787f15040b42f80e9b8c12940eda-46385b6288d9ae801d3574a36a4f492d.css" media="all">
<script src="/typo3temp/assets/compressed/merged-62fcf9b86d5d5537cbb754d505e7050c-e3f29e58f7f84473b47512d5d903396a.js" type="text/javascript"></script>
Depending on where some extentions get into play, there are multiple libaries not included into the merged one.
I do know where the original libs are coming from (before getting stored in typo3temp), however I don't know how to include those into the merged files.
The typoscript setup should be correct. It is configured like this:
config {
concatenateJs = 1
compressJs = 1
compressCss = 1
concatenateCss = 1
...
Is there a excludeFromConcatenation = 1 or disableCompression = 1 somewhere in the config?
Edit:
There is also includeJS or includeJSFooter or includeJSFooterlibs or includeJSLibs in page configuration of TypoScript are they difering maybe?
The Pagerenderer.php file is somehow seeing them as separate things to concatenate..
I checked a few Typo3 sites of our own company, they have 1 file only, 1 request. So there must be something different, with the page configuration?
This code in TypoScript:
page = PAGE
page.typeNum = 0
page {
# set properties ... (lot of configuration code)
}
I created a Website using material design lite:
Scripts:
<script src="./mdl/material.min.js"></script>
<script src="Scripts/angular.min.js"></script>
.css files included in html:
<link rel="stylesheet" href="./mdl/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It is looking like this:
After that I created a new uwp JavaScript Project and mainly just used C&P.
The result is:
Of Course I applied the right source paths for the scripts for uwp.
My Uwp Folder structure:
In my uwp the paths are this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="js/mdl/material.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
And in the Body:
<script src="/js/mdl/material.min.js"></script>
<script src="/js/Scripts/angular.min.js"></script>
Seems like the problem is actually not with local styles or scripts but with the external one you are using for icons. UWP blocks including external scripts or css-files into pages executed in local context. I would also highlight that it is not recommended per design principles as all your interface-related icons should not depend on internet connection.
You should include that CSS-file for material design icons into your project (and I suppose font-files as well).
Or just hack the security of UWP and use this trick :
function loadExternalScriptAsync (scriptUrl)
{
return WinJS.xhr({ url: scriptUrl }).then(function(req) {
var scriptTxt = req.responseText;
try
{
var bb = new MSBlobBuilder();
bb.append(scriptTxt);
var data = bb.getBlob('text/javascript');
var sc = document.createElement('script');
sc.setAttribute('src', window.URL.createObjectURL(data));
document.head.appendChild(sc);
return true;
}
catch (e)
{
return false;
}
})
},
Which will download the script save it as a blob, and then will be allowed to reference it. Will definitely work for css, and have some limitation for JS since it won't work if the downloaded script try it self to load external script
I'm using WinJS.xhr...but any XmlHttprequest will works as well
Romain
I have downloaded 2 packages from the internet. One is used for making the items of a list, show in pages, and the other one is a jPlayer for .mp3 files.
The next page/previous page buttons for the pages of the list, have the same name with the next song/previous song buttons of the mp3 player. They are both called jp-next and jp-previous.
These are the files the List-Paging:
<link rel="stylesheet" href="http://shiro-desu.com/scr/itemsperpage/style.css">
<script type="text/javascript" src="http://shiro-desu.com/scr/itemsperpage/jquery-1.8.2.min.js"></script>
<script src="http://shiro-desu.com/scr/itemsperpage/jPages.js"></script>
These are the files the jPlayer:
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jplayer.playlist.min.js"></script>
<link href="http://shiro-desu.com/scr/jquery/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
The way i see it, changing some names in the List-Paging files will do the trick.
Problem is that i have absolutely no experience with javascipt,jQuery, i kindly request for help on this matter.
The only problem is that next page/previous page background, is affected by the background of the next song/previous song.
I have uploaded a sample on jsfiddle to show you the problem.
--> http://jsfiddle.net/5svd5mnh/
One way of avoiding this problem is to use :
<?php echo'<link href="http://shiro-desu.com/scr/jquery/jplayer.blue.monday.css"
rel="stylesheet" type="text/css" />'; ?>
in your page, in the <body> part only when you actually use the jPlayer.
So that the 2 .css files will never be imported at the same time.
This however means that you won't be able to use a jPlayer and a List-Paging in the same .html page.
I have a group of CSS imports as like:
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
and some JavaScript code imports as like:
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
Is it possible to put all CSS import lines into a file i.e. cssImports.css and put all JS import lines into a file i.e. jsImports.js. So when I want to import that CSS and JS group files I will write something like:
<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>
so all the files listed above will be imported?
PS: I don't want to write any code belongs to web server specific.
Javascript imports: no.
CSS import: yes, but you shouldn't because it breaks parallel downloading of stylesheets.
Your best bet is to use a local build script (such as the Ant script included with the HTML5 Boilerplate) to concatenate your stylesheets and scripts before uploading them to the server, then linking to the 'master' resources in your HTML:
<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>
There is a tutorial on using the Ant script.
Go with LazyLoad! https://github.com/rgrove/lazyload/
It's a very small js (less than 1kb) that takes care of resource loading for you.
Download the package and save on your js folder. Then you would probably want to do this:
<script src="js/lazyload-min.js"></script>
Then for javascript files:
<script>
LazyLoad.js(["/js/excanvas.js", "/js/jquery.js", "/js/jquery.livesearch.js", "/js/jquery.visualize.js"], function () {
alert('all js files have been loaded');
});
</script>
Css:
<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {
alert('all css files have been loaded');
});
</script>
This will also boost the performance of your page, enabling parallel css and js loading (the latter on firefox opera only).
You can Import CSS like this:
Create a new CSS cssImports.css and add there lines
#import url('/css/reset.css');
#import url('/css/visualize.css');
#import url('/css/datatables.css');
and relate it in your homepage as:
<link rel="stylesheet" href="/css/cssImports.css"/>
For Javascript import doesn't work. But you can create a single JS file and include the javascript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each js file.
for css:
<style>
#import url('/css/styles.css');
</style>
for js you could try something like
document.write("<script type='text/javascript' src='otherScript.js'></script>");
but i dont see a reason to do either of theese...
Yes just copy all the code and place in into a new file in the order than you would like it to run.
I know there are some javascript libraries that can do this for you but I dont have an experience of using them. I think Yahoo compiler/ YUI has one.
I'm not recommend do that because performance issue, but if you want the way, you can do that:
For CSS yes its possible, in cssImports.css you can put:
#import url(/css/reset.css);
#import url(/css/visualize.css);
#import url(/css/datatables.css);
But for JS, I think no way as much as CSS, but you can do this (adding JS files) from one JS file (ex jsImports.js), by write code create script element and add this element to page, like that :
var jsE = document.createElement('script');
var url = 'JS LINK HERE';
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
Do this for each link of JS that you want to put, I have and idea, using Arracy contains JS links like this:
var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);
then a loop read a link each time and put this, like :
for (i = 0; i < jsLinks.length; i++)
{
var jsE = document.createElement('script');
var url = jsLinks[i];
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
}
I didn't test my code, But I hope my idea is explained well.
Best
Edit 1: yes you can use Gatekeeper solution for JS (Very Simple), but it use "write" but "for me" I don't like that way :)
This is now possible as follows with HTML Imports which are in W3C draft
<link rel="import" href="import.html">
import.html
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
At this time only Chrome, Android and Opera support HTML Imports natively, but WebComponents provides a very mature polyfill script called webcomponents-lite.js to support all modern browsers