🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
<!-- Modern Card UI - Post Detail Template -->
|
|
<template id="modern-detail-template">
|
|
<article class="post-detail" data-post-id="{{id}}" data-platform="{{platform}}">
|
|
<div class="detail-container">
|
|
<!-- Header Card -->
|
|
<header class="detail-header">
|
|
<div class="header-meta-card">
|
|
<div class="meta-row">
|
|
<span class="platform-badge platform-{{platform}}">{{platform|upper}}</span>
|
|
{% if source %}
|
|
<span class="detail-source">in {{source}}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="headline-section">
|
|
<h1 class="detail-title">{{title}}</h1>
|
|
<div class="byline">
|
|
<span class="author-link">by {{author}}</span>
|
|
<span class="publication-time">{{formatDateTime(timestamp)}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-item">
|
|
<span class="stat-number">{{score}}</span>
|
|
<span class="stat-label">points</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">{{replies}}</span>
|
|
<span class="stat-label">comments</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if tags %}
|
|
<div class="detail-tags">
|
|
{% for tag in tags if tag %}
|
|
<span class="tag-pill">{{tag}}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Article Body -->
|
|
{% if content %}
|
|
<section class="article-body">
|
|
<div class="article-content">
|
|
{{ renderMarkdown(content)|safe }}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Action Row -->
|
|
<div class="article-actions">
|
|
<a href="{{url}}" target="_blank" class="action-button primary">
|
|
View Original
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Comments Section -->
|
|
{% if comments_section %}
|
|
<section class="comments-section">
|
|
<h2 class="comments-header">Comments ({{replies}})</h2>
|
|
{{comments_section|safe}}
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
</article>
|
|
</template>
|