bitvid/views/getting-started.html

<!-- views/getting-started.html -->
<section class="bv-stack" data-ds="new" aria-labelledby="gettingStartedHeading">
  <article class="card p-lg">
    <div class="bv-stack bv-stack--tight">
      <h2
        id="gettingStartedHeading"
        class="text-2xl font-semibold text-text-strong"
      >
        Getting Started
      </h2>
      <div id="markdown-container" class="markdown-prose">
        <p class="text-muted-strong">Loading content...</p>
      </div>
    </div>
  </article>
</section>

<script>
  (() => {
    // Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
    const noopLogger = {
      log: () => {},
      info: () => {},
      warn: () => {},
      error: () => {},
    };
    const dev = window.bitvidLogger?.dev || noopLogger;
    const user = window.bitvidLogger?.user || noopLogger;

    const loadMarkdown = async () => {
      try {
        // Fetch the Markdown file
        const response = await fetch("content/getting-started.md");
        if (!response.ok) {
          throw new Error("Failed to load getting-started.md");
        }

        const markdownText = await response.text();

        // Convert to HTML with Marked (assuming marked is globally available)
        const html = marked.parse(markdownText);

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

          const highlighter = window.hljs;
          const highlight =
            highlighter && typeof highlighter.highlightElement === "function"
              ? (block) => highlighter.highlightElement(block)
              : highlighter && typeof highlighter.highlightBlock === "function"
                ? (block) => highlighter.highlightBlock(block)
                : null;

          if (highlight) {
            container.querySelectorAll("pre code").forEach((block) => {
              try {
                highlight(block);
              } catch (highlightError) {
                dev.warn("Failed to highlight code block.", highlightError);
              }
            });
          }
        }
      } catch (err) {
        user.error("Error loading 'Getting Started' 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>
          `;
        }
      }
    };

    loadMarkdown();
  })();
</script>