falah-ft-theme/post.hbs

{{!-- FT & NYT Hybrid Broadsheet — Article Single Template --}}
{{!< default}}

{{#post}}
<article class="ft-broadsheet-article {{post_class}}" role="article">

    {{!-- Sticky Reading Progress Bar --}}
    <div class="ft-reading-progress" id="ft-reading-progress" aria-hidden="true"></div>

    {{!-- 1. BROADSHEET ARTICLE HEADER --}}
    <header class="ft-article-header">
        <div class="ft-header-inner">
            <div class="ft-article-category-row">
                {{#if primary_tag}}
                    <a class="ft-article-kicker" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
                    <span class="ft-dot-divider">&bull;</span>
                {{/if}}
                <span class="ft-article-edition">Iqra Dispatches</span>
            </div>

            <h1 class="ft-article-main-title">{{title}}</h1>

            {{#if custom_excerpt}}
                <p class="ft-article-deck">{{custom_excerpt}}</p>
            {{/if}}

            {{!-- Metaline / Byline Bar --}}
            <div class="ft-article-byline-bar">
                <div class="ft-author-meta-block">
                    {{#if primary_author.profile_image}}
                        <div class="ft-author-badge-frame">
                            <img src="{{primary_author.profile_image}}" alt="{{primary_author.name}}">
                        </div>
                    {{/if}}
                    <div class="ft-author-text">
                        <span class="ft-byline-name">By {{#if primary_author}}<a href="{{primary_author.url}}">{{primary_author.name}}</a>{{else}}Editorial Board{{/if}}</span>
                        <span class="ft-byline-loc">{{#if primary_author.location}}{{primary_author.location}} &middot; {{/if}}<time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time></span>
                    </div>
                </div>

                <div class="ft-article-tools-block">
                    {{#if reading_time}}
                        <span class="ft-read-pill">{{reading_time}}</span>
                    {{/if}}
                    <div class="ft-article-share-strip">
                        <a href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute="true"}}" target="_blank" rel="noopener" aria-label="Share on X" class="ft-share-icon">{{> "icons/twitter"}}</a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{url absolute="true"}}" target="_blank" rel="noopener" aria-label="Share on LinkedIn" class="ft-share-icon">{{> "icons/linkedin"}}</a>
                        <a href="https://wa.me/?text={{encode title}}%20{{url absolute="true"}}" target="_blank" rel="noopener" aria-label="Share on WhatsApp" class="ft-share-icon">{{> "icons/whatsapp"}}</a>
                    </div>
                </div>
            </div>

            {{!-- TTS Narration Console --}}
            <div class="ft-article-audio-box">
                {{> "ft-tts-player"}}
            </div>
        </div>

        {{!-- Hero Photographic Anchor --}}
        {{#if feature_image}}
            <div class="ft-article-hero-viewport">
                <div class="ft-hero-img-container">
                    <img src="{{img_url feature_image size="xl"}}" alt="{{title}}">
                </div>
                {{#if feature_image_caption}}
                    <figcaption class="ft-hero-caption">{{feature_image_caption}}</figcaption>
                {{/if}}
            </div>
        {{/if}}
    </header>

    {{!-- 2. EDITORIAL PROSE COLUMN --}}
    <main class="ft-article-prose-column" id="ft-prose-content">

        {{!-- SEMAFOR-STYLE STRUCTURED TAKEAWAY DRAWER --}}
        <div class="ft-article-takeaways">
            <div class="ft-takeaway-header">
                <span class="ft-takeaway-label">Key Dispatches</span>
                <span class="ft-takeaway-sub">Structured Editorial Intelligence</span>
            </div>
            <div class="ft-takeaway-item">
                <span class="ft-takeaway-tag">The Core Insight</span>
                <div class="ft-takeaway-text">Bridging authentic classical wisdom with contemporary empirical evidence and rigorous Shariah governance.</div>
            </div>
            <div class="ft-takeaway-item">
                <span class="ft-takeaway-tag">Actionable Protocol</span>
                <div class="ft-takeaway-text">Practical implementation rules designed for family stewardship, clinical wellness, and capital resilience.</div>
            </div>
            <div class="ft-takeaway-item">
                <span class="ft-takeaway-tag">The Exposure</span>
                <div class="ft-takeaway-text">Critical structural vulnerabilities to avoid under changing regional laws and modern lifestyle stress.</div>
            </div>
        </div>

        {{!-- Ghost Post Content --}}
        <div class="ft-prose-body gh-content">
            {{content}}
        </div>

        {{!-- Article Tags Strip --}}
        {{#if tags}}
            <div class="ft-article-tags-row">
                <span class="ft-tags-label">Filed Under:</span>
                {{#foreach tags}}
                    <a href="{{url}}" class="ft-tag-pill">{{name}}</a>
                {{/foreach}}
            </div>
        {{/if}}

        {{!-- Author Signature Broadsheet Card --}}
        {{#if primary_author}}
            <div class="ft-author-broadsheet-card">
                <div class="ft-card-avatar">
                    {{#if primary_author.profile_image}}
                        <img src="{{primary_author.profile_image}}" alt="{{primary_author.name}}">
                    {{/if}}
                </div>
                <div class="ft-card-bio-body">
                    <div class="ft-card-author-title">Editorial Board Contributor</div>
                    <h3 class="ft-card-author-name"><a href="{{primary_author.url}}">{{primary_author.name}}</a></h3>
                    {{#if primary_author.bio}}
                        <p class="ft-card-author-bio">{{primary_author.bio}}</p>
                    {{/if}}
                    <div class="ft-card-author-links">
                        <a href="{{primary_author.url}}" class="ft-author-archive-link">View author archive &rarr;</a>
                    </div>
                </div>
            </div>
        {{/if}}

        {{!-- Inline Product CTA / Curricula --}}
        {{> "ft-product-cta"}}

        {{!-- Newsletter Inset --}}
        {{> "ft-newsletter"}}

    </main>

    {{!-- 3. RELATED BROADSHEET INVESTIGATIONS --}}
    {{#get "posts" filter="id:-{{id}}+status:published" limit="3" include="tags,authors"}}
        {{#if posts.length}}
            <section class="ft-related-broadsheet-section">
                <div class="ft-related-container">
                    <div class="ft-related-bar">
                        <h3 class="ft-related-title">Related Investigations</h3>
                        <a href="/" class="ft-related-all">The Front Page &rarr;</a>
                    </div>
                    <div class="ft-related-broadsheet-grid">
                        {{#foreach posts}}
                            <article class="ft-related-col-card">
                                {{#if feature_image}}
                                    <div class="ft-related-thumb">
                                        <a href="{{url}}"><img src="{{img_url feature_image size="m"}}" alt="{{title}}"></a>
                                    </div>
                                {{/if}}
                                <span class="ft-lead-kicker">
                                    {{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>{{else}}Dispatch{{/if}}
                                </span>
                                <h4 class="ft-related-card-title"><a href="{{url}}">{{title}}</a></h4>
                                <p class="ft-related-card-excerpt">
                                    {{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="16"}}{{/if}}
                                </p>
                                <div class="ft-lead-byline">
                                    {{#if primary_author}}{{primary_author.name}}{{/if}} &middot; {{reading_time}}
                                </div>
                            </article>
                        {{/foreach}}
                    </div>
                </div>
            </section>
        {{/if}}
    {{/get}}

</article>

{{!-- Reading Progress Script --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const progressBar = document.getElementById('ft-reading-progress');
    const content = document.getElementById('ft-prose-content');
    if (!progressBar || !content) return;

    window.addEventListener('scroll', function() {
        const rect = content.getBoundingClientRect();
        const contentHeight = content.offsetHeight;
        const windowHeight = window.innerHeight;
        
        let progress = 0;
        if (rect.top <= 0) {
            progress = Math.min(100, Math.max(0, (-rect.top / (contentHeight - windowHeight)) * 100));
        }
        progressBar.style.width = progress + '%';
    });
});
</script>
{{/post}}

{{#contentFor "body_class"}}ft-broadsheet-post-template{{/contentFor}}