bitvid/views/ipns.html

<!-- views/ipns.html -->
<section class="mb-8">
  <!--
    Added text-text-strong here to ensure we override
    any global white text color that might be inherited.
  -->
  <div class="rounded-lg bg-page p-6 text-text-strong shadow-md">
    <h2 class="mb-4 text-2xl font-bold text-text-strong">IPNS Gateways</h2>

    <!-- 
      "markdown-body" can be any class name; it’s just so markdown.css 
      can style headings, lists, etc. 
    -->
    <div id="markdown-container" class="markdown-body">
      <p class="text-muted-strong">Loading content...</p>
    </div>
  </div>
</section>

<script>
  (async () => {
    try {
      const response = await fetch("content/ipns.md");
      if (!response.ok) {
        throw new Error("Failed to load IPNS markdown file.");
      }
      const markdownText = await response.text();

      // Convert to HTML with Marked (make sure "marked" is loaded globally)
      const html = marked.parse(markdownText);

      // Insert final HTML into #markdown-container
      const container = document.getElementById("markdown-container");
      if (container) {
        container.innerHTML = html;
      }

      // Optional: highlight code blocks (requires "hljs" loaded globally)
      document.querySelectorAll("pre code").forEach((block) => {
        hljs.highlightBlock(block);
      });
    } catch (err) {
      console.error("Error loading IPNS content:", err);
      const container = document.getElementById("markdown-container");
      if (container) {
        container.innerHTML = `
          <p class="text-critical-strong">Error loading content. Please try again later.</p>
        `;
      }
    }
  })();
</script>