I tried out yeoman ember generator. In the generated index.html, I found these lines:
<!-- build:js(app) scripts/components.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script src="##ember"></script>
<script src="##ember_data"></script>
<!-- endbuild -->
The ## symbol above is really disturbing to me. So, what do they mean? What program does this syntax belong to, i.e., what program understands this?
Related
I use a HTML snippet in the Sitecore SXA metadata partial design to add some links in the head of the resulting HTML:
This HTML is:
<link rel="stylesheet" href="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.css" />
<script type="module" src="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.esm.js"></script>
<script nomodule src="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.js"></script>
But I would like to have the base path configurable using for example a token, like:
<link rel="stylesheet" href="$WebComponentsBasePath/sxa-umbrella-webcomponents.css" />
<script type="module" src="$WebComponentsBasePath/sxa-umbrella-webcomponents.esm.js"></script>
<script nomodule src="$WebComponentsBasePath/sxa-umbrella-webcomponents.js"></script>
where the token is set to: "https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents.
But token replacement does not work in the HTML snippet.
Any idea on how to make this base path configurable for the metadata partial design so I can have different configuration for my development environment and the production environment, and have the possibility to easily switch the base path on production to roll forward a version or roll back a version of the files used based on a configured base path?
I'm trying to implement the cycle2 plugin with jquery on an HTML page.
I've used the site http://jquery.malsup.com/cycle2 as a guide
I downloaded (copied) the file jquery.cycle2.js I placed it on the server in on the server in the location public_html/cycle2/jquery.cycle2.js
In my HTML page's Header section I added the lines:
<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
Then, in the HTML page's BODY I added:
<div class="cycle-slideshow">
<img src="cycle_images/image1.jpg" alt="Image1"/>
<img src="cycle_images/image2.jpg" alt="Image2"/>
<img src="cycle_images/image3.jpg" alt="Image3"/>
</div>
The guide doesn't give a css-type example for the class "cycle-slideshow". Instead it says that by using that class in the DIV tag it will auto-activate the slideshow.
This doesn't seem to activate the slideshow. Instead it lays out the images out in three rows, one row after another.
Any idea what I'm doing wrong to activate the cycle2 slideshow?
The problem was with the HTTP:// on the server line. Since the Cycle2 documentation was published, the GOOGLEAPIS sever must have obtained a certificate, making it HTTPS. The mismatch between HTTP and HTTPS caused the plugin to fail. The working code now reads:
<!-- include jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
It seems to me that it's safer to remove "HTTP" or "HTTPS" and just being the server line with "//".
Angular-cli is generating the index.html file during ng-build.
The app runs on a hardware proxy, meaning that all of it's script tags need to be prefixed with "/some/prefix/". The cli generates the following script tags.
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.b1a79a362dfcae386d67.bundle.js"></script>
<script type="text/javascript" src="main.2b9bcc2dcbe5c9cb526b.bundle.js"></script>
Is there a way to prefix the src of each tag with something?
You need to set --base-href when serving or building, e.g. ng serve --base-href '/some/prefix/' --aot.
--base-href sets the <base href='/some/prefix'> tag in your HTML file and adds such prefix to all scripts and stylesheets that are automatically defined.
Note, however, that setting the base tag manually will not have the same effect and that will be overwritten every time you build your application.
I have been searching for this all over, but can not find an answer or example.
Can a Ractive template be used to construct head elements that are consistant across pages, and can that be loaded from a separate file?
For example: all html, head, and title tag info is loaded via a referencable template from an external file into an index page.
+html+
+head+
+title+
+/title+
+/head+
And if so, how do you do it? As I try to wrap my head around it, jquery and ractive.js would need to load. Is there a different/better solution?
It is possible. But it's not practical and it raises other issues.
Here's a basic implementation that shows how <head> can be templated but without concentrating on putting the template in an external file. This works for me in Chrome and IE.
<html>
<head id="output"></head>
<script id="template" type="text/html">
<title>{{ title }}</title>
</script>
<script type="text/javascript" src="ractive.min.js"></script>
<script type="text/javascript">
var ractive = new Ractive({
template: "#template",
el: "#output",
data: {
title: "This is the title"
}
});
</script>
<body>
...
</body>
</html>
You'll run into problems with this approach because the head elements won't be loaded until after the page has loaded and Ractive kicks in. This may cause the following problems:
Search engines might not be able to read the page title and meta tags
Any javascript you need to load into <head> may not work (I tried some simple examples and was able to get the javascript to run but it failed to reference any elements in the body. Maybe it's a context issue and maybe Ractive has support to overcome this but this is an area I'm unfamiliar with.)
If you require valid HTML, this probably won't work for you because script tags can't be direct children of <html>, and <head> is supposed to have <title> as a direct child.
You're better off using a server-side solution to template <head>.
In my project I have multiple html files that I've added to the project.properties like this:
# Files can be added in a comma separated form
file.pages = loginapp.html, docapp.html, adminapp.html
The problem is that each of those files needs to load some app-unique scripts. E.g.:
<!-- In adminapp.html: -->
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/mylibs/jquery.tmpl.js"></script>
<script defer src="js/mylibs/knockout.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/helpers.js"></script>
<script defer src="js/app.admin.js"></script> <!-- ** unique for login ** -->
<script defer src="js/app.common.js"></script>
<!-- end scripts-->
<!-- in loginapp.html: -->
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/mylibs/jquery.tmpl.js"></script>
<script defer src="js/mylibs/knockout.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/helpers.js"></script>
<script defer src="js/app.login.js"></script> <!-- ** unique for admin ** -->
<script defer src="js/app.common.js"></script>
<!-- end scripts-->
It works brilliant until I ant build it.
It appears that HTML5 Boilerplate's build script has problems with figuring out what's going on here, and it only creates one concatenated file that contains the common stuff, and leaves the rest out (e.g. app.login.js and app.admin.js get copied into the publish/ folder, but are not linked to in the minified HTML files (which only link to one script and that's the concatenated one).
Is there any way to get this working?