web/web/server/templates/post.html

<div class="container w-full pt-20 mx-auto text-gray-900 break-words bg-white md:max-w-3xl dark:text-gray-200 dark:bg-gray-800">
    <div class="w-full px-4 text-xl leading-normal text-gray-800 md:px-6 dark:text-gray-100" style="font-family:Georgia,serif;">
        {% if enable_ads_header %}<div class="pt-8"></div>{% endif %}
        <div class="font-sans">
            <p class="pb-3 text-base font-bold text-green-500 md:text-sm">
                <a href="{{ url }}#bypass" 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"
                     referrerpolicy="no-referrer"
                     role="presentation"
                     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 dark:text-gray-100 md:text-4xl">{{ title }}</h1>
            {% if subtitle %}<h2 class="pt-1 font-sans font-medium text-gray-600 break-normal dark:text-gray-200 text-1xl md:text-1xl">{{ subtitle }}</h2>{% endif %}
        </div>
        <div class="m-2 mt-5 bg-gray-100 border border-gray-300 dark:bg-gray-600">
            <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 src="https://miro.medium.com/v2/resize:fill:88:88/{{ creator.imageId or '1*dmbNkD5D-u45r44go_cf0g.png' }}"
                             alt="{{ creator.name }}"
                             loading="eager"
                             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 dark:text-white">{{ creator.name }}</a>
                    <button class="px-3 py-1 mt-1 text-sm text-white bg-green-500 rounded-lg dark:bg-green-700">
                        <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 dark:text-white">
                    {% if collection %}
                        <a href="https://medium.com/{{ collection.slug }}"
                           title="{{ collection.shortDescription }}"
                           target="_blank"
                           class="flex items-center space-x-1">
                            <img loading="eager"
                                 referrerpolicy="no-referrer"
                                 src="https://miro.medium.com/v2/resize:fill:48:48/{{ collection.avatar.id }}"
                                 alt="{{ collection.name }}"
                                 class="w-4 h-4 rounded-full no-lightense">
                            <p>{{ collection.name }}</p>
                        </a>
                        <span>·</span>
                    {% endif %}
                    <span class="text-gray-500 dark:text-white">~{{ readingTime }} min read</span>
                    <span class="md:inline">·</span>
                    <span class="text-gray-500 dark:text-white">{{ firstPublishedAt }} (Updated: {{ updatedAt }})</span>
                    <span class="md:inline">·</span>
                    <span class="text-yellow-500 dark:text-yellow-400">Free: {{ freeAccess }}</span>
                </div>
            </div>
        </div>
        <div class="mt-8 main-content">
            {% for paragraph in content %}{{ paragraph }}{% endfor %}
        </div>
        <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 dark:bg-green-800 dark:text-gray-100">#{{ tag.normalizedTagSlug }}</span></a>{% endfor %}
        </div>
        <div class="container w-full pt-12 mx-auto md:max-w-3xl"></div>
    </div>
    <style>
.main-content {
 letter-spacing: -0.06px;
 font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif;
}
pre {
    font-size: 75%;
    background-color: #e3e2e2;
}
p code, ul code, li code {
    font-size: 75%;
}
    </style>
    <script>
document.addEventListener('DOMContentLoaded', (event) => {
  hljs.highlightAll();

  document.querySelectorAll('pre code').forEach((el) => {
        code = el.textContent;
        el = el.parentElement;
        el.innerHTML = '<button class="p-1 bg-gray-300 hljs-copy dark:bg-zinc-800">Copy</button>' + el.innerHTML; // append copy button
        el.getElementsByClassName('hljs-copy')[0].contentCopy = code;
         el.getElementsByClassName('hljs-copy')[0].addEventListener("click", function () {
             this.innerText = 'Copying..';
             if (!navigator.userAgent.toLowerCase().includes('safari')) {
                 navigator.clipboard.writeText(this.contentCopy);
             } else {
                 prompt("Clipboard (Select: ⌘+a > Copy:⌘+c)", this.contentCopy);
             }
             this.innerText = 'Copied!';
             button = this;
             setTimeout(function () {
                 button.innerText = 'Copy';
             }, 1500)
         });
});
  });
    </script>
    <style>
     .hljs-copy {
         float: right;
         cursor: pointer;
     }
    </style>