This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-01-19
Channels
- # announcements (19)
- # asami (9)
- # babashka (26)
- # beginners (87)
- # biff (23)
- # calva (6)
- # clerk (7)
- # clj-kondo (3)
- # cljsrn (3)
- # clojure (115)
- # clojure-belgium (1)
- # clojure-berlin (1)
- # clojure-europe (31)
- # clojure-gamedev (5)
- # clojure-nl (2)
- # clojure-norway (8)
- # clojure-uk (2)
- # clojurescript (43)
- # clr (23)
- # datalevin (1)
- # datomic (14)
- # dev-tooling (23)
- # fulcro (38)
- # graphql (1)
- # gratitude (1)
- # jobs (1)
- # lsp (30)
- # off-topic (7)
- # pathom (25)
- # portal (21)
- # quil (6)
- # releases (5)
- # remote-jobs (1)
- # shadow-cljs (34)
- # sql (5)
- # tools-deps (6)
- # xtdb (13)
well here's something nifty I should've started using a long time ago: https://tailwindcss.com/docs/typography-plugin
Ooh, that is nice. I must confess, I haven't been looking at the Tailwind plugins because I assumed they'd be a bit of a hassle to install. But it looks like they're already included in the standalone version of Tailwind that comes with Biff!
yeah, it's handy 🙂
Looks fantastic! The one-click install and auth parts will be sweet, especially.
Say a fellow wanted to add a Ko-fi support button to his webpage and Ko-fi obliged him by supplying the following code:
<script src=''></script>
<script>
kofiWidgetOverlay.draw('epidiah', {
'type': 'floating-chat',
'floating-chat.donateButton.text': 'Support me',
'floating-chat.donateButton.background-color': '#fcbf47',
'floating-chat.donateButton.text-color': '#323842'
});
</script>
Should he slam all that as a string into a biff/unsafe
form and tuck it into a [:div]
somewhere on the page, or is there a better approach?yep, except use a :script instead of a :div. you can put it in the head like so:
(ui/page
{:base/head [[:script {:src ""}]
[:script
(biff/unsafe
(str
"kofiWidgetOverlay.draw('epidiah', {"
" 'type': 'floating-chat',"
" 'floating-chat.donateButton.text': 'Support me',"
" 'floating-chat.donateButton.background-color': '#fcbf47',"
" 'floating-chat.donateButton.text-color': '#323842'"
"});"))]]}
...)
(you may want to edit the ui/page
or ui/base
function to add that on every page)Excellent! Now I'm off to learn just enough JavaScript to get those background and text colors to match the page's theme, whatever that may be.
Sheepishly asking: what would be unsafe/what does the function do to mitigate that?
It's unsafe if you render user-generated text with it
e.g. normally if you do [:div username]
it'll be ok even someone set their username to <script>console.log('you got pwned');</script>
biff/unsafe
disables the html escaping
ok… thanks!
unsafe is probably not the most descriptive name it could possibly have ha ha
well, it helped me be aware of what’s going on.
The name unsafe
is what made me look at that function in the first place. I was thinking, "I bet I can't just drop this in in a script
tag because it could be unsafe. I wonder what I should use...Aha!" The name unsafe
is also probably why I came here to double check I wasn't shooting myself in the foot. Both of these might be good features.
A quick update, in case anyone else was toying with a Ko-fi button specifically. Dropping both scripts in the <head>
doesn't seem to work. But conj
ing the second one onto the end of the body does the trick. It creates the donate button in an <iframe>
, which I believe means I can't really touch it with CSS or JS, but there are a few more options you can pass to it via the object in the args for the .draw
method, including 'floating-chat.donatebutton.image'
, which can be changed to add a little personalized branding.
Hello! Following the tutorial and Biff is totally awesome so far! In https://biffweb.com/docs/tutorial/landing-page/ though, there seems to be an unresolved symbol recaptcha-scripts
in com.eelchat.feat.home/home
that is causing the build to fail :thinking_face: did I screw something up?
hmm, I'll take a look
recaptcha-scripts
should already be defined right above the home
function: https://github.com/jacobobryant/eelchat/commit/e4bb7b9f12a9b1057d02e462dee12dd8061d038d#diff-f95f455c4d9c9f8a2a5af59bc6ce632a4e2b18b22385c0a93a22826645e38e52L47
You may have tripped up on this part--the dot-dot-dot is recaptcha-scripts
, but perhaps you pasted over it along with the other functions?
If that's what happened, there's certainly an opportunity there to improve the docs to reduce the chance of doing that by accident--maybe I should split that into two separate code blocks, one for recaptcha-disclosure
and signin-form
and the other for home
right you are, @U7YNGKDHA. I did indeed accidentally delete it.
👍 Let me know if you run into any other issues/if you get through the tutorial and the whole thing actually works. I never actually got around to doing an end-to-end test of it after I finished writing it, ha...