Extended JS Support

Feedback Feature requests
1

I tried to include some javascript code, like the Fontawesome webfonts or fitvids.js for example. I wasnt able to add the code into the “Custom Javascript”, I either got an “Entity too large” or some other Javascript errors – probably because dependencies were not fulfilled.

It would be great, if one could add whole “link” statements that then will be included in the HTML header. It would be very easy to integrate, for example, JQuery or some webfont icons or other functionality. I can see that it could be a potential security issue, so maybe grab a couple of projects, host them locally at writeas and then let people choose what to include our of these options.

2

Not documented anywhere yet (thanks for the reminder), but you can actually do this today by adding this in the Custom Javascript field:

// src: https://some.kind.of/library.js

That’ll import whatever URL you enter. It doesn’t import that into the <head> but rather the end of the <body>, before any custom JS. Let me know if it needs to be in the <head> for what you’re doing, and we can take a look at the potential impact of changing that.

2 Likes
3

Oh, awesome! Thanks, I will try that. Will that also work in the CSS field?

4

OK, I tested it. So far it seems to work for what I want to do. Unfortunately it does not work with Fontawesome :frowning_face:

5

It doesn’t work with the CSS field, but maybe that’s something we could add in the future. What’s happening when you try to add Fontawesome?

6

I tried to include the SVG version of Fontawesome with

// src: https://use.fontawesome.com/releases/v5.6.1/js/all.js

and I am using this piece of CSS:

.icon::before {
    display: none;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.link-post::before {
    content: "\f007";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

Unfortunately I don’t get an icon. There might be something missing. The documentation states that pseudo elements need to be enabled:

Enable Pseudo Elements
Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.

I was not able to do so with the method above. When I am not using pseudo elements, but insert an image with the FA class attributes directly, it works, but I would rather use the CSS pseudo elements. The reason why I would love to use the pseudo elements is simple: I would like to create a style sheet and keep the modifications of the post itself to a minimum. No, or only very very very few HTML items in the post itself. So that I can focus on writing.