PageFrame.astro

---
import type { Props } from "@astrojs/starlight/props";
import Default from "@astrojs/starlight/components/PageFrame.astro";
---

<Default {...Astro.props}>
  <slot name="header" slot="header" />
  <slot name="sidebar" slot="sidebar" />
  <slot />
</Default>
<script>
  /**
   * taken from: https://github.com/JuanM04/portfolio/blob/983b0ed0eabdac37bf8b7912d3e8128a443192b9/src/pages/docs/%5B...documentSlug%5D.astro#L74-L103
   */
  async function renderDiagrams(graphs) {
    const { default: mermaid } = await import("mermaid");
    mermaid.initialize({
      startOnLoad: false,
      fontFamily: "var(--sans-font)",
      theme: window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "default",
    });

    for (const graph of graphs) {
      const content = graph.getAttribute("data-content");
      if (!content) continue;
      let svg = document.createElement("svg");
      const id = (svg.id = "mermaid-" + Math.round(Math.random() * 100000));
      graph.appendChild(svg);
      mermaid.render(id, content).then((result) => {
        graph.innerHTML = result.svg;
      });
    }
  }

  const graphs = document.getElementsByClassName("mermaid");
  if (document.getElementsByClassName("mermaid").length > 0) {
    renderDiagrams(graphs);
  }
</script>