links.html

--- 
layout: default 
--- 

{% assign links = (site.links | sort: 'title') %} 
{% assign tabtags = "Guides|Tools|Ressourcen|Inspirationen|Generell|Vertiefungen|Videotutorials|Helper|Training" | split: "|" %}

<section class="section">
    <div class="container">

        <h1 class="title is-1">Links</h1>
        <h2 class="subtitle">Ein paar praktische Verweise rund um das Thema „Web Development“</h2>

    </div>

</section>
<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column">
                <nav class="panel">
                    <p class="panel-heading">
                        Kategorien
                    </p>
                    <a class="panel-block" data-tab="overview-item">
                        <span class="panel-icon">
				      <i class="fa fa-book"></i>
				    </span> Alle
                    </a>
                    {% for navEle in tabtags %}
                    <a class="panel-block" data-tab="{{navEle}}">
                        <span class="panel-icon">
					      <i class="fa fa-book"></i>
					    </span> {{navEle}}
                    </a>
                    {% endfor %}
                </nav>
            </div>

            <div class="links is-tab-content column is-two-thirds is-overview-item">
                <div class="content link-overview">
                    {% for link in links %}
                    <div class="link-overview__item">
                        <h2 class="title is-2" id="{{ link.id }}">{{ link.titel }}</h2>
                        <p>{{link.text}}<br><a href="{{link.src}}">{{link.src}}</a></p>
                        <p style="color: #999999;">{{link.tags | join:', '}}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

            {% for navEle in tabtags %}
            <div class="links is-tab-content column is-two-thirds is-{{navEle}}">
                <div class="content link-overview">

                    {% for link in links %} {% if link.tags contains navEle %}
                    <div class="link-overview__item">
                        <h2 class="title is-2" id="{{ link.id }}">{{ link.titel }}</h2>
                        <p>{{link.text}}<br><a href="{{link.src}}">{{link.src}}</a></p>
                        <p style="color: #999999;">{{link.tags | array_to_sentence_string: ''}}</p>
                    </div>
                    {% endif %} {% endfor %}

                </div>
            </div>
            {% endfor %}
        </div>

    </div>
</section>