93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="article-container">
|
|
<article class="article-content">
|
|
<header class="article-header">
|
|
<h1 class="article-title">{{ post.title }}</h1>
|
|
<div class="article-meta">
|
|
<time class="article-date">{{ post.date }}</time>
|
|
{% if post.language %}
|
|
<span class="article-lang">{{ post.language }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="article-actions">
|
|
{% if post.markdown_url %}
|
|
<a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
|
|
Markdown
|
|
</a>
|
|
{% endif %}
|
|
{% if post.translation_url %}
|
|
<a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
|
|
🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<div class="article-body">
|
|
{{ post.content | safe }}
|
|
</div>
|
|
|
|
<div id="comment-atproto"></div>
|
|
</article>
|
|
|
|
<aside class="article-sidebar">
|
|
<nav class="toc">
|
|
<h3>Contents</h3>
|
|
<div id="toc-content">
|
|
<!-- TOC will be generated by JavaScript -->
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
</div>
|
|
|
|
<script>
|
|
// Generate table of contents
|
|
function generateTableOfContents() {
|
|
const tocContainer = document.getElementById('toc-content');
|
|
const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
|
|
|
|
if (headings.length === 0) {
|
|
tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
|
|
return;
|
|
}
|
|
|
|
const tocList = document.createElement('ul');
|
|
tocList.className = 'toc-list';
|
|
|
|
headings.forEach((heading, index) => {
|
|
const id = `heading-${index}`;
|
|
heading.id = id;
|
|
|
|
const listItem = document.createElement('li');
|
|
listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
|
|
|
|
const link = document.createElement('a');
|
|
link.href = `#${id}`;
|
|
link.textContent = heading.textContent;
|
|
link.className = 'toc-link';
|
|
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
heading.scrollIntoView({ behavior: 'smooth' });
|
|
});
|
|
|
|
listItem.appendChild(link);
|
|
tocList.appendChild(listItem);
|
|
});
|
|
|
|
tocContainer.appendChild(tocList);
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
generateTableOfContents();
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block sidebar %}
|
|
{% endblock %} |