Deploy broadsheet article single template (post.hbs) and typography
This commit is contained in:
WMJ Ismail
@@ -0,0 +1,198 @@
|
||||
{{!-- 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">•</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}} · {{/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 →</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 →</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}} · {{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}}
|
||||
Reference in New Issue
Block a user