Files
wiki-maker/templates/page.html

85 lines
2.4 KiB
HTML

{% extends "_base.html" %}
{% block title %}{{ title }}{% endblock title %}
{% block content %}
<div class="wiki-header">
<h1>
{{ title }}
{% if category %}
<span class="header-category">#{{ category }}</span>
{% endif %}
</h1>
</div>
<div class="wiki-container">
<main class="wiki-body">
<article>
{{ content | safe }}
</article>
</main>
<aside class="wiki-sidebar">
{% if main_image %}
<div class="sidebar-image">
<img src="{{ main_image }}" alt="{{ title }}">
</div>
{% endif %}
{% if infobox %}
<div class="infobox-data">
<table>
<tbody>
{% for item in infobox %}
<tr>
<td class="info-label">{{ item.key }}</td>
<td class="info-value">{{ item.value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</aside>
</div>
<script>
document.querySelectorAll('pre[data-code]').forEach((block) => {
const lang = block.getAttribute('data-lang') || 'text';
const code = block.getAttribute('data-code');
const wrapper = document.createElement('div');
wrapper.className = 'code-wrapper';
const header = document.createElement('div');
header.className = 'code-header';
const langLabel = document.createElement('span');
langLabel.className = 'code-lang';
langLabel.innerText = lang;
const button = document.createElement('button');
button.className = 'copy-button';
button.type = 'button';
button.innerHTML = '<i class="fa-regular fa-copy"></i>';
header.appendChild(langLabel);
header.appendChild(button);
block.parentNode.insertBefore(wrapper, block);
wrapper.appendChild(header);
wrapper.appendChild(block);
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(code);
button.innerHTML = '<i class="fa-solid fa-check"></i>';
button.classList.add('copied');
setTimeout(() => {
button.innerHTML = '<i class="fa-regular fa-copy"></i>';
button.classList.remove('copied');
}, 2000);
} catch (err) { console.error('Copy failed', err); }
});
});
</script>
{% endblock content %}