Unable to use custom JavaScript about eleventy-high-performance-blog HOT 21 CLOSED

You probably need to allow-list the JavaScript in the Content-Security-Policy (CSP) configuration here: https://github.com/google/eleventy-high-performance-blog/blob/main/_data/csp.js#L32

If you see warnings in the console regarding CSP, then that is the way to go.

from eleventy-high-performance-blog.

I tried several things ( Also read the docs on https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) and nothing works (lack of knowledge).

I need to create a rule that looks like something like this? ["js-src", quote("unsafe-inline")]

I'm placing the Javascript on the JS folder. Tried to place it on the _data folder.

Also I'm pushing css like this:

{% set css %}
{% include "css/backtotop.css" %}
{% endset %}

<style>
    {{css | cssmin | safe}}
</style> 

Tried to put the css on the main css. And nothing works.

I'm probably doing several things wrong. :D

from eleventy-high-performance-blog.

from eleventy-high-performance-blog.

Tried to remove the CSP file but still doesn't work.

I've changed the repository visibility to public. I'm trying to use the same logic with your starter. https://github.com/ornelasnarciso/artornelasnarciso

I have the JS on the JS folder.
Inside partials i have the backtotop.njk and the others.
And css on styles.

Thank you for the help. :)

from eleventy-high-performance-blog.

Have you tried including it in the rollup config?

from eleventy-high-performance-blog.

I've tried to place the JS on the main.js but still it does not work. This is some file structure problem i can't figure out. I think this could be very easy to solve for someone experienced but I'm a noob.

And how would i include my code in the rollup config?

import { terser } from "rollup-plugin-terser";

export default {
input: "src/main.js",
output: [
{
file: "js/min.js",
format: "iife",
sourcemap: true,
plugins: [terser()],
},
],
};

from eleventy-high-performance-blog.

If you place it in the src/main.js, then I think there is no need to add any new config. But this is how I include my JS file (src/bp.js) in the rollup config.

import { terser } from "rollup-plugin-terser";

export default [
  {
    input: "src/main.js",
    output: [
      {
        file: "js/min.js",
        format: "iife",
        sourcemap: true,
        plugins: [terser()],
      },
    ],
  },
  {
    input: "src/bp.js",
    output: [
      {
        file: "js/bp-min.js",
        format: "iife",
        sourcemap: true,
        plugins: [terser()],
      },
    ],
  },
]

Then make sure to add the script tag in your base.njk (in _includes/layouts/), with the output file (/js/bp-min.js in my case) as the src.

Also as @cramforce said, look at your console and network tab in the dev tool (CTRL SHIFT I) to see if there is an error regarding the CSP.

Hope it helps.

from eleventy-high-performance-blog.

Tried it but the JS still does not work.

This is very nice starter, but for very experienced developers. I'm not one and I have no idea why the JS does not work.

Thank you for your help.

from eleventy-high-performance-blog.

I think it should work if you did all the steps. Is there any warning in the terminal when you do npm run watch?

I did encounter some problems with my rollup config when setting up my JS. And there are some configurations needed if you wanna use node_modules.

from eleventy-high-performance-blog.

I'm ok with the css, html and some basic javascript but with more complex projects i struggle a bit, because I don't know what errors i should be looking for.

This is my current website: https://github.com/ornelasnarciso/artornelasnarciso / https://ornelasnarciso.com/

This is the project with the starter: https://github.com/ornelasnarciso/starter

I'm nearly done, but the javascript is not working. I think is the file structure. But I have no idea what to do to fix it.

Thank you for your time and patience.

from eleventy-high-performance-blog.

You're not including the script tag in your base.njk as I stated before.

Add this just before the </head> (or anywhere inside the head tag).

<script async defer src="{{ "/js/bp-min.js" | addHash }}"></script>

Any script you want to use must be linked like that, too.

from eleventy-high-performance-blog.

Nop. The JS still doesn't work. :(

from eleventy-high-performance-blog.

Don't know then. Also, I think it's not the correct place to discuss any specific problem like that.

from eleventy-high-performance-blog.

Tried to upload to Netlify and a bunch of errors. I'm unable to make the JS work, even with help.

I'm giving up on this starter. It's to complicated for me.

Thank you very much for your time and help.

from eleventy-high-performance-blog.

from eleventy-high-performance-blog.

@cramforce sorry, I just saw your message. I came back to your starter and I think I know why the buttons are not working. The Jquery is the only thing that is not loading, everything else loads. --> Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). If I remove the CSP jquery works just fine.

Since I have all files stored locally (jquery, fonts, etc) it should be working, but it's not. Am I missing something?

["script-src", SELF, "HASHES"],

And I hope one day I'm able to understand all your code. This starter is really good. :D

All the code on csp.js

const SELF = quote("self");

const CSP = {
regular: serialize([
// By default only talk to same-origin
["default-src", SELF],
// No plugins
["object-src", quote("none")],
// Script from same-origin and inline-hashes.
["script-src", SELF, "HASHES"],
// Inline CSS is allowed.
["style-src", quote("unsafe-inline")],
// Images may also come from data-URIs.
["img-src", SELF, "data:"],
// youtube embeds
['frame-src', 'https://www.figma.com/ https://player.vimeo.com/video/ https://www.youtube.com/embed/'],
]),
};

function quote(str) {
return '${str}';
}

function serialize(csp) {
return csp.map((src) => src.join(" ")).join(";");
}

module.exports = () => CSP;

from eleventy-high-performance-blog.

If you are loading jquery from a URL, then you need to add it to the script-src like ["script-src", SELF, "HASHES", "https://some.com/query/url"],

from eleventy-high-performance-blog.

I'm running jquery locally. It should be working with no extra code. For some reason, only jquery, is being blocked.

I tried using your method but still doesn't work. I'm probably doing something wrong.

then:

["script-src", SELF, "HASHES", "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"],

locally:

["script-src", SELF, "HASHES"],

{% set js %}
{% include "js/jquery.js" %}
{% endset %}

from eleventy-high-performance-blog.

Just found out that the problem is between jquery and CSP. Apparently I have to create something like a nonce to make it work. Still haven't figure out how. Debugging is the worst on code.

from eleventy-high-performance-blog.

@mufidu @cramforce after messing a lot with the starter and going back to all the hints you guys gave I was finally able to make everything work. Sorry if I was a bit annoying. This starter is a master piece. Thanks. :D

from eleventy-high-performance-blog.

Very glad to hear that!

from eleventy-high-performance-blog.