blowfish/exampleSite/layouts/partials/recent-articles-demo.html

{{ $recentArticles := 5 }}
{{ $showMoreLinkDest := "/posts" }}
{{ if index .Site.Params.homepage "showRecentItems" }}
{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
{{ end }}

<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>

<div class="flex mb-6 px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
    <span class="flex items-center justify-between grow dark:text-neutral-300">
        <span class="prose dark:prose-invert">This is a demo of theme's list configurations: <code id="config">card view with constrained width</code></span>
        <button id="switch-config-button"
            class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700">
            Switch config &orarr;
        </button>
    </span>
</div>

<div id="CardViewProse" class="hidden h-full">
    <section class="w-full">
        <div class="flex flex-wrap">
            {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
            .Site.Params.mainSections)).Pages }}
            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
                {{ partial "article-link-card.html" . }}
            </div>
            {{ end }}
        </div>
    </section>
</div>

<div id="CardViewScreenWidth" class="">
    <section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
        <div class="flex flex-wrap pl-8 pr-8">
            {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
            .Site.Params.mainSections)).Pages }}
            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
                {{ partial "article-link-card.html" . }}
            </div>
            {{ end }}
        </div>
    </section>
</div>

<div id="NormalView" class="hidden h-full">
    <section class="space-y-10 w-full">
        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
        .Site.Params.mainSections)).Pages
        }}
        {{ partial "article-link.html" . }}
        {{ end }}
    </section>
</div>

{{ if .Site.Params.homepage.showMoreLink | default false }}
{{ if index .Site.Params.homepage "showRecentItems" }}
{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
{{ end }}
<div class="mt-10 flex justify-center">
    <a href="{{ $showMoreLinkDest }}">
        <button
            class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
            More</button>
    </a>
</div>
{{ end }}