index.hbs

{{!< default}}

<main id="gh-main" class="gh-main gh-outer">
    <div class="gh-inner">
        <article class="gh-latest gh-card">
        <h2 class="gh-article-title gh-card-title">Hi, I am Ben,</h2>
        <p class="gh-article-excerpt">{{@site.description}}</p>
        </article>
        
        <div class="gh-wrapper">
            <section class="gh-section">
                <h2 class="gh-section-title">Latest Posts</h2>

                <div class="gh-feed">
                    {{#foreach posts}}
                        {{> loop}}
                     {{/foreach}}
                </div>

                <button class="gh-loadmore gh-btn">Load more issues</button>
            </section>

            <aside class="gh-sidebar">
              
                {{#get "posts" filter="featured:true" limit="all" as |featured|}}
                    {{#if featured}}
                        <section class="gh-section">
                            <h3 class="gh-section-title">Featured</h3>

                            <div class="gh-featured gh-feed">
                                {{#foreach featured}}
                                    {{> loop}}
                                {{/foreach}}
                            </div>
                        </section>
                    {{/if}}
                {{/get}}

                {{#get "tags" include="count.posts" limit="all" as |topic|}}
                    <section class="gh-section">
                        <h3 class="gh-section-title">Topics</h3>

                        <div class="gh-topic">
                            {{#foreach topic}}
                                <a class="gh-topic-item" href="{{url}}">
                                    <h3 class="gh-topic-name">{{name}}</h3>
                                    <span class="gh-topic-count">
                                        {{plural count.posts empty="0 issues" singular="% issue" plural="% issues"}}
                                    </span>
                                </a>
                            {{/foreach}}
                        </div>
                    </section>
                {{/get}}
            </aside>
        </div>
    </div>
</main>