bitvid/views/community-guidelines.html

<!-- views/community-guidelines.html -->
<section class="bv-stack" data-ds="new" aria-labelledby="communityGuidelinesHeading">
  <article class="card p-lg">
    <div class="bv-stack bv-stack--tight">
      <h2
        id="communityGuidelinesHeading"
        class="text-2xl font-semibold text-text-strong"
      >
        Community Guidelines
      </h2>
      <div id="markdown-container" class="markdown-prose">
        <p class="text-muted-strong">Loading content...</p>
      </div>
    </div>
  </article>
</section>

<script>
  (async () => {
    const fallbackChannel = {
      error: () => {},
      warn: () => {},
      info: () => {},
      log: () => {},
    };
    const fallbackLogger = { dev: fallbackChannel, user: fallbackChannel };
    const bitvidLogger =
      (typeof window !== "undefined" && window.bitvidLogger) || fallbackLogger;
    try {
      // Fetch the markdown file (change path if needed)
      const response = await fetch("content/community-guidelines.md");
      if (!response.ok) {
        throw new Error("Failed to load community-guidelines.md");
      }
      const markdownText = await response.text();

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

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

      // Optionally highlight code blocks if highlight.js is available globally
      document.querySelectorAll("pre code").forEach((block) => {
        hljs.highlightBlock(block);
      });
    } catch (err) {
      bitvidLogger.user.error("Error loading community guidelines:", 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>