Including Raw (minified) JS

support
1

I want to include critical CSS right in the HTML and that works fine. I also want to do the same with the the minified JS (includes JQuery) bundle. but I get an error doing that.

<style>
  {{ print (partial "style.css" .) | safeCSS }}
</style>

<script>
  {{ print (partial "app.js" .) | safeJS }}
</script>

The error I get is:

ERROR: 2016/01/31 html/template:theme/partials/app.js: "=" in unquoted attr: "d.filters=d.pseudos,d.setFilters=new" in theme/partials/app.js

This error is because the template is trying to sanitize the content I think. Is there any way of achieving this without manually pasting the contents of that file in this location (which works)? I just want it to output the contents of this file here without trying to do anything fancy. I want raw output. Can this be done?

Thanks,
Anthony

2

I just solved this in a less than ideal way using:

{{ partial "app.html" . }}

And gulp plugin: https://www.npmjs.com/package/gulp-insert

var insert = require('gulp-insert');
pipe(concat('app.html'))
.pipe(insert.wrap('<script>', '</script>'))
.pipe(gulp.dest('layouts/partials'));
3

Have you tried just {{ partial "app.js" . | safeJS }}?

4

@michael_henderson is right with the correct partial syntax…

…but I bet what you want to accomplish is simpler than that. No need for partials. I’d just copy the files to two subdirectories of “static” because they just get copied over to the public site in the final render:

yourhugosite
    ├── static/
   ...     ├──css/
           |   └─ style.css
           └──js/
               └─ app.js

And then on the template or hardcoded page (as in simple HTML):

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- all your other meta stuff here -->
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/app.js"></script>
</head>
<body>
...
</body>
</html>

I mean, you could put half of that into a header.html partial and the other half in footer.html partial and call those in a single.html default layout or Home page, but for what you’re asking, I would say this is all you need.

If you wanna get fancy, you could add:

<link href={{ printf "%s/css/style.css" $.Site.BaseURL }} rel="stylesheet">
<script src={{ printf "%s/js/app.js" $.Site.BaseURL }}></script>

…but it would be largely overkill in this case.

5

Thanks for your helpful reply. It’s appreciated.

1 Like
6

Or

{{ absURL "/js/app.js" }}
1 Like