Comma separated on single line in HAML

Question

Using HAML, I'd like to have links in a single line with commas in between. Like so,

Check me out on GitHub, Twitter, Coderwall and LinkedIn.

Here's what I've got:

%footer
  Check me out on
  %a{:href => url('http://github.com/bostonaholic')} Github
  ,
  %a{:href => url('http://www.twitter.com/bostonaholic')} Twitter
  ,
  %a{:href => url('http://coderwall.com/bostonaholic')} Coderwall
  and
  %a{:href => url('http://www.linkedin.com/in/mboston')} LinkedIn
  \.

But this comes out like this:

Check me out on GitHub , Twitter , Coderwall and LinkedIn .

How do I fix this so the commas and period are in the correct spots?

Thanks.

Answer 1

HAML has considered this case with the succeed helper. Docs here: http://haml.info/docs/yardoc/Haml/Helpers.html#succeed-instance_method

This HAML

click
= succeed '.' do
  %a{:href=>"thing"} here

produces

click
<a href='thing'>here</a>.

Answer 2

This is a huge and long-standing problem in HAML. I have solved this personally in two different ways.

1) I put the text I want inside of array elements, and use a

join(', ')

But this is a pretty shite way to do things.

2) The HAML only "solution" lies in the special > character. The > character removes whitespace in the output html to so there is no whitespace BEFORE or AFTER this tag is output.

This is the best I've been able to come up with, and I loose sleep at night over it's frightful ugliness.

  %a{:href => 'here'} Github
  %span> , 
  %a{:href => 'there'} Twitter

Notes on this last technique.

a. If you don't use the &nbsp ; you won't get a space, even if there is on in your source code. Using quotes ( %span> #{", "}) and a space doesn't work, as apparently HAML trims the output.

b. You have to use a tag because using > only works after a tag as far as I can tell. Using => will unfortunately not work. This would be my recommended way to do it, but it would not solve the last space being lost anyway.

3) In my rails projects I use the following combination of partials and helpers:

partial: _haml_comma.html.haml

%span> , 

helper.rb

  def comma
    render :partial => "shared/haml_comma"
  end

.haml file:

  %a{:href => 'here'} Github
  = comma
  %a{:href => 'there'} Twitter

4) When you have an ENUMERABLE and are LOOPING, the following helper and partial may help you

application_helper.rb

  # puts a comma after an element in a loop EXCEPT the last loop
  def comma_separate(i:, total:, &block)
    render layout: 'shared/comma_separate', locals: {i:i, total: total} do
      capture(&block) if block
    end
  end

views/shared/_comma_separate.html.haml :

= succeed i + 1 < total ? ', ' : nil do
  %span.some_class<
    = yield

in your view:

- enumerable.each_with_index do |w, i|
  = comma_separate i: i, total: enumerable.size do
    %b
      = w

(This edit was made in 2019, a full 5 years after the first comment. Why isn't this solved HAML maintainers?)

Answer 3

Using the haml 'succeed' helper (thanks @josal), here is a clean, simple way to do it:

%footer
  Check me out on
  = succeed ',' do
    %a{:href => url('http://github.com/bostonaholic')} Github
  = succeed ',' do
    %a{:href => url('http://www.twitter.com/bostonaholic')} Twitter
  = succeed 'and' do
    %a{:href => url('http://coderwall.com/bostonaholic')} Coderwall
  = succeed '.' do
    %a{:href => url('http://www.linkedin.com/in/mboston')} LinkedIn

I find about the only time I need this is when working with links, but it's a good tool to have in your haml belt.