Jekyll-Migration: How to add Fontsawesome

[topofocus]

Hi,
I took the jeckyll cookie-template as starting-point for a bridgetown template with tailwindcss.
Will release it as public template later.

Things went smooth, there are only two tasks left.

First, the head of the original contains a reference to a javascript file. I included it in the bridgetown-head. This is the head of the rendered page

<link rel="stylesheet" href="/_bridgetown/static/index.JK5IIPOT.css" />
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script src="/_bridgetown/static/index.6HGRFF3E.js" defer></script>

Question: Which is the right place to include the javascript-file. Can I just modify frontend/javascript/index.js ?

Second:
In the original, a font is included in `assets/vendor'
How do I migrate this?

[topofocus]

Pushed the unfinished template to https://github.com/topofocus/cookie

[jaredcwhite]

Hi @topofocus, you can add any JS you want to frontend/javascript/index.js and it should just get picked up. (Note that you do need to work within modern module-style programming…aka global variables don't actually become global unless you use a window.myVar = style.)

You can add fonts to frontend/fonts and reference them via relative URLs in a CSS containing your @font-face declarations.

[topofocus]

Thanks Jared.

I copied the font to src and included it in the head partial

works, but its maybe not the »proper« way to require the font.

<%= seo %>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<link rel="stylesheet" href="<%= webpack_path :css %>" />
<script src="<%= webpack_path :js %>" defer></script>
<link rel="stylesheet" href="/fontawesome-free/css/all.min.css" />

<%= live_reload_dev_js %>

Could'nd work out your suggestions, because I just want a translated version of the jekyll-template without digging to deep.
Am focusing on experiments with bridgtown-tools, eg. components.
( The project acts as a laboratory to understand pros and cons ...)

[topofocus]

To complete this issue

These steps include fontawesome

yarn add @fortawesome/fontawesome-free

Then add

import "@fortawesome/fontawesome-fre/css/all"

to frontend/javascript/index.js

and finally add

@import "@fortawesome/fontawesome-fre/css/all.min.css"

to frontend/styles/index.css

[goulvench]

I had the same issue but hadn't seen this discussion.
Anyway, I created a FontAwesome automation for Bridgetown, and wrote an accompanying blog post.

The blog itself is still using Jekyll, I'm halfway through migrating to Bridgetown. Getting rid of liquid is a long-awaited relief!