web/medium-parser/tests/templates/post.html

<div class="container w-full pt-20 mx-auto break-words md:max-w-3xl">
    <div class="w-full px-4 text-xl leading-normal text-gray-800 md:px-6" style="font-family:Georgia,serif">
        <div class="font-sans">
            <p class="pb-3 text-base font-bold text-green-500 md:text-sm">
                <a href="{{ url }}" class="text-sm font-bold text-green-500 no-underline md:text-sm hover:underline ">&lt; Go to the original</a>
            </p>
            {% if previewImageId %}
                <img alt="Preview image"
                     style="max-height: 65vh;
                            width: auto;
                            margin: auto"
                     loading="eager"
                     role="presentation"
                     referrerpolicy="no-referrer"
                     src="https://miro.medium.com/v2/resize:fit:700/{{ previewImageId }}">
            {% endif %}
            <h1 class="pt-6 pb-2 font-sans text-3xl font-bold text-gray-900 break-normal md:text-4xl">{{ title }}</h1>
            {% if subtitle %}<h2 class="pt-1 pb-3 font-sans font-medium text-gray-600 break-normal text-1xl md:text-1xl">{{ subtitle }}</h2>{% endif %}
        </div>
        <div class="m-2 bg-gray-100 border border-gray-300">
            <div class="flex items-center p-4 space-x-4">
                <div class="flex-shrink-0">
                    <a href="https://medium.com/@{{ creator.username }}" target="_blank" title="{{ creator.bio }}" class="relative block">
                        <img loading="eager" src="https://miro.medium.com/v2/resize:fill:88:88/{{ creator.imageId }}"
                             alt="{{ creator.name }}"
                             referrerpolicy="no-referrer"
                             class="rounded-full h-11 w-11 no-lightense">
                        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
                    </a>
                </div>
                <div class="flex-grow">
                    <a href="https://medium.com/@{{ creator.username }}"
                       target="_blank"
                       title="{{ creator.bio }}"
                       class="block font-semibold text-gray-900">{{ creator.name }}</a>
                    <button class="px-3 py-1 mt-1 text-sm text-white bg-green-500 rounded-lg">
                        <a href="https://medium.com/@{{ creator.username }}"
                           target="_blank"
                           title="{{ creator.bio }}"
                           class="block text-sm text-white">Follow</a>
                    </button>
                </div>
            </div>
            <div class="px-4 pb-2">
                <div class="flex flex-wrap items-center space-x-2 text-sm text-gray-500">
                    {% if collection %}
                        <a href="https://medium.com/{{ collection.slug }}"
                           title="{{ collection.shortDescription }}"
                           target="_blank"
                           class="flex items-center space-x-1">
                            <img loading="eager" src="https://miro.medium.com/v2/resize:fill:48:48/{{ collection.avatar.id }}"
                                 alt="{{ collection.name }}"
                                 referrerpolicy="no-referrer"
                                 class="w-4 h-4 rounded-full no-lightense">
                            <p>{{ collection.name }}</p>
                        </a>
                        <span>·</span>
                    {% endif %}
                    <span class="text-gray-500">~{{ readingTime }} min read</span>
                    <span class="md:inline">·</span>
                    <span class="text-gray-500">{{ firstPublishedAt }} (Updated: {{ updatedAt }})</span>
                    <span class="md:inline">·</span>
                    <span class="text-yellow-500">Free: {{ freeAccess }}</span>
                </div>
            </div>
        </div>
        {% for paragraph in content %}{{ paragraph }}{% endfor %}
        <div class="flex flex-wrap gap-2 mt-5">
            {% for tag in tags %}<a title="{{ tag.displayTitle }}" target="_blank" href="https://medium.com/tag/{{ tag.normalizedTagSlug }}"><span class="px-2 py-1 text-xs text-green-500 bg-green-100 rounded-full">#{{ tag.normalizedTagSlug }}</span></a>{% endfor %}
        </div>
        <div class="container w-full pt-12 mx-auto md:max-w-3xl"></div>
    </div>
    <style>
code {
    /*font-size: 75%;*/
    background-color: #e3e2e2;
}
pre {
    font-size: 75%;
    background-color: #e3e2e2;
}
    </style>