Search code examples
clojureenlive

How to improve this Enlive template?


I use this Enlive template to transform the HTML below it to the HTML below that. Based on a collection of twitter names I generate a table with links. How can I get rid of the Hiccup inside the enlive/clone-for?

(enlive/deftemplate usernames-table-body
  "public/whoisnotfollowingme.html"
  [usernames]
  [:table.names :tbody :tr]
  (enlive/clone-for [username usernames]
                    [:td]
                    (enlive/html-content
                     (html [:a {:href (str "https://twitter.com/intent/user?screen_name=" username)} username]))))

HTML input

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css"/>
  </head>
  <body>
    <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
    <div class="container">
      <div class="hero-unit">
        <p class="names">These people who you are following are not following you back!</p>
      </div>
      <table class="names table table-striped">
        <thead>
          <tr>
            <th>Username</th>
          </tr>
          </thead>
          <tbody>
            <tr>
              <td>name</td>
            </tr>
          </tbody>
      </table>
    </div>
  </body>
</html>

HTML output

<html> 
   <head>
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet" />
  </head> 
   <body> 
     <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> 
     <div class="container"> 
       <div class="hero-unit">
        <p class="names">These people who you are following are not following you back!</p>
      </div> 
       <table class="names table table-striped"> 
         <thead>
          <tr>
            <th>Username</th>
          </tr>
          </thead> 
           <tbody> 
             <tr> 
               <td> < a   href =" https://twitter.com/intent/user?screen_name=foo " > foo </ a > </td> 
             </tr> <tr> 
               <td> < a   href =" https://twitter.com/intent/user?screen_name=bar " > bar </ a > </td> 
             </tr> 
           </tbody> 
       </table> 
     </div> 
   </body> 

 </html>

Solution

  • You could change your tbody.tr template from:

    <tr>
      <td>name</td>
    </tr>
    

    to:

    <tr>
      <td><a href="https://twitter.com/intent/user?screen_name=foo">foo</a></td>
    </tr>
    

    Now your HTML resource is a working example of the output you want.

    Then modify your deftemplate to support it:

    (enlive/deftemplate usernames-table-body
      "public/whoisnotfollowingme.html"
      [usernames]
    
      [:table.names :tbody :tr]
      (enlive/clone-for [username usernames]
                        [:td :a]
                        (enlive/do->
                         (enlive/set-attr :href (str "https://twitter.com/intent/user?screen_name=" username))
                         (enlive/content username))))
    

    Edited: If you want to get rid of the URL in the code, try change your href to ?screen_name= and then modify the code to something like:

                        (enlive/do->
                         (fn [node] (update-in node [:attrs :href] #(str % username)))
                         (enlive/content username))))
    

    You could also make a function of it. See e.g. Append to an attribute in Enlive.