{% extends "base.html" %}
{% block jsonld %}
{%- set url = config.extra.site ~ (page.path | trim_end(pat="/")) -%}
{%- set tags = page.taxonomies.tags or [] -%}
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":{{ page.title | json_encode | safe }},"description":{{ (page.description or "") | json_encode | safe }},"url":{{ url | json_encode | safe }},"mainEntityOfPage":{{ url | json_encode | safe }},"datePublished":"{{ page.date | date(format="%Y-%m-%dT%H:%M:%S.000Z") }}","dateModified":"{{ (page.updated or page.date) | date(format="%Y-%m-%dT%H:%M:%S.000Z") }}","inLanguage":"da-DK","image":"https://asger.weirsoe.dk/og.png","keywords":{{ tags | join(sep=", ") | json_encode | safe }},"articleSection":{{ (tags[0] if tags else "Blog") | json_encode | safe }},"wordCount":{{ page.word_count }},"author":{"@id":"https://asger.weirsoe.dk/#person"},"publisher":{"@id":"https://asger.weirsoe.dk/#person"},"isPartOf":{"@id":"https://asger.weirsoe.dk/#website"}}</script>
{{ <crumbs n1="Forside" u1={config.extra.site ~ "/"} n2="Blog" u2={config.extra.site ~ "/blog"} n3={page.title} u3={url} /> }}
{% endblock %}
{% block main %}
<nav aria-label="Brødkrumme" class="text-sm text-muted">
  <a href="/" class="hover:text-accent">Forside</a>
  <span class="px-1.5 text-muted/60">/</span>
  <a href="/blog" class="hover:text-accent">Blog</a>
</nav>
<article class="mt-4">
  <header class="border-b border-border pb-6">
    <div class="text-sm text-muted">{{ page.date | date(format="d. MMMM y", locale="da") }}</div>
    <h1 class="mt-2 text-4xl font-bold tracking-tight">{{ page.title }}</h1>
    {%- if page.taxonomies.tags %}
    <div class="mt-4 flex flex-wrap gap-1.5">
      {% for t in page.taxonomies.tags %}<a href="/tags/{{ t }}" class="wt-chip">#{{ t }}</a>{% endfor %}
    </div>
    {%- endif %}
  </header>
  {#- Billeder i bundlen serveres som webp; markdown bruger bare ![tekst](fil.png). -#}
  {%- set indhold = page.content %}
  {%- for a in page.assets %}
  {%- set fil = a | split(pat="/") | last %}
  {%- set fra = 'src="' ~ config.base_url ~ page.path ~ fil ~ '"' %}
  {%- if fil is ending_with(pat=".png") or fil is ending_with(pat=".jpg") or fil is ending_with(pat=".jpeg") or fil is ending_with(pat=".webp") %}
  {%- set b = resize_image(path="blog/" ~ page.slug ~ "/" ~ fil, width=1200, height=10000, op="fit", format="webp", quality=80) %}
  {%- set_global indhold = indhold | replace(from=fra, to='src="' ~ (b.url | replace(from=config.base_url, to="")) ~ '" width="' ~ b.width ~ '" height="' ~ b.height ~ '" loading="lazy" decoding="async"') %}
  {%- else %}
  {%- set_global indhold = indhold | replace(from=fra, to='src="' ~ page.path ~ fil ~ '"') %}
  {%- endif %}
  {%- endfor %}
  <div class="prose mt-8">{{ indhold | safe }}</div>
</article>
{%- if not preview %}
<section class="mt-16 border-t border-border pt-8">
  <h2 class="text-2xl font-bold tracking-tight">Kommentarer</h2>
  <comentario-comments class="mt-6 block" live-update="true"></comentario-comments>
</section>
<script>
  (function () {
    if (!window.__comentarioLoaded) {
      window.__comentarioLoaded = true;
      var s = document.createElement('script');
      s.src = 'https://comentario.weircon.dk/comentario.js';
      s.defer = true;
      document.head.appendChild(s);
    }
  })();
</script>
{%- endif %}
<script>
  // Mermaid-diagrammer: ```mermaid-blokke rendres client-side. Scriptet (self-hosted)
  // hentes KUN på indlæg der faktisk har diagrammer.
  (function () {
    var blocks = document.querySelectorAll('code[data-lang="mermaid"]');
    if (!blocks.length) return;
    var s = document.createElement('script');
    s.src = (document.documentElement.dataset.base || '') + '/js/mermaid.min.js';
    s.onload = async function () {
      mermaid.initialize({ startOnLoad: false,
        theme: document.documentElement.dataset.theme === 'light' ? 'default' : 'dark' });
      var i = 0;
      for (var code of blocks) {
        try {
          var r = await mermaid.render('mmd-' + i++, code.textContent);
          var el = document.createElement('div');
          el.className = 'mermaid-diagram';
          el.innerHTML = r.svg;
          code.closest('pre').replaceWith(el);
        } catch (_) { /* lad kodeblokken stå hvis diagrammet ikke parser */ }
      }
    };
    document.head.appendChild(s);
  })();
</script>
<script>
  (function () {
    document.querySelectorAll('.prose pre').forEach(function (pre) {
      if (pre.querySelector('.copy-btn')) return;
      var b = document.createElement('button');
      b.className = 'copy-btn'; b.type = 'button'; b.textContent = 'kopiér';
      b.addEventListener('click', function () {
        var code = pre.querySelector('code');
        navigator.clipboard.writeText(code ? code.innerText : pre.innerText).then(function () {
          b.textContent = 'kopieret ✓';
          setTimeout(function () { b.textContent = 'kopiér'; }, 1500);
        });
      });
      pre.appendChild(b);
    });
  })();
</script>
{% endblock %}