Fork me on GitHub
#biff
<
2023-01-19
>
Jacob O'Bryant08:01:22

well here's something nifty I should've started using a long time ago: https://tailwindcss.com/docs/typography-plugin

📰 2
😄 2
Epidiah Ravachol13:01:40

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!

Jacob O'Bryant18:01:41

yeah, it's handy 🙂

macrobartfast20:01:08

Looks fantastic! The one-click install and auth parts will be sweet, especially.

🙌 2
Epidiah Ravachol21:01:34

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?

Jacob O'Bryant21:01:57

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)

2
Epidiah Ravachol22:01:54

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.

🎅 2
macrobartfast00:01:20

Sheepishly asking: what would be unsafe/what does the function do to mitigate that?

Jacob O'Bryant00:01:46

It's unsafe if you render user-generated text with it

Jacob O'Bryant00:01:31

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>

Jacob O'Bryant00:01:53

biff/unsafe disables the html escaping

Jacob O'Bryant01:01:23

unsafe is probably not the most descriptive name it could possibly have ha ha

macrobartfast01:01:53

well, it helped me be aware of what’s going on.

Epidiah Ravachol14:01:44

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.

Epidiah Ravachol15:01:49

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 conjing 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.

Ben Lieberman21:01:53

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?

Jacob O'Bryant21:01:11

hmm, I'll take a look

Jacob O'Bryant21:01:53

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?

Jacob O'Bryant21:01:27

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

Ben Lieberman21:01:17

right you are, @U7YNGKDHA. I did indeed accidentally delete it.

Jacob O'Bryant21:01:03

👍 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...

2