Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-07-13

Channels

#reagent
<
2020-07-13
>
rberger01:07:17

Is there an easy way to add fonts from Google Fonts in clojurescript/reagent? (other than just puting a link in the index.html) I tried using https://github.com/typekit/webfontloader npm library like: 

(ns foo.core
  (:require
     ["webfontloader" :as WebFont]))

(defn fonts-init! []
  (.load WebFont {:google {:families ["Roboto:wght@100;300;400;500"]}}))
And then call that just before the 
(r/render [views/init]
            (.getElementById js/document "app"))
Not sure if I’m not using it right, or it just doesn’t want to work in this context, or it needs to be called at another point in the life cycle… Anyone have experience with this or something similar? It doesn’t have an error that I can see in the debugger

phronmophobic01:07:35

not sure you need all that. what about just: 

(defn load-font []
  (let [link (.createElement js/document "link")]
    (doto link
      (.setAttribute "rel" "stylesheet")
      (.setAttribute "href" ""))
    (.appendChild (-> js/document .-body)
                  link)))

phronmophobic01:07:51

that's what I've been using and works for my purposes

rberger01:07:48

Are there timing issues of having it ether blocking the page or the page expecting the fonts loads before and you get some glitching? I’ll probably just put it in my index.html for now, but I was curious if there is a way to use the webfontloader. I think it has some nice features for accessing all different kinds of font libraries and deal with different weights etc..

phronmophobic01:07:53

you can add an onload attribute if you want to delay displaying the web page before loading the font.

phronmophobic01:07:05

it depends on how flexible you want your setup to be

rberger01:07:37

Ok, thanks!

Noah Bogart19:07:47

super quick question: how do you handle gating admin pages in a reagent SPA? in the app i steward, the admin pages are rendered serverside with their urls auth wrapped, but that makes development slow and cumbersome. is there a best-practices (that's not reframe) for moving the auth pages into the cljs without making it easy for the user to just edit their localstorage data to get access to the admin screens?

pez19:07:29

I think it makes sense to make a separate SPA for admin.

noisesmith19:07:31

the data needed to render the admin should require auth

noisesmith19:07:41

yeah, having a separate app entirely is best

noisesmith19:07:19

but fundamentally, they shouldn't be able to fetch any meaningful data to make the admin do anything

👍 6
noisesmith19:07:27

(without auth first, of course)

pez19:07:41

Completely agree.

Noah Bogart19:07:47

Cool, that makes sense

noisesmith19:07:23

what I've done in the past is have two builds (user, admin) and as apropriate share the same underlying namespaces

noisesmith19:07:48

just making sure the shared libs can't expose admin functionality of course

noisesmith19:07:31

because in practice the admin and the user interface are going to expose a lot of the same sorts of data, so writing the code twice is a waste of time

adam21:07:09

What does :> mean? I am looking at some Reagent samples and couldn’t find the explanation