Strings

Entry 007 -

Build 0.050

As promised, I started focusing on the shop pages. I was debating with myself on what kind of approach I’d want to take with this content. The great thing, is that I’ve created this nice little set of data, that I can collect and show in interesting ways. The part I was debating, is how do I show that?

What my intention with this site, is to provide desirable detail about each of the shops in a succinct and digestible way. I eventually landed on the idea of putting the details in a sentence. The rough format is thus:


{{shop.name}} is a {{shop.type}} in {{city}}, CA serving {{coffee(s)}} with {{if indoor or outdoor seating}}, and {{free-wifi}}.


And so I wrote the liquid syntax loops. Which gets a bit messy. (yes, all of this only outputs that little sentence. But, I’ll be the first to say, it might not be the cleanest liquid html, but hey!).

<a href="http://{{meta.website}}">{{title | remove: ' Coffee Lab'}}</a>{% else %}{{title | remove: ' Coffee Lab'}}{% endif %} is a {{meta.type | remove: ' / Roaster'}}{% for t in taxonomy.specs %}{% if t == 'Roaster' %}&nbsp;and&nbsp;<a href="{{t.url}}">Coffee Roaster</a>{% endif %}{% endfor %} in{% for tag in taxonomy.city %}{% if tag.value %}&nbsp;<a href="{{tag.url}}">{{tag.value}}, CA</a>{% endif %}{% endfor %} serving<i class="coffee-list">{% for tag in taxonomy.coffee %}{% if tag.value %}&nbsp;<a href="{{tag.url}}">{{tag.value}}</a>{% endif %}{% endfor %}</i> with{% for t in taxonomy.specs %}{% if  t == 'Indoor Seating' %}&nbsp;<a href="{{t.url}}">Indoor</a>{% endif %}{% endfor %}{% for t in taxonomy.specs %}{% if t == 'Indoor Seating' %}{% for t in taxonomy.specs %}{% if t == 'Outdoor Seating' %}&nbsp;+{% endif %}{% endfor %}{% endif %}{% endfor %}{% for t in taxonomy.specs %}{% if t == 'Outdoor Seating' %}&nbsp;<a href="{{t.url}}">Outdoor</a>{% endif %}{% endfor %} Seating{% for t in taxonomy.specs %}{% if t == 'Free Wi-Fi' %},&nbsp;and&nbsp;<a href="{{t.url}}">Free Wi-Fi</a>{% endif %}{% endfor %}.

The final result makes for a easy to read opening line for each shop.

Screen Shot 2015-10-17 at 1.10.25 AM

The next step here is to keep working on this, cleaning it up. Also, adding a second sentence that goes into more detail. Overall, I want to clean up and beautify the site a bit more. Photography is coming soon, I’ll be collaborating with my co-worker and friend Patrick Yandoc to get some awesome shots.

If you’d like to follow along, check back here or follow me on Twitter @coffee_oc.