{% if page.showcase %}

{% assign showcase = site.data.[page.showcase] %}

<div class="content">

<p>{{ showcase.intro | markdownify }}</p>

</div>

{% for item in showcase.items %}

<section class="showcase">

<figure class="image {% if item.image_ratio %} {{ item.image_ratio }} {% else %} is-16by9 {% endif %}">

<img src="{{ item.image | relative_url }}" />

</figure>

<div class="showcase-content">

<div class="columns is-centered">

<div class="column is-8-desktop is-12-tablet">

<p class="title">{{ item.title }}</p>

<p class="subtitle">{{ item.subtitle }}</p>

{% if item.github %}

<div class="buttons is-centered">

<a href="https://github.com/{{ item.github }}/stargazers" class="button is-white is-small">

<img alt="GitHub stars" src="https://img.shields.io/github/stars/{{ item.github }}?style=social">

</a>

<a href="https://github.com/{{ showcase.github }}/network/members" class="button is-white is-small">

<img alt="GitHub forks" src="https://img.shields.io/github/forks/{{ item.github }}?style=social">

</a>

<a href="https://github.com/{{ item.github }}/watchers" class="button is-white is-small">

<img alt="GitHub watchers" src="https://img.shields.io/github/watchers/{{ item.github }}?style=social">

</a>

</div>

{% endif %}

<div class="content">

<p>{{ item.description | markdownify }}</p>

</div>

{% if item.features %}

<ul class="block-list {{ item.features_styles }}">

{% for feature in item.features %}

<li>{{ feature }}</li>

{% endfor %}

</ul>

{% endif %}

{% if item.tags %}

{% assign tags = item.tags | split: "," %}

<div class="tags is-centered">

{% for tag in tags %}

{% include tag.html tag=tag style="is-dark" %}

{% endfor %}

</div>

{% endif %}

<a href="{{ item.link }}" class="button is-primary">

{{ item.link_text }}

</a>

</div>

</div>

</div>

</section>

{% endfor %}

{% endif %}