Getting attributes from attributes list in define-tag-function #61

Closed
opened 4 years ago by merriman-xyz · 2 comments
merriman-xyz commented 4 years ago (Migrated from github.com)

Have been playing with Pollen for a bit and after the basics have been trying more advanced features.

Currently I am trying to create a section class that creates a <section> tag with an inner <h2> tag that uses the text of the parent section's id.

In other words, take the following Pollen markup:

◊section[#:id "TITLE"]{ }

and output the following HTML:

<section id="TITLE">
  <h2>Title</h2>
</section>

My current attempts have been via define-tag-function. I have been able to nest the h2 tag, but am having trouble accessing the attributes list and grabbing the id for the inner h2 tag there. Ideally I could grad the ID and transform it into title case.

◊(define-tag-function (section attributes elements)
  `(section ,attributes (h2 ???) ,@elements))

Any help would be appreciated!

  • B
Have been playing with Pollen for a bit and after the basics have been trying more advanced features. Currently I am trying to create a section class that creates a `<section>` tag with an inner `<h2>` tag that uses the text of the parent section's id. In other words, take the following Pollen markup: ``` ◊section[#:id "TITLE"]{ } ``` and output the following HTML: ``` <section id="TITLE"> <h2>Title</h2> </section> ``` My current attempts have been via `define-tag-function`. I have been able to nest the `h2` tag, but am having trouble accessing the attributes list and grabbing the id for the inner `h2` tag there. Ideally I could grad the ID and transform it into title case. ``` ◊(define-tag-function (section attributes elements) `(section ,attributes (h2 ???) ,@elements)) ``` Any help would be appreciated! - B
otherjoel commented 4 years ago (Migrated from github.com)

In your section tag function, attributes will contain a list of keys/values. In this case it will be '((id "TITLE")). You can use Racket’s assoc function to grab the things you want out of there. So, for example (first (assoc 'id attributes)). An even easier way would be to use the attr-ref from the txexpr package. (attr-ref attributes 'id) does the same thing as the assoc example above.

#lang racket

(require pollen/tag ; for define-tag-function
         txexpr)    ; for attr-ref

;; ensure the tag function is available to Pollen source files
(provide (all-defined-out)) 

(define-tag-function (section attrs elems)
  (define title (string-titlecase (attr-ref attrs 'id)))
  `(section ,attrs (h2 ,title) ,@elems))
In your `section` tag function, `attributes` will contain a list of keys/values. In this case it will be `'((id "TITLE"))`. You can use Racket’s [`assoc`][1] function to grab the things you want out of there. So, for example `(first (assoc 'id attributes))`. An even easier way would be to use the [`attr-ref`][2] from the `txexpr` package. `(attr-ref attributes 'id)` does the same thing as the `assoc` example above. ``` #lang racket (require pollen/tag ; for define-tag-function txexpr) ; for attr-ref ;; ensure the tag function is available to Pollen source files (provide (all-defined-out)) (define-tag-function (section attrs elems) (define title (string-titlecase (attr-ref attrs 'id))) `(section ,attrs (h2 ,title) ,@elems)) ``` [1]: https://docs.racket-lang.org/reference/pairs.html#%28def._%28%28lib._racket%2Fprivate%2Flist..rkt%29._assoc%29%29 [2]: https://docs.racket-lang.org/txexpr/index.html?q=attr-ref#%28def._%28%28lib._txexpr%2Fmain..rkt%29._attr-ref%29%29
merriman-xyz commented 4 years ago (Migrated from github.com)

Thanks @otherjoel for the lucid explanation.

Installed txepr via raco pkg install txexpr and was able to extract the value of the id attribute with ease.

Lovely being able to build components out of a single command.

  • B
Thanks @otherjoel for the lucid explanation. Installed `txepr` via `raco pkg install txexpr` and was able to extract the value of the `id` attribute with ease. Lovely being able to build components out of a single command. - B
This repo is archived. You cannot comment on issues.
No Milestone
No project
No Assignees
1 Participants
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: mbutterick/pollen-users#61
Loading…
There is no content yet.