110 lines
3.8 KiB
HTML
110 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" type="image/x-icon" href="/static/icon.ico">
|
|
<title>{{slug}}</title>
|
|
<link rel="stylesheet" href="/static/bulma.min.css" />
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<nav
|
|
class="navbar is-primary"
|
|
role="navigation"
|
|
aria-label="main navigation"
|
|
>
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="#">
|
|
<strong>Static Translated Site Generator</strong>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="section">
|
|
{% if translations|length %}
|
|
<div class="container content">
|
|
<div class="content">
|
|
<h1>Translations</h1>
|
|
</div>
|
|
<div class="columns is-multiline">
|
|
{% for t in translations %}
|
|
<div class="column is-half">
|
|
<div class="card mb-4" lang="{{t.language.code}}" style="height: 100%;">
|
|
<a href="{{t.url}}" hreflang="{{t.language.code}}" class="card mb-4" style="color: inherit; text-decoration: none;">
|
|
<div class="card-content">
|
|
<p class="title">{{t.language.flag}} {{t.title}}</p>
|
|
<hr />
|
|
<p class="content">
|
|
{{t.preview}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<time class="card-footer-item" datetime="{{iso_date}}">{{date}}</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
{% if children|length %}
|
|
<div class="container content">
|
|
<div class="column is-half is-offset-one-quarter">
|
|
<h1>Related Articles</h1>
|
|
</div>
|
|
<div class="column is-half is-offset-one-quarter">
|
|
{% for c in children %}
|
|
<div class="card mb-4" >
|
|
<a href="{{c.url}}" class="card mb-4" style="color: inherit; text-decoration: none;">
|
|
<div class="card-content">
|
|
<p class="title">{{c.slug}} </p>
|
|
<hr />
|
|
<p class="content is-flex is-flex-direction-column" style="gap: 10px;">
|
|
{% for ct in c.translations %}
|
|
<a href="{{ct.url}}" hreflang="{{ct.language.code}}">{{ct.language.flag}}: {{ct.title}}</a>
|
|
{% endfor %}
|
|
</p>
|
|
<hr />
|
|
<time datetime="{{iso_date}}">{{date}}</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="content has-text-centered">
|
|
<p><strong>STSG</strong> by Hazel. © 2025</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const userLang = navigator.language || navigator.userLanguage;
|
|
|
|
// Normalize and check if the language is not English or German
|
|
if (!["en", "de", "de-DE"].includes(userLang)) {
|
|
// Try to find a matching card by language attribute
|
|
const cardToMove =
|
|
document.querySelector(`.card[lang^="${userLang.replace("_", "-").toLowerCase()}"]`) ||
|
|
document.querySelector(`.card[lang^="${userLang.split("-")[0]}"]`);
|
|
|
|
if (cardToMove) {
|
|
const container = cardToMove.parentNode;
|
|
container.insertBefore(cardToMove, container.firstChild);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</html>
|