Comments (21)
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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>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.
Related Issues (20)
- Issue with javascript and some considerations about this amazing starter
- how can i add more navigations besides "about" HOT 3
- Feature: Internationalization HOT 2
- CSP Headers Injection to non-standard _headers; htaccess instead. HOT 1
- Web Vitals max
- Image blurring works weird with transparent PNGs HOT 6
- GA issue #46 should not be hard-coded HOT 2
- Mocha as a `dependency` HOT 3
- Twitter Web Intents HOT 1
- Tags do not function correctly HOT 4
- ENOENT: no such file or directory, image plugin issue? HOT 3
- ffmpeg struggles converting gifs with odd dimensions
- Original site seems to fix Nav styles
- Largest Contentful Paint image was lazily loaded HOT 3
- AllowDomainlist CORS in ga.js depends on deployment platform HOT 2
- "clean" no such command as rm HOT 1
- Add support for Google Analytics 4 HOT 5
- No more CSP meta headers HOT 1
- Does this project work with PostCSS files? HOT 1
- Trying to change behaviour of img-dim setSrcset function HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eleventy-high-performance-blog.