<div id="readme" class="my-4 {{ config('readmes_first') ? 'order-first' : null }}" style="scroll-margin-top: 8rem;">
    <div class="rounded-lg overflow-hidden shadow-md">
        <header class="flex items-center bg-sky-600 px-4 py-3 text-white dark:bg-violet-700">
            <i class="fas fa-book fa-lg pr-3"></i> README.md
        </header>

        <article class="bg-slate-100 rounded-b-lg px-4 py-8 sm:px-6 md:px-8 lg:px-12 dark:bg-slate-900 dark:border-0 {{ readme.getExtension == 'md' ? 'markdown' : 'font-mono' }}" v-pre>
            {% if readme.getExtension == 'md' %}
                {{ markdown(readme.getContents) | raw }}
            {% else %}
                {{ readme.getContents | nl2br }}
            {% endif %}
        </article>
    </div>
</div>
