guides.html

---
layout: default
title: Guides
css:
- guide-card
- guides
js: guides
permalink: /guides/
---

<!-- INTRO -->
<div id="guides_intro_background" class="black_blue_gradient_background">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <img id="intro_logo" src="{{ "/img/guides_page_title_large.svg" | relative }}" class="img-responsive" alt="Guides">
            </div>
            <div class="col-sm-8">
                <p id="contribute_intro_paragraph_1">
                    Sometimes even the best navigators need to be pointed in the right direction.  These guides are designed to make your development journey that much easier; whether you’re in need of a little help or just want to explore.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Build one list of all the documents that have a particular layout -->
{% assign static-guides = site.pages | where: 'layout', 'guide' %}
{% assign interactive-guides = site.pages | where: 'layout', 'interactive-guide'%}
{% assign guides = static-guides | concat: interactive-guides | sort: 'releasedate' | reverse %}
<!-- 
    Some of the found documents are for internal use only and are not intended to be 
    shown on the website.  Remove them from the total number of guides.
-->
{% assign numGuides = guides.size %}
{% for guide in guides %}
    {% if guide.path contains "guides/guides-common" or guide.path contains "guides/iguides-common" %}
        {% assign numGuides = numGuides | minus: 1 %}
    {% endif %}
{% endfor %}

<div id="guides_information_container" class="container">
    <div class="row">
        <div class="col-xs-12 text-center">
            <input id="guide_search_input" type="text" placeholder="Search all guides" aria-label="Search">
        </div>
        <div class="col-xs-12">
            <h2 id="guide_counter_title">All Open Liberty guides ({{ numGuides }})</h2>
            <p id="guide_sort_message">Most recent guides shown first</p>
        </div>
    </div>
</div>

<div id="guides_container" class="container">       
    <div class="row">
        {% for guide in guides %}
        <!-- Do not render anything from the two common guide repositories containing shared code -->
        {% unless guide.path contains "guides/guides-common" or guide.path contains "guides/iguides-common" %}
            <div class="guide_column col-xs-12 col-sm-6 col-md-4">
                <a href="{{ guide.url }}.html" class="guide_item" data-title="{{ guide.title | downcase }}" data-description="{{ guide.description | downcase }}" data-tags="{{ guide.tags | join: ' ' | downcase }}">
                    <div class="guide_title_and_description_container">
                        <h3 class="guide_title">{{guide.title}}</h3>
                        <p class="guide_description">{{guide.description}}</p>
                    </div>
                    <img class="duration_clock_icon" src="/img/guide_duration_clock_icon_small.svg" alt="Duration">
                    <span class="guide_duration">{{guide.duration}}</span>
                    {% if guide.layout == 'interactive-guide' %}
                    <img class="interactive_bolt_icon" src="/img/guide_lightning_bolt.svg" alt="Interactive">
                    <span class="guide_interactive">Interactive</span>
                    {% endif %}
                </a>
            </div>
        {% endunless %}
        {% endfor %}
    </div>    
</div>