post.hbs

{{!< default}}

{{#post}}

<article class="gh-article {{post_class}}">

    <header class="gh-header gh-canvas">

        <div class="post-header mx-auto">
            <h1 class="gh-title text-size-lg/display uppercase mt-16">{{title}}</h1>

            {{#if custom_excerpt}}
            <p class="gh-excerpt mx-auto">{{custom_excerpt}}</p>
            {{/if}}

            <div class="gh-feature-image-wrapper my-32">
                {{#if feature_image}}
                <figure class="gh-feature-image mt-8 lg:px-48">
                    <picture>
                    <source 
                        srcset="
                        {{img_url feature_image size="xxs" format="avif"}} 30w,
                        {{img_url feature_image size="xs" format="avif"}} 100w,
                        {{img_url feature_image size="s" format="avif"}} 300w,
                        {{img_url feature_image size="m" format="avif"}} 600w,
                        {{img_url feature_image size="l" format="avif"}} 1200w,
                        {{img_url feature_image size="xl" format="avif"}} 2000w"
                        sizes="(min-width: 1200px) 1200px, 90vw" 
                        type="image/avif"
                    >
                    <source 
                        srcset="
                        {{img_url feature_image size="xxs" format="webp"}} 30w,
                        {{img_url feature_image size="xs" format="webp"}} 100w,
                        {{img_url feature_image size="s" format="webp"}} 300w,
                        {{img_url feature_image size="m" format="webp"}} 600w,
                        {{img_url feature_image size="l" format="webp"}} 1200w,
                        {{img_url feature_image size="xl" format="webp"}} 2000w"
                        sizes="(min-width: 1200px) 1200px, 90vw" 
                        type="image/webp"
                    >
                    <img
                        srcset="
                        {{img_url feature_image size="xxs"}} 30w,
                        {{img_url feature_image size="xs"}} 100w,
                        {{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1200w,
                        {{img_url feature_image size="xl"}} 2000w"
                        sizes="(min-width: 1200px) 1200px, 90vw" 
                        src="{{img_url feature_image size="l"}}"
                        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                    >
                    </picture>
                    {{#if feature_image_caption}}
                        <figcaption>{{feature_image_caption}}</figcaption>
                    {{/if}}
                </figure>
                {{/if}}
            </div>
        </div>

        <div class="my-24 py-16 border-black border-t border-b">
            <div class="flex justify-between max-w-5xl mx-auto">
                <span class="gh-post-meta"><time datetime="{{date format="MMMM D, YYYY"}}">{{date format="MMMM D, YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
                {{> "share-button"}}
            </div>
        </div>
        
        <div class="inline-grid grid-cols-1 items-start w-auto">
            <div class="gh-post-authors text-size-1 uppercase mb-3">
                By {{#foreach authors}}<a href="{{url}}">{{name}}</a>{{/foreach}}
            </div>
            <div class="gradient-line-horizontal"></div>
        </div>
    </header>

    <div class="gh-content gh-canvas">
        {{content}}
    </div>

    <footer class="gh-footer gh-canvas">

        {{#if comments}}
        <section class="gh-post-comments">
            {{comments}}
        </section>
        {{/if}}

    </footer>

</article>

<aside class="gh-readmore">
    <div class="gh-readmore-inner gh-container">
        <div class="gh-readmore-next">
            {{#next_post}}<a href="{{url}}">{{> "icons/arrow-left"}} <h4>{{title}}</h4></a>{{/next_post}}
        </div>
        <div class="gh-readmore-prev">
            {{#prev_post}}<a href="{{url}}">
                <h4>{{title}}</h4> {{> "icons/arrow-right"}}
            </a>{{/prev_post}}
        </div>
    </div>
</aside>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tags = [...document.querySelectorAll('.post-tags li')];
    const gifTag = tags.find(tag => tag.textContent.startsWith('gif-url:'));

    if (gifTag) {
      const gifUrl = gifTag.textContent.replace('gif-url:', '').trim();
      const gifImage = document.createElement('img');
      gifImage.src = gifUrl;
      gifImage.alt = 'Post GIF';
      gifImage.className = 'gh-feature-image';

      const featureImageWrapper = document.querySelector('.gh-feature-image-wrapper');
      featureImageWrapper.innerHTML = ''; // Clear existing content
      featureImageWrapper.appendChild(gifImage);
    }
  });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const shareModal = document.getElementById("shareModal");
        const shareButton = document.querySelector(".share-button");
        const closeButton = shareModal ? shareModal.querySelector(".close-button") : null;
        const copyButton = shareModal ? shareModal.querySelector(".field button") : null;
        const copyInput = shareModal ? shareModal.querySelector(".field input") : null;
        const field = shareModal ? shareModal.querySelector(".field") : null;

        // Open the share modal
        function openShareModal() {
            if (shareModal) {
                shareModal.classList.remove("hidden");
            }
        }

        // Close the share modal
        function closeShareModal() {
            if (shareModal) {
                shareModal.classList.add("hidden");
            }
        }

        // Event listener for opening the modal
        if (shareButton) {
            shareButton.addEventListener("click", openShareModal);
        }

        // Event listener for closing the modal
        if (closeButton) {
            closeButton.addEventListener("click", closeShareModal);
        }

        // Close the modal when clicking outside of it
        window.addEventListener("click", function(event) {
            if (event.target === shareModal) {
                closeShareModal();
            }
        });

        // Copy functionality
        if (copyButton && copyInput) {
            copyButton.addEventListener("click", () => {
                copyInput.select();
                if (document.execCommand("copy")) {
                    field.classList.add("active");
                    copyButton.innerText = "Copied";
                    setTimeout(() => {
                        window.getSelection().removeAllRanges();
                        field.classList.remove("active");
                        copyButton.innerText = "Copy";
                    }, 3000);
                }
            });
        }
    });
</script>

<ul class="post-tags" style="display: none;">
  {{#foreach tags}}
    <li>{{name}}</li>
  {{/foreach}}
</ul>

{{/post}}