casper-modified-ghost-theme/post.hbs

{{!<
    default}}
    {{!--
    The
    tag
    above
    means:
    insert
    everything
    in
    this
    file
    into
    the
    {body}
    of
    the
    default.hbs
    template
    --}}
    <header
    class="site-header"
>
    {{> site-header}}
    </header>

    {{!-- Everything inside the #post tags pulls data from the post --}}
    {{#post}}

    <main
        id="site-main"
        class="site-main outer"
    >
        <div class="inner">

            <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

                <header class="post-full-header">

                    {{#if primary_tag}}
                    <section class="post-full-tags">
                        {{#if tags}}
                        {{#foreach tags}}
                        <a
                            href="{{url}}"
                            title="{{name}}"
                            class="tag {{slug}}"
                        >{{name}}</a>
                        {{/foreach}}
                        {{/if}}
                    </section>
                    {{/if}}

                    <h1 class="post-full-title">{{title}}</h1>

                    {{#if custom_excerpt}}
                    <p class="post-full-custom-excerpt">{{custom_excerpt}}</p>
                    {{/if}}

                    <div class="post-full-byline">

                        <section class="post-full-byline-content">

                            <ul class="author-list">
                                {{#foreach authors}}
                                <li class="author-list-item">

                                    <div class="author-card">
                                        {{#if profile_image}}
                                        <img
                                            class="author-profile-image"
                                            src="{{img_url profile_image size="
                                            xs"}}"
                                            alt="{{name}}"
                                        />
                                        {{else}}
                                        <div class="author-profile-image">{{> "icons/avatar"}}</div>
                                        {{/if}}
                                        <div
                                            class="author-info"
                                            aria-hidden="true"
                                        >
                                            {{#if bio}}
                                            <div class="bio">
                                                <h2>{{name}}</h2>
                                                <p>{{bio}}</p>
                                                <p><a href="{{url}}">Więcej postów</a> - {{name}}.</p>
                                            </div>
                                            {{else}}
                                            <h2>{{name}}</h2>
                                            <p>Zobacz <a href="{{url}}">więcej postów</a> tego autora.</p>
                                            {{/if}}
                                        </div>
                                    </div>

                                    {{#if profile_image}}
                                    <a
                                        href="{{url}}"
                                        class="author-avatar"
                                    >
                                        <img
                                            class="author-profile-image"
                                            src="{{img_url profile_image size="
                                            xs"}}"
                                            alt="{{name}}"
                                        />
                                    </a>
                                    {{else}}
                                    <a
                                        href="{{url}}"
                                        class="author-avatar author-profile-image"
                                    >{{> "icons/avatar"}}</a>
                                    {{/if}}

                                </li>
                                {{/foreach}}
                            </ul>

                            <section class="post-full-byline-meta">
                                <h4 class="author-name">{{authors}}</h4>
                                <div class="byline-meta-content">
                                    <time
                                        class="byline-meta-date"
                                        datetime="{{date format="
                                        YYYY-MM-DD"}}"
                                    >{{date format="D MMM YYYY"}}</time>
                                    <span class="byline-reading-time"><span class="bull">&bull;</span>
                                        {{reading_time}}</span>
                                </div>
                            </section>

                        </section>



                    </div>
                </header>

                {{#if feature_image}}
                <figure class="post-full-image">
                    {{!-- This is a responsive image, it loads different sizes depending on device
                    https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433
                    --}}
                    <img
                        srcset="{{img_url feature_image size="
                        s"}}
                        300w,
                        {{img_url
                        feature_image
                        size="m"
                        }}
                        600w,
                        {{img_url
                        feature_image
                        size="l"
                        }}
                        1000w,
                        {{img_url
                        feature_image
                        size="xl"
                        }}
                        2000w"
                        sizes="(max-width: 800px) 400px,
                        (max-width: 1170px) 1170px,
                            2000px"
                        src="{{img_url feature_image size="
                        xl"}}"
                        alt="{{title}}"
                    />
                </figure>
                {{/if}}

                <section class="post-full-content">
                    <div class="post-content">
                        {{content}}
                    </div>
                </section>

                {{!-- Email subscribe form at the bottom of the page --}}
                {{#if @labs.members}}
                {{> subscribe-form}}
                {{/if}}

                {{!--
                <section class="post-full-comments">
                    If you want to embed comments, this is a good place to do it!
                </section>
                --}}

            </article>
            <script
                data-isso="https://www.internet-czas-dzialac.pl/isso"
                data-isso-lang="pl"
                data-isso-default-lang="pl"
                data-isso-feed="false"
                data-isso-vote="false"
                data-isso-max-comments-top="inf"
                data-isso-max-comments-nested="inf"
                data-isso-gravatar="false"
                data-isso-avatar="true"
                src="https://www.internet-czas-dzialac.pl/isso/js/embed.min.js"
                async
            ></script>

            <section id="isso-thread"></section>
            <script>
                (async function () {
                    function addCheckbox() {
                        const original_submit = document.querySelector(".post-action input[type='submit']");
                        original_submit.style.setProperty("display", "none")
                        const faux_submit = document.createElement("input")
                        faux_submit.value = "Wyślij"
                        faux_submit.type = "submit"
                        const comment_checkbox_id = "comment-checkbox"
                        const checkbox = document.createElement("input")
                        checkbox.type = "checkbox"
                        checkbox.id = comment_checkbox_id
                        checkbox.required = true
                        const label = document.createElement("label")
                        label.style.setProperty("line-height", 1);
                        label.style.setProperty("margin", "1em 0");
                        label.for = comment_checkbox_id;
                        label.appendChild(checkbox)
                        label.id = comment_checkbox_id + "__label"
                        const label_text = document.createElement("span")
                        label_text.innerHTML = `Zapoznałam/em się z <a href="/regulamin-komentarzy">Regulaminem publikowania komentarzy</a> i&nbsp;akceptuję jego treść.`
                        label.appendChild(label_text)
                        document.querySelector("#isso-thread .auth-section").insertBefore(label, document.querySelector(".auth-section .post-action"))
                        const legal = document.createElement("p");
                        legal.classList.add("legal");
                        legal.innerHTML = `Współadministratorami danych osobowych są Arkadiusz Wieczorek oraz Jan Orlik. Dane osobowe podane w formularzu są przetwarzane w celu realizacji usługi publikowania komentarzy na stronie internetowej współadministratorów, jak również w celu ustalenia, dochodzenia lub obrony roszczeń. Masz w szczególności prawo dostępu do swoich danych osobowych, ich usunięcia oraz wniesienia sprzeciwu wobec przetwarzania danych. Szczegóły dotyczące przetwarzania danych osobowych i przysługujących Ci praw znajdują się w <a href="/polityka-prywatnosci">Polityce prywatności</a>.`
                        legal.style.setProperty("hyphens", "auto")
                        legal.style.setProperty("text-align", "justify")
                        legal.style.setProperty("font-style", "italic")
                        legal.style.setProperty("font-size", "1.333rem")
                        legal.style.setProperty("line-height", "150%")
                        document.querySelector("#isso-thread .auth-section").insertBefore(legal, document.querySelector(".auth-section .post-action"))
                        const email_input = document.querySelector("#isso-thread").querySelector(`input[type="email"]`)
                        email_input.placeholder = "adres E-mail";
                        email_input.required = true;
                        faux_submit.addEventListener("click", ()=>{
                          if(!email_input.validity.valid){
                             email_input.reportValidity()
                           }else if(!checkbox.checked){
                             checkbox.reportValidity()    
                           }else {
                             original_submit.click()
                           }
                        })
                        original_submit.parentElement.appendChild(faux_submit)
                    }
                    for (let i = 0; i <= 20; i++) {
                        if (document.querySelector(".post-action input[type='submit']")) {
                            continue
                        }
                        await new Promise((resolve) => setTimeout(resolve, 200));
                    }
                    addCheckbox();
                })()
            </script>
        </div>
    </main>

    {{!-- Links to Previous/Next posts --}}
    <aside class="read-next outer">
        <div class="inner">
            <div class="read-next-feed">
                {{#if primary_tag}}
                {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
                {{#if related_posts}}
                <article class="read-next-card">
                    <header class="read-next-card-header">
                        {{#../primary_tag}}
                        <h3><span>More in</span> <a href="{{url}}">{{name}}</a></h3>
                        {{/../primary_tag}}
                    </header>
                    <div class="read-next-card-content">
                        <ul>
                            {{#foreach related_posts}}
                            <li>
                                <h4><a href="{{url}}">{{title}}</a></h4>
                                <div class="read-next-card-meta">
                                    <p><time
                                            datetime="{{date format="
                                            YYYY-MM-DD"}}"
                                        >{{date format="D MMM YYYY"}}</time> –
                                        {{reading_time}}</p>
                                </div>
                            </li>
                            {{/foreach}}
                        </ul>
                    </div>
                    <footer class="read-next-card-footer">
                        <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No
                            posts' singular='% post' plural='See all % posts'}}
                            →</a>
                    </footer>
                </article>
                {{/if}}
                {{/get}}
                {{/if}}

                {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs
                --}}
                {{#next_post}}
                {{> "post-card"}}
                {{/next_post}}

                {{!-- If there's a previous post, display it using the same markup included from -
                partials/post-card.hbs --}}
                {{#prev_post}}
                {{> "post-card"}}
                {{/prev_post}}
            </div>
        </div>
    </aside>

    {{/post}}

    {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in
    default.hbs --}}
    {{#contentFor "scripts"}}
    <script>
        $(document).ready(function () {
            // FitVids - start
            var $postContent = $(".post-full-content");
            $postContent.fitVids();
            // FitVids - end

            // Replace nav with title on scroll - start
            Casper.stickyNavTitle({
                navSelector: '.site-nav-main',
                titleSelector: '.post-full-title',
                activeClass: 'nav-post-title-active'
            });
            // Replace nav with title on scroll - end

            // Hover on avatar
            var hoverTimeout;
            $('.author-list-item').hover(function () {
                var $this = $(this);

                clearTimeout(hoverTimeout);

                $('.author-card').removeClass('hovered');
                $(this).children('.author-card').addClass('hovered');

            }, function () {
                var $this = $(this);

                hoverTimeout = setTimeout(function () {
                    $this.children('.author-card').removeClass('hovered');
                }, 800);
            });
        });
    </script>
    {{/contentFor}}