Website-Redesign/layouts/index.html

{{ define "main" }}

    {{/* get all the pages that are regular posts and not pages */}}
    {{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }}
    {{ $allPostsList := where .Site.RegularPages "Section" "in" $postsDir }}
    {{ $featuredPostsList := slice }}
    {{ $postsList := $allPostsList }}
    {{ if .Site.Params.enableFeatured | default false }}
        {{ $featuredPostsList = where $allPostsList "Params.featured" true }}
        {{ $postsList = union (where $allPostsList "Params.featured" false) (where $allPostsList "Params.featured" nil) }}
    {{ end }}

    <div class="featured postlist gridView">
    {{ range $featuredPostsList }}
        <a class="featuredCardLink" href="{{ .Permalink }}">
            <article class="featuredCard {{ if .Site.Params.discreteCards }}discrete{{ end }}"
                style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.7) 100%), url('{{ .Params.Image }}');">
                <div class="contentArea">
                    <h2>{{ .Title }}</h2>
                    <p class="date">
                        <span title="Date"> </span>
                        {{ .Date.Format "2006-01-02" }}
                        {{ if .Params.tags }}
                        <br />
                        <span title="Tags"> </span>
                        {{ range .Params.tags }}
                            #{{ . }}
                        {{ end }}
                    {{ end }}
                    </p>
                </div>
            </article>
        </a>
    {{ end }}
    </div>

    {{/* pagination */}}
    <div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}" id="postlist">
    {{ range (.Paginate $postsList).Pages }}
        <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
            <div>
                <h2>
                    <a href="{{ .Permalink }}">{{ .Title }}</a>
                </h2>
                <p class="date">
                <span title="Date"> </span>
                {{ .Date.Format "2006-01-02" }}
                {{ if .Params.tags }}
                    | <!-- Pipe character as visual separator between date and tags-->
                    <span title="Tags"> </span>
                    {{ range .Params.tags }}
                        <a href="/tags/{{ . }}">#{{ . }}</a>
                    {{ end }}
                {{ end }}
                </p>
                {{ if .Site.Params.imageInArticlePreview }}
                    {{ if .Params.Image }}
                        <img src="{{ .Params.Image }}" />
                    {{ end }}
                {{end}}
                <div class="articlePreview">
                    <p>{{ .Summary }}</p>
                    <p><a href="{{ .Permalink }}">Continue reading </a></p>
                </div>
            </div>
            <hr />
        </article>
    {{ end }}
    </div>
    <div id="getNextBtnContainer"></div>
    {{- partial "paginator.html" . -}}

{{ end }}