news.hbs

<div class="container mb-4 ms-lg-5 me-lg-5 text-center alert">
    Here are the new filter updates and user-facing features the project has released.
    You can also subscribe to <a href="{{href "news-atom" ""}}">the RSS feed</a> to stay in the loop.

    {{#if @root.OfficialInstance}}<br/>
        Self-hosting users can find the full list of changes in
        <a href="https://github.com/letsblockit/letsblockit/releases">the Github release list</a>.
    {{/if}}
</div>


<div class="container release-list">
    {{#each releases}}
        <div class="row pb-5{{#if (lookup @root.data.newReleases @index)}} new{{/if}}">
            <div class="d-none d-lg-block col-lg-3 pt-2 pb-2 pe-4 text-lg-end">
                <h3>{{date}}</h3>
                <h5>
                    {{#if (lookup @root.data.newReleases @index)}}
                        <span class="badge bg-success me-3">new</span>
                    {{/if}}
                    <a href="{{GithubUrl}}">{{tagName}}</a>
                </h5>
            </div>
            <div class="release-description col-lg-9 pt-2 pb-2 ps-4">
                <div class="d-lg-none pb-2">
                    <h3>
                        <a href="{{GithubUrl}}">{{tagName}}</a> - {{date}}
                        {{#if (lookup @root.data.newReleases @index)}}
                            <span class="badge bg-success ms-2">new</span>
                        {{/if}}
                    </h3>
                </div>
                {{{Description}}}
            </div>
        </div>
    {{/each}}
    <div class="row pb-5">
        <div class="d-none d-lg-block col-lg-3"></div>
        <div class="col-lg-9 pt-2 pb-2 ps-4">
            <h5>Read about <a href="https://github.com/letsblockit/letsblockit/releases?page=3">
                older releases on GitHub</a></h5>
        </div>
    </div>
</div>

<style>
    .release-description {
        border-left: 2px solid var(--bs-secondary);
    }

    .release-list .new .release-description {
        border-left: 3px solid var(--bs-success);
    }
</style>