Help building Tufte-style margin notes from Pollen

[k...@withkit.com]

I'm an educator (and beginning programmer) and am really excited about the potential of using Pollen for several projects.

I've read through the Pollen documentation thoroughly, and am unable to find any examples that cover what I need. I also have zero experience in Racket.

I'm trying to build Tufte-style margin notes using Pollen (although if I can get this to work I will be able to use it for several other use cases). The markup I would like is like this:

<label for="mn-demo" class="margin-toggle">&#8853;</label>
<input type="checkbox" id="mn-demo" class="margin-toggle"/>
<span class="marginnote">
This is a margin note. Notice there isn’t a number preceding the note.
</span>

This is what I have so far:

 

#lang pollen

◊(define (margin . notes) `(span ((class "marginnote")) ,@notes))

Lorem◊margin["mn-demo"]{This is a margin note. Notice there isn’t a number preceding the note.} ipsum dolor sit amet, consectetur adipiscing elit.

There are two things I'm struggling with. First, I know how to nest the span with class "marginnote" inside another element. However, I don't know how to place two elements before it. (I've wasted a lot of time trying to make this work.)

Second, each margin note needs its own unique ID. So I want to pass this id (in this case "mn-demo") as an argument to the function. However, again I can't quite work out how to make this happen. In the Pollen documentation there are lots of examples using key-value pairs, but in this case the key is redundant. It would be redundant to have to type the same key every time I call the function, like this: [#:id "mn-demo"] It's much neater to just have ["mn-demo"].

I would be really grateful if anyone can help me, as I've come to the ends of what I can achieve on my own!

[Matthew Butterick]

On Nov 18, 2018, at 4:08 PM, k...@withkit.com wrote:

There are two things I'm struggling with. First, I know how to nest the span with class "marginnote" inside another element. However, I don't know how to place two elements before it. (I've wasted a lot of time trying to make this work.)

I imagine you want to use the splice tag `@` to wrap your three elements. When the document is rendered, the elements will be spliced into the doc. (The splice tag different from the quasiquote-splicing operator ,@ but it's a similar idea.)

Example:

#lang pollen/markup

◊(define (margin id . notes)

   `(@

     (label ((for ,id)(class "margin-toggle")) 8853)

     (input ((type "checkbox") (id ,id) (class "margin-toggle")))

     (span ((class "marginnote")) ,@notes)))

◊margin["mn-demo"]{This is a margin note. Notice there isn’t a number preceding the note.}

;; result (notice the splice tag disappears):

'(root

  (label ((for "mn-demo") (class "margin-toggle")) 8853)

  (input ((type "checkbox") (id "mn-demo") (class "margin-toggle")))

  (span

   ((class "marginnote"))

   "This is a margin note. Notice there isn’t a number preceding the note."))

Second, each margin note needs its own unique ID. So I want to pass this id (in this case "mn-demo") as an argument to the function. However, again I can't quite work out how to make this happen. In the Pollen documentation there are lots of examples using key-value pairs, but in this case the key is redundant. It would be redundant to have to type the same key every time I call the function, like this: [#:id "mn-demo"] It's much neater to just have ["mn-demo"].

See sample above. If you don't care what the id is, you can also generate one with `gensym`, which guarantees a unique symbol. This lets you omit the id argument altogether:

#lang pollen/markup

◊(define (margin . notes)

   (define id (symbol->string (gensym)))

   `(@

     (label ((for ,id)(class "margin-toggle")) 8853)

     (input ((type "checkbox") (id ,id) (class "margin-toggle")))

     (span ((class "marginnote")) ,@notes)))

◊margin{This is a margin note. Notice there isn’t a number preceding the note.}

[k...@withkit.com]

Thank you so much for your help, Matthew. What you suggested worked perfectly. After trying to understand what you'd done I rebuilt it from scratch to test I had really got it. I now understand splice and quasiquote much better.

While browsing through this group this morning I noted that some other people have actually already solved margin notes and footnotes using Pollen. There is this discussion and this solution on github which both tackle this in a more advanced way.