<article class="p-6 dark:text-white lg:flex">
    <a href="{{ .Permalink }}" aria-label="Read">
        {{ if .Params.image }}
        <img class="rounded mx-auto w-24 h-32 lg:mx-0 mb-5 object-cover lg:mb-0" src="{{ .Params.image | relURL }}" alt="thumbnail" />
        {{ else }}
        <img class="rounded mx-auto w-auto h-32 lg:mx-0 mb-5 lg:mb-0" src="{{ "/img/novel.png" | relURL }}" alt="thumbnail" />
        {{ end }}
    </a>
    <div class="lg:ml-8">
        <a href="{{ .Permalink }}">
            <h1 class="text-xl mb-2">{{ .Title }}</h1>
        </a>
        <p class="mb-1 text-sm opacity-40">{{ .Content | countwords }} {{ i18n "words" }} ・ {{ math.Round (div (countwords .Content)
            220.0) }}{{ i18n "minutes" }}
        </p>
        {{ with .Params.tags }}
            <div id="tags">
                {{ range . }}
                <span
                    class="inline-flex my-2 mr-2 leading-4 mb-2 content-center justify-center h-8 text-blue-600"><a
                        href="{{ "tags" | absURL}}/{{ . | urlize }}">#{{ . }}</a></span>
                {{ end }}
            </div>
        {{ end }}
        <p class="opacity-70">{{ substr .Description 0 30 | plainify }}...</p>
    </div>
</article>