recommendations

{{#if recommendations}}
    <ul class="recommendations">
        {{#each recommendations as |rec|}}
        <li class="recommendation">
            <a href="{{rec.url}}" data-recommendation="{{rec.id}}" target="_blank" rel="noopener">
                <div class="recommendation-favicon">
                    {{#if rec.favicon}}
                        <img src="{{rec.favicon}}" alt="{{rec.title}}" loading="lazy" onerror="this.style.display='none';">
                    {{/if}}
                </div>
                <h5 class="recommendation-title">{{rec.title}}</h5>
                <span class="recommendation-url">{{readable_url rec.url}}</span>
                <p class="recommendation-description">{{rec.description}}</p>
            </a>
        </li>
        {{/each}}
    </ul>
{{/if}}

{{recommendations limit="10"}}
<!-- outputs 10 recommendations -->

{{recommendations order="title asc"}}
<!-- outputs recommendations by title in alphabetical order -->

{{recommendations limit="5" page="2"}}
<!-- outputs the second page of recommendations when total recommendations are greater than 5 -->

{{recommendations filter="favicon:-null"}}
<!-- only output recommendations with a favicon >

{{#match @site.recommendations_enabled}}
    <h2>Recommendations</h2>
    {{recommendations}}
{{/match}}

{{recommendations limit="5"}}
<!-- outputs 5 recommendations -->

<button data-portal="recommendations">Show all recommendations</button>
<!-- open the recommendations portal when clicked -->