<script>
  import Navbar from "$components/navbar.svelte";
  import Footer from "$components/footer.svelte";
  import Header from "$components/header.svelte";
  import Head from "$components/head.svelte";

  import { locale, _ } from "$lib/locale.js";

  import DOMPurify from "dompurify";
  import { marked } from "marked";
  import { onMount } from "svelte";

  let { data } = $props();
  marked.use();

  onMount(() => {
    for (let key in data.doc) {
      data.doc[key]["content"] = DOMPurify.sanitize(data.doc[key]["content"]);
    }
  });
</script>

<Head title="documentation" desc="website and API documentation" />
<Navbar />
<Header picture="reader" title={data.doc[$locale.code].title} />
<main>
  <div class="markdown-body">
    {@html marked.parse(data.doc[$locale.code].content)}
  </div>
</main>
<Footer />

<style>
  @import "/css/markdown.css";

  main {
    background: var(--black-1);
    padding: 40px;
    gap: 30px;
  }
</style>
